Beneath the Floorboards...

Beneath the Floorboards…
By: FLOORBOARDS
Published on 05 Jun 2022 04:17

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):

• Magnus Web Format — DrMagnus
• Flopstyle CSS — Lt Flops
• Blankstyle CSS — HarryBlank
• Placestyle CSS — Placeholder McD
• Jakstyle — JakdragonX

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

WARNING! The following material no longer contains narrativohazardous properties. It has been reduced, reused, and recycled following reality injection, and is now unreal. Please proceed with caution when interacting with cross-dimensional materials.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

ACCESSING FLOORBOARDS.aic…

WELCOME BACK.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

Page Name	Rating	Comments	Last Comment	Created	Last Edited
The Locked Box	47	5	04 Jun 2023 22:43	12 Apr 2022 00:05	04 Oct 2022 17:12
Personal Database	26	1	24 Apr 2022 02:54	24 Apr 2022 02:49	24 Oct 2022 17:04
SCP-983 – The Party Is Today	48	11	10 Nov 2022 05:55	02 Jun 2022 22:16	04 Sep 2023 08:48
Beneath the Floorboards...	52	1	05 Jun 2022 04:30	05 Jun 2022 04:17	07 Sep 2023 15:36
Where Would You Like To Go?	25	1	30 Jul 2022 19:47	30 Jul 2022 19:41	29 Nov 2022 20:49
Memet-Hiemal	20	5	12 Sep 2022 00:48	17 Aug 2022 14:59	22 Aug 2022 14:16
Space Rock (Found Poem)	32	12	30 Nov 2022 04:37	03 Oct 2022 01:24	05 Oct 2022 18:04
Alex Thorley's Christmas Special	64	13	30 Mar 2023 19:08	17 Dec 2022 21:26	08 Sep 2023 18:32
new hallway!	24	7	06 Jan 2023 03:59	03 Jan 2023 22:19	12 Jan 2023 05:16
hauntology-antaka	24	8	11 Apr 2023 13:57	09 Apr 2023 16:55	17 Apr 2023 23:21
SCP-6109	65	32	07 Jul 2023 18:55	21 May 2023 19:33	03 Sep 2023 13:28
Cesnavicius & The Deep Dark Forest	23	8	03 Jun 2023 05:33	30 May 2023 04:30	01 Aug 2023 20:09
I Am Ira Watts & You Are The Forest	24	7	09 Sep 2023 18:05	19 Jun 2023 04:13	23 Jun 2023 06:28
SCP-7324	100	47	26 Sep 2023 05:06	23 Jul 2023 20:03	22 Sep 2023 22:10
SCP-7356	24	8	07 Sep 2023 21:24	17 Aug 2023 23:58	18 Sep 2023 18:09
CO█VE█T███	49	16	16 Sep 2023 22:26	30 Aug 2023 19:59	17 Sep 2023 16:41

Hi there, we're FLOORBOARDS (Shuck it/its - Roxy she/it), a weirdo with a love of the New Weird.

Our biggest influences in our writing are Kurt Vonnegut, Cormac McCarthy, and Gilles Deleuze. If you like those authors, check out our work!

If you wish to get in contact with us, you can find us on Discord as rockinroxy. In the event that we can't be contacted under any circumstances for more than four years, we'd like to hand our writing to the community and staff. Unless we specifically note otherwise (see below), in the event of our disappearance we'd like to have the collaboration tag applied to our articles.

This Is Where We Specifically Note Otherwise

Where Would You Like To Go?
Alex Thorley's Christmas Special
Cesnavicius & The Deep Dark Forest
I Am Ira Watts & You Are The Forest
SCP-7324

These articles will instead fall into the care of fabuIa. Thanks Fabs 🤍

We hope you've enjoyed the articles We've written for this site. We also recommend checking out the writings of NatVoltaic, Lt. Flops, Liryn, Nagiros, and UraniumEmpire, in no particular order.

‡ Licensing / Citation

Cite this page as:

"Beneath the Floorboards..." by FLOORBOARDS, from the SCP Wiki. Source: https://scp-wiki.wikidot.com/beneath-the-floorboards. Licensed under CC-BY-SA.

For more information, see Licensing Guide.
Licensing Disclosures

Filename: Untitled51_20220618163306_prev_ui.png
Author: FLOORBOARDS
License: CC-BY-SA
Source Link: https://scp-wiki.wdfiles.com/local--files/beneath-the-floorboards/Untitled51_20220618163306_prev_ui.png

For more information about on-wiki content, visit the Licensing Master List.