Alexander
Alexander
Byㅤ TopDownUnderTopDownUnder
Published on 01 May 2022 22:31
rating: 0+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;
    }
    }
}

rating: 0+x

SCP-XXXX

ITEM #: SCP-####

LEVEL-

CONTAINMENT CLASS: EUCLID

DISRUPTION CLASS: VLAM

ITEM: SCP-####

LEVEL-

CONTAINMENT
CLASS:
EUCLID

DISRUPTION
CLASS:
VLAM


SPECIAL CONTAINMENT PROCEDURES



DESCRIPTION


SCP-XXXX

An ethnically ambiguous man in front of a wall of cinderblocks. (Need to retake this photo)

Taken during preliminary screening.

SCP-XXXX is a man of unknown ethnicity. SCP-XXXX appears to be in their late teens or early twenties. SCP-XXXX is highly muscular and appears to have undergone military training. SCP-XXXX does not speak any known modern languages, instead speaking a mixture of Attic Greek and Hatamtite. SCP-XXXX is incredibly uncooperative with Foundation personnel and has demonstrated hostility in the past.

SCP-XXXX possesses the anomalous ability to quickly understand the function and use of any "weapon" it uses. The exact definition of a weapon used for this ability is unknown, as unconventional weaponry, such as broken glass and cement blocks, were subject to it. Following Foundation containment, SCP-XXXX largely refuses to utilize this anomalous property, leading to the pre-emptive cancellation of its Integration.

SCP-XXXX-A is the group designation for the armour, weapons and other pieces of technology found on SCP-XXXX at the time of its capture. Included among SCP-XXXX-A are:

  • A long spear-like weapon with a head made from a metal capable of inhibiting psionic activity.
  • An iron shield capable of expanding to five times its size without increasing in weight.
  • A Phrygian helmet with a digital screen over the eyes. This screen is capable of displaying the location of nearby living organisms via the E.V.E that they give of.
  • A broken piece of technology vaguely resembling a cellular phone. The exact function of the device is unknown.

All of SCP-XXXX-A are modelled after and contain design elements from the weapons and technology of Ancient Macedonia, the Achaemenid Empire, and the Argead Dynasty of Egypt. All of them also contain obtuse and unwieldy methods of using them, indicating that they were specially designed for SCP-XXXX or someone with a similar anomalous property.


DISCOVERY


SCP-XXXX was discovered in the outskirts of Mexico City, Mexico, following reports of a "group of heavily-armoured men" entering houses and attacking residents in the area. A Foundation task force was sent to investigate and, following a sudden, short spike in E.V.E radiation - discovered SCP-XXXX, who attacked them. SCP-XXXX was promptly subdued and taken into Foundation custody.


ADDENDUM.XXXX.1

INTERVIEW


Following its capture, SCP-XXXX was transferred to Area-34. After the language it spoke was identified, an interview was held with the assistance of a translator.

SCP-XXXX ENTRANCE INTERVIEW

Interviewed: SCP-XXXX
Interviewer: Dr. Akabi Hayk
Translator: Makis Zareas


THE TELESCOPIC

WANDERING DEVICE USERS: LANDSCAPE RECOMMENDED


Issue No. 𐤈𐤆 𐤇𐤅𐤃

/A.

ELEPHANT TEAM CONSCRIPTED

THE UNIVERSITY'S WAR ELEPHANT TEAM HAS BEEN CONSCRIPTED FOR BATTLE AGAINST THE INVADING SAVAGES. TEAM STAR ORSIPHANTES HAS ALREADY BEGUN THE MARCH TO THE BATTLE WITH THE REST OF THE TEAM FOLLOWING FORM.

TALKS ARE HELD OF ALSO CONSCRIPTING THE UNIVERSITY'S PHALANX TEAMS. TEAMS ARE MORE THAN EAGER TO JOIN THE BATTLE AND PROVE THEIR WORTH.

ALEXANDRIA SYLVANOS WILL NOT FALL.

Legio_V_Alaudae.gif

BE WARNED!

INCURSIONS HAVE BEEN TOLD OF IN THE NORTH REGIONS OF ALEXANDRIA SLYVANOS. THOSE WHO LIVE THERE ARE ASKED TO VACATE AND MAKE WAY FOR CAESAR'S ARMY. HOMESTEADS WILL BE RETURNED ONCE THE INVADING FORCE HAS BEEN DECIMIATED.



























DO YOU WANT TO WRITE FOR THE TELESCOPIC? WRITE THREE AUDITION ARTICLES AND PLACE THEM UNDER YOUR PILLOW. WE'LL LET YOU KNOW WHAT WE THINK.

THE TELESCOPIC IS A STUDENT-MANAGED PROJECT OF ALEXYLVA UNIVERSITY


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