By: basirskipreaderbasirskipreader
Published on 23 Mar 2021 00:01
rating: +40+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.


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(';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: */
#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;
    @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;

rating: +40+x

Item #: SCP-5453

Object Class: Euclid

Special Containment Procedures: All instances of SCP-5453 are to be stored in a standard air-gapped Foundation server. Physical copies of SCP-5453 are to be stored beside the server in a standard Foundation locker. In addition, ingredients to make an SCP-5453-1 instance, including an expert in hydromancy, are to be stored on-site.

Description: SCP-5453 is an infohazardous recipe for sinigang na hipon. Any online medium that mentions the process of making SCP-5453 turns into a format resembling a recipe blog; however, physical copies of SCP-5453 are instead turned into a format resembling a recipe book. A previous copy of SCP-5453 when its infohazardous nature was not known can be found in Site-901. When a subject follows the instructions given by SCP-5453, they create an instance of SCP-5453, hereby referred to as SCP-5453-1.

SCP-5453-1 is a bowl of shrimp sinigang. Subjects that consumes SCP-5453-1 expire instantaneously. Expiration from SCP-5453 resemble anaphylaxis due to shrimp allergies, however, reports from test subjects of SCP-5453-1 report the expiration as being peaceful. Although the instructions given by SCP-5453 makes an SCP-5453-1 instance, when any part of SCP-5453 is not followed, a non-anomalous bowl of shrimp sinigang manifests.

Interview and Documents Pertaining to SCP-5453: Below are various interviews the Foundation conducted that references SCP-5453.

Interviewed: Josie Bautista
Interviewer: Researcher Danielle

Prologue Interview was done under the guise of a documentary about the Marcos regime.

[Irrelevant information removed for brevity]

Danielle: Can you tell me more about your daughter?

Bautista: She was a cute little girl. Inherited most of her attitude from her mother, with my hard-headedness and motivation.

[Bautista points to a picture of him and his daughter posing in front of the Univeristy of the Philippines Oblation Statue]

Bautista: There she is, posing with me after she graduated valedictorian in her batch!

Danielle: She must've been a very bright girl.

Bautista: Every time she would come home, her eyes would shine as she told me the various things they did with their organization, like feed the poor and house the homeless. Until she didn't come home one day.

Bautista: The next day, I see her and her friends on TV being arrested and sent to Bilibid1 for being Communists! Communists! Would you believe that my baby girl, the person who would take care of stray animals and feed them till they grew up, a Communist?!

Bautista: I packed my bags and went out to Manila, hopefully to return to Baguio with her beside me.

Bautista: When I arrived in Bilibid, I asked to visit my daughter, and when I took a look at her…

[Bautista shows a piece of parchment to Danielle]

Bautista: Someone once said to me that I should only use this recipe to stop someone who's suffering in pain. That recipe ensured that all people died a peaceful death. I had to do what I had to do.

Danielle: What was the recipe you made?

Bautista: Ah, it was her favorite dish. Add a tamarind, a pinch of saltwater, and some shrimp, and it's a dish she will eat after swimming in the sea. You know, I got that from my mother. She taught me what I needed to make the recipe. Never have I thought I would use this recipe.

Danielle: Condolences, Ms. Bautista. I know the feeling of watching someone waste away without guidance on what to do.

[Irrelevant information removed for brevity]

Epilogue: As Bautista has shown considerable knowledge regarding the existence of SCP-5453, a request to accompany her during her daily life has been filed. The usage of amnestics has been shown to prevent these kinds of cases to occuring, however, due to Bautista's knowledge regarding SCP-5453, it may be a waste of resources and documentation to erase the knowledge Bautista has about the anomaly — Researcher Danielle.

Interviewed: Josie Bautista
Interviewer: Researcher Danielle

Prologue: To establish better relations with Bautista along with gathering more information about the anomaly, Danielle accompanied Bautista to Manila Bay.

Bautista: You know, my daughter used to love halo-halo. She would always pester me to buy some whenever we went out to go shopping.

[Danielle mixes her halo-halo]

Danielle: She sounds like she was a wonderful girl, indeed.

Danielle: Speaking of foods, do you know anything about that sinigang recipe you used?

Bautista: Ah, that. Truth be told, I didn't make that recipe, it was only taught to me by someone I knew closely. She says that recipe has been passed down from her mother, and her mother before that, and her mother before that, and on and on and on.

Bautista: This recipe of mine is actually a variation of what the Marcoses used.

Danielle: I can't believe that the Marcoses used… these kinds of magic.

Bautista: It was effective at disposing of a political dissident. Just feed someone the sinigang, wait a few minutes, then they drop dead. I should know, Marcos himself hired me and a group of my close relatives to create another version of that.

Danielle: What did they do to your recipe?

Bautista: You could say they "improved" it. Made it worked faster. Doesn't kill you, though. Turns you into a puddle of meat they can extract information out of. You would be surprised how much prisoners the Marcoses used this technique to torture their opponents. Reverse the effects, amnesticize them so they forget about the torture but remember the trauma, repeat until they are willing to break.

Danielle: That's so… horrible.

Bautista: And if you weren't willing to break? Then they'll just beat you up and throw you into a barrel. They called it the "Trajano method".

Danielle: And all of these was done inside Bilibid?

Bautista: Did you know that most of the Marcos' regime's victims' bodies were never found? The ones that were were located mostly in Bilibid.

[Bautista chuckles]

Bautista: And to think it would be used against my daughter.

Danielle: My condolences, Ms. Josie.

Bautista: Thank the Lord that Corazaon decided that it was too cruel and burned every copy of Marcos' version of the recipe.

Bautista: Now I hold the only physical copy of the recipe, and I hope it dies with me.

Bautista: Would you like to walk around the malls with me? I can treat you.

Danielle: Sure, with pleasure, Josie.

[Extreaneuous information removed for brevity]

[Danielle and Bautista are in a Ferris wheel, eating taho]

Bautista: You remind me of my daughter. The way she talks, the way she walks, sometimes, I pretend you were there all along.

Danielle: That's nice to hear from you.

Bautista: Haha, you even have her attitude!

Bautista: Sometimes, I wonder what would've happened if she wasn't caught. Sometimes, I stay up at night, thinking what would've happen if I didn't accept Marcos' offer to create him that recipe. Maybe those countless nights spent working on the perfect recipe to fulfill his requirements, being the lead researcher on a project that was designed to torture innocent lives, maybe it would've been spent creating something… better.

Danielle: Sometimes it really just feels like the world is out to destroy what you have built, huh.

Bautista: In that case, I hope the world does try to destroy what I've done. I don't know how will I forgive myself for what I have done.

Danielle: Self-compassion takes a long time to achieve, Josie. It may take you 10 days, it may take you 10 months, it may take you 10 years, however, as long as you regret what you have done, I believe that anyone can be at peace with themselves.

Bautista: Ha, when I ever forgive myself and go straight to Heaven, I hope my daughter will also forgive me for what I have done to her.

Danielle: I'm sure she will, Josie. I'm sure she will.

Bautista: Just call me Tita.

[Danielle hugs Bautista]

Danielle: Okay po Tita.

[Extreneuous information removed for brevity]

[Danielle and Bautista sit at a bench, currently watching the sun set over the Manila Bay.]

Bautista: Thank you for accompanying me, Danielle. I really appreciate it.

Danielle: No, thank you, Tita. You've made my day a little less depressing.

Bautista: My conversation with you has made me realized a lot of things about myself.

Danielle: Me too, me too.

Bautista: Would you mind visiting me every once in a while?

Danielle: I wouldn't mind.

Interviewed: Josie Bautista
Interviewer: Researcher Danielle

Prologue: As Bautista was recently admitted to the hospital for arsenic poisoning, Researcher Danielle has decided to give Bautista her well-wishes in the Chinese General Hospital.

Bautista: Y-you came.

Danielle: Why won't I come to my Tita?

Bautista: Haha, now you sound like her too.

Danielle: What's the diagnosis?

Bautista: …Doctor says I have a few days to live.

Danielle: Don't worry, Tita. I will make sure you will get the best medicine here in the Philippines.

[Bautista raises her hand]

Bautista: No need to. I've lived long enough.

Danielle: But… you've treated me so kindly! It's natural that I repay you!

Bautista: There's no need to repay me. After all, you've been with me in my twilight years, and that is enough for me.

Danielle: If there's anything that I can do, please tell me.

Bautista: I actually do have two requests.

[Bautista hands over a piece of parchment to Danielle]

Bautista: Please find a way I can die peacefully in my sleep.

Danielle: I will do so, Tita.

Bautista: Please burn the parchment so no one will relearn how to do this. No one should deserve to learn this, after what I have done.

Danielle: I promise, Tita.

[Bautista hugs Danielle]

Bautista: Thank you, for letting me fulfill my wish.

Danielle: I hope I've been a good daughter to you.

Bautista: Would you sit by me as I eat my last meal?

Danielle: I will.

Epilogue: Per Bautista's wishes, Researcher Danielle prepared and fed him SCP-5453-1. In addition, she properly disposed of SCP-5453-1 per Foundation policy. Bautista's copy of SCP-5453 has been sent to Site-901 for safekeeping.

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