Placetester

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

SCP Wiki / Wikidot Ultimate Technical Usage Guide

---

Placeholder McD

More works like this: PLACEHOLDER STAFF DOCUMENT

» Section Zero: BASICS «

0. BASICS

00. Metaguide

000. What is this?

Welcome to Placeholder McD's Do-It-Yourself SCP (Wiki) Cascading Style-Sheets Frequently Asked Questions / Public Service Announcement / et cetera, For Your Information:¹ The SCP Wiki / Wikidot Ultimate Technical Usage Guide.²

PhD McD's DIY SCP CSS FAQ/PSA/etc., FYI is intended to serve as a comprehensive guide to using the SCP Wiki website, from a technical perspective, for a conventional user. It is designed to be accessible to all current and prospective members of the main SCP Wiki on the Wikidot platform, and describes rules / best practices of engagement with the Wiki at various levels of technical detail.

This guide is 'technical' in that it generally does not tell the reader how they 'ought to' engage with the SCP Wiki; rather, PhD McD's DIY SCP CSS FAQ/PSA/etc., FYI intends to objectively describe all permitted actions a typical, non-staff user may take when interacting with the SCP Wiki, and supplements those descriptions with various subjective guidelines which the reader may choose to ignore. This information is derived from three broad sources:

• Official SCP Wiki Staff documentation of SCP Wiki Rules and Policies, which must be obeyed when engaging with the SCP Wiki;

• the Wikidot platform's documentation, whose features and technical limitations the SCP Wiki is beholden to (at time of writing);

• Placeholder McD's subjective, personal knowledge of the SCP Wiki gained over several years of anecdotal experiences with its creative and technical aspects, which is heavily supplemented by the innovations of many others whom I will credit in the next section.

When this guide presents instructions for how to interact with the SCP Wiki, it will always attempt to indicate where said instructions are sourced from, so that the reader is well-informed about what is possible, what is impossible, and what must be obeyed. Ideally: any reader, with any level of familiarity with the SCP Wiki, should be able to learn all relevant facts of the Site and its permitted interactions from this page or the resources linked therein.

DISCLAIMER: PhD McD's DIY SCP CSS FAQ/PSA/etc., FYI is technically an 'Essay' page on the SCP Wiki, not a 'Guide.' This is because an instructional page only receives the guide tag if it is an official, staff-controlled document; PhD McD's DIY SCP CSS FAQ/PSA/etc., FYI is an unofficial instructional page created and maintained by Placeholder McD which SCP Wiki Staff bears no responsibility for. Staff makes no statement of authenticity regarding the contents of this page. If this page is in some way inaccurate, or motivates you to take actions which are in conflict with the official instructions of Staff or Site Rules, you may not blame Staff or bother them about changing this page. If you feel the page's information should be updated, please contact Placeholder McD in this page's discussion forum thread or via Wikidot private message.

001. Who are you?

Howdy! I'm Placeholder McD. I am a web fiction author, content writer, and web developer for projects on, and relating to, the SCP Wiki. As detailed in the above disclaimer, I am not a member of SCP Wiki staff, and nothing I say in this guide should be interpreted as an official statement. When I say "when you want to X on the SCP Wiki, you should do Y," you should not blindly trust me; you are encouraged to consult all linked guides and resources to see the official, authoritative rules of engagement with the SCP Wiki and the Wikidot platform.

Any errors in this guide are my own and, while I have tried my best to ensure this document is accurate and up-to-date, I am establishing at the outset that you should not follow any instructions on this page which are in conflict with the official instructions of the SCP Wiki. Unless I have made an egregious, misinformative error, I do not harbor any responsibility for what the reader may choose to do with the information provided in this text.

Okay, so now we're really extra clear about this guide being unofficial. Great! Here's all the reasons I feel qualified to make this guide:

• I created the Retro AIAD Theme for a project in the 2021 Canon Renaissance Contest;
• I was involved in the creation of the Penumbra Theme by EstrellaYoshte, a general-purpose Sigma-based darkmode theme which introduced sidebox³ technology;
• I created BLANKSTYLE CSS, a Sigma-based minimal theme which HarryBlank uses on nearly all of their works;
• I was involved in the discovery of the [[ift${themesetting}gs]] variable hack technology, and the creation of theme settings which are now widely used in SCP Wiki themes;
• I created the custom visual styling used in SCP-6500 (Inevitable) and most entries in the No Return Canon;
• I helped revamp the AIAD Homescreen with EstrellaYoshte's Technoblast Theme
• I helped create and format Ihp / Locke Proposal;
• I co-created the BASALT Theme, an alternative visual format for the SCP Wiki, as well as the Bedrock Theme framework it is built upon, with EstrellaYoshte and Liryn;
• I co-created and manage the ADMONITION Series, a popular, high-concept SCP series with meticulous cinematic formatting, and its associated theme with Liryn;
• I helped revamp the Site-17 Deepwell Catalog Hub with Liryn;
• I am co-custodian of the Deepwell Canon;
• I am the ~#60 SCP Wiki author by upvote count;
• I have written a lot of CSS and have created many types of pages;
• Nobody else is working on a guide like this (to my knowledge) and one should exist.

Here are all the people I need to thank for being way smarter and more helpful than me:

• Croquembouche
• EstrellaYoshte
• Liryn

002. How's it work?

this page is divided into sections which you can navigate to using the table of contents block. if you are on a wide enough screen, the table of contents block will appear within a sidebox, a box which scrolls alongside the page content as you read it. if you are on a narrower screen, there will not be enough space for the sidebox, and so the table of contents block will display at the top of the guide. click on the links in the table of contents block to skip to the corresponding sections.

---

01. THE SCP WIKI

010. Joining & Rules

WHAT IS THE SCP WIKI?

WHAT ISN'T THE SCP WIKI?

Lorem

HOW DO I JOIN THE SCP WIKI?

Lorem

011. Page Creation

• mention greenlights method up front
• what to do
  • follow the "How to Write an SCP" Guide
  • make sure to include module Rate, licensebox, wikiwalk footer (showcase these and mention that we'll talk more about how these work later)
  • follow the Tech and Licensing Guides
• what not to do
• basic writing considerations
  • link writing guides and resources

012. Fiction Pages

The main type of page users create on the SCP Wiki.

SCP Articles

Lorem

Tales

Lorem

GoI Formats

Lorem

Facility Dossiers

Lorem

Supplements

Lorem

013. User Pages

A secondary type of page for personal usage.

Author Pages

Lorem

Artist Pages

Lorem

Artwork Pages

Lorem

---

» Section One: FORMATTING «

1. FORMATTING

10. OVERVIEW

100. Stuff

Lorem

---

» Section Two: ADVANCED «

2. ADVANCED

20. STUFF

200. Thing

Lorem

---

» Section X: APPENDIX «

X. APPENDIX

X00. Stuff

Lorem

X0X. Footnotes

Footnotes

1. PhD McD's DIY SCP CSS FAQ/PSA/etc., FYI

2. Or, "How I Learned to Stop Writing and Love the Code."

3. See Section 2XX: Sideboxes.

---

+ links

IMPORTANT LINKS:

• Wikidot
  • https://www.wikidot.com/doc:start
    • https://www.wikidot.com/doc-wiki-syntax:start
    • https://www.wikidot.com/doc-modules:start (UGH)
    • https://www.wikidot.com/doc-data-forms:start (UGHHHHHH)
    • https://www.wikidot.com/doc:embedding (partially covered by iframes but not entirely)
    • https://www.wikidot.com/doc:layout-reference (SUPER USEFUL FOR THEME CREATION, ESPECIALLY BASE THEMES)
    • https://www.wikidot.com/doc:expressions (could see this being used in themes and components, though calc just seems like a way better alternative)
• SCP Wiki
  • Guides
    • https://scp-wiki.wikidot.com/adult-content-warning-guide
    • https://scp-wiki.wikidot.com/a-laymen-s-guide-to-tagging
    • https://scp-wiki.wikidot.com/css-policy
    • https://scp-wiki.wikidot.com/anonymous-articles
    • https://scp-wiki.wikidot.com/guide-for-newcomers
    • https://scp-wiki.wikidot.com/contribute
    • https://scp-wiki.wikidot.com/how-to-create-a-branch-of-the-scp-foundation
    • https://scp-wiki.wikidot.com/how-to-write-an-scp
    • https://scp-wiki.wikidot.com/https-guide
    • https://scp-wiki.wikidot.com/image-use-policy
    • https://scp-wiki.wikidot.com/licensing-guide
    • https://scp-wiki.wikidot.com/donations-policy
    • https://scp-wiki.wikidot.com/rewrite-guide
    • https://scp-wiki.wikidot.com/scp-style-resource
    • https://scp-wiki.wikidot.com/site-rules
    • https://scp-wiki.wikidot.com/technical-content-policy
    • https://scp-wiki.wikidot.com/guia-licencias-de-archivos
    • https://scp-wiki.wikidot.com/translations-policy
    • https://scp-wiki.wikidot.com/avoid-the-blackbox
    • https://scp-wiki.wikidot.com/wiki-syntax
  • Essays
    • https://scp-wiki.wikidot.com/advanced-formatting-and-you
    • https://scp-wiki.wikidot.com/anomaly-classification-system-guide
    • https://scp-wiki.wikidot.com/author-page-tool
    • https://scp-wiki.wikidot.com/col-hornby-s-audio-guide
    • https://scp-wiki.wikidot.com/css-theme-preparation-tool
    • https://scp-wiki.wikidot.com/listpages-magic-and-you
    • https://scp-wiki.wikidot.com/photoshopping-your-scp
    • https://scp-wiki.wikidot.com/random-but-useful
    • https://scp-wiki.wikidot.com/s7-apcs-guide
    • https://scp-wiki.wikidot.com/scp-achievement-badges
    • https://scp-wiki.wikidot.com/guide-to-mixed-sources
• 05command
  • https://05command.wikidot.com/tech-hub-tag-list

Styling Links & Guides (from Billith)

Formatting/CSS:
https://scp-wiki.wikidot.com/components-hub
https://scp-wiki.wikidot.com/scp-style-resource
http://scp-int.wikidot.com/manuel-de-formatage-avance
https://scp-wiki.wikidot.com/exploiting-foldable-list-containers

themes/patterns/media:
https://www.quackit.com/css/color/tools/css_color_scheme_generator.cfm
https://coolors.co/
https://btmills.github.io/geopattern/
https://www.svgeez.com/
https://trianglify.io/
https://heropatterns.com/
https://lospec.com/palette-list
https://lospec.com/palettes/dawnbringer-palette-analyser
https://ezgif.com/
https://twinery.org/ (choose your own adventure tool)

fonts:
FONTANELLO BROWSER EXTENSION
https://www.fontsquirrel.com/tools/webfont-generator (lets you add custom fonts to your articles not found online. See: http://community.wikidot.com/howto:css:import-and-use-different-fonts)
https://www.chengyinliu.com/whatfont.html (font identifier)
https://fonts.google.com/
https://fontjoy.com/ (font pairer)
https://www.fontbrief.com/fontbrief
https://mmontag.github.io/chip-player-js/ (midi generator)

+ to do

TO DO:

• Formatting Guide
  • Review all possible wikidot formatting
  • Review quirks
  • Review SCP Wiki formatting guides
  • Review basic CSS

• every type of page that exists on the wiki (by top-level tag)
  • fiction
    • scp
    • goi-format
    • tale
    • supplement
    • site
  • information
    • guide
    • essay
    • news
    • resource
  • user
    • author
    • artist
    • artwork
  • import
    • component
    • component-backend
    • theme
    • fragment
    • more-by
  • internal
    • forum
    • splash
    • redirect
  • other
    • admin
    • hub
    • workbench
    • sandbox

• review all of tech policy, broken up by which sections they're appropriate for