Rough Waters
rating: +25+x
Rough Waters
Byㅤ ToasteeToastee
Published on 19 Jun 2022 20:36
rating: +25+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; }
/* 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) {
 
    #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;
    }
 
    /* FIREFOX-SPECIFIC COMPATIBILITY METHOD */
    @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;
    }
    }
}

A biting, bone-chilling sea breeze rolled into Cape Sealicast, a small fishing town on the coast of Xerophylla. Crimson moonlight glistened upon the waves, illuminating the decaying town. The familiar smell of rot and decay hung stagnant and pervasive in the air. Moldy wood creaked and groaned as the freezing wind blew through the streets, discarded trash and tools strewn about behind the rotten walls. A bitter, salty taste could be felt in the mouths of the poor souls who stalked through the town.

A wet, cacophonous thudding against the decaying plywood echoed through the town as its residents shambled and shuffled towards the town square. The mayor, and the town's Holy Captian, was waiting to begin his sermon. He surveyed the congregation as the villagers settled into the square. Stepping forward on his platform, the Crimson Moon high above him, he cleared his throat, lifted his scale covered arms and began to preach.

The mayor spoke in a deep gurgle "Good citizens of Sealicast, I bear good news! Our great project is nearing completion! Soon we will set out to raise our Lord and spread his glorious kingdom onto the land!" A cacophony of cheers erupted from the crowd, inhuman noises that bubbled like the sounds of drowning. The cheers were so deafening that they could be heard for a great many furlongs. The mayor continued, "Tomorrow we set sail to reach new heights, the great Deliverance shall be the vessel of our Lord!"

Even more horrifying, haunting shrieks erupted from the crowd. Some citizens even began to chant a prayer to their foul god, Uh'eog ot Mgepog, Lord of the Deep. The Crimson Moon hung high in the night sky as the rapturous celebration continued.


Weeks later the final preparations for the holy journey upon the Deliverance had completed. The ship itself was the greatest thing to ever float upon the high seas. Five hundred meters in length and more than a hundred meters high, the ship was held together by magics given to the citizens of Sealicast through communion with Uh'eog ot Mgepog. The queer energy surging through it's mighty frame glowed a bright blue, powerful enough to challenge even the Crimson Moon above. It was their masterpiece, a divine grace that would deliver the believers unto new heights, and dispense their vengeance upon the dry land. The wood was sturdy and would not fail the foul crew in their time of need.

Carved into the woodwork were runes and tentacle designs, the magics that held together the ship. Nigh-invincible, no stone or metal would pierce the sacred hull. Writhing and contorting, the curious designs seemed to have a mind of their own. The bow of the vessel was adorned with a living partial visage of Uh'eog ot Mgepog, in honor of the god. The decoration was the only part of the fell god that it would reveal to its followers, a writhing, thrashing mass of tentacles surrounding a large octopus-like eye. The eye of the decorations glowed with the same uncanny energy as the holy vessel. It too moved, scanning the depths for the Kingdom of the Deep.

The masts were so gargantuan it looked as if they might pierce the dark heavens above, and each sail was so vast that it could completely blanket houses. There were also massive oars that would need no inhuman crew, as each was a living tentacle. Created by Uh'eog ot Mgepog and given life by his magics, so if the wind ever failed the Deliverance then the oars would spring to life and pull the great ship upon the sea. The main deck of the ship was engulfed by tremendous harpoons, each larger and sturdier than even the mightiest oaks. It was these that would raise the great Uh'eog ot Mgepog, they would pierce his godly skin and hoist him upon the Deliverance!


The inhuman. fishlike, citizens of Cape Sealicast, with their scale covered skin, flippered feet, and gilled throats, progressed to the coast of the cape. With the final preparations completed, they would board the Deliverance and begin their holy Pilgrimage to their Lord's kingdom. Many things had to be loaded upon the ship. Food, weapons made to combat the horrors of the sea, and a great many other things were brought onboard by the eager crew. Nearly half of the town manned the accursed vessel. Those who were left ashore to wait were disappointed, but they were quickly assured that they, too, would see the divine rising of their lord.

Hours and hours passed as crew and provisions loaded upon the ship. After preparations were complete, the ship set sail for the Kingdom of the Deep, the land of the great Uh'eog ot Mgepog. The mayor, who was now captain of the Deliverance, guided his crew through the harsh waters. After weeks of travel they finally reached their destination and plunged the great harpoons into the water. Uh'eog ot Mgepog was raised onto the boat, ready to spread his Kingdom onto the land!


What horror had been wrought! Cape Sealicast now stood as a blasted heap of stone, battered by raging waves. The few survivors lay on the ground, minds destroyed by the true visage of their lord. Even the mighty Deliverance was ruined, now no more than a few stray planks.

The raising of Uh'eog ot Mgepog only brought madness and destruction, not the greater heights the worshippers had hoped for! An incomprehensible mass of tentacles and anguished faces of deep sea creatures rampaged across the land. Insanity was brought upon those who were unfortunate enough to see the horror of the deep, and only destruction was left in its wake!

His horrible Kingdom did spread across the land. With great caverns, deep sea flora, and terrible magma geysers sprouting everywhere that was unfortunate to feel his tremendous power! Water spewed from the caverns, and monstrosities of the deep were carried by the waves. Terrible monstrous angler fish and colossal octopi swam upon the land! Great floods carried these loathsome beasts, leaving even more significant destruction in their wake. Whole towns were swept away by the floods, the survivors feasted upon by beasts, and the Lord Uh'eog ot Mgepog crashed through all signs of humanity as if he were a great typhoon.

Truly unstoppable, the rampage continued for months without end, an extensive path was left through the ravaged lands. Eventually though, Uh'eog ot Mgepog came to another sea, on the opposite coast of Xerophylla, and decided to sink back down to the depths. There he would gladly slumber once more, and prepare to corrupt yet another foolish fishing town.

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