Flopstyle: DARK
Flopstyle: DARK
Byㅤ Lt FlopsLt Flops
Published on 05 Apr 2022 02:19

This is a working example of the authorbox. Consult the Sideboxes subsection for further info.


alt_logo_tyrian.png

.


Flopstyle: DARK

Sigma-9 Themes » Flopstyle: DARK

alt_logo_tyrian.png

Rating

rating: +96+x

Rating + Info Module

Standalone Info Module

What Is This?


This is a theme created by Lt FlopsLt Flops. It is intended for widespread use in any article in which dark mode or night mode are preferred.

Only use this if you understand what you're doing.

This theme is incompatible with Black Highlighter, BASALT, and Sigma+.

» PATCH NOTES «

How to Use

The Essential Information


Please read this introductory section before setting up Flopstyle: DARK on your page.

STEP 1. INCLUDE THEME Copy this syntax and paste it onto the top of your page:

[[include :scp-wiki:theme:flopstyle-dark]]

[OPTIONAL] STEP 2. ADD BYLINE Copy this syntax and paste it directly beneath the rating module — like so:

[[module Rate]]

[[div class="byline"]]
[[span]] by authorLink [[/span]](A)
[[span]] # [[/span]](B)
[[/div]]

2. (A) Replace authorLink with the name of the author/any co-authors, and a link/links to the relevant author pages.

2. (B) Replace # with the estimated time (in minutes) it would take a reader to finish your article. To estimate your article's reading time, you can copy the article text and paste it into the Read-o-Meter tool, then round up or down to the nearest minute..DISCLAIMER Read-o-Meter does not record or store your data.

‼️ Make sure there are no spaces between the lines containing the spans, otherwise this won't work as intended!

hCGnFsp.png

An example of Step 2 in action.

STEP 3. SET PAGE-TITLE Copy this syntax and paste it where you want to signal the beginning of your article:

[[div class="meta-title"]]
Your Title Here
[[/div]]

For accessibility reasons, you must do this on every page that uses Flopstyle: DARK.

STEP 4. SET BREADCRUMB NAVIGATION Copy this syntax and paste it directly beneath the page-title:

[[div class="pseudocrumbs"]]
[[[parent-page-url1|1st Parent Page Title]]] » Child Page Title
[[[parent-page-url2|2nd Parent Page Title]]] » Child Page Title
[[/div]]

‼️ If you are creating an article that requires the use of ListPages, not to worry — you can still parent your fragments as usual, but you must do so the traditional way. Functionality takes precedence over form in this instance.

uKmDCe1.png

An example of Steps 3 and 4 in action.

Now… If the basic aesthetics are all you want from Flopstyle: DARK, you are free to grab that code and skedaddle! But if you keep scrolling, I can show you how deep this rabbit hole goes.



Flopstyle: DARK was designed with the following components in mind…



1. Preloaded Components


This theme comes prepackaged with the following six components:

1.1. ACS Animation by EstrellaYoshte
1.2. BetterFootnotes by EstrellaYoshte
1.3. Croqstyle CSS by Croquembouche
1.4. Fade In (set at speed=1) by Croquembouche
1.5. Text Style by JaonHax
1.6. Toggle Sidebar by EstrellaYoshte

2. Custom Variables

(Only change these if you understand what you're doing)

All variable changes must be wrapped/encased in a CSS module, [[module CSS]]. All the ones listed must also be wrapped/encased in a :root selector.

2.1. COLORS You can change a variety of theme colors as you see fit. Simply copy any of the following variables (but only the ones you need) and edit them as necessary:

[[module CSS]]
:root{

/* -- COLORS -- */
--accentColor: accent_color;
--accentColorLite: lighter_accent_color;
--hue: hue;

/* Defaults (Do not copy):
* accentColor:
Bright Tyrian pink hsl(325, 80%, 60%).
* accentColorLite:
Soft Tyrian pink hsla(325, 80%, 70%, .5).
* hue: 325deg.
**/

accentColor is the most extensively used page variable. Among all other variables, changing the accentColor is typically the only alteration that users of this theme will tend to make.

When you change accentColor, you must also change two other variables:

2.1. (A) accentColorLite: This must have higher lightness and lower alpha value than your accentColor. I recommend a lightness of at least 10% more than your chosen accentColor's, and an alpha value of 0.5
2.1. (B) hue: This must match your chosen accentColor's hue.

To select the color of your choice, I recommend the HSL Color Picker. HSL is a human-friendly color system which stands for Hue, Saturation, Lightness. It can be expanded to HSLA, which includes the Alpha value (opacity).

To confirm that your chosen accentColor meets Web Content Accessibility Guidelines (WCAG), check its Contrast Ratio. Insert
hsl(222, 12%, 21%) into the "Background" field, and your chosen accentColor into the "Text color" field. WCAG requires a contrast ratio of 3 or higher for heading text.

2.2. LOGO AND FONTS You can change the logo, fonts, etc.:

/* -- LOGO -- */
--lgurl: url(URL_HERE);

/* -- FONTS -- */
--header-font: "yourFont", sans-serif;
--body-font: "yourFont", sans-serif;

/* Defaults (Do not copy):
* header-font: Montserrat, sans-serif
* body-font: Inter, sans-serif
**/

2.3. HEADER TITLES You can also change the title, subtitle, title color, and subtitle color:

/* -- TITLES -- */
--header-title: "TITLE";
--header-subtitle: "SUBTITLE";
--titleColor: title_colour;
--subtitleColor: subtitle_colour;

/* Defaults (Do not copy):
* titleColor:
Bright Tyrian pink hsl(325, 80%, 60%).
* subtitleColor:
Bright Tyrian pink hsl(325, 80%, 60%).
**/

}
[[/module]]

3. Flops Header


Flopstyle: DARK provides for a dark mode-friendly version of Flops Header:

[[include :scp-wiki:component:flops-header
|item=
|containment=
|level=
|security=
|disruption=
|disruption-bg-color=
]]

cGbnRpP.png

An example of the Flops Header in action.

4. Sideboxes


Sideboxes are built-in components that come in two types:

  • Type-A authorbox and sidebox
  • Type-B sidecontainer

Usage instructions vary depending on the type.

  • The authorbox and sidebox do not display on screens of width=1280px and smaller, which includes mobile screens. They can be set up to display page and author information.
  • The sidecontainer collapses into the page edge on screens of width=1280px and smaller. On those screens, you can access it by tapping your finger or hovering your cursor over it. It can be set up to display additional narrative information.

Consider these conditions before setting up these items — a sizable percentage of SCP Wiki users browse via mobile devices.

Type-A Authorbox and Sidebox

(See Top Left and Top Right)

Adapted from Penumbra Theme by EstrellaYoshte

By default, the authorbox is opt-out. It comes preloaded on all pages that include Flopstyle: DARK. If you wish to remove it, replace this:

[[include :scp-wiki:theme:flopstyle-dark]]

With this:

[[div style="display: none;"]]
[[include :scp-wiki:theme:flopstyle-dark]]
[[/div]]

ALTERNATIVE 1 After removing the authorbox, you can replace it with a custom version that displays any information you desire. This functionality can be especially useful for co-authored, rewritten, or translated pages. For your reference, this is the code that creates the authorbox:

[[div class="anchor"]]Sets authorbox's sticky position.
[[div class="authorbox tableb"]]
[[module ListPages name="="]]
||~ %%title%% ||
||= [[span class="bt bb"]] By [[/span]] %%created_by_linked%% ||
||~ Published on %%created_at|%d %b %Y%% ||
[[/module]]

[[div class="flavorbox"]]Creates authorbox's flavorbox.
Desired flavor text here.
[[/div]]

[[/div]]
[[/div]]Sets the end limit of the anchor.

By default, the authorbox makes use of ListPages to automate the metadata displayed. You could theoretically copy the ListPages module inside the authorbox and paste it onto any Wiki page, and these fields would populate in a way unique to that page. You may, of course, change any of these fields as desired.

You may also edit your custom authorbox to display flavor text tailored to your page, such as a note to readers.

REMEMBER — Using the flavorbox is optional. But it is the only div block you should use inside an authorbox.

ALTERNATIVE 2 If you want, you can move the authorbox to the right-hand side of the page by swapping it out for the sidebox. To create a sidebox, copy this syntax and paste it inside a CSS module at the top of your page:

[[div class="anchor"]]Sets sidebox's sticky position.
[[div class="sidebox tableb"]]
[[module ListPages name="="]]
||~ %%title%% ||
||= [[span class="bt bb"]] By [[/span]] %%created_by_linked%% ||
||~ Published on %%created_at|%d %b %Y%% ||
[[/module]]

[[div class="flavorbox"]]Creates sidebox's flavorbox.
Desired flavor text here.
[[/div]]

[[/div]]
[[/div]]Sets the end limit of the anchor.

If you are planning to insert any sidecontainers onto your page, I strongly recommend using the authorbox instead of the sidebox. The reason being, when the sidebox and sidecontainer appear in tandem, they will overlap and become visually messy. This has the potential to be very confusing for readers. So, it's better staying on the safe side.

You can configure a sidebox to convey the same info as an authorbox. Or — like with the one I showcase here — you can add a snappy article tagline and unique icon.

Like any other table, you can also apply a unique tint — e.g., the current green, as achieved with table1. Consult the Table Formatting collapsible under the Example Formatting (GENERAL) section for further info.

Type-B Sidecontainer

(See Below)

Courtesy of Woedenaz

The sidecontainer is opt-in. It is set up like this:

[[div class="limit"]]Sets the start limit of the anchor.
[[div class="anchor"]]Sets sidecontainer's sticky position.
[[div class="sidecontainer"]]
Desired sidecontainer text here.
[[/div]]
[[/div]]
Text that the sidecontainer associates with.
[[/div]]Sets the end limit of the anchor.

I recommend inserting a manual line break after sidecontainer-associated text. You can achieve this by encasing a space with two sets of @@ (one on each side). The sidecontainer will appear alongside this text as you scroll past.

REMEMBER — Without a limit div, the anchor will remain present across the entire page content once you scroll past its starting position.

5. Miscellaneous Changeable Portions


If necessary, you can also edit any of these CSS properties to better suit your page.

Change Logo Opacity

#extra-div-1{
filter: opacity(number_percentage);
}

Default opacity = 33%

6. Theme Variants


If you insert a different variable into the theme include block, you can apply a prefabricated theme variant to your page.

Example Formatting [GENERAL]


Example Formatting [ADVANCED]


Source Code


The HEADER font is Montserrat.

The BODY font is Inter.

The MONOSPACE font is Fira Code.

The SCRIPT font is Comic Neue.

🡹

Back to Top

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

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