Modulo CCS del tema di DJKaktus

FERMATI SUBITO

Questa è una pagina template utilizzata dal sito della Fondazione SCP.

PER FAVORE, NON TOCCARE QUESTA PAGINA
SENZA IL PERMESSO DELLO STAFF

Black Highlighter
voto: 0+–x

This is the Black Highlighter theme, a new base theme that aims to be better than the SCP Wiki's default base theme, Sigma-10. You've already seen it in action.


Usage

On any wiki:

[[include :scp-wiki:theme:black-highlighter-theme]]


Reporting problems

If you've got a Github account, create an Issue detailing your problem (whether it's technical, or aesthetic, or whatever).

If you don't have a Github account, or if you'd prefer to discuss your issues with someone directly, send a Wikidot PM to WoedenazWoedenaz. If he doesn't respond, send it to CroquemboucheCroquembouche.


Addons

As a base theme, it's easy to extend Black Highlighter to be whatever you want. You can see all Black Highlighter-derived themes here: black-highlighter-themes

For functional changes, try these:



Theme Colors

Payne's Grey--gray-monochrome(66, 66, 72)
Rosewood--bright-accent(133, 0, 5)
{$color3-name}{$color3-variable}{$color3-info}
{$color4-name}{$color4-variable}{$color4-info}
{$color5-name}{$color5-variable}{$color5-info}
{$color6-name}{$color6-variable}{$color6-info}
Alto--very-light-gray-monochrome(215, 215, 215)
White Smoke--pale-gray-monochrome(244, 244, 244)
Bastille--dark-gray-monochrome(48, 48, 52)
Buccaneer--medium-accent(100, 46, 44)
Maroon--dark-accent(100, 3, 15)
Mango Tango--newpage-color(221, 102, 17)
{$subcolor7-name}{$subcolor7-variable}{$subcolor7-info}
{$subcolor8-name}{$subcolor8-variable}{$subcolor8-info}
{$subcolor9-name}{$subcolor9-variable}{$subcolor9-info}
{$subcolor10-name}{$subcolor10-variable}{$subcolor10-info}
{$subcolor11-name}{$subcolor11-variable}{$subcolor11-info}
{$subcolor12-name}{$subcolor12-variable}{$subcolor12-info}


Syntax Examples

logo.svg

SCP Foundation Logo

Titles can be created by putting between one and six plus "+" at the start of the line

+ Titles

A horizontal rule can be created with 5 hyphens "-----" and extends across the whole page if it's not placed inside anything (e.g. a blockquote). The lines separating sections of this document are horizontal rules.



This is a tab view.

This is a blockquote, created by enclosing its contents with {{

Blockquotes, and all divs, can be nested.

Here's an example
of a table



The body, title, and header font is Inter.
The UI font is PT Root UI.
The monospaced font is Recursive.

All fonts are licensed under the SIL Open Font License, Version 1.1

voto: 0+–x

Black Highlighter port of the Penumbra Theme by EstrellaYoshteEstrellaYoshte

Theme Colors

Tuna--gray-monochrome(47, 51, 60)
Summer Sky--bright-accent(30, 181, 232)
{$color3-name}{$color3-variable}{$color3-info}
{$color4-name}{$color4-variable}{$color4-info}
{$color5-name}{$color5-variable}{$color5-info}
{$color6-name}{$color6-variable}{$color6-info}
White Smoke--white-monochrome(248, 248, 248)
Alto--very-light-gray-monochrome(215, 215, 215)
Black Rock--dark-gray-monochrome(47, 51, 60)
Cinder--black-monochrome(33, 37, 46)
{$subcolor5-name}{$subcolor5-variable}{$subcolor5-info}
{$subcolor6-name}{$subcolor6-variable}{$subcolor6-info}
{$subcolor7-name}{$subcolor7-variable}{$subcolor7-info}
{$subcolor8-name}{$subcolor8-variable}{$subcolor8-info}
{$subcolor9-name}{$subcolor9-variable}{$subcolor9-info}
{$subcolor10-name}{$subcolor10-variable}{$subcolor10-info}
{$subcolor11-name}{$subcolor11-variable}{$subcolor11-info}
{$subcolor12-name}{$subcolor12-variable}{$subcolor12-info}
black-highlighter-logo.svg

Usage

Note: This is a Black Highlighter based theme. You will need to import the Black Highlighter theme as well in order to use this theme. To learn more go here.1

On any wiki:

[[include :scp-wiki:theme:black-highlighter-theme]]
[[include :scp-wiki:theme:penumbra-bhl]]

CSS Variables are identical to the original theme for easy(ish) replacement, if desired. [See Below]

EXCEPT the --accentColor will need to be converted to rgb. For instance #1EB5E8 will have to be converted to 30, 181, 232. Useful tool for this here.

DO NOT include rgb( ) when converting the hex color. Just the three numbers.

:root {
--header-title: "BIG HEADER TITLE";
--header-subtitle: "small header subtitle";
--lgurl: url("your url here");
--accentColor: COLOR HERE;
}

Examples

A horizontal rule can be created with 5 hyphens "-----" and extends across the whole page if it's not placed inside anything (eg a blockquote). The lines separating sections of this document are horizontal rules.

Titles can be created by putting between one and six plus "+" at the start of the line

+ Titles

This is a tab view.

This is a blockquote, created by putting "> " at the start of each line.
More text

That's a horizontal rule

Nested blockquotes

This is a table
You should know how to make these
already

[[div class="darkbox"]]

[[div class="lightbox"]]

The sidebox div is set up as follow:

[[div class="limit"]] <— Set the start limit of the anchor
[[div class="anchor"]] <— Set sidebox's sticky position
[[div class="sidebox"]]
Some sidebox text here.
[[/div]]
[[/div]]

Text where sidebox scroll past.

[[/div]] <— Set the end limit of the anchor

Example


Without the limit div, the anchor will be stickied across the entire page content once past its sticky position.

Note that the sidebox div minimizes on mobile, or screenwidth of 1290px and below.

The header font is Josefin Sans.

The body font is Roboto.

The monospace font is Fira Code.

Footnotes
+ Show theme code

theme
versione della pagina: 2, ultima modifica: 13 Dec 2022 18:23
Modifica Vota (0) Tag Cronologia File Stampa Strumenti del sito + Opzioni
Salvo diversa indicazione, il contenuto di questa pagina è sotto licenza Creative Commons Attribution-ShareAlike 3.0 License