Crocker Theme

Theme Colors

Rose--gray-monochrome206,157,144)

Froly--bright-accent(239,109,138)

{$color3-name}{$color3-variable}{$color3-info}

{$color4-name}{$color4-variable}{$color4-info}

{$color5-name}{$color5-variable}{$color5-info}

{$color6-name}{$color6-variable}{$color6-info}

Tacha--light-gray-monochrome(213,194,96)

Barley Corn--dark-gray-monochrome(162,149,85)

Dune--black-monochrome(39,37,32)

Chestnut--medium-accent(188,67,69)

Falu Red--dark-accent(129,24,21)

{$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}

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.¹

On any wiki:²

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

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

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.

Empty Tab

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 and header font is Source Sans Pro. ěščřžýáíéůú ĚŠČŘŽÝÁÍÉŮÚ ěščřžýáíéůú ĚŠČŘŽÝÁÍÉŮÚ
The Title font is Merriweather. ěščřžýáíéůú ĚŠČŘŽÝÁÍÉŮÚ ěščřžýáíéůú ĚŠČŘŽÝÁÍÉŮÚ
The Title font is Merriweather. ěščřžýáíéůú ĚŠČŘŽÝÁÍÉŮÚ ěščřžýáíéůú ĚŠČŘŽÝÁÍÉŮÚ
The monospace font is Roboto Mono. ěščřžýáíéůú ĚŠČŘŽÝÁÍÉŮÚ ěščřžýáíéůú ĚŠČŘŽÝÁÍÉŮÚ

Footnotes

1. Check out how links actually get highlighted!

2. Some snazzy lined paper look on code and footnotes.

---

+ Show theme code

@import url("https://use.typekit.net/tax7dna.css");
 
@supports(display: grid) {
    :root:lang(cs) {
     /* 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: "crocker-theme";
     /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
     --theme-name: "Crocker Theme";
     /* set this to your theme's full name */
 
     /* Header */
     --logo-image: url("https://scp-wiki.wdfiles.com/local--files/theme%3Acrocker-theme/crocker_logo.png");
        --header-title: "Oblast-81";
        --header-subtitle: "Komunitní Kuchařka";
 
     /* Typefaces */
     --body-font: garamond-premier-pro, serif;
     --header-font: aragon, sans-serif;
     --title-font: hwt-van-lanen, sans-serif;
 
     /* Standard Colors */
     --white-monochrome: 249, 247, 236;
     /* off-blue white */
     --pale-gray-monochrome: 243, 240, 218;
     /* v light blue for blockquotes and stuff */
     --light-gray-monochrome: 213, 194, 96;
     /* light accent blue for login status */
     --gray-monochrome: 206, 157, 144;
     /* blue */
     --dark-gray-monochrome: 162, 149, 85;
     /* deep blue */
     --black-monochrome: 39, 37, 32;
     /* off-blue black */
     --bright-accent: 239, 109, 138;
     /* bright yellow */
     --medium-accent: 188, 67, 69;
     /* medium red */
     --dark-accent: 129, 24, 21;
     /* deep red */
     --newpage-color: var(--bright-accent);
     /* pale orange */
 
     /* Primary Theme Colors */
     --swatch-background: var(--white-monochrome);
     --background-gradient-color: var(--gray-monochrome);
     --swatch-primary: var(--bright-accent);
     --swatch-primary-darker: var(--medium-accent);
     --swatch-primary-darkest: var(--dark-accent);
     /* Primary Text Colors */
     --swatch-text-dark: var(--black-monochrome);
     --swatch-text-light: var(--white-monochrome);
     --swatch-important-text: var(--bright-accent);
 
     /* Primary Menu Colors */
     --swatch-menubg-color: var(--white-monochrome);
     --swatch-menubg-light-color: var(--pale-gray-monochrome);
     --swatch-menubg-medium-color: var(--light-gray-monochrome);
     --swatch-menubg-medium-dark-color: var(--gray-monochrome);
     --swatch-menubg-dark-color: var(--dark-gray-monochrome);
     --swatch-menubg-black-color: var(--black-monochrome);
     --swatch-menubg-hover-color: var(--black-monochrome);
     --swatch-menutxt-dark-color: var(--black-monochrome);
     --swatch-menutxt-light-color: var(--white-monochrome);
     --swatch-border-color: var(--black-monochrome);
     /* Primary Header Colors */
     --header-gradient-color-bottom: var(--bright-accent);
     --header-gradient-color-middle: var(--medium-accent);
     --header-gradient-color-top: var(--medium-accent);
     --swatch-headerh1-color: var(--dark-accent);
     --swatch-headerh2-color: var(--black-monochrome);
     --swatch-topmenu-border-color: var(--black-monochrome);
     --swatch-topmenu-bg-color: var(--pale-gray-monochrome);
 
     --link-color: var(--dark-accent);
     --visited-link-color: var(--medium-accent);
     --hover-link-color: var(--medium-accent);
 
     --rating-module-button-color: var(--black-monochrome);
     --rating-module-text-color: var(--swatch-menutxt-dark-color);
 
     /* Header Gradients */
     --gradient-header: linear-gradient(35deg,
     rgb(var(--header-gradient-color-bottom)) 0,
     rgb(var(--header-gradient-color-middle)) 90%,
     rgb(var(--header-gradient-color-top)) 100%);
 
     --diagonal-stripes: inherit;
 
     /* header measurements */
     --header-height-on-desktop: 12.25rem;
     --header-height-on-mobile: 12.25rem;
     --topbar-height-on-desktop: 1.875rem;
     --topbar-height-on-mobile: 2.5rem;
 
     --base-font-size: 1rem;
     --sidebar-width-on-desktop: calc(var(--base-font-size) * 16);
    }
 
    ::-webkit-scrollbar,
    #side-bar:hover::-webkit-scrollbar {
     background-color: rgba(var(--pale-gray-monochrome), 1);
    }
 
    ::-webkit-scrollbar-thumb,
    #side-bar:hover::-webkit-scrollbar-thumb {
     background-color: rgba(var(--dark-gray-monochrome), 1);
    }
 
    ::-moz-selection {
     background: rgba(var(--bright-accent), 0.5);
    }
 
    ::selection {
     background: rgba(var(--bright-accent), 0.5);
    }
 
    html {
     background: white;
    }
 
    #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/theme:crocker-theme/crocker-header-bg.png");
    }
 
    html,
    body {
     font-feature-settings: "onum"0;
     font-variant-numeric: tabular-nums;
     scrollbar-color: rgb(var(--dark-gray-monochrome)) rgb(var(--pale-gray-monochrome));
    }
 
    #page-content span>a:not([onclick*="Reference"]),
    #page-content div:not([id*="wiki-tabview"]) a:not([onclick*="Reference"]) {
     transition: box-shadow 200ms cubic-bezier(0.4, 0.0, 0.2, 1);
     box-shadow: inset 0 0 0 0.01px rgba(var(--light-gray-monochrome), 1);
     -webkit-box-decoration-break: clone;
     box-decoration-break: clone;
    }
 
    #search-top-box::before {
     background-color: rgb(var(--swatch-primary-darkest));
    }
 
    #search-top-box-input {
     background-color: rgb(var(--pale-gray-monochrome));
    }
 
    #login-status {
     color: rgb(var(--dark-accent));
    }
 
    #login-status a {
     color: rgb(var(--swatch-text-dark)) !important;
    }
 
    #search-top-box input.empty {
     color: rgb(var(--dark-accent));
    }
 
    #main-content {
     margin-top: 2.1em;
    }
 
    #page-content span>a:not([onclick*="Reference"]):hover,
    #page-content div:not([id*="wiki-tabview"]) a:not([onclick*="Reference"]):hover,
    #page-content span>a:not([onclick*="Reference"]):active,
    #page-content div:not([id*="wiki-tabview"]) a:not([onclick*="Reference"]):active {
     transition: box-shadow 1000ms cubic-bezier(0.4, 0.0, 0.2, 1);
     box-shadow: inset 100vw 0 0 0 rgba(var(--light-gray-monochrome), 0.75);
     text-decoration: none;
    }
 
    #page-content span>a:not([onclick*="Reference"]):focus-within,
    #page-content div:not([id*="wiki-tabview"]) a:not([onclick*="Reference"]):focus-within {
     transition: box-shadow 1000ms cubic-bezier(0.4, 0.0, 0.2, 1);
     box-shadow: inset 100vw 0 0 0 rgba(var(--light-gray-monochrome), 0.75);
     text-decoration: none;
    }
 
    hr {
     background: rgb(0, 0, 0, 0);
     border: 0;
     height: 0em;
     width: 90%;
     position: relative;
     margin: 1.875rem auto 2.175rem;
    }
 
    #page-title::after,
    hr::after {
     content: " ";
     height: 0.35rem;
     width: 100%;
     position: absolute;
     margin: 0 auto;
     background: rgb(var(--white-monochrome));
     border-top: 0.125rem dashed rgb(var(--gray-monochrome));
     border-bottom: 0.125rem dashed rgb(var(--gray-monochrome));
     left: 0;
     top: 50%;
     box-sizing: border-box;
    }
 
    #header {
     --swatch-headerh2-color: var(--swatch-primary);
     -webkit-filter: initial;
     filter: initial;
    }
 
    #header h1,
    #header h1 a,
    #header h2,
    #header h2 span {
     display: flex;
     align-items: center;
    }
 
    #header h1 a {
     margin-left: 12rem;
     margin-top: -1em;
     position: relative;
     width: auto;
     display: flex;
     align-items: center;
     justify-content: center;
     top: 0;
    }
 
    #header h1 a::before {
     --text-shadow: rgb(var(--swatch-text-light));
     font-size: clamp(3rem, 24vw, 7rem);
     color: rgb(var(--dark-accent));
    }
 
    #header h2,
    #header h2 span {
     margin-left: 6.5rem;
     height: var(--header-height-on-desktop);
     justify-content: flex-start;
     font-family: var(--title-font);
     margin-top: 2.25rem;
    }
 
    #header h2 span {
     line-height: 1.15;
     font-size: 1.1rem;
     margin-top: 0rem;
    }
 
    #header h2 span::before {
     --wght: 600;
     font-weight: 600;
     text-shadow: 0.125rem 0.125rem 0 rgb(var(--white-monochrome));
    }
 
    #login-status span.printuser {
     color: rgb(var(--swatch-text-tertiary-color));
    }
 
    #top-bar {
     --wght: 900;
     font-size: var(--base-font-size);
     font-weight: 900;
    }
 
    #side-bar:hover {
     background: rgb(var(--white-monochrome));
    }
 
    #top-bar div[class*="top-bar"]>ul>li:hover {
     background-color: rgb(var(--gray-monochrome));
    }
 
    #top-bar div[class*="top-bar"]>ul>li>a {
     color: rgb(var(--swatch-menutxt-dark-color)) !important;
    }
 
    #top-bar div[class*="top-bar"]>ul>li>a::before,
    #top-bar div[class*="top-bar"]>ul>li>a::after {
     background-color: rgb(var(--dark-accent));
    }
 
    #top-bar div[class*="top-bar"]>ul>li:hover>a,
    #top-bar div[class*="top-bar"]>ul>li:hover>a {
     color: rgb(var(--white-monochrome)) !important;
    }
 
    #top-bar div[class*="top-bar"]>ul>li>ul {
     background-color: rgb(var(--dark-gray-monochrome));
     background-image: var(--gradient-header);
     box-shadow: inherit;
    }
 
    #top-bar div[class*="top-bar"]>ul>li>ul,
    #top-bar div[class*="top-bar"]>ul>li>ul>li {
     border-color: rgb(var(--light-gray-monochrome));
    }
 
    #top-bar div[class*="top-bar"]>ul>li>ul>li>a {
     --wght: 600;
     font-weight: 600;
    }
 
    #top-bar div[class*="top-bar"]>ul>li>ul>li>a::before,
    #top-bar div[class*="top-bar"]>ul>li>ul>li>ul>li>a::before,
    #top-bar div[class*="top-bar"]>ul>li>ul>li>a:hover::before {
     background-color: rgb(var(--dark-accent));
    }
 
    #side-bar:hover {
     background: rgb(var(--white-monochrome));
    }
 
    #side-bar .heading,
    #side-bar .side-block>.collapsible-block:nth-child(1) .collapsible-block-folded {
     background: rgba(var(--pale-gray-monochrome), 0.5);
     font-family: var(--title-font);
     min-height: 1.5rem;
    }
 
    #side-bar .heading p,
    #side-bar .side-block>.collapsible-block .collapsible-block-link {
     --wght: 900;
     text-shadow: inherit;
     color: rgb(var(--dark-gray-monochrome));
     font-weight: 900;
     letter-spacing: 0.15em;
     font-size: calc(var(--base-font-size) * 0.95);
     height: 1.5rem;
     display: flex;
     align-items: center;
     justify-content: center;
    }
 
    #side-bar div.menu-item .sub-text {
     color: rgb(var(--medium-accent));
    }
 
    #page-title {
     font-family: var(--title-font);
     position: relative;
     border: 0px;
     text-align: center;
    }
 
    #page-title:before {
     top: calc(100% - 0.75rem);
    }
 
    #page-title:after {
     left: 50%;
     transform: translateX(-50%);
     top: calc(100%);
     max-width: 43.375rem;
    }
 
    #content-wrap h1,
    #content-wrap h2,
    #content-wrap h3,
    #content-wrap h4,
    #content-wrap h5,
    #content-wrap #page-title {
     --wght: 700;
     line-height: 1.25;
     font-weight: 700;
    }
 
    #content-wrap h1,
    #content-wrap #page-title {
     font-size: 2.45rem;
    }
 
    #content-wrap h2 {
     font-size: 1.7rem;
    }
 
    #content-wrap h3 {
     font-size: 1.25rem;
    }
 
    #content-wrap h4 {
     font-size: 1rem;
    }
 
    #content-wrap h5 {
     font-size: .9rem;
    }
 
    #content-wrap *>#page-title,
    #content-wrap *>h1:first-of-type,
    #content-wrap *>h2:first-of-type,
    #content-wrap *>h3:first-of-type,
    #content-wrap *>h4:first-of-type,
    #content-wrap *>h5:first-of-type,
    #content-wrap *>h6:first-of-type {
     margin-bottom: 0;
     margin-top: 0;
    }
 
    #content-wrap *+h1,
    #content-wrap *+h2,
    #content-wrap *+h3,
    #content-wrap *+h4,
    #content-wrap *+h5,
    #content-wrap *+h6 {
     margin-top: 1.5em;
    }
 
    #content-wrap #page-title+*,
    #content-wrap h1+*,
    #content-wrap h2+*,
    #content-wrap h3+*,
    #content-wrap h4+*,
    #content-wrap h5+*,
    #content-wrap h6+* {
     margin-top: 1em;
    }
 
    #content-wrap p+* {
     margin-top: 1em;
    }
 
    #page-content ol:not([class*="yui-nav"]),
    #page-content ul:not([class*="yui-nav"]) {
     margin-bottom: 1em;
     margin-top: 1em;
     line-height: 1.5;
     padding-left: 3ch;
    }
 
    #page-content ol:not([class*="yui-nav"]) {
     counter-reset: crocker-counter;
     list-style: none;
    }
 
    #page-content ul:not([class*="yui-nav"]) {
     list-style: none;
     text-indent: -1em;
    }
 
    #page-content ol:not([class*="yui-nav"]) li,
    #page-content ul:not([class*="yui-nav"]) li {
     margin-bottom: .25em;
     max-width: 100ex;
    }
 
    #page-content ol:not([class*="yui-nav"]) li {
     counter-increment: crocker-counter;
     position: relative;
     text-indent: -1rem;
     line-height: 1.5rem;
     padding-bottom: 0.5rem;
    }
 
    #page-content ul:not([class*="yui-nav"]) li::before,
    #page-content ol:not([class*="yui-nav"]) li::before {
     color: rgb(var(--medium-accent))
    }
 
    #page-content ul:not([class*="yui-nav"]) li::before {
     font-family: var(--header-font);
     font-size: 1.25rem;
     content: "\2767";
     margin-right: 0.25rem;
    }
 
    #page-content ol:not([class*="yui-nav"]) li::before {
     content: counter(crocker-counter) ". ";
     font-family: var(--header-font);
     font-size: 1.25rem;
    }
 
    #content-wrap table {
     font-size: 1rem;
     line-height: 1.5;
     border-spacing: 0;
     margin: 1.25rem auto !important;
     border-collapse: collapse !important;
    }
 
    #content-wrap table td,
    #content-wrap table th,
    #content-wrap td,
    #content-wrap th {
     --wght: 400;
     border: 1px solid rgb(var(--gray-monochrome));
     background-color: rgb(var(--white-monochrome));
     font-weight: 400;
     padding: .25rem 0.5rem !important;
     justify-content: center;
     grid-auto-flow: column;
     align-items: center;
    }
 
    #content-wrap thead td,
    #content-wrap thead th,
    #content-wrap th {
     --wght: 700;
     background-color: rgb(var(--pale-gray-monochrome)) !important;
     color: rgb(var(--dark-gray-monochrome));
     font-weight: 700 !important;
    }
 
    #content-wrap table thead th,
    #content-wrap thead th {
     --wght: 700;
     font-weight: 700;
    }
 
    #content-wrap table th,
    #content-wrap th {
     text-align: left;
    }
 
    #content-wrap thead td,
    #content-wrap thead th,
    #content-wrap th {
     text-shadow: none;
     color: rgb(var(--swatch-primary-darkest));
    }
 
    .footnotes-footer,
    .code {
     background-image:
     linear-gradient(90deg, transparent 2.35em, rgb(171, 206, 212) 2.35em, rgb(171, 206, 212) 2.5em, transparent 2.5em),
     linear-gradient(rgba(var(--light-gray-monochrome), 0.5) .1em, transparent .1625em);
     background-position: 1em 0.75em;
     background-size: 100% 1.8em;
     font-size: 0.9em;
     font-family: var(--mono-font);
    }
 
    .code pre {
     white-space: pre;
     white-space: normal;
     width: 100%;
     overflow: hidden;
    }
 
    .code>*,
    .footnotes-footer>* {
     --wght: 400;
     padding: 0 0 0 3em;
     font-weight: 400;
     letter-spacing: 0.05em;
     outline: none;
    }
 
    .code>* {
     line-height: 1.75;
    }
 
    .footnotes-footer>* {
     line-height: 2;
    }
 
    .footnotes-footer .title {
     --wght: 900;
     font-family: var(--title-font);
     margin: -0.75em 0 0.75em 0;
    }
 
    .footnotes-footer .footnote-footer {
     width: 90%;
     margin: 0 0 0 4ch !important;
    }
 
    .footnotes-footer a[href*="javascript"]::before,
    .bibitems .bibitem::after {
     right: -50%;
     background-color: rgb(var(--swatch-primary-darkest));
     color: rgb(var(--swatch-text-secondary-color));
     padding: 0 0.25em 0 0.5em;
     border-radius: 50%;
     font-size: 0.9em;
    }
 
    .footnotes-footer div.footnote-footer:not([id*="footnote-1"]) {
     margin-top: -0.1em !important;
    }
 
    .footnotes-footer .footnote-footer>a:nth-of-type(1) {
     margin-left: 0;
    }
 
    .scp-image-block {
     box-shadow: initial;
     -webkit-box-shadow: initial;
    }
 
    @media only screen and (max-width: 56.25rem) {
     #header {
     background-position: left .5rem top 2rem;
     background-size: auto 8.375rem;
     }
 
     #header h1 a {
     margin-left: 7rem;
     margin-top: -2.5rem;
     }
 
     #header h2 {
     width: calc(100% - 9.5rem);
     height: calc(100% - 7.5rem);
     margin-left: 8.35rem;
     margin-top: 8rem;
     text-align: left;
     }
 
     #header h2 span {
     width: 90vw;
     height: 100%;
     margin: 0;
     display: flex;
     position: relative;
     align-items: center;
     justify-content: center;
     }
 
     #header h2 span::before {
     position: absolute;
     top: 0;
     left: 0;
     width: 90%;
     margin: 0;
     }
 
     #top-bar {
     font-size: calc(var(--base-font-size) * 0.8);
     }
 
     #top-bar>div.mobile-top-bar>div.open-menu {
     font-size: calc(var(--base-font-size) * 0.65);
     }
 
     #top-bar>div.mobile-top-bar>div.open-menu>p>a {
     color: rgb(var(--swatch-menutxt-dark-color)) !important;
     }
 
     #top-bar div.mobile-top-bar>ul>li>a {
     letter-spacing: 0;
     }
 
     #top-bar>div.top-bar>ul>li:last-of-type>ul,
     #top-bar>div.mobile-top-bar>ul>li:last-of-type>ul {
     left: 50%;
     }
 
     #side-bar:target .close-menu {
     width: calc(100% - 15em - var(--scrollbar-width));
     }
 
     .footnotes-footer,
     .code {
     background-image:
     linear-gradient(90deg, transparent 1.35rem, rgb(171, 206, 212) 1.35rem, rgb(171, 206, 212) 1.5rem, transparent 1.5rem),
     linear-gradient(rgba(var(--light-gray-monochrome), 0.5) .1rem, transparent .1625rem);
     background-position: 1rem 0.45rem;
     background-size: 100% 1.25rem;
     font-size: 0.7rem;
     font-family: var(--mono-font);
 
     }
 
     .code>*,
     .footnotes-footer>* {
     line-height: 1.85;
     padding-left: 2.5rem;
     }
 
     .footnotes-footer .title {
     padding-left: 2.5rem !important;
     }
 
     #content-wrap h1,
     #content-wrap #page-title {
     font-size: 1.9rem;
     }
 
     #content-wrap h2 {
     font-size: 1.5rem;
     }
 
     #content-wrap h3 {
     font-size: 1.1rem;
     }
 
     #content-wrap h4 {
     font-size: 0.9rem;
     }
 
     #content-wrap h5 {
     font-size: .8rem;
     }
    }
}