Site News Workbench
/* source: http://ah-sandbox.wikidot.com/component:collapsible-sidebar-x1 */
 
#top-bar .open-menu a {
        position: fixed;
        top: 0.5em;
        left: 0.5em;
        z-index: 5;
        font-family: 'Nanum Gothic', san-serif;
        font-size: 30px;
        font-weight: 700;
        width: 30px;
        height: 30px;
        line-height: 0.9em;
        text-align: center;
        border: 0.2em solid #888;
        background-color: #fff;
        border-radius: 3em;
        color: #888;
}
 
@media (min-width: 768px) {
 
    #top-bar .mobile-top-bar {
        display: block;
    }
 
    #top-bar .mobile-top-bar li {
        display: none;
    }
 
    #main-content {
        max-width: 708px;
        margin: 0 auto;
        padding: 0;
        transition: max-width 0.2s ease-in-out;
    }
 
    #side-bar {
        display: block;
        position: fixed;
        top: 0;
        left: -20em;
        width: 17.75em;
        height: 100%;
        margin: 0;
        overflow-y: auto;
        z-index: 10;
        padding: 1em 1em 0 1em;
        background-color: rgba(0,0,0,0.1);
        transition: left 0.4s ease-in-out;
 
        scrollbar-width: thin;
    }
 
    #side-bar:target {
        left: 0;
    }
    #side-bar:focus-within:not(:target) {
        left: 0;
    }
 
    #side-bar:target .close-menu {
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        margin-left: 19.75em;
        opacity: 0;
        z-index: -1;
        visibility: visible;
    }
    #side-bar:not(:target) .close-menu { display: none; }
 
    #top-bar .open-menu a:hover {
        text-decoration: none;
    }
 
    /* FIREFOX-SPECIFIC COMPATIBILITY METHOD */
    @supports (-moz-appearance:none) {
    #top-bar .open-menu a {
        pointer-events: none;
    }
    #side-bar:not(:target) .close-menu {
        display: block;
        pointer-events: none;
        user-select: none;
    }
 
    /* This pseudo-element is meant to overlay the regular sidebar button
    so the fixed positioning (top, left, right and/or bottom) has to match */
 
    #side-bar .close-menu::before {
        content: "";
        position: fixed;
        z-index: 5;
        display: block;
 
        top: 0.5em;
        left: 0.5em;
 
        border: 0.2em solid transparent;
        width: 30px;
        height: 30px;
        font-size: 30px;
        line-height: 0.9em;
 
        pointer-events: all;
        cursor: pointer;
    }
    #side-bar:focus-within {
        left: 0;
    }
    #side-bar:focus-within .close-menu::before {
        pointer-events: none;
    }
    }
}
rating: +26+x

What this is

A bunch of miscellaneous CSS 'improvements' that I, CroquemboucheCroquembouche, use on a bunch of pages because I think it makes them easier to deal with.

The changes this component makes are bunch of really trivial modifications to ease the writing experience and to make documenting components/themes a bit easier (which I do a lot). It doesn't change anything about the page visually for the reader — the changes are for the writer.

I wouldn't expect translations of articles that use this component to also use this component, unless the translator likes it and would want to use it anyway.

This component probably won't conflict with other components or themes, and even if it does, it probably won't matter too much.

Usage

On any wiki:

[[include :scp-wiki:component:croqstyle]]

This component is designed to be used on other components. When using on another component, be sure to add this inside the component's [[iftags]] block, so that users of your component are not forced into also using Croqstyle.

Related components

Other personal styling components (which change just a couple things):

Personal styling themes (which are visual overhauls):

CSS changes

Reasonably-sized footnotes

Stops footnotes from being a million miles wide, so that you can actually read them.

.hovertip { max-width: 400px; }

Monospace edit/code

Makes the edit textbox monospace, and also changes all monospace text to Fira Code, the obviously superior monospace font.

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');
 
:root { --mono-font: "Fira Code", Cousine, monospace; }
#edit-page-textarea, .code pre, .code p, .code, tt, .page-source { font-family: var(--mono-font); }
.code pre * { white-space: pre; }
.code *, .pre * { font-feature-settings: unset; }

Teletype backgrounds

Adds a light grey background to <tt> elements ({{text}}), so code snippets stand out more.

tt {
  background-color: var(--swatch-something-bhl-idk-will-fix-later, #f4f4f4);
  font-size: 85%;
  padding: 0.2em 0.4em;
  margin: 0;
  border-radius: 6px;
}

No more bigfaces

Stops big pictures from appearing when you hover over someone's avatar image, because they're stupid and really annoying and you can just click on them if you want to see the big version.

.avatar-hover { display: none !important; }

Breaky breaky

Any text inside a div with class nobreak has line-wrapping happen between every letter.

.nobreak { word-break: break-all; }

Code colours

Add my terminal's code colours as variables. Maybe I'll change this to a more common terminal theme like Monokai or something at some point, but for now it's just my personal theme, which is derived from Tomorrow Night Eighties.

Also, adding the .terminal class to a fake code block as [[div class="code terminal"]] gives it a sort of pseudo-terminal look with a dark background. Doesn't work with [[code]], because Wikidot inserts a bunch of syntax highlighting that you can't change yourself without a bunch of CSS. Use it for non-[[code]] code snippets only.

Quick tool to colourise a 'standard' Wikidot component usage example with the above vars: link

:root {
  --c-bg: #393939;
  --c-syntax: #e0e0e0;
  --c-comment: #999999;
  --c-error: #f2777a;
  --c-value: #f99157;
  --c-symbol: #ffcc66;
  --c-string: #99cc99;
  --c-operator: #66cccc;
  --c-builtin: #70a7df;
  --c-keyword: #cc99cc;
}
 
.terminal, .terminal > .code {
  color: var(--c-syntax);
  background: var(--c-bg);
  border: 0.4rem solid var(--c-comment);
  border-radius: 1rem;
}

Debug mode

Draw lines around anything inside .debug-mode. The colour of the lines is red but defers to CSS variable --debug-colour.

You can also add div.debug-info.over and div.debug-info.under inside an element to annotate the debug boxes — though you'll need to make sure to leave enough vertical space that the annotation doesn't overlap the thing above or below it.

…like this!

.debug-mode, .debug-mode *, .debug-mode *::before, .debug-mode *::after {
  outline: 1px solid var(--debug-colour, red);
  position: relative;
}
.debug-info {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Fira Code', monospace;
  font-size: 1rem;
  white-space: nowrap;
}
.debug-info.over { top: -2.5rem; }
.debug-info.under { bottom: -2.5rem; }
.debug-info p { margin: 0; }
/*
    Newspaper Theme
    [2021 Wikidot Theme]
    By MalyceGraves and EstrellaYoshte
    Based on:
       Penumbra Theme by EstrellaYoshte
       Paperstack Theme by EstrellaYoshte
       Ad Astra Theme by NatVoltaic and stormbreath
       Inkblot Theme by Croquembouche
       Anderson Robotics Theme by Croquembouche
       BHL Style Collapsible by Monkatraz
       Monotypical Theme by EstrellaYoshte
*/
 
@import url('https://fonts.googleapis.com/css2?family=Kulim+Park&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap');
 
:root {
    --accentColor: #E5062B;
    --lgurl: url("http://scp-wiki.wdfiles.com/local--files/theme%3Anewspaper/newslogo.png");
    --bgurl: url("http://scp-wiki.wdfiles.com/local--files/theme%3Anewspaper/newshead.png");
 
    --primaryBackgroundColor: #f3f3f3;
    --textColor: #090B0C;
    --headerColor: #161B33;
    --selectionColor: #FFE419;
 
    --header-font: 'DM Serif Display', serif;
    --link-timing: 0.125s ease-out;
}
 
#content-wrap {
    margin: 0.65em auto 0;
    box-sizing: border-box;
}
#page-content { font-size: 1rem; }
 
body {
    font-family: 'Kulim Park', sans-serif;
    color: var(--textColor);
    background-color: #FFF4E9;
    background-image: none;
    background-repeat: no-repeat;
}
tt {
    background-color: var(--primaryBackgroundColor);
}
code {
    font-family: var(--mono-font);
}
#edit-page-textarea, .code pre, .code p, .code, tt, .page-source {
    font-size: 90%;
}
 
a:not(.rate-box-with-credit-button a, .page-rate-widget-box a, yui-nav a) {
    color: var(--accentColor);
}
 
#page-content div {
    clear: unset;
}
 
/* Selection */
::selection {
    background: var(--selectionColor);
    color: var(--textColor);
}
 
/* ---- HEADER ---- */
 
div#container-wrap {
     background-image: none;
}
div#header {
    background-image: none;
    height: 240px;
}
 
div#header-extra-div-1 {
    height: 164px;
    width: 100%;
    top: 0;
    position: absolute;
    background: var(--lgurl);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    opacity: 1;
    z-index: -1;
}
div#extra-div-1 {
    height: 164px;
    width: 100%;
    top: 0;
    position: absolute;
    background: var(--bgurl);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center 0;
    z-index: -2;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 20%, rgba(0,0,0,0.3) 70%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 20%, rgba(0,0,0,0.3) 70%, rgba(0,0,0,0) 100%);
}
 
#header h1, #header h2 { margin-left: 0; float: none; text-align: center; }
#header h1 a {
    padding-top: 174px;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto;
 
}
#header h2 { 
margin-top: 6.5rem;
    font-size: 0.75rem;
    font-style: italic;
}
/* Hide the existing text */
#header h1 span, #header h2 span { font-size: 0; display: none; }
/* Style the new text */
#header h1 a::before, #header h2::before {
  color: var(--headerColor);
  font-family: var(--header-font);
  text-shadow: none;
}
#header h2::before { color: var(--textColor); }
/* Set the new text's content from variable */
#header h1 a::before {
  content: var(--header-title, "SCP Foundation News");
  font-weight: 300;
  font-size: 1.3em;
}
#header h2::before {
  content: var(--header-subtitle, "The Official SCPN Monthly");
  font-weight: 600;
  font-size: 1.22em;
}
 
#login-status {
    color: var(--textColor);
    background-color: #FEFBF8;
    padding: 0.3rem 0.25rem 0.4rem 0.5rem;
    border-radius: 0 0 0.5rem 0.5rem;
    box-shadow: 0 0 3px 1px rgba(0,0,0,0.2);
    top: 0;
}
#login-status a {
    color: var(--accentColor);
}
#account-topbutton {
    border: none;
    margin-left: -0.1rem;
}
 
div#account-options {
    background-color: var(--primaryBackgroundColor);
    border: none;
    border-radius: 0.35rem;
    box-shadow: 0 0 4px 1px rgba(0,0,0,0.25);
    top: 1.85rem;
 
    display: block!important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}
#account-topbutton:focus + #account-options,
#account-topbutton:active + #account-options,
#account-options:focus-within {
    opacity: 1;
    pointer-events: all;
}
/* Without this, touchscreen doesn't work */
@media (pointer: coarse) {
    #account-topbutton:hover + #account-options,
    #account-options:hover {
        opacity: 1;
        pointer-events: all;
    }
}
#account-options li a,
#account-options li a:hover {
    color: var(--accentColor);
}
 
/* ---- SEARCH ---- */
div#search-top-box {
    top: 2.25rem;
    right: 0.5rem;
    width: 1.6rem;
}
 
div#search-top-box::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0; right: 0.05rem;
    background-color: var(--accentColor);
    pointer-events: none;
    z-index: 2;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M505%20442.7L405.3%20343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3%2044-79.7%2044-128C416%2093.1%20322.9%200%20208%200S0%2093.1%200%20208s93.1%20208%20208%20208c48.3%200%2092.7-16.4%20128-44v16.3c0%206.4%202.5%2012.5%207%2017l99.7%2099.7c9.4%209.4%2024.6%209.4%2033.9%200l28.3-28.3c9.4-9.4%209.4-24.6.1-34zM208%20336c-70.7%200-128-57.2-128-128%200-70.7%2057.2-128%20128-128%2070.7%200%20128%2057.2%20128%20128%200%2070.7-57.2%20128-128%20128z%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M505%20442.7L405.3%20343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3%2044-79.7%2044-128C416%2093.1%20322.9%200%20208%200S0%2093.1%200%20208s93.1%20208%20208%20208c48.3%200%2092.7-16.4%20128-44v16.3c0%206.4%202.5%2012.5%207%2017l99.7%2099.7c9.4%209.4%2024.6%209.4%2033.9%200l28.3-28.3c9.4-9.4%209.4-24.6.1-34zM208%20336c-70.7%200-128-57.2-128-128%200-70.7%2057.2-128%20128-128%2070.7%200%20128%2057.2%20128%20128%200%2070.7-57.2%20128-128%20128z%22%2F%3E%3C%2Fsvg%3E");
    -webkit-mask-size: 1rem;
            mask-size: 1rem;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    opacity: 1;
    transition: opacity 0.25s ease;
}
div#search-top-box:focus-within::before { opacity: 0; }
 
div#search-top-box form {
    display: flex;
    justify-content: flex-end;
}
 
div#search-top-box form input[type="text"]:not(:focus),
div#search-top-box form input[type="text"]:not(:focus):not(:hover) {
    position: relative;
    color: transparent;
    cursor: pointer;
    display: inline-block;
    font-family: var(--body-font);
    width: 1.6rem;
    height: 1.6rem;
    padding: 0.1em 0.5em;
    box-sizing: border-box;
    border-radius: 0.35rem;
    border: none;
    box-shadow: 0 0 2px 1.5px var(--shadow);
}
 
div#search-top-box form input[type="text"],
div#search-top-box form input[type="text"]:hover,
div#search-top-box form input[type="text"]:focus {
    background-color: var(--primaryBackgroundColor)!important;
    color: var(--textColor);
    display: inline-block;
    border: none;
    height: 1.6rem;
    width: 9rem;
    transition: width .25s;
    outline: none;
}
 
div#search-top-box form input[type="submit"] {
    display: none;
}
 
/* ---- TOP BAR ---- */
 
#top-bar {
     top: 14.6rem;
     display: flex;
     justify-content: center;
     right: 0;
}
@media (max-width: 768px) {
    .mobile-top-bar {
         display: flex;
         justify-content: center;
         max-width: 100%;
         width: 100%;
         left: 0;
    }
}
 
/* div[class*=top-bar] is to select both regular and mobile top bar that exist in #top-bar */
 
#top-bar div[class*=top-bar] > ul > li > a {
    color: var(--textColor);
}
 
#top-bar div[class*=top-bar] ul li ul li a {
    color: var(--accentColor);
}
 
#top-bar div[class*=top-bar] > ul > li > a:hover,
#top-bar div[class*=top-bar] > ul > li.sfhover > a {
    background-color: transparent;
    background: none;
}
 
#top-bar div[class*=top-bar] > ul > li,
#top-bar div[class*=top-bar] > ul > li.sfhover {
    background-color: transparent;
    background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
    background-size: 0 100%;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--link-timing);
}
#top-bar div[class*=top-bar] > ul > li:hover,
#top-bar div[class*=top-bar] > ul > li:focus-within {
    background-color: transparent;
    background-size: 100% 100%;
}
 
#top-bar div[class*=top-bar] ul li ul {
    background-color: var(--primaryBackgroundColor);
    border: none;
    box-shadow: 0 0 4px rgba(0,0,0,0.3);
    border-radius: 0.5rem;
}
#top-bar div[class*=top-bar] ul li ul li:first-of-type a {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}
#top-bar div[class*=top-bar] ul li ul li:last-of-type a {
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}
 
#top-bar div[class*=top-bar] ul li ul li,
#top-bar div[class*=top-bar] ul li ul li a {
    background: transparent;
    border: none;
}
#top-bar div[class*=top-bar] ul li ul li a:hover,
#top-bar div[class*=top-bar] ul li ul li a:focus {
    background-color: #FEFBF8;
}
 
/* keyboard navigation compatibility */
#top-bar div[class*=top-bar] ul > li > ul > li > a {
    height: auto;
    max-height: none;
    line-height: 1.5!important;
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
}
#top-bar div[class*=top-bar] > ul > li > ul {
    visibility: visible;
    opacity: 0;
    pointer-events: none;
}
#top-bar div[class*=top-bar] > ul > li:hover > ul,
#top-bar div[class*=top-bar] > ul > li > ul:hover,
#top-bar div[class*=top-bar] > ul > li:focus-within > ul,
#top-bar div[class*=top-bar] > ul > li > ul:focus-within {
    opacity: 1;
    pointer-events: all;
}
 
/* ---- SIDE BAR ---- */
 
div#side-bar{
    background: #FEFBF8;
    clear: both;
    padding: .8em;
    border: none;
    border-radius: 0;
    box-shadow: 0 0 4px rgba(0,0,0,0.3);
    overflow-x: hidden;
}
 
#side-bar .heading{
    color: var(--headerColor);
    font-family: var(--header-font);
    font-size: 0.94rem;
    border-bottom: solid 1px var(--headerColor);
    border-top: solid 1px var(--headerColor);
    margin-top: 1.35rem;
    padding-left: 0;
    text-align: center;
}
#side-bar .side-block {
    border: transparent;
    border-radius: 0;
    box-shadow: none;
    background-color: #FEFBF8;
}
#side-bar .side-block.media {
    background-color:#FEFBF8;
}
#side-bar .side-block.media > * {
    display: flex;
    justify-content: space-evenly;
}
#side-bar .side-block.resources {
    background-color:#FEFBF8;
}
.side-block .menu-item > .image {
    display: none;
}
 
#side-bar div.menu-item a {
    color: var(--accentColor);
}
 
#top-bar div.open-menu a {
    border-radius: 0.35rem;
    box-shadow: 0 0 4px rgba(0,0,0,0.3);
    color: var(--accentColor);
    background-color: #FEFBF8;
    border: none;
    padding: 0.15rem;
    user-select: none;
}
 
/* ---- MAIN CONTENT ---- */
#main-content {
    background-color: #FEFBF8;
    padding: 0.5em 2em 0.75em;
    box-shadow: 0 0 4px rgba(0,0,0,0.3);
    width: 100%;
    max-width: 880px;
    margin: -0.4rem auto 0;
    border-radius: 0;
    box-sizing: border-box;
}
 
/* ---- PAGE TITLE ---- */
#page-title, .meta-title {
    color: var(--headerColor);
    font-family: var(--header-font);
    font-size: 3em;
    text-align: center;
    display: flex;
    align-items: center;
    text-align: center;
    border-bottom: none;
    margin: 0.25rem 0;
    padding-bottom: 0;
}
#page-title::before,
#page-title::after,
.meta-title::before,
.meta-title::after {
    content: "";
    flex-grow: 1;
    height: 0.25rem;
    margin: auto auto auto 0.65rem;
    background-color: transparent;
    border-top: solid 0.125rem var(--headerColor);
    border-bottom: solid 0.125rem var(--headerColor);
}
#page-title::before,
.meta-title::before {
    margin: auto 0.65rem auto auto;
}
 
/* ---- BREADCRUMBS ---- */
 
#breadcrumbs, #page-content .pseudocrumbs {
    font-size: 0.85rem;
    font-family: var(--header-font);
    margin-top: -1.05em;
}
#page-content .pseudocrumbs * { text-decoration-color: var(--accentColor)!important; }
 
/* ---- TABS ---- */
 
/* ---- YUI TAB BASE ---- */
.yui-navset .yui-nav a,.yui-navset .yui-navset-top .yui-nav a{background-color:inherit;background-image:inherit}.yui-navset .yui-nav a:hover,.yui-navset .yui-nav a:focus{background:inherit;text-decoration:inherit}.yui-navset .yui-nav .selected a,.yui-navset .yui-nav .selected a:focus,.yui-navset .yui-nav .selected a:hover{color:inherit;background:inherit}.yui-navset .yui-nav,.yui-navset .yui-navset-top .yui-nav{border-color:inherit}.yui-navset li{line-height:inherit}
 
/* ---- YUI TAB CUSTOMIZATION ----*/
 
 .yui-navset .yui-nav,
 .yui-navset .yui-navset-top .yui-nav{
     display: flex;
     flex-wrap: wrap;
     width: calc(100% - .125rem);
     margin: 0 auto;
     border-width: 0;
     box-shadow: none;
}
 .yui-navset .yui-nav a, /* ---- Link Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav a{
     color: var(--textColor);
     font-weight: bold;
    /* ---- Tab Background Colour | [UNSELECTED] ---- */
     background-color: transparent;
     border: unset;
     box-shadow: none;
 
     background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
     background-size: 0 100% ;
     background-position: 0 100%;
     background-repeat: no-repeat;
     transition: background-size var(--link-timing);
}
 .yui-navset .yui-nav a:hover,
 .yui-navset .yui-nav a:focus{
    /* ---- Tab Background Colour | [HOVER] ---- */
     background-color: transparent;
     background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
     background-size: 100% 100% ;
     background-position: 0 100%;
     background-repeat: no-repeat;
     transition: background-size var(--link-timing);
}
 .yui-navset .yui-nav li, /* ---- Listitem Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav li{
     position: relative;
     display: flex;
     flex-grow: 2;
     max-width: 100%;
     margin: 0.25rem;
     padding: 0;
     color: #d6d6d6;
     background-color: var(--primaryBackgroundColor);
     border-color: transparent;
     border-radius: 0.35rem;
     box-shadow: none;
}
 .yui-navset .yui-nav li a,
 .yui-navset-top .yui-nav li a,
 .yui-navset-bottom .yui-nav li a{
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     border-radius: 0.35rem;
}
 .yui-navset .yui-nav li em{
     border: unset;
}
 .yui-navset .yui-nav a em,
 .yui-navset .yui-navset-top .yui-nav a em{
     padding: .35em .75em;
 
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
}
 .yui-navset .yui-nav .selected, /* ---- Selection Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav .selected{
     flex-grow: 2;
     margin: 0;
     padding: 0;
     border-radius: 0.35rem;
    /* ---- Tab Background Colour | [SELECTED] ---- */
     background-color: var(--accentColor);
     color: var(--primaryBackgroundColor);
}
 .yui-navset .yui-nav .selected a,
 .yui-navset .yui-nav .selected a em{
     border: none;
}
 .yui-navset .yui-nav .selected a{
     width: 100%;
     color: #ffffff;
     font-weight: bold;
}
 .yui-navset .yui-nav .selected a:focus,
 .yui-navset .yui-nav .selected a:active{
     color: #ffffff;
     background-color: var(--accentColor);
}
 .yui-navset .yui-content {
    border: none;
    background-color: transparent;
    box-shadow: none;
    margin-top: 0.25rem;
    box-sizing: border-box;
    border-radius: 1rem;
    padding: 0.35rem 0;
    border-top: solid 0.2rem var(--accentColor);
    border-bottom: solid 0.2rem var(--accentColor);
}
 
/* ---- INFO PANE ---- */
 
:root {
    --linkColor: var(--selectionColor);
    --radius-adjust: 0.325rem;
    --shadow: rgba(0,0,0,0.2);
}
 
#page-content .creditRate{
    margin: unset;
    margin-bottom: 1rem;
}
#page-content .rate-box-with-credit-button {
    background-color: var(--primaryBackgroundColor);
    border: none;
    box-shadow: 0 0 3px 1px var(--shadow);
    border-radius: var(--radius-adjust);
    padding: 0.275rem;
}
#page-content .rate-box-with-credit-button .page-rate-widget-box { border: none; }
 
#page-content a.fa {
    transform: none;
}
#page-content .rate-box-with-credit-button .fa-info {
    border: none;
    color: var(--textColor);
 
    padding-top: 0.25rem;
    padding-bottom: 0.0725rem;
    width: 0.9rem;
    margin-left: -0.1rem;
    margin-right: 0.1rem;
 
    background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
    background-size: 0 100% ;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--link-timing);
}
 
#page-content .rate-box-with-credit-button .fa-info:hover,
#page-content .rate-box-with-credit-button .fa-info:focus {
    background-size: 100% 100%;
}
 
.rate-box-with-credit-button .cancel {
    border: solid 1px var(--primaryBackgroundColor);
}
 
#page-content .creditButtonStandalone {
    margin: 0.125rem 0;
}
#page-content .creditButtonStandalone p a {
    border-radius: 1rem;
    color: var(--textColor);
    text-align: center;
    background: initial;
    box-shadow: 0 0 2px 1px var(--shadow);
    padding: 0.24rem;
 
    background: none;
    background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 100%;
    transition: background-size var(--link-timing);
}
#page-content .creditButtonStandalone p a:hover,
#page-content .creditButtonStandalone p a:focus {
    text-decoration: none;
    background: none;
    background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
 
/* ---- PAGE RATING ---- */
 
.page-rate-widget-box {
    box-shadow: none;
    margin: unset;
    margin-bottom: 1rem;
    background-color: var(--primaryBackgroundColor);
    border-radius: var(--radius-adjust);
    box-shadow: 0 0 3px 1px var(--shadow);
    padding: 0.275rem;
}
 
.page-rate-widget-box .rateup a:hover, .page-rate-widget-box .rateup a:focus,
.page-rate-widget-box .ratedown a:hover, .page-rate-widget-box .ratedown a:focus,
.page-rate-widget-box .cancel a:hover, .page-rate-widget-box .cancel a:focus {
    color: var(--textColor);
    background: unset;
    background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
    background-size: 100% 100%;
    background-position: 0 100%;
    background-repeat: no-repeat;
    border-radius: 0;
}
 
.page-rate-widget-box .rate-points {
    background-color: var(--primaryBackgroundColor) !important;
    color: var(--textColor) !important;
    border: solid 1px var(--primaryBackgroundColor);
    border-radius: 0;
}
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown {
    background-color: var(--primaryBackgroundColor);
    border-top: solid 1px var(--primaryBackgroundColor);
    border-bottom: solid 1px var(--primaryBackgroundColor);
}
 
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a {
    color: var(--textColor);
    background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
    background-size: 0 100%;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--link-timing);
}
 
.page-rate-widget-box .cancel {
    background-color: var(--primaryBackgroundColor);
    border: solid 1px var(--primaryBackgroundColor);
    border-radius: 0;
}
 
.page-rate-widget-box .cancel a {
    color: var(--textColor);
    background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
    background-size: 0 100%;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--link-timing);
}
 
/* ---- PAGE ELEMENTS ---- */
 
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--headerColor);
    font-family: var(--header-font);
    font-weight: normal;
    margin: 0.45em 0;
}
h1 { font-size: 2em; }
h2 { font-size: 1.7em; }
h3 { font-size: 1.45em; }
h4 { font-size: 1.25em; }
h5 { font-size: 1.1em; }
h6 { font-size: 1em; }
 
hr {
    height: 0.25rem;
    margin: 1.75rem 0;
    background-color: transparent;
    border-top: solid 0.125rem var(--headerColor);
    border-bottom: solid 0.125rem var(--headerColor);
    clear: both;
}
 
blockquote,
div.blockquote {
    background-color: var(--primaryBackgroundColor);
    border: none;
    border-left: solid 0.2rem var(--headerColor);
    padding: 0.1rem 1rem;
    box-shadow: 0 0 3px rgba(0,0,0,0.25);
    position: relative;
}
blockquote::before, blockquote::after,
div.blockquote::before, div.blockquote::after {
    content: "";
    display: block;
    height: 0.5rem; width: 0.5rem;
    position: absolute;
    left: 0;
    background-color: var(--headerColor);
}
blockquote::before, div.blockquote::before {
    top: 0;
    transform: translate(calc(-50% - 0.1rem),-50%) rotate(45deg);
}
blockquote::after, div.blockquote::after {
    bottom: 0;
    transform: translate(calc(-50% - 0.1rem),50%) rotate(45deg);
}
 
#toc {
    display: block;
    background-color: #FEFBF8;
    border: none;
    padding: 0.1rem 1rem;
    box-shadow: 0 0 4px rgba(0,0,0,0.3);
    border-right: solid 0.2rem var(--headerColor);
    padding: 0.75em;
    position: relative;
}
#toc::before, #toc::after {
    content: "";
    display: block;
    height: 0.5rem; width: 0.5rem;
    position: absolute;
    right: 0;
    background-color: var(--headerColor);
}
#toc::before {
    top: 0;
    transform: translate(calc(0.1rem + 50%),-50%) rotate(45deg);
}
#toc::after {
    bottom: 0;
    transform: translate(calc(0.1rem + 50%),50%) rotate(45deg);
}
#toc-list {
    font-family: var(--header-font);
}
#toc-list > div[style*="margin-left: 1em;"] { margin-left: 0.5em!important; }
#toc-list > div:not([style*="margin-left: 1em;"]) { display: none; }
 
.scp-image-block {
    border: solid 8px var(--primaryBackgroundColor);
    box-shadow: 0px 0px 4px rgba(0,0,0,0.3);
    box-sizing: border-box;
    position: relative;
    z-index: 0;
}
.scp-image-block::before, .scp-image-block::after {
    content:'';
    position: absolute;
    pointer-events: none;
    border: solid 0.25rem var(--headerColor);
    transform: rotate(25deg);
}
.scp-image-block::before {
    right: -0.135rem;
    height: 36px;
    width: 9px;
    top: -14.25px;
    border-radius: 0 0 2rem 2rem;
    border-top: none;
}
.scp-image-block::after {
    top: -25px;
    right: -0.94rem;
    height: 16px;
    width: 14px;
    border-radius: 2rem 2rem 0 0;
    border-bottom: solid 0.55rem transparent;
    z-index: -1;
}
 
.scp-image-block .scp-image-caption {
    background-color: var(--primaryBackgroundColor);
    border-top: solid 4px var(--primaryBackgroundColor);
    color: var(--textColor);
}
.scp-image-block.block-left,
.scp-image-block.block-right {
    margin: 0.25rem 2rem 0.625rem;
}
.scp-image-block.block-left { margin-left: 0.5rem; }
.scp-image-block.block-right { margin-right: 0.5rem; }
@media (max-width: 640px) {
  .scp-image-block.block-left, .scp-image-block.block-right {
    float: none; clear: both; margin-left: auto; margin-right: auto;
  }
}
 
#page-content .wiki-content-table tr th {
    border: solid 1px var(--headerColor);
    color: var(--headerColor);
    background-color: var(--primaryBackgroundColor);
    /* set border for table title */
}
#page-content .wiki-content-table tr td {
    border: solid 1px var(--headerColor);
    /* set border for table content */
}
 
/* fancy collapsible */
#page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link {
    background-color: var(--primaryBackgroundColor);
    border-radius: 0.35rem;
    width: min-content;
    white-space: nowrap;
    overflow: hidden;
    margin: auto;
}
 
#page-content .collapsible-block-folded {
    background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
    background-size: 0 100% ;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--link-timing);
}
#page-content .collapsible-block-folded:hover,
#page-content .collapsible-block-folded:focus-within {
    background-size: 100% 100% ;
    transition: background-size var(--link-timing);
}
#page-content .collapsible-block-unfolded-link {
    background-color: var(--accentColor);
    box-shadow: 0 0 0 0.2rem var(--accentColor);
}
#page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link {
    margin-top: 10px;
    margin-bottom: 10px;
}
#page-content .collapsible-block-link {
    display: inline-flex;
    padding: 0.5rem 1rem;
    text-decoration: none;
    color: var(--textColor);
    font-weight: bold;
}
#page-content .collapsible-block-unfolded-link .collapsible-block-link {
    color: var(--primaryBackgroundColor);
}
 
/* Footnotes */
a.footnoteref {
    padding: 0 0.25em 1px;
    margin-left: -0.15em;
}
 
.hovertip {
    font-size: 1.25em;
    background-color: #FEFBF8 !important;
    border: none !important;
    border-left: solid 0.2rem var(--accentColor)!important;
    color: var(--textColor) !important;
    border-radius: 0 1rem;
    box-shadow: 0 0 4px rgba(0,0,0,0.3);
    padding: 0.35rem;
    box-sizing: border-box;
    width: min(24rem, 60vw)!important;
 
    top: initial!important;
    left: initial!important;
    position: fixed! important;
 
    display: block!important;
    bottom: 2rem;
    right: -25rem;
 
    transition: right 0.45s cubic-bezier(.6,.18,.27,.88);
    transition-delay: 0.455s;
    z-index: 29;
}
.hovertip::before {
    content: "";
    display: block;
    height: 0.5rem;
    width: 0.5rem;
    position: absolute;
    left: 0;
    top: 0;
    background-color: var(--accentColor);
    transform: translate(calc(-50% - 0.1rem),-50%) rotate(45deg);
}
div[id$="button-hovertip"] { transition-delay: 0s; }
 
.hovertip[style*="display: block"],
.hovertip:hover {
    z-index: 30;
    right: 1rem;
    transition-delay: 0s;
}
 
.footnote .f-heading {
    font-family: var(--header-font);
}
.footnote .f-footer, .equation .e-footer, .reference .r-footer {
    display: none;
}
 
.footnotes-footer {
    border: none;
    border-left: solid 0.2rem var(--accentColor);
    padding: 0.1rem 1rem 1rem 1.25rem;
    position: relative;
    border-radius: 0 1.25rem;
}
.footnotes-footer::before {
    content: "";
    display: block;
    height: 0.5rem; width: 0.5rem;
    position: absolute;
    left: 0; top: 0;
    background-color: var(--accentColor);
    transform: translate(calc(-50% - 0.1rem),-50%) rotate(45deg);
}
 
.footnotes-footer .title {
    color: var(--textColor);
    font-family: var(--header-font);
    margin: 0 0 0.625rem 0;
}
 
/*-- tags --*/
 
#main-content .page-tags a {
    height: 0.8125rem;
    font-size: 0.6875rem;
    background-color: var(--primaryBackgroundColor);
    color: var(--textColor);
    border-radius: 0.35rem;
    margin: .25rem .2rem;
    padding: 0.21rem 0.35rem 0.22rem 0.3rem;
    box-shadow: 0 0 3px rgba(0,0,0,0.25);
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
 
    background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
    background-size: 0 100%;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--link-timing);
}
 
#main-content .page-tags a:hover,
#main-content .page-tags a:focus {
    background-size: 100% 100%;
    text-decoration: none;
}
#main-content .page-tags a:before {
    content: "⬤";
    font-size: 4px;
    padding-right: 0.2rem;
    display: inline-block;
}
 
.page-tags span {
    border-top: solid 0.125rem var(--primaryBackgroundColor);
}
 
/* Pop-Up Windows */
.owindow {
    background-color: var(--primaryBackgroundColor);
    border: none;
}
 
.owindow .modal-header {
    background-color: transparent;
}
 
.owindow .modal-body img {
    background-color: transparent !important;
}
 
.owindow .title {
    background-color: transparent;
    color: var(--headerColor);
    border-bottom: 1px solid var(--headerColor);
}
 
.owindow .button-bar a {
    background-color: var(--primaryBackgroundColor);
    border-color: var(--accentColor);
    color: var(--accentColor);
}
.owindow .button-bar a:hover {
    background-color: var(--accentColor);
    color: var(--primaryBackgroundColor);
}
 
#page-content .modalbox {
    background: #FEFBF8;
    border: none;
    border-radius: 0;
    box-shadow: 0 0 10px rgba(0,0,0,0.35);
}
#page-content .modalbox hr { margin: 0.75rem 1rem; }
 
/* Edit Buttons */
.buttons .btn {
    background-color: var(--primaryBackgroundColor);
    border-color: var(--accentColor);
    color: var(--accentColor);
    padding: 3px 5px;
}
.buttons .btn:hover {
    background-color: var(--accentColor);
    color: var(--primaryBackgroundColor);
}
 
/* Close Button for Page Source, Rating, Etc */
a.action-area-close:hover {
    background-color: var(--accentColor);
    color: var(--primaryBackgroundColor);
}
 
/* Page-History Current */
.pager .current {
    background-color: var(--accentColor);
    border-color: var(--primaryBackgroundColor);
}
 
/* ---- CUSTOM SYNTAX ----*/
 
#page-content .section-header {
    display: flex;
    align-items: center;
    text-align: center;
    margin-top: 3.5rem;
    margin-bottom: 0.75rem;
    clear: both;
}
#page-content .breaker + .section-header {
    margin-top: 1.5rem;
}
.section-header::before, .section-header::after {
    content: "";
    flex-grow: 1;
    height: 0.175rem;
    margin: auto -0.625rem auto auto;
    background-color: var(--primaryBackgroundColor);
}
.section-header::after {
    margin: auto auto auto -0.625rem;
}
 
.section-header h1 {
    width: max-content;
    margin: 0 auto;
    text-align: center;
    padding: 0.05rem 1.5rem;
    border-radius: 0rem 0.875rem;
    border-bottom: solid 0.2rem var(--accentColor);
    border-top: solid 0.2rem var(--accentColor);
    position: relative;
}
.section-header h1::before {
    content: "";
    background-color: var(--accentColor);
    display: block;
    width: 0.6rem; height: 0.6rem;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-0.3rem, -0.4rem) rotate(45deg);
}
.section-header h1::after {
    content: "";
    background-color: var(--accentColor);
    display: block;
    width: 0.6rem; height: 0.6rem;
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(0.3rem, 0.4rem) rotate(45deg) ;
}
.section-header h1 span {
    width: max-content;
    margin: auto;
}
 
/*-----------------*/
 
.s-title {
    font-size: 110%;
    font-weight: bold;
    display: inline;
    padding: 0 0.15em;
    padding-bottom: 0.1em;
    border-bottom: solid 0.1rem currentColor;
    border-top: solid 0.1rem currentColor;
}
 
.gallery-frame {
    box-sizing: border-box;
    background-color: #FFF4E9;
    padding: 0.75rem;
    border: inset 0.325rem var(--headerColor);
    box-shadow: inset 0 0 5px rgba(0,0,0,0.4);
    margin: auto;
}
.gallery-frame > img { box-shadow: 0 0 3px 1px rgba(0,0,0,0.3); }
 
.hover:hover {
    text-decoration: none;
}
.hover span { display: none; }
.hover:hover span {
    position: absolute;
    display: inline;
    height: auto;
    max-width: 25%;
    background-color: var(--headerColor);
    color: #FEFBF8;
    font-weight: bold;
    padding: 0.5em 1.5em;
    border-bottom-right-radius: 1rem;
}
 
.f-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
.f-flex > div {
    flex-basis: 18rem;
    flex-grow: 1;
}
.f-flex.three > div {
    flex-basis: 13rem;
    flex-grow: 1;
}
.f-flex.data > div {
    padding: 0.65rem 0.375rem;
}
.f-flex.data > div:hover {
    z-index: 9;
}
 
.f-con {
    border: none;
    padding: 0.15rem 0.75rem;
    margin: 0.85rem;
    position: relative;
    border-radius: 0 1.25rem;
    background-color: #FFF4E9;
    box-shadow: 0 0 4px rgba(0,0,0,0.3);
}
#page-content .f-flex .f-con { max-width: 25rem; }
.f-con h4 {
    background-color: var(--headerColor);
    color: #FEFBF8;
    padding: 0.1rem 0;
    border-radius: 0 0.625rem;
}
 
.placard {
    display: inline-block;
    position: relative;
    padding: 0.45rem 0.65rem;
    margin: -1.05rem -0.5rem -1.3rem;
    border: solid 1em transparent;
    background: var(--primaryBackgroundColor) padding-box;
    clip-path: polygon(0 3em, 3em 0, 100%  0, 100% calc(100% - 3em), calc(100% - 3em) 100%, 0 100%);
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
}
.placard::before, .placard::after {
    position: absolute;
    width: 3em;
    height: .35em;
    background: radial-gradient(at 50% 0, rgba(0,0,0,0.17), rgba(0,0,0,0) 65%);
    content: "";
}
.placard::before {
    top: 0.45em;
    left: -0.95em;
    transform: rotate(-45deg);
}
.placard::after {
    bottom: 0.45em;
    right: -0.95em;
    transform: rotate(135deg);
}
 
/*---- Side ToC setup ----*/
 
.anchor {
    position: sticky;
    height:0;
    top: 0.5rem;
    z-index: 4;
}
.tocbox {
    margin-top: 0;
    position: absolute;
    top: 0;
    right: max(-18.75rem, -17vw);
    z-index: 4;
    box-sizing: border-box;
    width: max-content;
    pointer-events: none;
}
 
#page-content .tocbox .toc-u {
    padding: 0.5rem;
    background-color: #FEFBF8;
    box-shadow: 0 0 4px rgba(0,0,0,0.3);
    border-right: solid 0.2rem var(--headerColor);
    position: relative;
    width: 15rem;
    max-height: calc(98vh - 2rem);
    max-width: calc((30vw - 50% - 6rem)/1.2);
    margin-right: 0; margin-left: auto;
    pointer-events: all;
}
.toc-u #toc::before, .toc-u #toc::after { display: none; }
.toc-u::before, .toc-u::after {
    content: "";
    display: block;
    height: 0.5rem; width: 0.5rem;
    position: absolute;
    right: 0;
    background-color: var(--headerColor);
}
.toc-u::before {
    top: 0;
    transform: translate(calc(0.1rem + 50%),-50%) rotate(45deg);
}
.toc-u::after {
    bottom: 0;
    transform: translate(calc(0.1rem + 50%),50%) rotate(45deg);
}
 
#page-content .tocbox .toc-u #toc-list {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 84vh;
    padding: 0 0.5em 1em;
    scrollbar-width: thin;
}
#page-content .tocbox .toc-u #toc-list::-webkit-scrollbar {
    width: 6px;
}
 
.tocbox table,
.tocbox tbody,
.tocbox tr,
.tocbox td,
.tocbox #toc {
    display: contents;
}
 
#toc-list > div { position: relative; }
#toc-list > div[style*="1em"]::before {
    content: "•";
    display: inline-block;
    position: absolute;
    left: -0.75em;
    color: var(--accentColor);
}
 
@media (max-width: 1340px) {
    .anchor {
        filter: none;
        transition: filter 0.2s ease-out;
     }
    .tocbox {
        right: -1rem;
        width: unset;
    }
    .tocbox::before {
        content: "";
        display: block;
        position: absolute;
        background-color: transparent;
        width: 1.5rem; height: 100%;
        top: 0; right: -0.25rem;
        pointer-events: all;
}
    .tocbox::after {
        content: "";
        display: block;
        position: absolute;
        background-color: transparent;
 
        width: 0; height: 0;
        border: solid 1rem transparent;
        border-left-width: 0.5rem;
        border-right-color: var(--headerColor);
 
        top: calc(50% - 1rem); right: 0;
        pointer-events: all;
        transition: border-right-width 0.15s ease-out;
    }
    #page-content .tocbox .toc-u {
        width: -moz-fit-content;
        width: fit-content;
        max-width: 60vw;
        box-shadow: none;
        clip-path: inset(-0.5rem -0.5rem -0.5rem calc(100% - 0.65rem));
        transition: clip-path 0.2s ease-out;
        pointer-events: none;
    }
 
    .anchor:hover { filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.2)); }
    .tocbox:hover {
        pointer-events: all;
    }
    .tocbox:hover::after {
        border-right-width: 0;
    }
    #page-content .tocbox:hover .toc-u {
        pointer-events: all;
        clip-path: inset(-0.5rem -0.5rem -0.5rem -0.35rem);
    }
}
 
/* ---- FOOTER & LICENSE AREA ---- */
 
#footer, #license-area {
    background-color: #FFF4E9;
    color: var(--textColor);
}
#footer a { color: var(--accentColor); }
 
#footer {
    padding-top: 1rem;
}
#license-area {
    padding-top: 0;
}
 
/* ---- INTERWIKI ---- */
 
.scpnet-interwiki-frame{
    filter: invert(100%) grayscale(100%) contrast(75%);
}
 
/* ---- MOBiLE QUERY ---- */
@media (max-width: 767px) {
 
    div#header, div#top-bar {
        width: 100%;
        max-width: 100%;
    }
 
    #login-status {
        padding-top: 0rem;
        padding-left: 0.3rem;
    }
    #login-status span.printuser  {
        font-size: 0;
    }
    #login-status span.printuser img {
        font-size: 0;
        transform: translate(6px, 5px);
    }
    #login-status a#my-account {
        display: none;
    }
 
    #main-content {
        padding: 0.5em 1.75em 0.75em;
    }
    #side-bar .close-menu {
        opacity: 0;
        margin-left: 18.75em;
    }
    #side-bar:target .close-menu:hover {
        background: unset;
    }
 
    :root {
        --header-title: "SCPF News";
    }
 
    #page-title, .meta-title { font-size: 2.4em; }
    h1 { font-size: 1.8em; }
    h2 { font-size: 1.5em; }
    h3 { font-size: 1.25em; }
    h4 { font-size: 1.05em; }
    h5 { font-size: 0.9em; }
    h6 { font-size: 0.8em; }
}


PLEASE STOP

This is an SCP Wiki Staff Workbench.

DO NOT TOUCH THIS PAGE WITHOUT PERMISSION

Section Checklist ✔️ or ⛔ or 👍
Editorial
SCP News
Featured Content
Writer's Column
Rounder Table
Artist's Shoutout
Interview of the Month
SCP Data & Trends
Contest
New Content this Month 👍
Word from Staff
The Site News Team
Licensing Info


DISCLAIMER: This is the Site News for the English Branch of the SCP Wiki. The opinions of the individual members of the Site News team that are presented in each edition of the Site News are their own thoughts and are not meant to be representative of the Site News team as a whole nor are they representative of the staff body as a whole. If you take issue with any of the contents, then feel free to reach out to the editor(s) and they will review the contents to see if there are any edits that need to be made. We intend to always deliver interesting content to you, and we understand that there may be times where controversial or unpopular opinions will be presented whether by our writers or our editor(s). Thank you for your understanding!

Editorial

placeholder

- By WhiteGuard

SCP News

Artwork by Seraphannim

Site News

Placeholder

Offsite News

Placeholder

International News

Placeholder

Featured Content

Top Articles of the Month

Ratings of course do not mean everything, but they are representative of what people happened to like seeing at the time. With this in mind, the following are the top-rated works of the month, so if by some chance you haven't encountered them yet, be sure to check them out!

Top-Rated SCP

Top-Rated Non-SCP


Front Page Features

Every month, an article is selected from each of the three common article types: SCP, Tale, and Group of Interest Format. These three articles are displayed on the front page for the month to bring further recognition to them.

If you would like to view the previous front page features, you can view the archive for the SCPs here, the archive for the Tales here, and the archive for the GoI Formats here!

SCP Article

Tale

GoI-Format


Underread & Underrated

Underread and Underrated is a project intended to shine a spotlight on, well, underread and underrated pages! As part of the associated UaU initiative, each month an element of SCP lore will be picked that people outside the general gestalt might not know about. Additionally, writing challenges will be hosted involving said lore!

For more information including the topic and prompt for each month, check out the actual Underread and Underrated page here!

Featured SCP

Featured Non-SCP


Reviewers' Spotlights

Works are featured on the site’s front page as part of the Reviewers’ Spotlight, which acknowledges the time and effort spent by forum reviewers helping other authors develop and edit and their works for the mainsite. Each month, community members are encouraged to nominate forum reviewers who have been both particularly helpful and active. Members of the Forum Criticism Team will then discuss the nominations, and select four prominent reviewers to choose the month’s Reviewers’ Spotlight front-page features.

If you would like to view previous spotlights, you can view the archive for them here!

1st of November

7th of November

14th of November

21st of November

Writer's Column

The Riemann Conjecture

IPlaceholder

Next month: Riemann gives uncontroversial takes on Author Avatars


fox.jpg

by Fox

Captain's Log: Date 004

Placeholder

Rounder Table


Prompts from your favorite house, thoughts from your favorite authors - all about the genre of SCP writing!

Prompt: Placeholder

Placeholder

- Placeholder

Artist's Shoutout

~ Placeholder ~

Twitter
Facebook
SCP-ES-137 - TristezaEyubHgaWQAEbgvC?format=jpg&name=medium

placeholder

Question

Reply

Question

Reply

Question

Reply

Question

Reply

Question

Reply

SCP-179 - SauelsuesorFAitWFSXIAgWYU0?format=jpg&name=largeGRANT REQUEST FOR THE MANUFACTURE OF DEVICES TO REGULATE THE HUME COEFFICIENT OF LOCALISED REALITYE_5QlM8VgBACSWs?format=jpg&name=mediumSCP-6803 - True EarthE_aoXwTWQAAhauE?format=jpg&name=large

SCP-ES-105 - Stargazing The Other Stars
E-jY_d6XIAUc_LX?format=jpg&name=large

Onsite Art this Month

Interview of the Month

July spotlight: [ Placeholder]

Featuring:
Interviewer: Elenee FishTruck

Interview

Question

Reply

Question

Reply

Question

Reply

Question

Reply

Question

Reply

SCP Data & Trends

All the goings-on of the site condensed into bite-sized takeaways! Is there a statistic or figure you would be interested in knowing? Let us know and we can feature it next time!

AARP.png
AAPTM.png
AT.png
AA.png

Updates from the Recap Team

contest placeholder

Artwork by placeholder

placeholder

Podium

FIRST PLACE: placeholder ("placeholder") - Written by placeholder.

SECOND PLACE: placeholder ("placeholder") - Written by placeholder.

THIRD PLACE: placeholder ("placeholder") - Written by placeholder.

All Entries

placeholder

New Content this Month

There is a multitude of wonderful works that are posted to the Wiki every month whether they be SCP articles, Tales, GoI Formats, Art pages, Author Pages, Essays, and more! Below, we have all of the creations for this month listed out by week and type (except for art pages, we did that earlier!) We have added little emojis next to articles that qualify to add some additional content. Below we have listed out the emojis we use and what they mean. Be sure to give them a look!

🐣 = An author's first article - This is their first one! Check them out and be sure to leave comments!
🤝 = Co-authored works - It is always interesting to see the dynamics of how people work together!
💯 = Articles rated at +100 and higher - These are articles that have seen success and should be celebrated for it!
📈 = SCP articles rated under +30 and Tales and GoI Formats rated under +20 - Let's show these a little love!


Week of November 1st


SCP Articles

Tales

GoI Formats

Miscellaneous Pages


Week of November 7th


SCP Articles

Tales

GoI Formats

Miscellaneous Pages


Week of November 14th


SCP Articles

Tales

GoI Formats

Miscellaneous Pages


Week of November 21st


SCP Articles

Tales

GoI Formats

Miscellaneous Pages


Week of November 28th


SCP Articles

Tales

GoI Formats

None this week.

Miscellaneous Pages

The Site News Team

Editor

WhiteGuard

Editor, Interviewer

Hey there! I am the editor of the SCP Wiki -EN branch's Site News as well as a Moderator for the site. If you have any questions, issues, suggestions, concerns, and so on about the Site News, feel free to contact me! My predominant goal when taking over was to deliver a product each month to our wonderful community that would be interesting and enjoyable to read. Have a wonderful day and stay tuned for the next one!

Reporters

CaptainKirby

Columnist

Well written, quick as a whip, and able to pilot any seafaring vessel1. Clever robot creator and shaped like a friend.

Dysadron

Data Reporter

Former reporter for [EXPUNGED]. Likes writing, horror movies, and puppies. If you know of me, it's likely due to SCP-5733. Don't ask me how to pronounce my username.

Elenee FishTruck

Art Team, Interviewer

Former President. Image connoisseur. Reportedly good at asking questions (unsubstantiated).

EstrellaYoshte

Art Team, Formatting Team

Site News' most sleepless artist and visual technician. Can be found haunting your CSS at the dead of night.

Naepic

Art Team

Very old for a guy beginning his 20s. Remembers when Site News was sigma and bland-pilled and was hired out of the blue by a guy who wrote about racecar witches.

Riemann

Columnist

Riemann is a cosmologist2 who should be spending their time writing papers rather than writing columns. No one believes that they ride a motorcycle.

ROUNDERHOUSE

Features Reporter, Formatting Team, Op-ed Reporter

Bigger, better, rounder than you are. Wanderer's Library admin. Former editor of [EXPUNGED]. Likes doing author features and writing spotlights when he isn't stacking racks. Delightfully devilish.

Siddartha Alonne

SCP News Reporter

International reporter! Knows everything about every branch of the Foundation. When he's not searching for nitpicks, he's reporting international news to our magazine. Don't make him notice that the correct spelling is "Siddhartha". The world is not ready for it.

UncertaintyCrossing

Art Team

This incorporeal entity can be found traveling the Seven Seas in search of artistic treasure to share here with the community. Feel free to give it a poke if you have a bounty to contribute.


Thank you so much for reading the SCP Wiki's Site News!


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