Lt Flops' Author Page

Lt Flops' Author Page
Byㅤ Lt Flops
Published on 20 Mar 2018 20:37

What this is

A bunch of miscellaneous CSS 'improvements' that I, Croquembouche, 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):

RSO Component — Rounderhouse

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

Lt. Flops’ Author Page

Authors’ Pages » Lt Flops’ Author Page

Supporting a Penwoman's Craft

My Newest Pages!

[TALE] ☀️🌙 INNER-SPACE
[SCP] 🐊🦑 SCP-7010: We Will Endure — Collab w/ Stormbreath, for the SCP-7000 Contest
[SCP CO-TRANSLATION] 🌐 SCP-101-FR: Y@u aɹe hëre — Written by DrGemini, Translated w/ macro_au_micro
[SCP] 🏥 SCP-6481: Nipple Centipedes — Collab w/ Ellie3
[SCP] 🥛 SCP-6705: The Bicameral Milk — Collab w/ LordStonefish

Socials

OPENING ENTITY OF INTEREST FILE #9731…

WELCOME

This file contains an activated GAY FROGS-Class DANK ANTIMEME. You are instructed to run. In the event that you're lazy, you are to proceed at a velocity directly proportional to your daily cholesterol intake.

… What's that? Fine, you can catch up on Grey's Anatomy first. But make sure you make your way right back here after, mmkay?

—Um, probably someone with, like, a super high clearance level. Or someone's Mary Sue OC.

LIMP FIREBIRD

A white heron stands tall and regal in a shallow marshland.

The initial sighting.

Hi there, [non-Homo ignotus | non-Daevite | non-malfunctioning Lazarus-01 Procedure humanoid]. It appears you've stumbled on my personnel file. I–

Wait, please don't leave.

No, come back!

Ah, they're gone. Anyway, apparently, this is the place where I get to show you all the wonderful works I've written? Don't worry — I'm surprised too. Just– Don't leave the terminal and continue reading until you've learned about all the things (and stuff) that I've worked on.

I'll get you a juice box. Or some bourbon.

Don't like it? Well, that's too darn bad, hun, isn't it?

Things I've Done

== PAGE COMMENTARY [ARCHIVED] ==

Last updated: June 2018.

Flops Says: This commentary covers only one-fifth of my written work on the Wiki. I won't update this again, if only because there's too much work to make commentary on, and I would rather let my work speak for itself.

If you're curious, I do include some writing/background information in the author posts for all my individual works.

SCP-2641: Before the Fire [DELETED]

URA-2641 and Solidão

Learn more?

SCP-3787: The Horse Meme

Learn more?

SCP-3719: Your Friendly Neighbourhood Lawnmower

Learn more?

SCP-3309: Where We Go When We Fade, Fade Away

Learn more?

Summary: The Foundation classifies coldposts as a legitimate in-universe concept. When they learn they can delete these coldposts — as Wiki staff must do to their out-of-universe counterparts — they do so with extreme prejudice and imprecision. This causes everything to go wrong.

Commentary: SCP-3309 was my 4th SCP and 1st collab, co-written with PhamtomGuy in April 2018. This was both my 1st format screw and 1st attempt at a meta article.

3309 is a bit of a strange one for me. I'm not exactly a fan of meta articles myself unless they're written competently. And I don't actually think the work I put into 3309 is enough to consider it a well-done meta article. 3309 is an ambitious story — and ambitious stories call for ambitious writing. I do believe I put in decent writing, but not enough to allow for all its parts to flow smoothly. Suffice to say: I don't think there's enough here for me to be satisfied about, but it's difficult to point out what exactly is the issue. Maybe the concept needs work; maybe it relies too much on a gimmick; maybe both.

Of course, as a collaborative page, there comes a point when both parties must agree to take the middle path and be happy with the work they've put in. To my co-writer, it may seem that we kept this page on the burner for long enough and that it needed to be posted, and the votes certainly seem to display a job well done. But there will always be something in me that isn't happy with the work I put in, and I guess that might never change.

Altogether, 3309 was a learning experience, and I hope I'm able to continue progressing as a writer.

(NOTE: I don't necessarily believe that votes = a decent work. 3309 was controversial — especially among site contributors — but ended up doing incredibly well).

Themes: Depression & anxiety; the fear of being forgotten; the plight of the tortured character.

Additional Documents:

MFT "CHARYBDIS" and "SCYLLA"	References to Greek mythology.
"FASH"	A "bash the fash*" joke.
"Gægr" and "Kemdulnim"	Generated with a fantasy dragon name generator.
"Quibba" and "Keshrayuth"	Generated with a bird race name generator.
Kaa, Waxaklahun, and Mih	Mayan numbers.
"LIMP FIREBIRD"	A self-insert. ;)
*NOTE: Those depth-damned Sharkicist bastards.

The Kingdom of Mycenae	Greece
Poseidon Labs	Prometheus Labs
Bee Obliteration Registry "K"	Directorate K. Coined by PortalHunter from `#site19`.
Seventh Deviant Crusade	Seventh Occult War