The Locked Box

Guide Hub » Object Classes » The Locked Box

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):

RSO Component — Rounderhouse

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; }

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.

SCP Foundation

Secure, Contain, Protect