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.

Fold

Navigation

I. What Is This?
II. How to Use
1. Preloaded Components
2. Custom Variables
3. Flops Header
4. Sideboxes
5. Misc. Changeable Portions
6. Theme Variants
III. Example Formatting (GENERAL)
IV. Example Formatting (ADVANCED)



alt_logo_tyrian.png

.

Flopstyle: DARK
This is a working example of the sidebox.
scp_foundation_logo.png

This is a flavorbox

Consult the Sideboxes subsection for further info.



Flopstyle: DARK

Sigma Themes » Flopstyle: DARK

alt_logo_tyrian.png

Rating

rating: +110+–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+.

CREDIT INFORMATION
» 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.

Show Example

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.

Show Metafoundation Variants
Show WITCH Variants
Show Other Variants

Example Formatting [GENERAL]

Show General Formatting
Show Image Formatting
Show Table Formatting

Example Formatting [ADVANCED]

Show Content Warning Header
Show Custom Div Blocks
Show Special Formatting

Source Code

Show CSS

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

‡ Licensing / Citation

_cc_licenseboxtheme
page revision: 300, last edited: 12 Oct 2024 17:59
Edit Rate (+110) Tags Discuss (12) History Files Print Site tools + Options
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License