Sigma+

NOTICE:

This is a component page used internally by the SCP Wiki. It is intended to be used and included on other pages.

rating: +47+x

This is a meta-component made by EstrellaYoshteEstrellaYoshte to be used as an assistive layer for theme-making.
To use, put the following:

[[include :scp-wiki:component:sigma-plus]]

Sigma+, by itself, preserves most of the original aesthetics while using more modern CSS conventions and properties, including:

  • Extensible CSS variables
  • Grid and flex-based layout
  • Fully tab-able navigation
  • RTL direction compliance

Developer's Note

The principal idea of the component is to alleviate the burden of resolving the site theme's outdated base layout, which tends to either limit the amount of customization implemented, massively increase CSS complexity/overhead to implement the desired layout, further worsens the situation with more unoptimized CSS, or some unholy combination of the three.

Sigma+ limits itself to re-implementing semantic and visual flow for the most part to maintain the highest possible passthrough as a compatibility layer, with a few exceptions:

  • Header decoration: Originally a background-image on #container-wrap, which both semantically divorce it from the actual #header and #top-bar, and makes it unresponsive to change in size and layout (from end-user settings, browser defaults, screen size, etc.) Remade into background-image for both divs.
  • Top Bar dropdowns: modified to be better responsive to screen sizes, as well as overriding generally annoying styles from Wikidot's default. Made tab-navigable.
  • Rate & Info module: significantly restyled for better semantic separation and easier to modify with variables. Undid Info module's idiosyncratic CSS.
  • Tabs: Replaced the spritesheet used to style the tabs with CSS variables. Slightly less annoying to deal with.

Example

plus-example.png

:root {
--header-title: "We don't have a 55";
--sp_header-height: 21.75rem;
}

Source Code:

:where(:root) {
    --header-title: "SCP Foundation";
    --header-subtitle: "Secure, Contain, Protect";
 
    --sp_header-title-size: min(calc(2.675rem * var(--sp_header-title-scale)), calc(1.25rem * var(--sp_header-title-scale) + 2.5vw));
    --sp_header-subtitle-size: min(calc(.875rem * var(--sp_header-subtitle-scale)), calc(0.475rem * var(--sp_header-subtitle-scale) + 1.25vw));
    --sp_header-title-scale: 1;
    --sp_header-subtitle-scale: 1;
 
    --sp_header-logo: url(https://scpwiki.github.io/sigma/images/header-logo.svg);
    --sp_header-logo-size: 6.25rem;
    --sp_header-logo-adaptive-size: min(var(--sp_header-logo-size), calc(var(--sp_header-logo-size)*0.575 + 5vw));
    --sp_header-height: 8.75rem;
 
    --sp_header-gradient-top-color: #000000;
    --sp_header-gradient-top-stop: .4;
    --sp_header-gradient-bottom-color: #6B4040;
    --sp_header-gradient-bottom-stop: .95;
 
    --sp_diagonal-stripes-angle: 45deg;
    --sp_diagonal-stripes-width: .08rem;
    --sp_diagonal-stripes-gap: .22rem;
    --sp_diagonal-stripes-color: #FFAFAF09;
 
    --sp_top-bar-height: 1.375rem;
    --sp_top-bar-gradient-top-color: #535353;
    --sp_top-bar-gradient-bottom-color: #3B3B3B;
 
    --sp_top-bar-link-color: #fff;
    --sp_top-bar-link-hover-color: #a01;
    --sp_top-bar-link-hover-background: #fff;
 
    --sp_dropdown-width: calc(8.25rem + 2.25vw);
    --sp_dropdown-background: #eee;
    --sp_dropdown-link-color: var(--sp_top-bar-link-hover-color);
    --sp_dropdown-link-hover-color: var(--sp_top-bar-link-hover-color);
    --sp_dropdown-link-background: transparent;
    --sp_dropdown-link-border: 0.05rem solid #ddd;
    --sp_dropdown-link-hover-background: var(--sp_top-bar-link-hover-background);
 
    --sp_side-bar-width: 14rem;
 
    --sp_area-max-width: 62.5rem;
    --sp_area-min-margin: 1.25rem;
    --sp_area-comp-margin: max(calc((100vw - var(--sp_area-max-width))/2), var(--sp_area-min-margin));
    --sp_final-header-height: calc(var(--sp_header-height) + var(--sp_top-bar-height));
 
    --sp_rate-module-text-color: #FFF;
    --sp_rate-module-background: #633;
    --sp_rate-module-sub-color: #966;
    --sp_rate-module-active-color: var(--sp_rate-module-text-color);
 
    --sp_rate-module-button-color: var(--sp_rate-module-background);
    --sp_rate-module-button-background: #fff6f0;
    --sp_rate-module-button-hover-color: var(--sp_rate-module-active-color);
    --sp_rate-module-button-hover-background: var(--sp_rate-module-background);
 
    --sp_tab-text-color: #000;
    --sp_tab-background: #fefefe;
    --sp_tab-border-color: #a3a3a3;
    --sp_tab-hover-text-color: var(--sp_tab-text-color);
    --sp_tab-hover-background: #ffd3d3;
    --sp_tab-hover-border-color: var(--sp_tab-border-color);
    --sp_tab-selected-text-color: #fff;
    --sp_tab-selected-background: #901;
    --sp_tab-selected-border-color: #65000b;
 
    --sp_hovertip-background: #fff;
    --sp_hovertip-border: 0.05rem solid black;
}
 
textarea, input { font-family: inherit; }
 
/*--------------*/
/*--- HEADER ---*/
/*--------------*/
 
/* unset the faux header bg */
div#container-wrap { background-image: none; }
 
#header {
    /* Recreating (sans top bar) with gradients */
    background-image:
 
        /* Diagonal stripes */
        repeating-linear-gradient(var(--sp_diagonal-stripes-angle),
            var(--sp_diagonal-stripes-color), var(--sp_diagonal-stripes-color) var(--sp_diagonal-stripes-width),
            transparent var(--sp_diagonal-stripes-width), transparent var(--sp_diagonal-stripes-gap)),
 
        /* Header gradient colors */
        linear-gradient(to bottom,
            var(--sp_header-gradient-top-color) calc(var(--sp_header-gradient-top-stop) * var(--sp_header-height)),
            var(--sp_header-gradient-bottom-color) calc(var(--sp_header-gradient-bottom-stop) * var(--sp_header-height))
        );
    background-repeat: repeat-x;
    background-size: auto;
    background-position: initial;
 
    /* De-styling sigma */
    padding-bottom: 0;
    height: auto;
    width: 100%;
    max-width: unset;
    min-height: var(--sp_final-header-height);
    z-index: initial;
 
    /* Grid layout */
    display: grid;
    grid-template-areas:
        ". login login ."
        ". . . ."
        ". h1 search ."
        ". h2 search ."
        ". . . ."
        "top-bar top-bar top-bar top-bar";
    grid-template-rows: auto 1fr auto auto 1fr auto;
    grid-template-columns: var(--sp_area-comp-margin) 1fr auto var(--sp_area-comp-margin);
}
 
/* Header logo */
#header::before {
    content: "";
    display: block;
    background: var(--sp_header-logo) no-repeat center;
    background-size: contain;
    grid-row: 2/6;
    grid-column: 2/3;
    width: var(--sp_header-logo-adaptive-size);
}
 
/*--------------*/
/*--- TOP BAR ---*/
/*--------------*/
 
#top-bar {
    grid-area: top-bar;
 
    /* De-styling sigma-9 */
    position: relative;
    z-index: initial;
    top: initial; right: initial;
    max-width: unset;
    line-height: unset;
    height: auto;
    font-size: .875em;
 
    padding-inline: var(--sp_area-min-margin);
    box-sizing: border-box;
    min-height: var(--sp_top-bar-height);
 
    /* Recreating top bar image with gradients */
    background-image:
        linear-gradient(to bottom,
            var(--sp_top-bar-gradient-top-color) 0%,
            var(--sp_top-bar-gradient-bottom-color) 100%);
}
 
#top-bar > div[class*="top-bar"] {
    max-width: var(--sp_area-max-width);
    height: 100%;
    margin: auto;
    position: static;
    left: initial;
    bottom: initial;
    z-index: initial;
}
#top-bar ul, #top-bar li {
    float: none;
}
#top-bar div[class*="top-bar"] > ul {
    height: 100%;
    display: flex;
    justify-content: end;
}
#top-bar :is(.top-bar, .mobile-top-bar) > ul > li > a {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
    max-height: unset;
    border: none;
    line-height: 1.275;
    color: var(--sp_top-bar-link-color);
    padding: 0;
    padding-inline: calc(var(--sp_dropdown-width)*0.05 + 0.25vw);
    box-sizing: border-box;
}
#top-bar :is(.top-bar, .mobile-top-bar) > ul > li > a:hover,
#top-bar :is(.top-bar, .mobile-top-bar) > ul > li:is(.sfhover, :hover, :focus-within) > a {
    color: var(--sp_top-bar-link-hover-color);
    background: var(--sp_top-bar-link-hover-background);
}
#top-bar :is(.top-bar, .mobile-top-bar) ul li ul {
    left: initial;
    min-width: max(100%, var(--sp_dropdown-width));
    width: max-content;
    background: var(--sp_dropdown-background);
    box-sizing: border-box;
    z-index: 3;
    visibility: visible;
    pointer-events: none;
    opacity: 0;
}
#top-bar :is(.top-bar, .mobile-top-bar) > ul > li:where(:not(:last-child)) > ul {
    inset-inline-start: 0;
}
#top-bar :is(.top-bar, .mobile-top-bar) > ul > li:where(:last-child) > ul {
    right: initial;
    inset-inline-end: 0;
}
#top-bar :is(.top-bar, .mobile-top-bar) ul li:is(.sfhover, :hover, :focus-within) ul {
    pointer-events: auto;
    opacity: 1;
}
 
#top-bar :is(.top-bar, .mobile-top-bar) ul li ul li a {
    min-width: max-content;
    width: 100%;
    box-sizing: border-box;
    line-height: 1.5;
    overflow: initial;
    max-height: initial;
    padding: 0.125em 0.75em;
    border-top: var(--sp_dropdown-link-border);
    color: var(--sp_dropdown-link-color);
    background: var(--sp_dropdown-link-background);
    text-align: start;
}
#top-bar :is(.top-bar, .mobile-top-bar) ul li ul li a:is(:hover,:focus) {
    color: var(--sp_dropdown-link-hover-color);
    background: var(--sp_dropdown-link-hover-background);
}
 
#top-bar .open-menu, #top-bar .open-menu > p { display: contents; }
#top-bar .open-menu a { z-index: 9; }
 
/*--------------*/
/*--- LOGIN ---*/
/*--------------*/
 
#login-status {
    top: initial;
    right: initial;
    position: relative;
    z-index: 3;
    grid-area: login;
    text-align: end;
    padding-block-start: 0.5rem;
}
#account-options {
    right: initial;
    inset-inline-end: 0;
    inset-block-start: 100%;
    display: block!important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.075s linear;
}
#account-topbutton:focus + #account-options,
#account-options:is(:hover, :focus-within) {
    opacity: 1;
    pointer-events: auto;
}
 
/* Safari support */
@media not all and (min-resolution:.001dpcm) { @media { 
#account-topbutton:hover + #account-options {
    opacity: 1;
    pointer-events: auto;
}
}}
 
/*--------------*/
/*--- SEARCH ---*/
/*--------------*/
 
#search-top-box {
    grid-area: search;
    position: relative;
    right: initial;
    top: initial;
    width: auto;
    display: flex;
    align-items: center;
    text-align: unset;
    z-index: initial;
}
 
#search-top-box-form {
    display: flex;
    gap: 0.325rem;
}
 
#search-top-box-input, #search-top-box-form input[type=submit] {
    margin: 0; 
    appearance: none;
}
 
/*------------------*/
/*--- HEADER TEXT ---*/
/*------------------*/
 
#header h1 { grid-area: h1; }
#header h2 { grid-area: h2; }
#search-top-box { grid-area: search; }
#header h1, #header h2 {
    margin-left: initial;
    padding: 0;
    padding-inline-start: calc(var(--sp_header-logo-adaptive-size)*1.05);
    float: none;
    max-height: initial;
    font-size: 1rem;
}
#header h1 a, #header h2 span {
    margin: 0;
    padding: 0;
    line-height: 1.125;
    max-height: initial;
    max-width: max-content;
    display: inline-block;
    font-size: 0rem;
    letter-spacing: 0;
}
#header h1 a::before {
    content: var(--header-title);
    font-size: var(--sp_header-title-size);
}
#header h2 span::before {
    content: var(--header-subtitle);
    font-size: var(--sp_header-subtitle-size);
    letter-spacing: 0.05vw;
}
 
/*-----------------------*/
/*-----------------------*/
/*-----------------------*/
 
/*------------------*/
/*--- MAIN AREA ---*/
/*------------------*/
 
#content-wrap {
    min-height: unset;
    width: calc(100% - var(--sp_area-min-margin)*2);
    display: flex;
    max-width: var(--sp_area-max-width);
    column-gap: 2.325rem;
}
 
#main-content {
    padding: 0;
    margin: 0;
    max-width: 100%;
    min-width: 0rem;
    flex: 1 1 auto;
    overflow-wrap: break-word;
}
#page-content { font-size: unset; }
 
/* Side Bar */
@media not all and (max-width: 767px) {
    #side-bar {
        position: static;
        inset: initial;
    }
}
div#side-bar {
    width: var(--sp_side-bar-width);
    flex: 0 0 var(--sp_side-bar-width);
}
 
/* Breadcrumbs */
#breadcrumbs, .pseudocrumbs {
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.55ch;
}
.pseudocrumbs > p { display: contents; }
 
/*--------------------*/
/*--- USER DISPLAY ---*/
/*--------------------*/
 
.printuser {
    display: inline-flex;
    align-items: baseline;
    grid-gap: 0.25em;
    text-indent: 0;
}
.printuser a { margin-right: 0; }
.printuser > a:first-child {
    display: flex;
    user-select: none;
    align-self: center;
    min-width: max-content;
}
.printuser > a:first-child img {
    height: 1.25em;
    width: 1.25em;
    padding: 0;
    padding-left: 0.5em;
    object-fit: contain;
    background-size: cover;
    overflow: hidden;
    margin: 0;
}
 
/*-----------------*/
/*--- RATE & INFO MODULE ---*/
/*-----------------*/
 
/* Baseline reset */
div.page-rate-widget-box,
div.rate-box-with-credit-button {
    display: inline-flex;
    align-items: center;
    background-color: var(--sp_rate-module-background);
    border: none;
    padding: 0.075em;
    margin-right: 0;
}
div.page-rate-widget-box .cancel a:hover { background: transparent; }
 
/*-----------------*/
 
div.page-rate-widget-box {
    flex-wrap: wrap;
}
div.page-rate-widget-box .rate-points {
    padding: 0 .675em;
    color: var(--sp_rate-module-text-color);
}
#main-content div.page-rate-widget-box span:is(.rate-points, .btn) {
    border: none;
    border-radius: unset;
    background: transparent;
}
.page-rate-widget-box :is(.rateup, .ratedown) a {
    margin: 0;
    color: var(--sp_rate-module-button-color);
    background-color: var(--sp_rate-module-button-background);
}
.page-rate-widget-box :is(.rateup, .ratedown) a:is(:hover,:focus) {
    color: var(--sp_rate-module-button-hover-color);
    background-color: var(--sp_rate-module-button-hover-background);
}
 
div.page-rate-widget-box .cancel a { color: var( --sp_rate-module-sub-color); }
div.page-rate-widget-box .cancel a:is(:hover,:focus) { color: var( --sp_rate-module-active-color); }
 
/*-----------------*/
 
div.rate-box-with-credit-button {
    align-items: stretch;
}
 
div.rate-box-with-credit-button .page-rate-widget-box {
    background-color: transparent;
    border-radius: inherit;
    padding: 0;
}
 
div.rate-box-with-credit-button .creditButton {
    display: block;
}
div.rate-box-with-credit-button .creditButton p {
    display: contents;
    font-size: unset;
}
div.creditButton p a {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .925em;
    width: 1.375em;
    height: 100%;
    color: var( --sp_rate-module-text-color);
    padding: 0; padding-top: .1425em;
    border: 0;
    border-inline-start: solid 0.05em var( --sp_rate-module-sub-color);
    box-sizing: border-box;
    margin: 0;
}
div.creditButton p a:is(:hover,:focus) { color: var(--sp_rate-module-button-hover-color); }
 
:is(div,ul).creditRate {
    display: block;
    float: none;
    text-align: end;
    margin-right: 0;
}
div.creditRate .rateBox { display: contents; }
 
div#u-credit-view, div#u-credit-otherwise {
    display: grid;
    place-content: center;
}
div.modalcontainer {
    position: relative;
    top: unset;
    bottom: unset;
    left: unset;
    right: unset;
    height: auto;
}
div.modalbox {
    display: flex;
    flex-direction: column;
}
 
/*-------------*/
/*--- IMAGE BLOCK ---*/
/*-------------*/
 
div.scp-image-block.block-right {
margin-right: 0;
}
div.scp-image-block.block-left {
margin-left: 0;
}
@media screen and (max-width: 640px) {
    div.scp-image-block:is(.block-right,.block-left) {
        margin: .75em auto; float: none;
    }
}
 
/*-------------*/
/*--- TABS ---*/
/*-------------*/
 
.yui-navset { clear: both; }
 
.yui-navset .yui-nav {
    display: flex;
    flex-wrap: wrap;
}
.yui-navset.yui-navset-top .yui-nav :is(li, .selected) {
    display: block;
    margin: 0;
    padding: 0;
}
.yui-navset.yui-navset-top .yui-nav li a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    border-width: 0.05rem;
    box-sizing: border-box;
    padding: 0.325rem 0.625rem;
}
 
.yui-navset.yui-navset-top .yui-nav :is(li, .selected) a em {
    position: static;
    inset: unset;
    border: none;
    padding: 0;
}
 
/* ------------------------- */
.yui-navset.yui-navset-top .yui-nav li a {
    color: var(--sp_tab-text-color);
    background: var(--sp_tab-background);
    border-color: var(--sp_tab-border-color);
}
 
.yui-navset.yui-navset-top .yui-nav li a:where(:hover,:focus) {
    color: var(--sp_tab-hover-text-color);
    background: var(--sp_tab-hover-background);
    border-color: var(--sp_tab-hover-border-color);
}
 
.yui-navset.yui-navset-top .yui-nav .selected a {
    color: var(--sp_tab-selected-text-color);
    background: var(--sp_tab-selected-background);
    border-color: var(--sp_tab-selected-border-color);
}
 
/*-------------*/
/*--- FOOTNOTE ---*/
/*-------------*/
 
.hovertip {
    background: var(--sp_hovertip-background)!important;
    border: var(--sp_hovertip-border)!important;
}
 
/*-------------*/
/*--- TAGS ---*/
/*-------------*/
 
#main-content .page-tags { text-align: start; }
#main-content .page-tags span {
    max-width: max-content;
    display: flex;
    flex-wrap: wrap;
    grid-gap: 0.375rem;
}
#main-content .page-tags a {
    margin: 0;
}
 
/*------------------*/
/*--- BOTTOM OPTIONS ---*/
/*------------------*/
 
#page-info, .page-watch-options, .page-options-bottom {
    text-align: end;
    height: auto;
}
:where(#page-options-container) .page-options-bottom a {
    display: inline-block;
}
 
#who-rated-page-area > div {
    column-width: 13.75em;
    column-gap: 0.75rem;
}
 
/*------------------*/
/*--- END AREA ---*/
/*------------------*/
 
#footer {
    display: flex!important;
    flex-wrap: wrap;
    text-align: center;
    justify-content: center;
    align-items: baseline;
    grid-gap: 0.5ch;
}
#footer .options {
    display: flex!important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    float: none;
    order: 1;
    width: auto;
    font-size: 0;
    margin-inline: 0.25rem;
    text-align: inherit;
}
#footer .options a {
    display: flex;
    align-items: center;
    font-size: 0.625rem;
    padding-inline: 0.375rem;
    border-inline-start: currentColor solid 0.05rem;
}
 
#license-area {
    padding-inline: var(--sp_area-min-margin);
}
 
#footer-bar {
    max-width: 100%;
    margin: 0 auto;
    border: none;
    padding: 0 var(--sp_area-comp-margin);
}
#footer-bar .units {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    padding: .5rem;
}
#footer-bar .unit {
    float: none;
    width: auto;
    flex-basis: 10.25rem;
}
 
/*------------------*/
/*--- MOBILE Q ---*/
/*------------------*/
 
@media (max-width: 767px) {
    #top-bar { padding-inline: 0; }
    #top-bar div[class*="top-bar"] > ul { justify-content: center; }
    #top-bar div[class*="top-bar"] > ul > li { flex-grow: 1; }
}
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License