Greystyle

black-highlighter-logo.svg
black-highlighter-logo.svg


Information

For those without the patience to indulge my metafictional inclinations Greystyle is a visual theme created by GreyveGreyve for use in his articles. It is essentially a light variant of WoedenazWoedenaz's Penumbra BHL with several personal stylistic changes.

Note that Greystyle is incompatible with Sigma-9 and Basalt.


Usage

Use the following code at the top of your page to apply this theme:

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


Examples

Bone--white-monochrome(252, 252, 252)
Blood--accent-color(140, 0, 0)
{$color3-name}{$color3-variable}{$color3-info}
{$color4-name}{$color4-variable}{$color4-info}
{$color5-name}{$color5-variable}{$color5-info}
{$color6-name}{$color6-variable}{$color6-info}
Smoke--light-gray-monochrome(238, 238, 238)
Ash--gray-monochrome(56, 49, 49)
{$subcolor3-name}{$subcolor3-variable}{$subcolor3-info}
{$subcolor4-name}{$subcolor4-variable}{$subcolor4-info}
{$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}
Iron--pale-gray-monochrome(196, 196, 196)
Rust--accent-color(140, 0, 0)
{$color3-name}{$color3-variable}{$color3-info}
{$color4-name}{$color4-variable}{$color4-info}
{$color5-name}{$color5-variable}{$color5-info}
{$color6-name}{$color6-variable}{$color6-info}
Charcoal--dark-gray-monochrome(38, 28, 28)
Ink--black-monochrome(14, 14, 14)
{$subcolor3-name}{$subcolor3-variable}{$subcolor3-info}
{$subcolor4-name}{$subcolor4-variable}{$subcolor4-info}
{$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}

The header and title fonts are Josefin Sans.
The body font is Oxygen.
The monospace font is Fira Code.

Use ----- to create horizontal rules.


foundation-logo.svg

This is an image block.

Use between one and six + at the start of the line to create headings.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

This is a tab1.

  • This
  • is
  • a
  • bulleted
  • list.

This is a blockquote.

Use > at the start of each line or [[div class="blockquote"]] to create these.

This is
a table


Custom

Use [[div class="floatbox"]] to create these.

Use [[span class="label"]] to create these.

Use [[span class="redaction"]] to create these.

Use [[span class="memetic"]] to create these.

Use [[div class="notation"]] to create these.

Use [[div class="jotting"]] to create these.

Use [[div class="document"]] to create these. It is not recommended to nest these inside other divs.

This is a grey table.
Use [[div class="table0"]] to create these.
This is a green table.
Use [[div class="table1"]] to create these.
This is a blue table.
Use [[div class="table2"]] to create these.
This is a yellow table.
Use [[div class="table3"]] to create these.
This is an orange table.
Use [[div class="table4"]] to create these.
This is a red table.
Use [[div class="table5"]] to create these.
This is a purple table.
Use [[div class="table6"]] to create these.

Use [[div class="overwatch-memo"]] to create these.

Use [[div class="overwatch-memo"]] to create these.

Use [[div class="raisa-memo"]] to create these.

Use the following code to create these:

[[div class="DIV CLASS shadow"]]
CONTENT
[[/div]]

Headline

Use the following code to create these:

[[div class="headline"]]
HEADLINE CONTENT
[[div class="DIV CLASS"]]
DIV CONTENT
[[/div]]
[[/div]]

Proposal Title

Subtitle

Date
Author
Department
Division


Use the following code to create these:

[[div class="DIV CLASS"]]
[[div class="proposal-logo#"]]
[[/div]]
[[div class="proposal-title"]]
TITLE CONTENT
[[/div]]
[[div class="proposal-subtitle"]]
SUBTITLE CONTENT
[[/div]]
[[div class="proposal-author"]]
AUTHOR CONTENT
[[/div]]
-----
PROPOSAL CONTENT
[[/div]]

proposal-logo1, proposal-logo2, and proposal-logo3 are available by default. Use the following code to change the logos, add a filter, or adjust sizing:

:root {
--proposal-logo-1: url("URL 1");
--proposal-logo2: url("URL 2");
--proposal1-logo3: url("URL 3");
--proposal-logo-filter: FILTER;
--proposal-logo-size: SIZE;
}

Transcript

Use the following code to create these:

[[div class="headline"]]
HEADLINE CONTENT
[[div class="DIV CLASS"]]
[[div class="flank"]]
FLANK CONTENT
[[/div]]
[[div class="transcript"]]
TRANSCRIPT CONTENT
[[/div]]
[[div class="flank"]]
FLANK CONTENT
[[/div]]
[[/div]]
[[/div]]

Begin Log

Speaker

Use [[div class="di"]] to create dialogue.

Speaker

Use [[div class="sp"]] to create speakers.

Speaker

Use [[div class="ac"]] to create action. It is recommended to use an empty [[div class="sp"]] before.

End Log

It is also a shameless self-advertisement.

Use [[div class="linkbox"]] to create them.

This is a light mode switcher. It contains content unique to light mode.

This is a dark mode switcher. It contains content unique to dark mode.

Use the following code to create these:

[[div class="mode1-changer"]]
LIGHT MODE CONTENT
[[/div]]
[[div class="mode2-changer"]]
DARK MODE CONTENT
[[/div]]


Code


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