Fuladh Theme

• 

  close

  Info

  ---

  X

  Rating with info module.

  ---

Info

This is an Amoni-Ram-themed theme, inspired by Amoni-Ram. It is intended to be used for articles featuring/centered around the world of Amoni-Ram, featured in ROUNDERHOUSE's Gold Proposal.

This theme comes with:

• baked-in dark mode and collapsed sidebar;
• elements taken from other themes: Generic Space Theme, Flopstyle DARK, HANSARP Theme, Centered Header BHL and Motherboard Theme of Wanderer's Library;
• wide page on desktop;
• a big header suited to my tastes.

---

Usage

This is a Black Highlighter based theme, meaning you will need to import the Black Highlighter theme as well in order to use this theme. To learn more, go here.

To import this theme, simply add the following to your page:

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

Examples

Image caption.

1. numbered list
2. list item
3. list item

• bulleted list
• list item
• list item

A horizontal rule can be created with 4 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.

---

An ornate horizontal rule can be created with the following code:

[[div class="fancyhr"]]
----
[[/div]]

---

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

Titles

First Title

Second Title

Third Title

Fourth Title

Fifth Title

Sixth Title

fake code selector{
fake code property: fake code value;
}

A link (A link you probably visited)

Blockquote.

Nested.

Blue blockquote.

[[div class="blockquote blue"]]

[[div class="fancyborder"]]

Show other divs

All the divs featured below come with a default variant and an optional blue variant.

[[div class="simple"]]

[[div class="simple blue"]]

[[div class="simple left"]]

[[div class="simple left blue"]]

[[div class="simple top"]]

[[div class="simple top blue"]]

[[div class="round"]]

[[div class="round blue"]]

Tabulator

This is¹ a tab view.

Tabulation

Hey look, more text here.

How quaint.

Long Tab

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

Empty tab with a slightly longer, longer name.

Empty Tab

Empty Tab

Empty Tab

Empty Tab

Hello.

Empty Tab

Footnotes

1. Footnote

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

Show source code

@import url('https://fonts.googleapis.com/css2?family=Iceberg&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Domine:wght@400..700&display=swap');
 
/* --------------- root --------------- */
:root{
    /* ===S-CSS-P INTEGRATION=== */
    --theme-base: "black-highlighter";
    --theme-id: "fuladh-theme";
    --theme-name: "Fuladh Theme";
 
/*fonts*/
    --header-iceberg: Iceberg;
    --header-fallback: Inter, "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --header-font: var(--header-iceberg), var(--header-fallback);
    --title-font: var(--header-iceberg), var(--header-fallback);
    --main-font: Domine;
 
/*colors*/
    --swatch-background: 57, 50, 50; /*bg color*/
    --dark-gray-monochrome: 43, 34, 34; /*everything color*/
    --bright-accent: 218, 165, 32; /*light yellow*/
    --medium-accent: var(--bright-accent); 
    --dark-accent: 126, 103, 53; /*dark yellow*/
    --swatch-secondary-color: var(--dark-gray-monochrome);
    --swatch-alternate-color: var(--dark-gray-monochrome);
    --black-monochrome: var(--dark-gray-monochrome);
    --swatch-menubg-extra-dark-color: var(--dark-gray-monochrome);
 
    --visited-link-color: 228, 153, 73;
    --link-color: 255, 212, 102;
    --newpage-color: 255, 102, 102;
    --ui-button-hover-txt: var(--dark-gray-monochrome);
 
    --swatch-text-light: 230, 230, 230; /*text color*/
    --swatch-text-general: var(--swatch-text-light);
 
    --blue: 75, 106, 110;
 
    --swatch-topmenu-bg-color: 38, 29, 29;
    --swatch-topmenu-border-color: var(--swatch-topmenu-bg-color);
    --background-gradient-color: 19, 12, 12; 
    --background-gradient-distance: 60rem;
 
/*header styling*/
    --logo-image: unset;
    --header-title: "Amoni-Ram";
    --header-subtitle: ;
    --swatch-headerh1-color: var(--bright-accent);
    --header-height-on-desktop: 25rem;
    --header-height-on-mobile: 20rem;
    --header-h1-font-size: calc(var(--base-font-size) * (80 / 15));
    --topbar-height-on-mobile: 2rem;
    --swatch-headerh1-color: var(--bright-accent);
 
/*misc*/
    --body-width-on-desktop: 60rem;
    --toggle-roundness: 0;
    --toggle-border-color: rgb(var(--medium-accent));
    --toggle-icon-color: rgb(var(--medium-accent));
    --fnColor: #ffd466; /*betterfootnotes*/
    --barColour: #daa520!important; /*Ayers info bar*/
 
/*little blockquote icon*/
    --gear-mask: url("data:image/svg+xml,%3Csvg style='height: 512px; width: 512px;' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cg class='' style='' transform='translate(0,-2)'%3E%3Cpath d='M234.875 18.78c-26.087 2.367-51.557 8.56-74.875 18.782 15.37 32.763 14.222 66.706-6.72 82.407-20.835 15.617-54.055 7.965-81.124-15.69-16.246 19.452-29.336 41.36-38.875 65.626 33.83 12.333 56.635 37.665 52.94 63.5-3.698 25.835-32.697 43.74-68.626 46.094 2.338 25.796 8.91 50.778 18.937 73.875 17.81-8.182 35.793-11.09 51.095-8.938 13.032 1.87 23.927 7.015 31.156 16.657 15.817 21.097 7.603 54.713-16.78 81.97 19.516 16.35 42.216 29.444 66.594 39.03 12.33-33.828 37.655-56.634 63.5-52.938 25.844 3.697 43.74 32.696 46.094 68.625 26.087-2.365 51.557-8.555 74.875-18.78-15.766-32.997-14.26-67.588 6.843-83.406 9.64-7.23 22.568-9.022 35.594-7.125 15.112 2.16 31.19 10.25 45.563 22.78 16.088-19.345 29.4-41.51 38.875-65.594-33.83-12.332-56.635-37.653-52.938-63.5 3.697-25.846 32.665-43.772 68.594-46.125-2.36-25.944-8.774-50.663-18.906-73.874-32.612 15.117-66.66 13.145-82.282-7.687-15.696-20.944-7.252-53.86 16.688-81-19.52-16.352-42.248-29.447-66.625-39.032-12.332 33.828-37.657 56.66-63.5 52.968-25.846-3.693-43.744-32.696-46.095-68.625zm21.656 95.126c79.626 0 144.376 64.752 144.376 144.375 0 79.626-64.75 144.376-144.375 144.376-79.624 0-144.374-64.75-144.374-144.375 0-79.624 64.75-144.374 144.375-144.374zm0 18.688c-69.524 0-125.686 56.162-125.686 125.687 0 69.526 56.162 125.69 125.687 125.69 69.526 0 125.69-56.164 125.69-125.69 0-69.522-56.164-125.686-125.69-125.686zm.033 15.125c61.094 0 110.625 49.53 110.625 110.624 0 61.095-49.53 110.625-110.625 110.625s-110.625-49.53-110.625-110.626c0-61.095 49.53-110.625 110.625-110.625z' fill='%23fff' fill-opacity='1'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}
/* ------------------------------------------------ */
 
/* --------------- header image --------------- */
/*Amoni-Ram picture*/
#extra-div-1 {
    height: var(--header-height-on-desktop);
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: url("https://scp-wiki.wdfiles.com/local--files/rounderhouse-gold-proposal/amoniram.png");
    background-size: auto 85dvh;
    background-repeat: no-repeat;
    background-position: center top;
}
 
/*spaces overlay that's there for fun and style*/
#extra-div-2 {
    height: var(--header-height-on-desktop);
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: url("https://scp-wiki.wdfiles.com/local--files/theme%3Afuladh-theme/spaces.jpg");
    background-size: 110dvw auto;
    background-repeat: no-repeat;
    background-position: center;
    mix-blend-mode: overlay;
    opacity: 0.5;
}
/* ------------------------------------------------ */
 
/* --------------- header styling --------------- */
#header {
    :is(h1, h2) {
        position: absolute;
        margin-top: 3rem;
        margin-left: calc((var(--header-height-on-desktop) - 2rem) * -1);
    }
}
 
/*text outline code from Centered Header BHL*/ 
#header h1 a,
#header h1 a::before,
#header h2 span,
#header h2 span::before {
    padding: 0;
    z-index: 0;
    display: block;
}
 
#header h1 {
    z-index: 1;
}
 
#header h1 a::before,
#header h1 a::after {
    content: var(--header-title);
}
 
#header h1 a::before  {
    color: rgb(var(--swatch-text-tertiary-color));
    z-index: -1;
    -webkit-text-stroke: 0.325rem rgb(var(--swatch-background));
}
 
#header h1 a::after {
    color: rgb(var(--swatch-headerh1-color));
    z-index: 1;
}
/* ------------------------------------------------ */
 
/* --------------- title styling --------------- */
#page-title,
.meta-title {
    font-family: var(--header-font);
    font-size: 3rem;
}
 
/*center title code from Centered Header BHL*/ 
#page-title::after,
.meta-title::after,
#page-title::before,
.meta-title::before {
    content: "";
    flex-grow: 1;
    height: 0.0625rem;
    background: rgb(var(--swatch-primary));
}
 
#page-title::before,
.meta-title::before {
    margin: auto 1.25rem auto auto;
}
/* ------------------------------------------------ */
 
/* --------------- links styling --------------- */
a:is(:hover, :active, :focus, :focus-within) {
        transition:
            color 0.35s var(--ease-in-out);
        background-color: rgb(var(--link-color));
        color: rgb(var(--dark-gray-monochrome));
        text-decoration: unset;
}
 
/*toc and license area styling, so they didn't act weird*/
#toc a:is(:hover,:active,:focus,:focus-within) {
    background: unset;
}
 
#license-area a:is(:hover, :active, :focus, :focus-within) {
    background: unset;
    color: rgb(255, 212, 102);
}
/* ------------------------------------------------ */
 
/* ---------------  small edits that are suited to my tastes --------------- */
/*scrollbar*/
html,
body {
    scrollbar-color: rgb(var(--bright-accent)) rgb(var(--black-monochrome));
} 
 
/*page content font only*/
#page-content {
    font-family: var(--main-font), var(--body-font);
}
 
/*toc modification*/
.title,
#toc-action-bar {
    font-size: 1.0625em;
}
#toc-list a {
    font-size: var(--base-font-size);
}
 
/*giving tags a bigger font size*/
#main-content .page-tags {
    font-size: var(--base-font-size);
}
.page-tags span a {
    font-size: var(--base-font-size);
}
 
/*code block colors*/
 
.code pre span.hl-code{
    filter: none;
}
 
.code pre span.hl-default {
    filter: none;
}
 
.code pre span.hl-brackets {
    filter: none;
}
 
/*giving p and li a margin*/
p {
    margin-bottom: 1.5rem;
}
 
li:last-child {
    margin-bottom: 1.5rem;
}
 
/*and taking it away from everything else manually because :not refused to work for me*/
#breadcrumbs, .pseudocrumbs {
    margin-bottom: unset;
}
 
div.page-rate-widget-box,
#page-content div.rate-box-with-credit-button {
    margin: 0 0 0.75rem;
}
 
#page-title, .meta-title {
    margin-bottom: 0.5em;
}
 
.creditRate > li {
    margin-bottom:10px;
}
 
/*hr styling, from Aesthetic Theme*/
hr {
    border-top: none;
    position: relative;
    height: 0.35rem;
    background: rgba(0, 0, 0, 0);
    display: flex;
}
 
hr::before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    border-top: none;
    width: 100%;
    height: 0.125rem;
    background: linear-gradient(10deg, rgba(var(--bright-accent), 0.15) 0%, rgba(var(--medium-accent), 1) 50%, rgba(var(--bright-accent), 0.15) 100%);
    background-position: center center;
}
 
/*table styling*/
#page-content .wiki-content-table tr td {
    background-color: rgba(var(--black-monochrome), 0.8);
    border: 1px solid rgb(--bright-accent);
    font-size: var(--base-font-size);
}
/* ------------------------------------------------ */
 
/* --------------- alternative blockquote styles --------------- */
.simple {
    margin: 1.5rem auto;
    padding: 0.5rem 2rem;
    border: 0;
    background-color: rgba(var(--black-monochrome), 0.8);
    box-shadow: 0 0 0.5rem rgb(var(--black-monochrome));
}
 
.simple.blue {
    background-color: rgba(var(--blue), 0.3);
}
 
.simple.left {
    padding: 1rem;
    border: 0;
    border-left: 7px solid rgb(var(--medium-accent));
}
 
.simple.left.blue {
    background-color: rgba(var(--blue), 0.3);
}
 
.simple.top {
    padding: 1rem;
    border: 0;
    border-top: 7px solid rgb(var(--medium-accent));
}
 
.simple.top.blue {
    background-color: rgba(var(--blue), 0.3);
}
 
.round {
    background-color: rgba(var(--black-monochrome), 0.8);
    margin: 1.5rem auto;
    padding: 1.325rem;
    border: none;
    border-radius: 1.5rem;
    box-shadow: 0 0 0.5rem rgb(var(--black-monochrome));
}
 
.round.blue {
    background-color: rgba(var(--blue), 0.3);
}
/* ------------------------------------------------ */
 
/* --------------- fancyhr and fancyborder from Wanderer's Library --------------- */
.fancyborder {
    box-sizing: border-box;
    padding: 2vw;
    border: 2vw solid rgba(0, 0, 0, 0.5);
    border-image: url("https://scp-wiki.wdfiles.com/local--files/theme%3Afuladh-theme/cyberfancy_border.png") 600 round;
    border-image-width: 6;
    margin: 1.5rem auto;
}
 
#main-content .fancyhr hr {
    border-top: 2vw solid transparent;
    border-image-source: url("https://scp-wiki.wdfiles.com/local--files/theme%3Afuladh-theme/cyberfancy_hr.png");
    border-image-repeat: round round;
    border-image-slice: 80 500 80 500 fill;
    border-image-width: 10em 80em 10em 80em;
    filter: opacity(80%);
    margin: 1.5rem auto;
}
/* ------------------------------------------------ */
 
/* --------------- betterfootnotes styling --------------- */
.fnnum:hover::after { color: rgb(43, 34, 34); }
 
.fncon {
    background: rgb(43, 34, 34);
    border: .125rem solid rgb(211, 166, 71);
}
 
.fncon::before {
    color: rgb(43, 34, 34);
}
/* ------------------------------------------------ */
 
/* --------------- Vertical tabs from HANSARP Theme --------------- */
.yui-navset.yui-navset-top {
    display: grid;
    grid-template: "tabs content";
    grid-template-columns: 12rem minmax(0,1fr);
    margin: 1.5rem auto;
}
 
.yui-navset.yui-navset-top>.yui-nav {
    grid-area: tabs;
    display: flex;
    align-items: stretch;
    align-self: flex-start;
    flex-direction: column;
    position: static;
}
 
.yui-navset.yui-navset-top>.yui-nav>li {
    flex-grow: 0;
}
 
.yui-navset .yui-nav .selected a em,
.yui-navset .yui-nav a em {
    white-space: break-spaces;
}
 
.yui-navset.yui-navset-top>.yui-content {
    grid-area: content;
    border: none;
    border-left: solid 0.35rem rgb(var(--swatch-primary));
    background: rgba(var(--black-monochrome), 0.5);
    background: linear-gradient(180deg, rgba(var(--black-monochrome) ,1) 0%, rgba(var(--black-monochrome) ,0.5) 50%, rgba(var(--black-monochrome) ,0.1) 100%);
}
 
#main-content {
    --tabs-selected-txt: var(--dark-gray-monochrome);
    --tabs-hover-txt: var(--dark-gray-monochrome);
}
/* ------------------------------------------------ */
 
/* --------------- FANCY COLLAPSIBLES from Flopstyle: DARK --------------- */
/* Base */
 .collapsible-block-folded,
 .collapsible-block-unfolded-link{
     margin: 2rem auto 1em auto;
     padding: .53rem 1rem;
 
     background-color: rgb(var(--black-monochrome));
     transition: all .2s cubic-bezier(.77, 0, .18, 1);
 
     text-align: center;
}
 
 .collapsible-block-link{
     font: 1.25rem/1.5;
     letter-spacing: 1px;
 
     white-space: normal;
}
 @media (max-width: 767px){
     .collapsible-block-link{
          font-size: 100%;
    }
}
 
/* Pseudo-elements */
 
 .collapsible-block-link::before{
     content: "▷ ";
}
 
 .collapsible-block-unfolded .collapsible-block-link::before,
 .collapsible-block-unfolded > *:nth-child(3) .collapsible-block-link::before{
     content: "▽ "
}
 
 .collapsible-block-folded:hover,
 .collapsible-block-unfolded-link:hover{
     background-color: rgb(var(--dark-accent));
     transition: all .2s cubic-bezier(.77, 0, .18, 1);
}
 .collapsible-block-link:hover{
     padding: .067rem !important;
 
     color: var(--black-monochrome);
     background-color: unset;
     border-bottom: thin solid var(--black-monochrome);
     transition: all .2s cubic-bezier(.77, 0, .18, 1);
}
 
/* Licensebox Collapsible */
 .licensebox .collapsible-block-content {
     text-align: center;
}
 
 .licensebox blockquote,
 .licensebox div.blockquote {
     text-align: left;
}
/* ------------------------------------------------ */
 
/* --------------- blockquote style from Generic Space Theme --------------- */
 
blockquote, div.blockquote {
    background-color: rgba(var(--black-monochrome), 0.8)!important;
    border: none;
    margin: 1rem!important;
    padding: 0.25rem 1.325rem 0.15rem 1.325rem;
}
 
blockquote, div.blockquote {
    position: relative;
    min-height: 2rem;
}
:where(blockquote, div.blockquote)::before {
    content: "";
    position: absolute;
    top: 0; 
    left: 0;
    box-sizing: border-box;
    width: 100%; 
    height: 100%;
    border: solid 0.1rem rgb(var(--medium-accent));
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 1.425rem, 1.125rem 0);
    pointer-events: none;
}
:where(blockquote, div.blockquote)::after {
    content: "";
    position: absolute;
    top: 0; 
    left: 0;
    box-sizing: border-box;
    width: 2rem; 
    height: 2rem;
    background-color: rgb(var(--medium-accent));
    -webkit-mask-image: var(--gear-mask);
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-image: var(--gear-mask);
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    transform: translate(-50%, -42.5%);
}
 
div.blockquote.blue {
    background-color: rgba(var(--blue), 0.3)!important;
}
/* ------------------------------------------------ */
 
/* --------------- big screen sizing --------------- */
@media only screen and (min-width: 1580px) {
 
:root{
    --header-height-on-desktop: 35rem;
}
 
#extra-div-1 {
    background-size: 110dvw auto;
    background-position: center;
}
 
#extra-div-2 {
    background-size: 110dvw auto;
}
}
/* ------------------------------------------------ */
 
/* --------------- between desktop and mobile --------------- */
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
 
:root{
    --header-height-on-mobile: 25rem;
    --header-h1-font-size: calc(var(--base-font-size) * (80 / 15));
}
 
#header {
    :is(h1, h2) {
        margin-top: 1rem;
    }
}
 
#extra-div-1 {
    height: var(--header-height-on-mobile);
    background-size: 90rem auto;
    background-repeat: no-repeat;
    background-position: center top 55%;
}
 
}
/* ------------------------------------------------ */
 
/* --------------- mobile sizing (incl. landscape mode) --------------- */
@media only screen and (max-width: 767.98px) {
:root{
    --header-height-on-desktop: 20rem;
    --header-h1-font-size: calc(var(--base-font-size) * (58 / 15));
}
 
#header {
    :is(h1, h2) {
        margin-top: 1.5rem;
    }
}
 
#extra-div-1 {
    height: var(--header-height-on-mobile);
    background-size: 60rem auto;
    background-position: center;
}
 
#extra-div-2 {
    height: var(--header-height-on-mobile);
    background-size: auto 80dvh;
    background-position: center;
}
 
/*h1 to h6 size adjust*/
h1 {
    font-size: 2.5em;
}
 
h2 {
    font-size: 2.25em;
}
 
h3 {
    font-size: 2.1875em;
}
 
h4 {
    font-size: 2em;
}
 
h5 {
    font-size: 1.75em;
}
 
h6 {
    font-size: 1.5em;
}
 
/*returning tabs to horizontal*/
.yui-navset.yui-navset-top {
    display: grid;
    grid-template: "tabs" "content";
    grid-template-rows: minmax(0,1fr);
    margin: 1.5rem auto;
}
 
.yui-navset.yui-navset-top>.yui-nav {
    align-items: stretch;
    align-self: flex-start;
    flex-direction: row;
    justify-content: center;
    position: static;
}
 
.yui-navset.yui-navset-top>.yui-nav>li {
    flex-grow: 1;
}
 
.yui-navset .yui-nav .selected a em,
.yui-navset .yui-nav a em {
    white-space: break-spaces;
}
 
.yui-navset.yui-navset-top>.yui-content {
    border: none;
}
}
 
@media only screen and (max-width: 767.98px) and (orientation: landscape) {
#extra-div-2 {
    height: var(--header-height-on-mobile);
    background-size: 110dvw auto;
    background-position: center;
}
}
/* ------------------------------------------------ */

‡ Licensing / Citation

Cite this page as:

"Fuladh Theme" by Miss Lapis, from the SCP Wiki. Source: https://scpwiki.com/theme:fuladh-theme. Licensed under CC BY-SA.

For information on how to use this component, see the License Box component. To read about licensing policy, see the Licensing Guide.

Filename: amoniram.png
Author: stephlynch
License: CC BY SA 3.0
Source Link: SCP Foundation Wiki

Filename: spaces.jpg
License: CC BY-SA 3.0

Image is a composite that incorporates the following image:

Filename: Dragonfish600.jpg
Author: NASA/JPL-Caltech/Univ. of Toronto
License: Public Domain
Source Link: Wikimedia Commons

Filename: --gear-mask
Name: Cog icon
Author: Lorc
License: CC BY 3.0
Source Link: Game Icons

Filename: image.png
Author: Agente Shuffle
License: CC BY 3.0

Image is a composite that incorporates the following image

Filename: SPChu.png
Author: SunnyClockwork
License: CC BY 3.0
Source Link: SCP Foundation Wiki

Filename: cyberfancy_border.png, cyberfancy_hr.png
Name: cyberfancy border final.png, fancyhr cyber final.png
Author: LAN 2D
License: CC BY SA 3.0
Source Link: The Wanderers' Library
Additional Notes: Color-corrected by Miss Lapis

What is this?

Well… it's a dark theme for BHL.
If that's what you're into.

Usage

On any wiki:

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

---

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}

Examples

SCP Foundation Logo

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

First Title

Second Title

Third Title

Fourth Title

Fifth Title

Sixth Title

Tabulator

This is a tab view.

Tabulation

Hey look, more text here.

How quaint.

Long Tab

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This empty tab has a really long name for some odd reason. I wonder why? It is very strange.

Empty Tab

Empty Tab

Empty Tab

Empty Tab

Empty Tab

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

The body font is Raleway.
The header and title font is Poppins.
The monospace font is Recursive.

+ Show theme code

@supports(display:grid) {
    :root {
        /* S-CSS-P Integration */
        /* If you're making a new CSS theme, please include the following three variables at minimum. */
        --theme-base: "black-highlighte";
        /* must be either "nuscp" or "sigma9" */
        --theme-id: "Extra-BHL-theme";
        /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
        --theme-name: "Extra Black Highlighter Theme";
        /* set this to your theme's full name */
        /* New Vars */
        --swatch-menubg-extra-dark-color: 30, 30, 32;
 
        /* Old Vars */
        --black-monochrome: 20, 22, 24;
        --light-pale-gray-monochrome: 250, 250, 250;
        --bright-accent: var(--pale-accent);
        /* Primary Theme Colors */
        --swatch-background: var(--swatch-menubg-black-color);
        /* Background and Header Colors */
        --background-gradient-color: 10, 10, 10;
        --header-gradient-color-bottom: var(--medium-accent);
        --header-gradient-color-middle: var(--swatch-menubg-black-color);
        --header-gradient-color-top: var(--swatch-menubg-black-color);
        /* Primary Text Colors */
        --swatch-text-light: var(--light-pale-gray-monochrome);
        --swatch-text-general: var(--swatch-text-light);
        /* Primary Menu Colors */
        --swatch-menubg-color: var(--swatch-menubg-black-color);
        --swatch-menutxt-general-color: var(--swatch-menutxt-light-color);
        /* Colors for Secondary & Tertiary items like Blockquote and YUI Tabs */
        --swatch-secondary-color: var(--swatch-menubg-dark-color);
        --swatch-tertiary-color: var(--swatch-menubg-medium-dark-color);
        --swatch-alternate-color: var(--swatch-primary);
 
        /* Text Colors for Secondary & Tertiary items like Sidebar Headers and Top-Bar Menu Text */
        --swatch-text-secondary-color: var(--swatch-menutxt-light-color);
        --swatch-text-tertiary-color: var(--swatch-menutxt-light-color);
 
        /* Primary Header Colors */
        --swatch-topmenu-border-color: var(--swatch-menubg-black-color);
        --swatch-topmenu-bg-color: var(--swatch-menubg-extra-dark-color);
 
        --rating-module-text-color: var(--swatch-text-general);
        --rating-module-button-color: var(--swatch-text-general);
        --rating-module-button-cancel-color: 100, 100, 100;
 
        --ui-wght: 500;
        --ui-hvr-wght: 600;
 
        --gradient-header: linear-gradient(to bottom,
                rgb(var(--header-gradient-color-bottom)) 0%,
                rgb(var(--header-gradient-color-middle)) 90%,
                rgb(var(--header-gradient-color-top)) 100%);
 
        --diagonal-stripes: repeating-linear-gradient(45deg,
                hsla(0, 0%, 100%, 0),
                hsla(0, 0%, 100%, 0) 0.25vh,
                rgba(var(--swatch-menubg-extra-dark-color), 0.1) 0.35vh,
                rgba(var(--swatch-menubg-extra-dark-color), 0.2) 0.5vh);
    }
 
    #main-content {
        --pagetags-title-text: var(--swatch-text-secondary-color);
    }
 
    #header {
        --search-icon-color: var(--swatch-text-tertiary-color);
    }
 
    #top-bar {
        /* ===DROPDOWN MENU=== */
        --dropdown-bg-color: var(--swatch-menubg-extra-dark-color), 0.9;
    }
 
    ::-moz-selection {
        background: rgb(var(--swatch-primary-darkest));
    }
 
    ::selection {
        background: rgb(var(--swatch-primary-darkest));
    }
 
    body {
        -webkit-font-smoothing: subpixel-antialiased;
        -moz-osx-font-smoothing: auto;
    }
 
    #search-top-box-input {
        background-color: rgb(var(--swatch-menubg-extra-dark-color));
    }
 
    #account-options {
        background: var(--gradient-header);
    }
 
    #login-status {
        color: rgba(var(--swatch-menutxt-light-color), 0.5);
    }
 
    #login-status ul a {
        color: rgb(var(--swatch-menutxt-light-color));
    }
 
    span.printuser {
        color: rgb(var(--swatch-menutxt-light-color));
    }
 
    .page-rate-widget-box {
        background: linear-gradient(to bottom,
                rgba(var(--header-gradient-color-bottom), 0.5) 0%,
                rgba(var(--header-gradient-color-middle), 0.15) 90%,
                rgba(var(--header-gradient-color-top), 0.15) 100%);
        border: 0.0625rem solid rgba(var(--swatch-menubg-medium-color), 0.25);
    }
 
    #top-bar div.mobile-top-bar>ul>li>ul>li>a,
    #top-bar div.top-bar>ul>li>ul>li>a {
        box-shadow: inset 0 0 0 0.0625rem rgba(var(--swatch-menubg-medium-color), 0.15);
    }
 
    #interwiki {
        background-color: transparent;
    }
 
    #interwiki .heading p,
    #side-bar .heading p,
    #side-bar .collapsible-block .collapsible-block-link {
        color: rgb(var(--swatch-menutxt-light-color));
    }
 
    blockquote,
    .blockquote,
    .code {
        --swatch-border-color: var(--swatch-menubg-light-color);
        border-color: rgba(var(--swatch-border-color), 0.25);
    }
 
    .yui-navset .yui-nav,
    .yui-navset .yui-navset-top .yui-nav {
        --box-shadow: rgb(var(--swatch-primary-darkest));
        border-color: rgb(var(--swatch-primary-darkest));
    }
 
    .yui-navset .yui-nav li,
    .yui-navset .yui-navset-top .yui-nav li {
        --box-shadow: rgb(var(--swatch-primary-darkest));
    }
 
    .yui-navset .yui-nav a,
    .yui-navset .yui-navset-top .yui-nav a {
        background-color: rgb(var(--swatch-menubg-extra-dark-color));
        color: rgb(var(--swatch-text-general));
    }
 
    .yui-navset .yui-nav .selected,
    .yui-navset .yui-navset-top .yui-nav .selected {
        background-color: rgb(var(--swatch-primary-darkest));
    }
 
    table.wiki-content-table th {
        background: rgb(var(--swatch-secondary-color));
    }
 
    table.wiki-content-table th,
    table.wiki-content-table tr {
        border: 0.0625rem solid rgba(var(--swatch-menubg-medium-color), 0.25) !important;
    }
 
    table.wiki-content-table td {
        border: 0.0625rem solid rgba(var(--swatch-menubg-light-color), 0.25) !important;
    }
 
    textarea,
    input.text,
    input.checkbox,
    div.note,
    #lock-info {
        border: 0.0625rem solid rgba(var(--swatch-menubg-light-color), 0.25);
        background-color: rgb(var(--swatch-menubg-extra-dark-color));
        color: rgb(var(--swatch-text-light));
    }
 
    .code pre span[class*="hl-"] {
        -webkit-filter: invert(1) hue-rotate(180deg);
        filter: invert(1) hue-rotate(180deg);
    }
 
    .owindow .modal-body img {
        background-color: transparent !important;
    }
 
    .hovertip {
        border: 0.0625rem solid rgba(var(--swatch-menubg-light-color), 0.25);
        background-color: rgb(var(--swatch-menubg-extra-dark-color)) !important;
        color: rgb(var(--swatch-text-light)) !important;
    }
 
    #main-content .page-tags span a:not([href^="/system:page-tags/tag/_"]), 
    #main-content .page-tags span a:visited:not([href^="/system:page-tags/tag/_"]) {
        color: rgb(var(--swatch-primary-secondary-color));
    }
 
    #footer,
    #license-area {
        --link-color: var(--swatch-text-tertiary-color);
        --hover-link-color: var(--swatch-text-tertiary-color);
        --visited-link-color: var(--swatch-text-tertiary-color);
        color: rgb(var(--swatch-text-general));
    }
 
    div[id*="page-options-bottom"]>a::after {
        background-color: rgb(var(--swatch-text-secondary-color));
    }
 
    /* ===BUTTONS=== */
    div[id*="page-options-bottom"]>a::after {
        background-color: rgb(var(--swatch-text-tertiary-color));
    }
}