Charybdis
Charybdis
By: CanOfSoupCanOfSoup
Published on 22 Mar 2021 15:25
rating: +24+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;
        pointer-events: auto;
}
 
@media not all and (max-width: 767px) {
 
    #top-bar .mobile-top-bar {
        display: block;
        pointer-events: none;
    }
 
    #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: -18rem;
        width: 15.25rem;
        height: 100%;
        margin: 0;
        overflow-x: hidden;
        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;
    }
    }
}

NassiNemo 5/23/2021 (Mon) 10:42:07 #20000


I used to be a fisherman.

It wasn't the biggest money-making profession in the world, but I enjoyed it, and it gave me a steady supply of food and a nice warm shack for when the rain got too bad. This was years ago, in some backwater town up in the mountains.

First, let me tell you about the rain. Once a month, on the fifteenth, there'd be a massive rainstorm, causing the nearby rivers and the lake to flood. If you went fishing during one… your body wouldn't be recovered from the lake for months.

So, after a while, the residents way back cottoned on, and for every newcomer or fisherman, they'd say, "Don't go to the lake when it's rain time." Bit silly, yeah, but once you've seen the bodies and their mouths hanging wide open and their eyes, glazed and lifeless, and shirts and pants in tatters, you'd stop laughing.

It was a few months after I'd moved there when I did something incredibly stupid. Now, by this time I had followed the lake rule, but back then our town got hit with a water-infecting plague, which meant that a lot of fish died. Although this didn't really affect humans- besides a slight headache -the fish were dropping like crazy.

It was the fifteenth of October, and I hadn't caught any fish. I was living on granola bars and bottled water; I couldn't pay the water bill. I had taken to going out fishing every day just to scrounge up some more fish, but there wasn't really any luck.

So that day, I came to the lake, sat in my chair, and threw the line into the water.

After three hours, no fish had taken the bait, so I decided that I would stay there more. Few more hours before night falls, which should be ample time for me to catch some fish and be back before dark, right?

But I was tired, so I must've dozed off. I only woke up because the raindrops were coming in fast and hard, splattering my face and glasses. When I looked over the pier, there was this dark shape in the water. It was rising out of some kind of whirlpool, and it had this massive neck. Suddenly, the head snapped towards me.

I don't remember leaving, but sometimes my arms feel cold and icy- as though they were submerged in water, and sometimes, if I touch my hair, it's soaking wet. I have the habit of looking over my shoulder wherever I go, as though that thing would follow me.

For the first few months after that, the same creature would hover in my dreams, and each time I woke up I felt as though something was watching me. But as I moved farther and farther away- all the way to Nevada -the dreams subsided.

After I saw it, I told everyone what had happened. Everyone said it was a good story, but bullshit. So, I decided to move into Las Vegas for a few years- far away from any lakes -and I've been living in the suburbs ever since.

But, a few years later I became very curious about the lake, so I asked around. I found a guy who survived on July 15th, twenty years ago, when the floods first started and no one knew what the hell was going on.

I actually recorded the conversation, because I wanted to be a horror writer back then. Never became one, but I have it saved on my computer. I'll type the transcript below; we say our names a lot, and I need to omit that.

Me: Alright- recording… has started. Now- what were you doing on July 15th?

Survivor: I was hiking on the Tulugo trail- in the mountains.

Me: What time did you reach the lake?

Survivor: Musta been around four in the afternoon- I took a shortcut through the woods because I noticed the clouds were getting darker. I- I didn't know about the lake.

Me: So- what happened before the rain started?

Survivor: I sat down on the docks for a break- I'd been hiking for four hours by then. But when it started raining- you know, I like the rain and I didn't realize about the flooding -and it was very hot- so I continued sitting there and… I…

Me: What did you see?

Survivor: T-There was a thing in the lake, and I- it told- it told me things, things I've never heard- and I felt the urge to go in there, but- I- I don't know- please- it'll come after me- please-

The reason the recording ends is because he started gibbering and crying- it wasn't very pretty. Later, though, he managed to tell me- unfortunately I didn't have the recording equipment on, that the thing was constantly in his dreams, that same dark shape.

And four years later- after I'd moved to Vegas, he called me in the middle of the night, screaming his head off. When I asked him what was wrong, he sent me this photo. And the only thing he said after that was, "I went back."

Does anyone know what this is? Because every time I look at it, my basement begins to flood.
lake.jpg
rating: +24+x
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License