Flops' Workbench
Flops' Workbench
By: Lt FlopsLt Flops
Published on 02 May 2023 06:00
rating: +8+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; }

192px-Jerry_Seinfeld_2016_-_2.jpg

Hegel remarks somewhere that all great world-historic facts and personages appear, so to speak, twice. He forgot to add: the first time as tragedy, the second time as farce.

Jerome Allen Seinfeld


The image is "Jerry Seinfeld at the Beacon Theater" by slgckgc. Licensed under Attribution 2.0 Generic (CC BY 2.0).
The text is an excerpt from "The Eighteenth Brumaire of Louis Bonaparte" by Karl Marx. Licensed under Public Domain.

Recent Topics


(Started 30 Sep 2023 12:21, Posts: 1)
(Started 30 Sep 2023 11:54, Posts: 0)
(Started 30 Sep 2023 11:04, Posts: 11)
(Started 30 Sep 2023 08:14, Posts: 1)
(Started 30 Sep 2023 07:11, Posts: 1)
(Started 30 Sep 2023 07:02, Posts: 1)
(Started 30 Sep 2023 04:02, Posts: 1)
(Started 30 Sep 2023 02:48, Posts: 5)
(Started 30 Sep 2023 02:05, Posts: 0)
(Started 30 Sep 2023 01:31, Posts: 2)

Most Active Topics


(Started 28 Sep 2023 13:59 , Posts: 128)
(Started 28 Sep 2023 19:19 , Posts: 18)
(Started 27 Sep 2023 14:51 , Posts: 14)
(Started 25 Sep 2023 08:05 , Posts: 13)
(Started 29 Sep 2023 21:06 , Posts: 13)
(Started 27 Sep 2023 01:18 , Posts: 12)
(Started 26 Sep 2023 14:27 , Posts: 12)
(Started 10 Sep 2023 07:19 , Posts: 26)
(Started 10 Sep 2023 07:28 , Posts: 29)
(Started 30 Sep 2023 11:04 , Posts: 11)

Recent Posts (All)


+1
SCP-7621-1 does a little bit of trolling. The silliness gets this a +1
(by Dr Shoulder 30 Sep 2023 13:17, posts: 11)
I like this SCiP, I think all the interesting ways an SCP ends up being classified as...
(by ArchieSmash 30 Sep 2023 13:09, posts: 24)
Article Link: https://scp-sandbox-3.wikidot.com/professor-de-cay Member Page: (Professor of the...
(by ProffesorDeCay 30 Sep 2023 12:21, posts: 1)
+1 for Luck Implement Oubliette. love how this implies like a whole dice cosmology out there....
(by ch00bakka 30 Sep 2023 12:18, posts: 11)
Thanks for reading!
(by ParallelPotatoes 30 Sep 2023 12:07, posts: 11)

RomCon Rankings

Round Three


Article Author Posted On +/−
Agent Calendar's Undervegas Hub RounderhouseRounderhouse 18 Jul 2023 01:02 75
Karen, Queen of the Monsters! HarryBlankHarryBlank 18 Jul 2023 00:38 36
'The Crocosquid' (OCN39/87YUI/O9NH6) stormbreathstormbreath 18 Jul 2023 00:16 24
Hell Hath No Fury Like a Woman Scorned RallistonRalliston 08 Jul 2023 19:07 21

Round Two



Round One


Article Author Posted On +/−
Agent Calendar's Hot Date: Divine Intervention RounderhouseRounderhouse 30 May 2023 03:58 82
The Ship of Screams HarryBlankHarryBlank 29 May 2023 10:02 53
Project Proposal 2018-112: "Any Time, Any Place, You And Me" RallistonRalliston 20 May 2023 21:33 39
Aces Deuces Uncle NicoliniUncle Nicolini 21 May 2023 14:33 33
What does B stand for? Crow-CatCrow-Cat 30 May 2023 04:50 31
Tampa Days, Miami Nights ch00bakkach00bakka 25 May 2023 21:19 31
Reeling in the Crocosquid stormbreathstormbreath 30 May 2023 00:46 30
Losers in Every Dimension RaddagherRaddagher 26 May 2023 17:39 27
Burn, Baby, Burn notgullnotgull 21 May 2023 05:24 27
Cesnavicius & The Deep Dark Forest FLOORBOARDSFLOORBOARDS 30 May 2023 04:30 23
Rita Learns About The Birds And The Bees In The Worst Way TyGentlyTyGently 28 May 2023 08:18 23
Samara: Be the Itsy Bitsy Spider. Lt FlopsLt Flops 30 May 2023 04:59 22
Moving On OthellotheCatOthellotheCat 25 May 2023 22:59 18
Siren PerdohPerdoh 25 May 2023 12:07 18
Capture Hi(s Heart)m Mew-ltiverseMew-ltiverse 29 May 2023 20:59 15
Love in The Time of Chugwater SYTYCFanonSYTYCFanon 29 May 2023 06:01 15
Spellbound and Hellbound AnorrackAnorrack 26 May 2023 20:58 14
Capitalism, A love story Prime GirlPrime Girl 30 May 2023 04:41 13
Anomalous Anonymous: All Abnormalities Allowed ZenobiylZenobiyl 30 May 2023 03:08 11
Five-Finger Discount DrScaramoucheDrScaramouche 31 May 2023 02:53 10
Better Than Drinking Alone ThatGuyThatTimeThatGuyThatTime 27 May 2023 03:51 10
Quality Time FlopmindFlopmind 29 May 2023 12:44 9
Hominophobia tiredsn0wtiredsn0w 25 May 2023 03:00 8
Raccoon Dog Hunt Maxyfran73Maxyfran73 29 May 2023 16:54 7
Plus One Capriccio FarceCapriccio Farce 29 May 2023 21:25 6

Lists


Sandboxes



rating: +8+x
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License