Something Beautiful

He knew, without a shadow of a doubt, that he was redeemed.

Something Beautiful
Author: TopDownUnderTopDownUnder
Published on 27 Mar 2021 19:01 
/* 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) {
 
    .mobile-top-bar {
        display: block;
    }
 
    .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!important;
        position: fixed;
        top: 0;
        left: -19em;
        width: 17em;
        height: 100%;
        margin: 0;
        overflow-y: auto;
        z-index: 10;
        padding: 0.3em 0.675em;
        background-color: rgba(0,0,0,0.1);
        transition: left 0.5s ease-in-out;
    }
 
    #side-bar:target {
        display: block;
        left: 0;
        width: 17em;
        margin: 0;
        z-index: 10;
    }
 
    #side-bar:target .close-menu {
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: -1;
    }
 
    #top-bar .open-menu a:hover {
        text-decoration: none;
    }
 
    .close-menu {
        margin-left: 19em;
        opacity: 0;
    }
}
rating: +31+–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; }
▷ Show Code ◁
rating: +31+–x

Info

More by this author!

A nice little story about Lily's Proposal, and three events relating to it.

rating: +31+–x

The emaciated man crawled out of his hole in the ground. For the first time in what could've been aeons, the man felt the Sun's heat on his pallid skin. Underneath his boney fingers, he felt the soft pasture caressing his hands. Amongst the grass, the man sensed something else.

The man grabbed the something, pulling it out of the ground. He felt it, smelled it, licked it, curious to what it may be. His chapped lips slowly formed a smile as he realized what he held.

It was a Lily.

Though his eyes had stopped working long ago, he knew what was around him. A field of flowers, covering every inch of dirt, as far as the eye could see. His lungs moved for the first time in years as he let out a weak laugh, tears moisturizing his dry and dull lips. He knew what this meant.

He knew, without a shadow of a doubt, that he was redeemed.

As the white birds flew overhead, a group of scientists nervously moved about. They entered the Keter Wing, holding on tightly to their keycards. They had been given orders, straight from the Overseer's desk. They weren't sure if they wanted to carry them out, but orders are orders.

They reached the containment chamber, and filed into the observation room. Some of them began to pray, while others just nervously smiled. Three of them pulled out their keys, inserted them into the panel, and turned them.

As the acid began to drain, some researchers began to laugh, and others broke out into tears. Once the last of the acid flowed out of the room, the men turned their keys a second time. The men watched on as the chamber's doors, connecting it to the outside world, began to let light in. 682 slowly got up from the floor, awakened by the sun's light. It made its ways through the opening, out into the wider world. Some of the researchers left the observation room and stepped into 682's old cell, curious to see what the old reptile would do.

The reptilian looked around for a bit, staring at the beautiful birds overhead. For the moment, the researchers held their breath, fearful this monster would jump up and snatch the doves out of the sky. Instead, it looked back down, before plopping down on a bed of flowers and letting out a heavy sigh. It seemed…

Satisfied.

In a deathless world…

It was a Saturday evening. It wasn't any special day, or a special year for that matter. For many, it was just another year, another decade in an endless pandemonium.

That - The boredom with no end in sight, the monotony of a life without death - all of that, changed when the flowers blossomed. Anderson's robobodies offered some escape from it all, but this? To know, in just 24 hours, all of the pain would be over? It was a blessing from up above.

The Foundation looked deep into their records, having long discarded CODENAME: Lily as a possibility. The doves that they had prepared for it were far too old, their muscles having atrophied a hundred years ago. Parties ran rampant throughout the organisation's facilities, its staff beyond ecstatic for their demise.

The same could be said for the rest of the world. Festivals were held throughout the world, and many prepared for the end. They got their personal items ready, dressed up in their favourite suits and dresses and what-have-you. News outlets ran national betting contests, with millions of participants speculating on how they would go out. For the first time in centuries, the world was happy, and they definitely showed it.

The world went out not with a whimper, but with a bang.

‡ Licensing / Citation
_licenseboxend-of-deathtale
page revision: 8, last edited: 26 May 2021 20:15
Edit Rate (+31) Tags Discuss (2) History Files Print Site tools + Options
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License