Family Matters
Family Matters
Byㅤ TopDownUnderTopDownUnder
Published on 22 Mar 2022 16:33
rating: 0+x

What this is

A bunch of miscellaneous CSS 'improvements' that I, CroquemboucheCroquembouche, use on a bunch of pages because I think it makes them easier to deal with.

The changes this component makes are bunch of really trivial modifications to ease the writing experience and to make documenting components/themes a bit easier (which I do a lot). It doesn't change anything about the page visually for the reader — the changes are for the writer.

I wouldn't expect translations of articles that use this component to also use this component, unless the translator likes it and would want to use it anyway.

This component probably won't conflict with other components or themes, and even if it does, it probably won't matter too much.

Usage

On any wiki:

[[include :scp-wiki:component:croqstyle]]

This component is designed to be used on other components. When using on another component, be sure to add this inside the component's [[iftags]] block, so that users of your component are not forced into also using Croqstyle.

Related components

Other personal styling components (which change just a couple things):

Personal styling themes (which are visual overhauls):

CSS changes

Reasonably-sized footnotes

Stops footnotes from being a million miles wide, so that you can actually read them.

.hovertip { max-width: 400px; }

Monospace edit/code

Makes the edit textbox monospace, and also changes all monospace text to Fira Code, the obviously superior monospace font.

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');
 
:root { --mono-font: "Fira Code", Cousine, monospace; }
#edit-page-textarea, .code pre, .code p, .code, tt, .page-source { font-family: var(--mono-font); }
.code pre * { white-space: pre; }
.code *, .pre * { font-feature-settings: unset; }

Teletype backgrounds

Adds a light grey background to <tt> elements ({{text}}), so code snippets stand out more.

tt {
  background-color: var(--swatch-something-bhl-idk-will-fix-later, #f4f4f4);
  font-size: 85%;
  padding: 0.2em 0.4em;
  margin: 0;
  border-radius: 6px;
}

No more bigfaces

Stops big pictures from appearing when you hover over someone's avatar image, because they're stupid and really annoying and you can just click on them if you want to see the big version.

.avatar-hover { display: none !important; }

Breaky breaky

Any text inside a div with class nobreak has line-wrapping happen between every letter.

.nobreak { word-break: break-all; }

Code colours

Add my terminal's code colours as variables. Maybe I'll change this to a more common terminal theme like Monokai or something at some point, but for now it's just my personal theme, which is derived from Tomorrow Night Eighties.

Also, adding the .terminal class to a fake code block as [[div class="code terminal"]] gives it a sort of pseudo-terminal look with a dark background. Doesn't work with [[code]], because Wikidot inserts a bunch of syntax highlighting that you can't change yourself without a bunch of CSS. Use it for non-[[code]] code snippets only.

Quick tool to colourise a 'standard' Wikidot component usage example with the above vars: link

:root {
  --c-bg: #393939;
  --c-syntax: #e0e0e0;
  --c-comment: #999999;
  --c-error: #f2777a;
  --c-value: #f99157;
  --c-symbol: #ffcc66;
  --c-string: #99cc99;
  --c-operator: #66cccc;
  --c-builtin: #70a7df;
  --c-keyword: #cc99cc;
}
 
.terminal, .terminal > .code {
  color: var(--c-syntax);
  background: var(--c-bg);
  border: 0.4rem solid var(--c-comment);
  border-radius: 1rem;
}

Debug mode

Draw lines around anything inside .debug-mode. The colour of the lines is red but defers to CSS variable --debug-colour.

You can also add div.debug-info.over and div.debug-info.under inside an element to annotate the debug boxes — though you'll need to make sure to leave enough vertical space that the annotation doesn't overlap the thing above or below it.

…like this!

.debug-mode, .debug-mode *, .debug-mode *::before, .debug-mode *::after {
  outline: 1px solid var(--debug-colour, red);
  position: relative;
}
.debug-info {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Fira Code', monospace;
  font-size: 1rem;
  white-space: nowrap;
}
.debug-info.over { top: -2.5rem; }
.debug-info.under { bottom: -2.5rem; }
.debug-info p { margin: 0; }
/* source: http://ah-sandbox.wikidot.com/component:collapsible-sidebar-x1 */
 
#top-bar .open-menu a {
        position: fixed;
        top: 0.5em;
        left: 0.5em;
        z-index: 5;
        font-family: 'Nanum Gothic', san-serif;
        font-size: 30px;
        font-weight: 700;
        width: 30px;
        height: 30px;
        line-height: 0.9em;
        text-align: center;
        border: 0.2em solid #888;
        background-color: #fff;
        border-radius: 3em;
        color: #888;
}
 
@media (min-width: 768px) {
 
    #top-bar .mobile-top-bar {
        display: block;
    }
 
    #top-bar .mobile-top-bar li {
        display: none;
    }
 
    #main-content {
        max-width: 708px;
        margin: 0 auto;
        padding: 0;
        transition: max-width 0.2s ease-in-out;
    }
 
    #side-bar {
        display: block;
        position: fixed;
        top: 0;
        left: -20em;
        width: 17.75em;
        height: 100%;
        margin: 0;
        overflow-y: auto;
        z-index: 10;
        padding: 1em 1em 0 1em;
        background-color: rgba(0,0,0,0.1);
        transition: left 0.4s ease-in-out;
 
        scrollbar-width: thin;
    }
 
    #side-bar:target {
        left: 0;
    }
    #side-bar:focus-within:not(:target) {
        left: 0;
    }
 
    #side-bar:target .close-menu {
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        margin-left: 19.75em;
        opacity: 0;
        z-index: -1;
        visibility: visible;
    }
    #side-bar:not(:target) .close-menu { display: none; }
 
    #top-bar .open-menu a:hover {
        text-decoration: none;
    }
 
    /* FIREFOX-SPECIFIC COMPATIBILITY METHOD */
    @supports (-moz-appearance:none) {
    #top-bar .open-menu a {
        pointer-events: none;
    }
    #side-bar:not(:target) .close-menu {
        display: block;
        pointer-events: none;
        user-select: none;
    }
 
    /* This pseudo-element is meant to overlay the regular sidebar button
    so the fixed positioning (top, left, right and/or bottom) has to match */
 
    #side-bar .close-menu::before {
        content: "";
        position: fixed;
        z-index: 5;
        display: block;
 
        top: 0.5em;
        left: 0.5em;
 
        border: 0.2em solid transparent;
        width: 30px;
        height: 30px;
        font-size: 30px;
        line-height: 0.9em;
 
        pointer-events: all;
        cursor: pointer;
    }
    #side-bar:focus-within {
        left: 0;
    }
    #side-bar:focus-within .close-menu::before {
        pointer-events: none;
    }
    }
}

SCP-XXXX

rating: 0+x

4

ITEM #: SCP-XXXX

LEVEL-

CONTAINMENT CLASS: AIDOS

DISRUPTION CLASS: VLAM


Assigned Site


Site-43

Site Director


Dr. Allan McInnis

Research Head


Dr. Akabi Hayk

Assigned MTF


Epsilon-55

ITEM: SCP-XXXX

LEVEL-

CONTAINMENT
CLASS:
AIDOS

DISRUPTION
CLASS:
VLAM


Assigned Site


Site-43

Site Director


Dr. Allan McInnis

Research Head


Dr. Akabi Hayk

Assigned MTF


Epsilon-55


SPECIAL CONTAINMENT PROCEDURES


All known instances of SCP-XXXX-F are currently being monitored by the Foundation. SCP-XXXX-F instances are to be subtly manipulated to leave their hometown and, if possible, become employed by the Foundation or another willing organisation aware of SCP-XXXX. SCP-XXXX-F instances employed by the Foundation are to be assigned to Foundation Sites with low-risk anomalies and, if at all possible, kept within low-ranking positions. SCP-XXXX-F instances are to be made aware of other SCP-XXXX-F instances employed by the Foundation or other organisations involved with the anomalous..Aidos-Class Objects are at risk of becoming permanently neutralized and are currently receiving aid from the Foundation.


DESCRIPTION


SCP-XXXX refers to a probabilistic anomaly affecting the Clare Family where-in members of the Clare Family (SCP-XXXX-F) are more likely to die in violent manners. The likelihood for an SCP-XXXX-F instance to die increases exponentially as they age. Most SCP-XXXX-F instances die in their late teens or early twenties, with the oldest known SCP-XXXX-F instance having died at 56.

Currently, there are 4 3 known living SCP-XXXX-F instances:

  • Dr. Trent Clare, former head of Area-34's HR Department. Following the downsizing of AWD, Trent transferred to Site-43 as a member of their Hiring and Regulations section.
  • Dr. Cassidy "Commoner" Clare, current field medic for STF Epsilon-55 ("Devil May Care")'s Beta Squad and former medical head for Site-12.
  • Beatrice Clare, a field agent for the Unusual Incidents Unit, FBI.
  • Sarah Clare, a civilian nurse living in Southern France.

DISCOVERY



SCP-XXXX was first made aware to the Foundation following the disappearance of Dr. Trent Clare in August of 2025. During the routine investigation into Dr. Clare's office to discern his whereabouts, the following note was found in his safe:

If you are reading this, then it's likely that I have gone missing, and the Foundation is launching an investigation to find out what happened to me.

It is even more likely that by the time you are reading this, I am already dead.

My family, the Clares, have long been subject to a curse. A curse that stamps out our mark on this world, suffocates our young, and rids us of the ability to grow old. Just as they start their lives, the young of the Clare family die, always in a tragic manner.

I joined the Foundation to find a way around this curse, hoping that something within your vast collection could save my family. But, well… It seems I have failed in this.

If you need proof of the Clare Curse, look into my family's records. I've already collected a couple of examples, but I'm sure you can find even more. You can find them on my computer.

If I really am dead, if I really am gone, find the rest of my family. I haven't heard from any of them in ages - chances are that most of them have already died. Find them. Secure them. Protect them. And please, contain this curse.


ADDENDUM.XXXX.1

FORMER SCP-XXXX-F INSTANCES


The following is an abridged list of known SCP-XXXX-F instances. The original list was gathered by Dr. Trent Clare and expanded upon by the Department of Genealogy. For access to the full list, please contact Dr. Akabi Hayk

Name Occupation Description Date of Death
Castilo Clare Doctor A travelling doctor in the American West, Castilo was renowned for his claim to be able to cure any ailment within a day. Records indicate that Castilo was a former ASCI.American Secure Containment Initiative. member who had deserted. He died in a shoot-out with an outlaw in Riddle, Wyoming. 1889
Sebastian Clare Detective A detective working for the Chicago Police Department during Prohibition, Sebastian continuously made threats to launch investigations into a local bootlegging organisation. After having gone missing for several months, the corpse of Sebastian was found crushed underneath a rock in the Chicago River. 1926
Marissa Clare N/A The sister of Sebastian Clare, Marissa was pregnant when Sebastian died. She died during childbirth. 1927
Sebastian Clare II N/A The son of Marissa Clare, named after Sebastian Clare. He was stillborn. 1927
Clark Clare Soldier An aviator for the Allied Forces during World War II, Clark crashed while over the Rhine. Investigation of the incident indicates that Clark was shot down by an allied plane. 1942
Patricia Clare Teacher A high school chemistry teacher in Illinois, Patricia died in a freak accident during a lab in one of her classes. The subsequent investigation by local authorities placed suspicions on an unnamed student, but no follow-ups were made. 1967
Chris Clare Mayor The mayor of a small town in North Carolina, Chris was at the centre of a conspiracy plotting to assassinate him and put a political rival into power. Despite the conspirators being arrested before the assassination could be carried out, Chris died under mysterious circumstances while alone in his office. 1994
Cassandra and Jasmine Clare SCP Foundation Field Agents Sister and sister-in-law of Dr. Trent Clare, as well as the mothers of Dr. Cassidy Clare and Sarah Clare, the Clares were special operatives for MTF Lambda-5 ("White Rabbits"). During an expedition into an anomalous building, a piece of faulty equipment resulted in their deaths. An investigation indicated that the equipment was tampered with, but no culprits were found. 2005

3


ADDENDUM.XXXX.2

DR. CASSIDY CLARE


On January 10th, 2026, the corpse of Dr. Trent Clare was discovered when it washed ashore in Ko Samui, Thailand. Examination of the body revealed:

  • Deep lacerations across his arms, legs, and neck.
  • The complete removal of all keratin from the body (hair, nails, organ lining, etc.).
  • The lack of an intestinal system.
  • Markings made across the chest and back with unknown occult significance.

At this point, the decision was made to contact Dr. Cassidy Clare and inform him of SCP-XXXX.

SCP-XXXX Interview 1

Interviewed: Dr. Cassidy Clare
Interviewer: Dr. Akabi Hayk


[BEGIN LOG]

Dr. Akabi Hayk: How are you today, Cass?

Dr. Cassidy Clare: Good? Look, if this is about my behaviour on that last operation, I can assure you tha-

Dr. Hayk: No, that's not what I'm here for. Your squad lead has already cleared that with the higher-ups.

Dr. Clare: [Sigh] Thank god…

Dr. Hayk: It's about your uncle.

[Silence]

Dr. Clare: Excuse me?

Dr. Hayk: Your uncle, Cass, Trent Clar-

Dr. Clare: Yeah, yeah, I know that fleabags name. Haven't heard from him in ages. What does he have to do with anything?

Dr. Hayk: He's dead. Went missing 5 months ago. Found his body in Thailand a couple of days ago. He was pretty heavily disfigured, we're still not sure who did it.

Dr. Clare: Oh god, I…

Dr. Hayk: It's alright if you need to take some time to take this all in, Cass. I can offer you some water or a snack if you'd like.

Dr. Clare: Never even knew he went missing… Figured he finally got the hint and stopped trying to contact me… I'll take that bottle of water, Akabi.

[Dr. Hayk hands Dr. Clare a bottle of water, who takes a small sip of it.]

Dr. Clare: Why are you telling me this, Akabi?

Dr. Hayk: Pardon?

Dr. Clare: Doesn't the Foundation usually just send an email or letter telling you your family member died and offering you their condolences? I remember them doing that when my parents. Why did they send you?

Dr. Hayk: [Sigh] When your uncle went missing, we looked through his office at -43 for any evidence he might've left behind that could help us find him. We didn't find anything that pointed to his location, but we did find this note.

[Dr. Hayk hands Dr. Clare the note from the DISCOVERY section.]

Dr. Hayk: We were a bit sceptical at first, but we looked into your family record and well…

[Dr. Hayk hands Dr. Clare a print-out of the table from ADDENDUM.XXXX.1]]

Dr. Hayk: It kinda seems to add up. A lot of your family members died under mysterious, sometimes anomalous circumstances.

Dr. Clare: You're telling me… my uncle, my grandparents, my parents, all died cause of some… some family curse? Why are you telling me this?

Dr. Hayk: Well, you're in your 30s now, right? Chances are the curse is gonna hit you and your sister sooner rather than later. How old is your sister, anyway?

Dr. Clare: 31, same as me. We're, uh, we're twins.

Dr. Hayk: We also found a cousin of yours, Beatrice. Couple of years younger than the two of you, she's with the UIU right now. The Foundation wants to protect the three of you and, if possible, find a way to counteract the curse. They've already opened up an SCP slot for it, SCP-XXXX.

Dr. Clare: [Laugh] Of course they have… What do you guys want me to do?

Dr. Hayk: For now? We're gonna transfer you to Site-43. See if we can't get your sister and cousin to come into our custody. Beatrice is currently conducting an investigation in Dallas and your sister is-

Dr. Clare: Hyères, France. I know that. Bought her the ticket myself when she decided to move there.

Dr. Hayk: The Foundation also wanted you to be there when we went to get Beatrice and Sarah. If that'd be alright with you.

[Dr. Clare nods.]

Dr. Hayk: Alright, well that's that. I'll go and finalize the transfer request to get you at -43. I'd recommend you say your goodbyes and get your bags packed.

[END LOG]


ADDENDUM.XXXX.3

BEATRICE CLARE


Following the transfer of Dr. Clare to Site-43, communications were established with UIU to request the transfer of Agent Clare. Following multiple conversations between Dr. Cole Thereven and UIU Liasion Douglas Grant, the UIU agreed, with the condition that Agent Clare is returned to UIU employment as soon as possible.

At the time of this agreement being made, Agent Clare was in Dallas, Texas, investigating a para-criminal organisation known as "Los Ratas".GoI-2722. A para-crime syndicate operating from Mexico City to most of the southern USA. Los Ratas mostly deals in the production and selling of paradrugs, illegal paraweaponry and other illicit anomalies.. Dr. Clare was deployed to Dallas to ensure that Agent Clare would come to Site-43. To ensure the safety of Dr. Clare, certain members from Epsilon-55's Beta Squad were deployed as well.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License