Space Rock (Found Poem)

That lizard is one of the most beautiful women I've ever seen.

Space Rock (Found Poem)
By: FLOORBOARDSFLOORBOARDS
Published on 03 Oct 2022 01:24

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

rating: +33+x

Lost star, far away
Almost remembered, our secret place
Fragments of a falling heart
A lost star in the porous dark

Lost star, far from home
Lost star, she roams the stone
Lost star, on its own,
Lost star—
Lost star—

Scorned, afraid, a corner wan
Struck and divvied upon
The cusp of something gone
Lost star, the only one

Lost star, nearing grey
Lost star, you are falling
Lost star, above the highway
Lost star, are you calling?

Higher worlds, higher borne
Brighter nights and colors worn
Lost star, shining into day
Once forgotten, but here to stay

But

When it landed
It left a crater
The size of Maat Mons

He watched it
Thrash about and cry
Then remembered old psalms

"Star Whale,"
He said softly,
Approaching its body,
"Be still, be calmed,"

And he took it in his arms
From the crater
And to the diner
To be embalmed

Greasy

Greasy


Greasy

It mauls the meat, tearing bread and lettuce with its canines; tomato juice drips from the sides of its hands and onto the wrapping paper.

"Easy, easy, easy there," says its new friend in amusement, sliding down into the seat across from it. He dabs the salt from the wounds in the corners of his mouth, an eyebrow raised as if in question. It croons animalistically in response.

Gulping down the last of its meal, it slaps the napkin between its hands until it considers itself clean — the two sit in silence, and their eyes meet.

It speaks:

Two figures stand apart
Twins, or lovers, or whatever—
They are made of the same stardust

She chooses an hour they were not so far
But their time together is severed
It's something like watching comets combust

If moments could be separated physically
And you could walk into the past at any point
Would you sneak into the back rooms of your own eternity
And find yourself, or anyone you wanted,
Unspoilt?

Different beings occupy the same sphere
One is made of dust, the other is light
The columns of creation spread forward

"I want a new world," said the light, and it departed there
"But I'll miss your warmth," said the dust, facing towards night
The volume increases upward

If the maze of time unraveled before you
And the centerfold, laid bare, could be climbed within
Would you enter there too?
Or would you stay alone, above, without?

Their lives, then
Could be inferred as this:
A series of long divisions,
When there was Her, and there was It

It stood atop a golden chair
It wore chains and smelt of burnt hair
As harmless as it was,
It looked far larger in the waxing sun

She sat upon a cold and lonely pyre
Her eyes were tired and so was her smile
As late as it was to save face,
She looked forward to the coming days

In the mirror, they look to each other
And shake hands, then exchange places
To her chagrin, but to its druther
Between twin scars, it takes spades to see aces

Their lives could be inferred as this:
Two lost stars
Found in dreams, lost in mist














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