Personal Database
Personal Database
Published on 24 Apr 2022 02:49
rating: +23+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: +23+x

Ending the diagnostic scan, you flick absentmindedly through the database. Each slow, flashy page contains a list of names — previous volunteers, transferred out for better, brighter things at bigger, more exciting Sites. As you move to close the terminal, however, something catches your eye: a Neuron Imaging Engine record has been left unlocked.

A silly mistake, you think to yourself, your hand hovering over the file, ready to lock it and send it back into the archive; but something stops you. You haven't experienced memories in a while now, one peek wouldn't hurt, right? You hadn't even looked in this file since the last diagnostic.

You spread your palm, opening the file. You are faced with seven red hyperlinks.

james biggio (#5886)

Asphalt's always been hard to run on
There are little chips of rock
And cracks that you trip over.
The rocks will get stuck in your shoes
And the path will leave your knees bruised.

But if you keep running long enough
Into the dust and fog of a moonless night
Somewhere down the line,
you're homebound.

The world stands still to watch you
Without really ever seeing you
Or knowing what you're up to.

Sometimes they'll prod at you
Or try to move you along to somewhere else
But I just
to lay down
for a while.

If that's alright?

My favorite songs are too slow and sad today
I can't hear them, they're so low
So I plug my earphones into their charger
In a place where you can't find them
And I'll let them charge until I have place
to listen.

I'm trying to make it on my own for now
But if I ever find this place again
I'll be sure to try and stay
and see some of this
crazy, crazy stuff
in action.

Thanks for having me,
I've gotta keep moving
on down the road.

madeline lane (#5435)

Fires on the horizon
Distant sparks of orange light
My dash, I rest my head to cry on
I've been driving through the night

I never wanted to do this
But I never want you to feel I don’t care
But there’s someone after me
And I need to get out of here

Dawn is close by
In my rearview, hug the curves tight
My home town is somewhere, far behind
I can't think of a single reason why—

Goodbye to those November nights
Remember when I threw my knife
And you laughed, and took a picture with your flash on
All the backroad creepy avenues we used to drive on
To get away from cops and my stupid mom
I'm gonna miss the way we smiled

Rest on the side of the road, exhaust pipe dragging
Open the window, let out my smoke
Sun's still shining out there alone
Solar bodies, flaming bones

Tired of running away
I want to find my own
Somewhere past today
I don’t want to be alone

Goodbye to those November nights
Remember when I threw my knife
And you laughed, and took a picture with your flash on
All the backroad creepy avenues we used to drive on
To get away from cops and my stupid mom
I'm gonna miss the way we smiled

There were things I wanted to say
But it doesn't matter anyway
There were things I wanted to do
With you

There were things I wanted to say
But it doesn't matter anyway
There were things I wanted to do
With you

Goodbye to those November nights
Remember when I threw my knife
And you laughed, and took a picture with your flash on
All the backroad creepy avenues we used to drive on
To get away from cops and my stupid mom
I'm gonna miss the way we smiled

"v. a. laferrier"

So you've come to the middle of the road
And all seems lost and foggy
Then here, let the records show
I was never disembodied.

Two paths diverge in a nameless wood
And two more diverge from the left
And two more diverge from the right
And it keeps going like that
in circles.

Hear the flow of marsh water
The gentle cry of the toad
Here, your face does not matter
Just get where you're to go.

On a moonlit night, a chilled mood
In the suburbs, I believe I belong
In my office, nursing my boss
Taking hunks of clay off the walls
And exploring my box's confines.

I am a mayfly in the summertime
Or one traded places with me,
I want to go back to where my life was mine
Before this creature replaced me.

I vaguely remember what I was looking for
On that dark night in the forest
It was the consequence
of something far deeper

I think I saw it when you brought me here
Not you, but your friends
I think it was a building
with four sharp claws
digging into the sidewalks
of a city
where there shouldn't have been.

placeholder mcdoctorate


Lately, things have felt
Like my body is too tight
Like I’ve outgrown my skin
Or like neither were mine in the first place.

My name doesn’t feel like my own
But when I reach out, my mouth in my hands
They will respond: “That’s the way you’ve always been.

But does it have to be
the way I always am?

Can this state of me

My name is a placeholder position
Until someone comes along
Who fits me just right

That name will be distant from me
To make room in my head
Sometimes I forget to respond, when they call me by that name

It’s very late
I could be dreaming
Rather than stressing over this
But instead
I think:

When will I find my own?
Where can I find it?
Can I find it?

I shake my head, jostling that name from my shoulders again
I will find my name
I will carve my own identity
into the margins of this
cocoon built around me

I will find my name

olympia “subject 0”

If you come back I'll still be here
I'm off screen, so I'll whisper
I'll walk across the set after
And sit across from others.

You never gave me much
A name to say or
A body to touch
I've always been an imprint
Of an indentation.

And when they plug my cochlear implant
Into a device to record my mind
I'll try not to cry
'Cause this is the first time
Someone's asked me "why?"

Or, "How are you?"
"What've you been up to?"

Oh, hey
By the way
Would you call me Sophia?

Oh, and
By the way
Can you make sure it doesn't break
I need to keep my head on straight
And keep my heart nailed to my sleeve

I don't want to leave
I don't want to leave
I don't, I don't
want to leave.

randall bannock

I’m disappointed in myself.
I hang, suspended,
behind a glass pane.
And I watch someone younger
and more qualified than me
cradle a stuffed animal to her chest
her eyes half closed.

I was scared to go in there.
My feet barely scrape the ground as
I press my hands against the panes of loss.
I see my reflection in the glass in my eyes
someone younger
more qualified
for these situations.

There’s supposed to be a detachment
But you can’t pry your eyes away
What’s the difference between
The liquid eye and
the glass pane?

Both, foggy with moisture
Both, hold to you, a mirror
A mirror to something you once were
Like the smudged fingerprints of a child on tempered glass
Like the deflating stuffed animal held in her arms.

Something snaps me back to the present moment
And my feet scrape the ground
As I come back down.

I’ll be with you in the morning, you
But for now I have to go
I have to sleep off
whatever this is.

rainer miller (#4051)

It is easier to sleep.

When I am asleep, there is no work to be done
No tasks at hand, no requests to fulfill
Nothing is asked of me,
And I ask for nothing.

I am cared for
In a vast vat of chemicals
And wires and neon glowing clasps
I am held down, and I convene with myself.

There is a pump in the back of my brain
That delivers medicinal sludge directly inside me
It has a
side effect?

Of allowing me to dream.

I dream:
A hidden tomb, from which a spinning disc emerges
On either side are six glowing eyes, which stare into my own
I find myself in a tunnel of feathers
A light ahead
And the silhouette of a woman.

I dream:
A towering castle, which parts the clouds with its spires
Fire licks the windows, illuminating the dark
A parade of flaming witches stumble onto brooms, shrieking with loss
A tuneless whistle echoes from a deep valley
Beside me is a man, who rests his hand on my shoulder proudly.

I dream:
A serpent hovers just out of my view
It is far larger than the ideoform we occupy
But it remains and watches with a kind smile
A coarse hand drags me to safety.

I am an oneironaut
A traverser of fantastic worlds
I am, for an infinitesimally small moment

And when they pull me out of my incubator
When I stumble, then fall, into hyperreality

Someone new will pull me off my knees
Stare hard into my eyes and say:
Rainer. You’ve got a job to do.

I know I'll have new stimuli to collect
To convert into muddied memory
Into swirling dust and feathers
Into dreams.

It is easier to sleep, but to stay awake? That’s more fun.

Your head is hazy, like a poorly cleaned aquarium filled with very small fish. With some effort, you unplug the Engine from the back of your skull, and gently set the nozzle on the table beside you. A warmth envelopes you, once forgotten emotions swimming up and down your veins.

You stand, slightly wobbly from sitting for so long, before taking cautious steps towards the terminal. You count out loud; seven names, seven hyperlinks.

Everything is accounted for. You smile, closing the tab with a wave of your hand.

rating: +23+x

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