The Locked Box |
By: FLOORBOARDS |
Published on 12 Apr 2022 00:05 |
What this is
A bunch of miscellaneous CSS 'improvements' that I,
Croquembouche, 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.
.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; }
Before you are three grey boxes, bearing identical rusty locks. Atop them, written in red lettering, their titles: "safe," "euclid," and "keter." You can hear the gentle hum of a forgotten experience inside each one; the flow of nighttime traffic, the chirping of morning birds, the patter of footsteps on grass. You fish around in your pocket until you find what you need: three golden keys.
safe
The assortment obscures your vision
A cool breeze whips over the top most pillow
You are nesting, curled into a defensive ball
Wrapped under a cotton cocoon on a black summer night.
A fortress: a stack of decorative pillows
And weighted blankets
With an opening above you, like a hole in the sky
The light of passing trucks shines through your window, illuminating your face as it turns upwards at the world.
There’s a loneliness to the changing of the seasons
A promise that the world and all the people in it will keep spinning and spinning and spinning
A promise that all things will change, and sometimes things will stay the same.
You
have
never
felt
more
safe.
euclid
In the cotton candy morning, you stand in the glimmer of the backyard
(if it can be called a backyard, it's all asphalt)
and watch
through the wires and the hills that are houses
the yellowing, widening mouth in the clouds
into a blue, crystal throat.
You carefully slip off your shoes.
You walk down to where the asphalt ends, just beneath the high white wooden fence,
And you stand there, in the corner of the yard, in the one teeny tiny box that has grass.
Before you is a rusted iron gate, and beneath you are ladybugs and worms—and gnats that bite at you, but to swat them away would be purposeless.
You place your hand on the gate and think about the geography of the suburbs. Boxes within boxes within boxes,
You are in a box behind a box, boxed in from other boxes with greener boxes around them
It’s absurd, really…
You look back to the rolling hills that are houses and wish, for once
This world was non-Euclidean
And it would bend backwards in a way
So you could just
Perfectly
See the clouds part
And show you the sun.
keter
In the waning afternoon,
You are walking beside an intersection
The busiest road in the whole village, right in front of your partner’s house
And as you turn one last time,
There
In the green grass
A brown bird.
His feathers are sleek and shimmering
And his beady black eyes, like glasses, sit above his beak
He is on his side, and legs are broken
And so is his wing.
You scramble: Please don't be dead
Lifting your flannel from your shoulders, you produce
A fortress, with an opening above the avian like a hole in the sky.
Lifting him quickly, his shallow breaths match your own as you take off;
Good, good, he's breathing
And as quickly as his chest moves up and down, you realize
I should not be able to see him breathe
And a helplessness envelopes you as he speaks:
Chirrup,
chirrup,
chirrup
Then
silence.
You bury him there; a shrine of dirt and flowers, and your thoughts wander
There was nothing you could do for him
But it dawns on you at least you were there
And even in his final words to you, in some language
In some way
You knew what he said:
Thank you; I love you
And you know one day you will watch him float in an open sky
And for you, he will unfurl a banner of parchment, before facing away
And swimming through the air, with his powerful wings, into that final wherever.
As the darkness of another summer night closes around you
You proclaim this sparrow's name:
Keter, the crown
The golden brown beauty you held in your hands
That now you will always carry on your back
Always.
You gently set the lid back down. With a sharp twist, the third box is locked again. Satisfied, you turn to the door behind you, and press it open with your left hand. Light fills the nearly forgotten storage unit as you step off into somewhere else.
This trilogy of poems was a simple exercise, but one I feel very brave for partaking.
I have done two things here which I have never done before. For one, I posted on the SCP Foundation website for the first time, after years and years of lurking. For two, I wrote free verse poetry for the first time since middle school.
Free verse is a difficult tightrope to walk upon. There is a certain point where you must ask yourself, can this not be portrayed with prose?, where you must question the delivery and the medium itself. To offset this, I took it upon myself to maintain some lyrical integrity. A vast majority of my work is inspired by the lyricism of Will Toledo, the lead singer of Car Seat Headrest and 1 Trait Danger; in particular, I have attempted to mimic the shifting schemes of Boxing Day, a beautiful emo song which brings back early memories of basement jamming and pretending to like pretentious prog rock (I still love prog rock, but you know what I'm talking about).
In that vein, I wished to draw upon only my memories. I would bare myself and my feelings to the website, allow them to look into my skull for a little while, and then depart safely. This has been immensely satisfying for me; not only has it allowed me to share the small pleasures of my life, but it has allowed others to partake in them.
I don't care about the "upvotes," but I enjoy the knowledge that my writing has touched someone, anyone, somewhere, anywhere. If this has connected with you on any level, I highly encourage you to share your experiences with someone else as well.
Be it through poetry, prose, or a drawing, unlock the boxes in your heart and mind and allow a little bit of your innermost self to shine through. You might be surprised at who your light shines on! ~Shuck & Roxy