SCP-983 – The Party Is Today
SCP-983 – The Party Is Today
By: FLOORBOARDSFLOORBOARDS
Published on 02 Jun 2022 22:16
rating: +33+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;
    }
    }
}

rating: +33+x

You are sitting alone at the table, a swirling miasma of yellow, blue and red polka dots pressed against the white sheet wrapped around it. Pretty balloons bob up and down against the currents of a ceiling fan; one stammers, then falls, against the beige wall.

You were sure someone would come to celebrate. Someone must have, or else where would these presents have come from?

You reach across the table, wrapping the small, white-and-red gifts in your arms before dumping them in front of you. Within each one, you hear the chattering of bated expectation1.

Clumsily, you begin to tear away at the wrapping paper:

There are 5 people at this party.

Your dad was not allowed to attend
And her mom was not allowed to attend
So you're stuck with your mom and her boyfriend (he doesn't like you)
And she's stuck with her dad and his girlfriend (she doesn't like her)

Your brother noisily eats the shared cake,
chewing with the front of his mouth,
wide open.

You and her share a birthday
You are almost step-siblings, though this doesn't last
And her dad, and your mom, are insistent

That you two should date.

It's cliche, but it makes your mouth fill with bile
Girls are gross! Girls are gross!
Dimly unaware of the deeper implications at the pit of your stomach

Unable to eat another bite
it's too sweet for me
You look mournfully at the mermaid underneath your age

And lean back, taking in the sun

You don't quite remember what she's doing
But her eyes are unfocused and hazy

She doesn't want to be here just as much as you don't.

What you wish would happen is this:
You get to sleep all day
And be left alone
And never have to live up to the pressures
of being the oldest son.

You know now that you are only a footnote in her life
As she was in yours, but
the memory twists your stomach to this day
and you wonder if she ever thinks back to this birthday
and feels as though it was wasted

You wonder if she's had a good birthday yet
Or if she even didn't like this one
Maybe she had fun
Maybe you were a good enough actor
Maybe it wasn't as bad
Maybe things would've been better if you just played along

But you were a little boy then, and you couldn't save your self if you tried.

There are 4 people at this party.

Your mom and your dad sit on opposite sides of the table
A big bowl of ice cream in front of everyone
Your little brother slurps noisily
and everything, for once, is calm.

You lick the chocolate with strawberry syrup
And look around the room
And the realization hits
That no one's said anything at all.

They did not wake you early or shower you with toys
A birthday wish was not offered,
only a spoonful of sugar
and a smile and nod
is what you have been granted.

The only sound outside the mouth
is buzzing of the flies
and beneath the lowering sun
you realize the walls
are dented and stuffed with grime.

The extent to which you are helpless fully sets in
So you bow your head, to cry out the dread
and hope
when you look up
something will be different.

The scene is dark, the stars are out
A mocking breeze comes through
Your mom and dad are yelling now
Things are back to usual.

There are 3 people at this party.

Your dad set up a funny tent
in the asphalt backyard.

It was white and long
with four spires at each corner
and a drape you could pull back

Inside the tent (you forgot what its really called)
There's a blue carpet with red lobsters
and a blue plastic table.

There's a pizza and a big cake
And all around the table:

Your best friend, who will leave you because his girlfriend asked him to
Your other best friend, who will never stick up for you
Your crush, who will cry today because she thinks BLM will get Hawaii Five-O cancelled
And you, smiling distantly.

Conversation becomes tense, despite your best efforts
And in silence, they stare at their phones
While eating the pizza your dad ordered

But there's a quaintness and kindness
To be beneath a tent on a cool summer night
No bugs are swarming you
and the land is filled with purple light.

Someone finds a funny meme, and you pass around their phone to laugh. Tonight was okay.

There are too many people at this party.

The first thing xe says when xe walks in the door is
I don't like you
I don't want to be here
I'm only here because my mom wants me to go out tonight.

And you laugh to hide the discomfort and hurt
Shrug your shoulders and say
That's fine, I get it

Because who would want to come to your birthday anyway.

The other guests arrive, crowding your house
Eating your food
Taking the little balloons you put up "ironically"
Popping them
And sticking them in your bath tub.

Your best friend, who will leave you because his girlfriend asks him to,
Brings you some brownies in a warm tinfoil wrap
It's the only present you've gotten
Thank you so much
He smiles distantly back at you

You put it on the table, and your guests devour it before you can get a piece.

Xe sits in the back on xer phone the entire time,
Scrolling aimlessly through the same three apps
You two aren't that close
And in fact, you remember
You didn't even invite xer?

You're confounded
But there's barely time to think
When 6 people say they're gonna
Get up
Go across the street
And hang out with their cooler friend for a bit.

Okay.

And you're left with two friends
1 loner in the back
2 freaks who are trying to hide that they're making out
And 2 guys popping balloons and sticking them to the inside of your bath tub.

This is fine this is fine this is fine!

The loner, xe gets up
Takes a look around
And steps out the front door
Walking out without saying goodbye

You meekly wave out of politeness but xe's gone
And this is about to cause a mess of problems.

The others you invited return from their friend's house
Smiling and laughing and skipping because they had so much fun
Then they sit down and look at their phones dumbly and wide-eyed

Your two friends are talking to each other
You sit
Alone
On the couch in front of the TV.

Staring into the darkness of the screen
You wonder why anyone
Would come to your birthday anyway.

Then
A flash of light
Your friend is getting a phone call.

He looks at you with such intense disgust,
You're already formulating apologies.

Xe disassociated all the way home
he begins, as he sets the phone down
and you didn't even do anything about it?

You're taken aback
What? Is xe okay?

Yeah, xe made it home safe
He says curtly
And now you're wondering what you were supposed to do
Or what he's actually upset about

When a debate around the whole thing breaks out.

The only thing any of them agree on is that it's your fault
And you should have noticed, should have helped
While you fruitlessly try to explain that there's nothing you could've done

And finally, finally, your other friend
sticks up for you
and says
That's not how dissociation works
pause
It sounds more like xe was drugged
and then turns to you, expectantly.

It doesn't take long
for everyone
to pack their things.

There is 1 person at this party.

The architecture of your apartment is hostile
Sculpted from the corpse of a suburban home,
it is two stories of narrow
twisting hallways
long winding stairs

and incidental nightingale floors,
which make stealth impossible.

But today there's no need to worry
You are completely alone.

Your father is working
And your brother has disappeared
and there's no one to call over for now.

You are sitting in bed, posing yourself to an invisible camera
A long, black skirt and thigh-high socks clad your body
a loose fitting white shirt and a black cardigan
gifted to you, kindly
by your boyfriend,
who had no use for them anymore.

In occasional moments of bravery
you lift yourself and traverse the cold halls,
staying, briefly,
to stare out the window at the darkening skies.

The houses are so close together,
you can look down and straight into your neighbor's window.
You wish you could see a little bit more of the sky
but nothing can be perfect.

He promised your next birthday would be really really special.
You love him, so you clutch his — your — cardigan
and

The door, just below you, swings open with a thud.

The party is today.

The countdown resumes.

How many years left do you have?
How many months do you have?
How many weeks do you have?
How many days do you have?
How many now, how many?

And was it all just wasted time?

The ticking passage is punctuated by the popping of balloons
The tightening wireframe, the bright red, yellow, blue
It grows sharper, darker, and grows steadily thinner
Filing off the edges as it moves downwards,
like the steady wear of time on bones.

And no matter how much you fight
and kick and yell and

scream

and scream
and scream
and
scream
and scream
and scream
and
scream
and scream
and scream
and
scream
and
scream
and
scream

until my voice grows coarse.

I can't keep pretending these aren't presents from myself. The wrapping paper is discarded, now, covering the floor haphazardly. The party passes like a silent funeral march, and the beige walls become impossibly long.

I wrap a balloon around my wrist, for the novelty of it, and stand, pushing the folding chair noisily across the wooden floor. I wince; that will leave a scratch. But what's done is done, and nothing can be perfect.

I swerve around the polka dot patterned table — the only table — and make my way to the door. Beside it is a ticket booth; brown, and stained, but behind the smeared glass there is no one. I grip the handleset, pressing on the latch and pushing it outward, into...

rating: +33+x
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License