PLACEHOLDER STAFF DOCUMENT
PLACEHOLDER STAFF DOCUMENT
Byㅤ Placeholder McDPlaceholder McD
Published on 25 Oct 2020 08:24

rating: +130+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; }

PLACEHOLDER STAFF DOCUMENT

Authors' Pages » PLACEHOLDER STAFF DOCUMENT

rating: +130+x

Hi. I'm Placeholder McDPlaceholder McD. I write stories, design CSS themes, and manage collaborative projects on the SCP Wiki. I'm a writer and development consultant to Affray Interactive on SCP: 5K.

If anything I've written does not blow your mind, please submit your complaints in the complaint bin so they can be ignored.

Links to my content and socials can be found on my linktree.

If you've enjoyed any of my works, and you're not a student or financially struggling, please consider donating on Ko-fi.


Personnel File



My Works


SOLO WORKS

Author Page
PLACEHOLDER STAFF DOCUMENT +130 edited 12 Oct 2023 17:48
commented 27 Feb 2024 06:35

SCP Articles
McDoctorate's Proposal +243 edited 01 Feb 2024 13:51
commented 20 Mar 2024 11:22
SCP-2011-EX +198 edited 19 Feb 2024 02:07
commented 08 Mar 2024 13:47
SCP-5241 +234 edited 19 Feb 2024 02:15
commented 14 Feb 2023 09:27
SCP-INTEGER +625 edited 19 Feb 2024 02:22
commented 24 Mar 2024 00:50
SCP-5485 +108 edited 19 Feb 2024 02:49
commented 13 Sep 2021 05:59
SCP-5756 +143 edited 25 Dec 2022 03:34
commented 25 Dec 2022 17:17
SCP-6416 +155 edited 26 Mar 2024 20:15
commented 28 Mar 2024 00:18
SCP-7579 +283 edited 26 Oct 2023 20:16
commented 27 Dec 2023 15:54
SCP-6276 +150 edited 26 Apr 2023 08:04
commented 19 Oct 2023 15:48

Tales
AI Classification Guide +141 edited 25 Dec 2022 04:05
commented 30 Jan 2022 20:07
BLANK +113 edited 13 Jan 2024 19:56
commented 03 Feb 2023 01:34
CAST +91 edited 26 Mar 2024 20:17
commented 14 Mar 2024 14:28
CONTEST CONTEST +155 edited 22 Nov 2023 18:33
commented 28 Nov 2023 19:26
PLACEHOLDER +147 edited 25 Dec 2022 04:02
commented 31 Oct 2023 03:14

Facility Dossiers
GoI Formats

Hubs

Supplements
Abridged Retirement Proposals +74 edited 07 Jun 2023 14:07
commented 12 Feb 2024 20:38

Themes
BLANKSTYLE CSS +63 edited 26 Oct 2023 19:20
commented 12 Dec 2021 10:16
Retro AIAD Theme +38 edited 11 Mar 2021 08:50
commented 04 May 2021 12:53


COLLAB WORKS

SCP Articles
Abraka David's Proposal +218 edited 07 Nov 2023 16:04
commented 10 Jan 2024 09:52
Various
Ihp/Locke Proposal +508 edited 01 Nov 2023 23:15
commented 26 Mar 2024 02:48
EstrellaYoshteEstrellaYoshte
Ihp
S D LockeS D Locke
SCP-5841 +112 edited 09 Dec 2022 23:01
commented 19 Oct 2020 20:50
TyumenTyumen
SCP-5956 +397 edited 26 Mar 2024 20:13
commented 15 Feb 2024 04:41
HarryBlankHarryBlank
SCP-6488 +352 edited 21 Mar 2024 00:42
commented 08 Mar 2024 03:11
LirynLiryn
feat. Jack IkeJack Ike
SCP-6500 +823 edited 21 Mar 2024 11:11
commented 12 Mar 2024 23:02
AethrisAethris
DarkStuffDarkStuff
Grigori KarpinGrigori Karpin
HarryBlankHarryBlank
Ihp
S D LockeS D Locke
SCP-6659 +355 edited 21 Mar 2024 00:38
commented 10 Jan 2024 02:09
LirynLiryn
feat. DodoDevilDodoDevil
SCP-6747 +404 edited 21 Mar 2024 00:39
commented 05 Feb 2024 19:29
LirynLiryn
stephlynch
feat. RallistonRalliston
SCP-6820 +925 edited 21 Mar 2024 00:40
commented 08 Mar 2024 08:46
LirynLiryn
stephlynch
SCP-7243 +237 edited 26 Mar 2024 20:16
commented 20 Jan 2024 05:54
LirynLiryn
syuzhetsyuzhet
feat. HarryBlankHarryBlank
SCP-7528 +157 edited 27 Oct 2023 20:15
commented 08 Mar 2024 11:00
Gabriel KeroGabriel Kero
HarryBlankHarryBlank
SCP-7555 +178 edited 05 Nov 2023 19:51
commented 05 Jul 2023 21:31
Gabriel KeroGabriel Kero
SCP-7566 +75 edited 16 Mar 2024 09:55
commented 09 Feb 2024 16:06
Gabriel KeroGabriel Kero
HarryBlankHarryBlank

Tales
FRAGMENTED / COMPILED +74 edited 26 Oct 2023 20:32
commented 10 Nov 2021 00:26
Its a Bad IdeaIts a Bad Idea
PedagonPedagon
TyumenTyumen

Facility Dossiers
Secure Facility Dossier: Area-12 +89 edited 26 Oct 2023 19:59
commented 16 May 2022 02:23
Gabriel KeroGabriel Kero

Hubs
ADMONITION +441 edited 25 Mar 2024 22:11
commented 25 Nov 2023 01:09
LirynLiryn
I, Hub (April Fools) +94 edited 29 Dec 2023 04:59
commented 06 Feb 2022 12:10
Various
No Return Hub +218 edited 13 Mar 2024 15:22
commented 05 Mar 2024 23:55
AethrisAethris
DarkStuffDarkStuff
Grigori KarpinGrigori Karpin
HarryBlankHarryBlank
Ihp
LirynLiryn
S D LockeS D Locke
Site-17 Deepwell Catalog +251 edited 28 Feb 2024 07:33
commented 01 May 2023 16:41
LirynLiryn
NagirosNagiros

Supplements
Project Isorropía +191 edited 06 Jan 2024 18:00
commented 29 Jan 2024 18:14
EstrellaYoshteEstrellaYoshte
Ihp
S D LockeS D Locke
SCP-5243 Video Transcripts +107 edited 26 Jan 2023 10:34
commented 17 Sep 2023 16:28
HarryBlankHarryBlank

Themes
5K Theme +52 edited 21 Feb 2024 13:00
commented 29 Jan 2023 04:58
LirynLiryn
ADMONITION Theme +48 edited 23 Mar 2024 22:27
commented 21 Dec 2023 23:04
LirynLiryn
Basalt Theme +213 edited 21 Feb 2024 13:03
commented 15 Jan 2024 10:00
EstrellaYoshteEstrellaYoshte
LirynLiryn
Bedrock Theme +72 edited 08 Jan 2024 13:14
commented 22 Dec 2022 04:30
EstrellaYoshteEstrellaYoshte
LirynLiryn

A little goes a long way. If you've enjoyed my work, you're not a student, and are otherwise financially stable, please consider donating.

The above widget links to my Ko-Fi page. Ko-fi is a website where you can donate money to creators in small increments, on either a one-time or recurring basis. I accept donations solely in recognition and endorsement of my existing works on the SCP Wiki; I do not indicate any intent to generate further works (or any other product/service) in so doing.

Payment services may reveal information such as your real name, email address, and other personal information when you donate. For more information, please view the SCP Wiki's Official Donations Policy.

More-by page code borrowed in part from Lt FlopsLt Flops. Thank you, Flops!


Foundation Cool Achievement Badges


tsf.png mww.png ccc.png sek.png scl.png clb.png tbe.png awb.png apf.png pdp.png egd.png


phd.png dado.png lgbt.png

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