A Happy Little Accident

A Happy Little Accident
Author: (user deleted)
Published on 22 Jun 2020 06:36

/* 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) {
 
    .mobile-top-bar {
        display: block;
    }
 
    .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!important;
        position: fixed;
        top: 0;
        left: -19em;
        width: 17em;
        height: 100%;
        margin: 0;
        overflow-y: auto;
        z-index: 10;
        padding: 0.3em 0.675em;
        background-color: rgba(0,0,0,0.1);
        transition: left 0.5s ease-in-out;
    }
 
    #side-bar:target {
        display: block;
        left: 0;
        width: 17em;
        margin: 0;
        z-index: 10;
    }
 
    #side-bar:target .close-menu {
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: -1;
    }
 
    #top-bar .open-menu a:hover {
        text-decoration: none;
    }
 
    .close-menu {
        margin-left: 19em;
        opacity: 0;
    }
}

What this is

A bunch of miscellaneous CSS 'improvements' that I, Croquembouche, 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):

• RSO Component — Rounderhouse

Personal styling themes (which are visual overhauls):

• Magnus Web Format — DrMagnus
• Flopstyle CSS — Lt Flops
• Blankstyle CSS — HarryBlank
• Placestyle CSS — Placeholder McD
• Jakstyle — JakdragonX

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; }

▷ Show Code ◁

@import url(https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap);
 
/* Flopstyle CSS Theme
 * [2020 Wikidot Theme]
 * Created by Lt Flops
 * Select CSS Styles Are Credited Where Necessary
 * -- (CC BY-SA 3.0) --
**/
 
/* -------- SITE HEADER -------- */
 a, body, span{
     word-break: unset;
}
 #header h1 a,
 #header h1 a::before{
     color: hsl(0, 0%, 93%);
     text-shadow: none;
}
 #header h1 a{
     font-family: "Montserrat", "Arial", sans-serif;
     font-size: 170%;
     letter-spacing: 0;
}
 #header h2 span,
 #header h2 span::before{
     color: hsl(60, 62%, 85%);
     font-family: "Montserrat", "Arial", sans-serif;
     font-weight: 500;
     text-shadow: none;
}
 
/* -------- TOP-BAR -------- */
 #search-top-box,
 #top-bar,
 #login-status{
     right: 0;
}
 #search-top-box-form input[type="submit"]{
     font-size: unset;
}
 #search-top-box-input,
 #search-top-box-form input[type=submit]{
     background: hsl(0, 0%, 20%);
     border-color: hsl(0, 0%, 60%);
     border-radius: 0;
}
 #search-top-box-input:hover,
 #search-top-box-input:focus,
 #search-top-box-form input[type="submit"]:hover,
 #search-top-box-form input[type="submit"]:focus{
     background-color: hsl(0, 0%, 30%);
     border-color: hsl(0, 0%, 70%);
}
 #top-bar .open-menu a{
     border-radius: unset;
     border-width: .1em;
}
 
/* -------- SIDE-BAR -------- */
 #side-bar{
     background-color: hsl(0, 0%, 50%);
}
 #side-bar:target{
        box-shadow: 0 0 90px 90px hsla(0, 0%, 0%, .3);
}
 #side-bar .side-block{
     border-color: hsl(0, 0%, 20%);
     border-radius: 0;
}
 #side-bar .heading{
     color: hsl(0, 0%, 5%);
     border-bottom: solid 1px hsl(0, 0%, 20%);
}
 
/* -------- SIDEBOXES --------
 * By EstrellaYoshte
 * Adapted From 'Penumbra Theme'
**/
 .flavourText{
     margin: auto;
     margin-bottom: .5em;
     padding: .25em;
 
     border: 1px solid #888;
}
 #page-content .authorbox tr td,
 #page-content .sidebox tr td,
 #page-content .authorbox tr th,
 #page-content .sidebox tr th{
     padding: .25em;
}
 #page-content .authorbox tr td,
 #page-content .authorbox tr th,
 #page-content .authorbox .flavourText{
     width: 15.234em;
}
 .limit{
     margin-bottom: -1rem;
     line-height: 141%;
     z-index: 5;
}
 .limit br{
     display: block;
}
 .anchor{
     position: sticky;
     height: 0;
     top: 0;
     z-index: 5;
}
 .authorbox,
 .sidebox{
     position: absolute;
     width: calc((100vw - 870px) / 2);
     max-height: calc(100vh - 18rem);
     margin: 0 8px 0 0;
     padding: .14rem;
 
     box-sizing: border-box;
 
     overflow: auto;
     z-index: 5;
}
 .authorbox{
     max-width: calc((100vw - 921.2px) / 2) !important;
     top: .5em;
     right: 103.5%;
}
 .sidebox{
     top: -1em;
     left: 103.5%;
     padding-left: 1em;
 
     background: hsl(0, 0%, 100%);
     border: 1px solid hsl(0, 0%, 73%);
     border-left: 8px solid var(--accentColor);
}
 
/* -------- Sidebox Mobile Optimization Courtesy of Woedenaz -------- */
 @media (max-width: 1079px){
     .sidebox{
         width: auto;
         max-width: 65vw !important;
         top: .75rem;
         right: calc(((100vw - 45.8rem) / 2) * -1);
         left: initial;
         padding: 0 .4rem;
 
         background-color: var(--accentColor);
         border: 1px solid hsl(0, 0%, 73%);
         border-left: 8px solid var(--accentColor);
         border-radius: 0;
 
         overflow: visible;
         -webkit-clip-path: inset(-.125rem -.25rem 0 calc(100% - 1.275rem));
         clip-path: inset(-.125rem -.25rem 0 calc(100% - 1.275rem));
         -webkit-transition:
            color .2s ease-in-out .1s,
            -webkit-box-shadow .5s ease-in-out .1s,
            -webkit-clip-path .5s ease-in-out .1s;
         transition:
            color .2s ease-in-out .1s,
            -webkit-box-shadow .5s ease-in-out .1s,
            -webkit-clip-path .5s ease-in-out .1s;
         -o-transition:
            color .2s ease-in-out .1s,
            box-shadow .5s ease-in-out .1s,
            clip-path .5s ease-in-out .1s;
         transition:
            color .2s ease-in-out .1s,
            box-shadow .5s ease-in-out .1s,
            clip-path .5s ease-in-out .1s;
         transition:
            color .2s ease-in-out .1s,
            box-shadow .5s ease-in-out .1s,
            clip-path .5s ease-in-out .1s,
            -webkit-box-shadow .5s ease-in-out .1s,
            -webkit-clip-path .5s ease-in-out .1s;
    }
     .sidebox::before,
     .sidebox::after{
         content: " ";
         position: absolute;
         right: 0;
    }
     .sidebox::before{
         width: 0;
         height: 0;
         top: calc(50% - .75rem);
 
         border-top: .75rem solid transparent;
         border-bottom: .75rem solid transparent;
         border-right: .75rem solid var(--accentColor);
 
         z-index: 10;
         transition: border .1s ease-in-out .1s;
    }
     .sidebox::after{
         width: 100%;
         max-width: .75rem;
         height: 100%;
         max-height: calc(100vh - 18rem);
         top: 0;
 
         background-color: hsl(0, 0%, 100%);
 
         z-index: -1;
         transition:
            box-shadow .5s ease-in-out .1s,
            max-width .5s ease-in-out .1s;
    }
     .sidebox > *{
         opacity: 0;
         -webkit-transition: opacity .2s ease-in-out .2s;
         -o-transition: opacity .2s ease-in-out .2s;
         transition: opacity .2s ease-in-out .2s;
    }
     .sidebox:hover{
         overflow: visible;
         -webkit-clip-path: inset(-.125rem -.25rem 0 0);
         clip-path: inset(-.125rem -.25rem 0 0);
         -webkit-transition:
            color .5s ease-in-out .2s,
            right .5s ease-in-out .1s,
            -webkit-clip-path .5s ease-in-out .1s,
            -webkit-box-shadow .5s ease-in-out .1s;
         transition:
            color .5s ease-in-out .2s,
            right .5s ease-in-out .1s,
            -webkit-clip-path .5s ease-in-out .1s,
            -webkit-box-shadow .5s ease-in-out .1s;
         -o-transition:
            color .5s ease-in-out .2s,
            right .5s ease-in-out .1s,
            clip-path .5s ease-in-out .1s,
            box-shadow .5s ease-in-out .1s;
         transition:
            color .5s ease-in-out .2s,
            right .5s ease-in-out .1s,
            clip-path .5s ease-in-out .1s,
            box-shadow .5s ease-in-out .1s;
         transition:
            color .5s ease-in-out .2s,
            right .5s ease-in-out .1s,
            clip-path .5s ease-in-out .1s,
            box-shadow .5s ease-in-out .1s,
            -webkit-clip-path .5s ease-in-out .1s,
            -webkit-box-shadow .5s ease-in-out .1s;
    }
     .sidebox:hover::before{
         border-top: 0 solid transparent;
         border-bottom: 0 solid transparent;
    }
     .sidebox:hover::after{
         max-width: 100%;
         right: 0;
    }
     .sidebox:hover > *{
         opacity: 1;
    }
}
 @media (max-width:768px){
     .sidebox,
     .sidebox:hover{
         right: calc(((100vw - (100% - 3rem)) / 2) * -1 + 1rem);
    }
}
 @media (max-width: 1079px){
     .authorbox{
         display: none;
         visibility: hidden;
    }
}
 
/* -------- GENERAL -------- */
 :root{
   --accentColor: hsl(0, 100%, 30%);
   --vivid-lime-green: hsl(112, 77%, 48%);
}
 body{
     color: hsl(0, 0%, 5%);
 
     word-break: unset;
}
 #search-top-box-input,
 #search-top-box-input:hover,
 #search-top-box-input:focus,
 #search-top-box-form input[type=submit],
 #search-top-box-form input[type=submit]:hover,
 #search-top-box-form input[type=submit]:focus,
 #top-bar ul li ul,
 #side-bar .side-block,
 .page-rate-widget-box,
 .scp-image-block{
     box-shadow: none;
}
 
/* -------- INFO BAR -------- */
 body{
     --barColour: hsl(0, 89%, 18%);
}
 .u-faq{
     display: none;
}
 .info-container .collapsible-block-content{
     padding: 0 .5em 30px;
}
 .info-container .collapsible-block-content .wiki-content-table,
 .footer-wikiwalk-nav .collapsible-block .wiki-content-table{
     width: 90%;
}
 
/* -------- INFO PANE -------- */
 .creditRate{
     margin-right: 0 !important;
}
 .rate-box-with-credit-button{
     border-radius: 0 !important;
     box-shadow: none !important;
}
 .creditButton p a:hover,
 .creditButtonStandalone p a:hover{
     color: var(--vivid-lime-green) !important;
}
 div.credit.first .wiki-content-table {
     width: 100%;
}
 
/* -------- PAGE RATING -------- */
 .page-rate-widget-box{
     margin-right: 0;
}
 .page-rate-widget-box,
 .page-rate-widget-box .rate-points{
     border-radius: 0;
}
 .page-rate-widget-box .cancel,
 .page-rate-widget-box .cancel a:hover{
     border-radius: 0 !important;
}
 
/* -------- FORMATTING | [GENERAL] -------- */
 #page-content h1,
 #page-content h2,
 #page-content h3,
 #page-content h4,
 #page-content h5,
 #page-content h6{
     display: flex;
     flex-direction: column;
     justify-content: center;
     margin-bottom: .57em;
 
     text-align: center;
     word-break: unset;
}
 hr{
     height: 0;
     margin: 1em 0;
 
     background-color: transparent;
     border-top: 1px solid hsl(0, 0%, 67%);
}
 .collapsible-block-link{
     font-size: 120%;
     font-weight: bold;
}
 .info-container .collapsible-block-link{
     font-size: 100%;
}
 ol li{
     margin: 0 0 1em;
}
 ul{
     margin:1em 0;
}
 .footnotes-footer, .bibitems{
     padding: 0 0 .5em;
}
 
/* -------- IMAGE BLOCK -------- */
.scp-image-block .scp-image-caption{
     font-size: 95%;
}
 .scp-image-block.block-right{
     margin: 0 0 1em 2em;
}
 
/* -------- CUSTOM DIV BLOCKS -------- */
 .raisa-header, .pink-header, .oracle-header{
     margin-bottom: 1em;
     padding: 0 .5em;
 
     text-align: center;
}
 
 .raisa-header{ /* ---- RAISA Notice Header ---- */
     background: hsl(60, 65%, 85%);
     border: 1px solid hsl(0, 0%, 60%);
}
 
 .pink-header{ /* ---- Pretty Header ---- */
     background: hsl(350, 100%, 85%);
     border: 1px solid hsl(0, 4%, 36%);
}
 .pink-header hr{
     border-color: hsl(0, 4%, 36%);
}
 
 .oracle-header{ /* ---- SPC's 'From the Desk of ORACLE' Header ---- */
     color: hsl(208, 100%, 97%);
     background: hsl(208, 67%, 44%);
     border: 2px solid hsl(0, 0%, 5%);
}
 .oracle-header hr{
     border-color: hsl(208, 100%, 97%);
}
 .img-resize img{ /* ---- Header Icons (See Example Formatting) ---- */
     float: left;
     width: auto;
     height: 8em;
     margin: .5em;
}
 
 blockquote, /* ---- Regular Quote Block ---- */
 div.blockquote{
     background-color: hsl(0, 0%, 96%);
     border: 3px double hsl(0, 0%, 60%);
}
 
 .alt-blockquote{ /* ---- Alternative Quote Block ---- */
     margin: 1em 0;
     padding: 0 1em;
 
     background-color: hsl(0, 0%, 96%);
     border: 1px solid hsl(0, 0%, 60%);
     border-radius: 1em;
}
 
 .lightweight{ /* ---- Lightweight Quote Block ---- */
     margin: 1em 3em;
     padding: 0 1em;
 
     background-color: hsl(0, 0%, 90%);
 
     text-align: left;
}
 
 .card-block{ /* ---- Decorative Quote Block ---- */
     margin: 1em 0;
     padding: .6em 1.2em;
 
     background: hsl(220, 15%, 93%);
     border-left: 8px solid var(--accentColor);
     border-radius: .48em;
}
 
 blockquote hr, div.blockquote hr, .alt-blockquote hr, .lightweight hr, .card-block hr{
     border-color: hsl(0, 0%, 67%);
}
 
 .log-header{ /* ---- Interview/Exploration Log Header ---- */
     margin-bottom: 1em;
     padding: 0 1em;
 
     background: hsl(0, 0%, 96%);
     border: 3px dashed hsl(0, 0%, 60%);
     border-radius: 2em;
}
 
 .report-box{ /* ---- Report Block ---- */
     margin: 1em 0;
     padding: 0 1em;
 
     background-color: hsl(0, 0%, 100%);
     border: medium solid hsl(0, 0%, 5%);
}
 .report-box hr{
     border-color: hsl(0, 0%, 5%);
}
 
 .realistic-shadow{ /* ---- Better Shadows ---- */
     margin: 1em 0 2em 0;
     box-shadow:
          0 1px 1px hsla(0, 0%, 0%, .23),
          0 2px 2px hsla(0, 0%, 0%, .18),
          0 4px 4px hsla(0, 0%, 0%, .15),
          0 8px 8px hsla(0, 0%, 0%, .13);
}
 
 .report-box.red-tint{ /* ---- Alternative Report Block Variants ---- */
     background-color: hsl(360, 91%, 86%);
     border-color: hsl(360, 62%, 66%);
}
 .report-box.red-tint hr{
     border-color: hsl(360, 62%, 66%);
}
 
 .report-box.orange-tint{
     background-color: hsl(30, 91%, 86%);
     border-color: hsl(30, 62%, 66%);
}
 .report-box.orange-tint hr{
     border-color: hsl(30, 62%, 66%);
}
 
 .report-box.yellow-tint{
     background-color: hsl(60, 91%, 86%);
     border-color: hsl(60, 62%, 66%);
}
 .report-box.yellow-tint hr{
     border-color: hsl(60, 62%, 66%);
}
 
 .report-box.green-tint{
     background-color: hsl(120, 91%, 86%);
     border-color: hsl(120, 62%, 66%);
}
 .report-box.green-tint hr{
     border-color: hsl(120, 62%, 66%);
}
 
 .report-box.cyan-tint{
     background-color: hsl(180, 91%, 86%);
     border-color: hsl(180, 62%, 66%);
}
 .report-box.cyan-tint hr{
     border-color: hsl(180, 62%, 66%);
}
 
 .report-box.blue-tint{
     background-color: hsl(240, 91%, 86%);
     border-color: hsl(240, 62%, 66%);
}
 .report-box.blue-tint hr{
     border-color: hsl(240, 62%, 66%);
}
 
 .report-box.magenta-tint{
     background-color: hsl(300, 91%, 86%);
     border-color: hsl(300, 62%, 66%);
}
 .report-box.magenta-tint hr{
     border-color: hsl(300, 62%, 66%);
}
 
 .report-box.grey-tint{
     background-color: hsl(210, 9%, 86%);
     border-color: hsl(210, 15%, 42%);
}
 .report-box.grey-tint hr{
     border-color: hsl(210, 15%, 42%);
}
 
 div.o5-box{ /* ---- Overseer Document Block ---- */
     margin: 1em 6em;
     padding: 0 1em;
 
     background-color: hsl(0, 0%, 75%);
     border: medium solid hsl(0, 0%, 5%);
}
 div.o5-box hr{
     border-color: hsl(0, 0%, 5%);
}
 
 .faux-source{ /* ---- Mimics "Page Source" Appearance ---- */
     margin-bottom: 1em;
     padding: 0 2em;
 
     background-color: hsl(0, 0%, 100%);
     border: 1px dashed hsl(0, 0%, 67%);
 
     font-family: var(--mono-font);
}
 
 .narration{ /* ---- Mimics the Pages of a Book ---- */
     margin: 1em 0;
     padding: 0 1em;
 
     background-color: hsl(0, 0%, 100%);
     border: 1px solid hsl(0, 0%, 63%);
}
 
 .warning-notice{ /* ---- Simple Warning Block (Adapted From 'SCP-3143') ---- */
     padding: 0 1em;
 
     background-color: hsl(0, 0%, 100%);
     background-image: url(https://scp-wiki.wdfiles.com/local--files/scp-style-resource/scp_trans.png);
     background-position: center;
     background-repeat: no-repeat;
     border: medium solid hsl(0, 0%, 5%);
 
     text-align: center;
}
 .warning-notice hr{
     border-color: hsl(0, 0%, 5%);
}
 
 .journal{ /* ---- Journal Block (Adapted From 'SCP-4003') ---- */
     margin: 1em 0;
     padding: .9em;
 
     background-image:
       linear-gradient(to top,
          hsl(201, 33%, 84%) 0%,
          hsl(60, 29%, 89%) 8%);
     background-position: 0 8px;
     background-size: 100% 1.3rem;
     border: 1px solid hsl(0, 0%, 80%);
     border-radius: .9em;
 
     font-family: "Architects Daughter", cursive;
}
 .journal p{
     margin: 0;
 
     font-size: 1.3rem;
     line-height: 1.3rem;
}
 
 .sms-message{ /* ---- SMS Message Block ---- */
     float: left;
     clear: left;
     width: 22.4em;
     margin: 0 0 1em;
     padding: 0 1.2em;
 
     background: hsl(0, 0%, 75%);
     border-radius: 2em;
 
     font-size: 112.5%;
     text-align: center;
}
 
 blockquote .collapsible-block-folded,
 .alt-blockquote .collapsible-block-folded,
 .lightweight .collapsible-block-folded,
 .card-block .collapsible-block-folded,
 .report-box .collapsible-block-folded,
 .o5-box .collapsible-block-folded,
 .narration .collapsible-block-folded,
 .journal .collapsible-block-folded,
 div.blockquote .collapsible-block-folded{
     /* ---- For Collapsibles Inside Divs | [CLOSED] ---- */
     padding: .75em 0;
     /* -------- */
}
 blockquote .collapsible-block-unfolded,
 .alt-blockquote .collapsible-block-unfolded,
 .lightweight .collapsible-block-unfolded,
 .card-block .collapsible-block-unfolded,
 .report-box .collapsible-block-unfolded,
 .o5-box .collapsible-block-unfolded,
 .narration .collapsible-block-unfolded,
 .journal .collapsible-block-unfolded,
 div.blockquote .collapsible-block-unfolded{
     /* ---- For Collapsibles Inside Divs | [OPEN] ---- */
     padding-top: .75em;
     /* -------- */
}
 
/* -------- FORMATTING | [SPECIAL] -------- */
 .centered{ /* ---- Center-Aligns Text ---- */
     text-align: center;
}
 
 .justified{ /* ---- Justify-Aligns Text ---- */
     text-align: justify;
}
 
 .indented{ /* ---- Indents Block by ½-inch/2em (Use Within Other Divs) ---- */
     text-indent: 2.4em;
}
 .indented .bibcite,
 .indented .footnoteref,
 .indented ul,
 .indented ol,
 .indented .scp-image-block.block-right,
 .indented h1,
 .indented h2,
 .indented h3,
 .indented h4,
 .indented h5,
 .indented h6,
 .indented .scene-break,
 .indented .footnotes-footer,
 .indented .bibitems{
     text-indent: 0;
}
 
 .rev-red, .rev-green, .rev-blue, .rev-yellow, .terminal-span{
     font-weight: bold;
}
 
 .rev-red{ /* ---- Red Document Revision Text ---- */
     color: hsl(360, 100%, 27%);
}
 
 .rev-green{ /* ---- Green Document Revision Text ---- */
     color: hsl(120, 100%, 27%);
}
 
 .rev-blue{ /* ---- Blue Document Revision Text ---- */
     color: hsl(240, 100%, 27%);
}
 
 .rev-yellow{ /* ---- Yellow Document Revision Text ---- */
     color: hsl(40, 100%, 40%);
}
 
 .terminal-span{ /* ---- Computer Terminal Text ---- */
     font-family: var(--mono-font);
     font-size: 110%;
     letter-spacing: .3px;
}
 
/* ---- Blinking Text Cursor (Adapted From 'Your Very First SCP!') ---- */
 .blinkbar{color: black; animation: blink 1.5s infinite;}
 @keyframes blink{to{opacity: .0;}}
 @keyframes flicker{0% {opacity: .9890; }5% {opacity: .5842; }10% {opacity: .9865; }20% {opacity: .0412; }20% {opacity: .6255; }25% {opacity: .3157; }30% {opacity: .7328; }35% {opacity: .4654; }40% {opacity: .9128; }45% {opacity: .2449; }50% {opacity: .5485; }55% {opacity: .6438; }60% {opacity: .1180; }65% {opacity: .9085; }70% {opacity: .0266; }75% {opacity: .6795; }80% {opacity: .7812; }85% {opacity: .0117; }90% {opacity: .2239; }95% {opacity: .8897; }100% {opacity: .2260; }}
 @keyframes overlay-anim{0% {visibility: hidden; }10% {visibility: hidden; }11% {visibility: visible; }50% {visibility: hidden; }100% {visibility: hidden; }}
 
 .lite-heading{ /* ---- Special Heading Area (Adapted From 'SCP-4058') ---- */
     clear: both;
     margin: 3.6em auto;
}
 .lite-heading h3{
     color: hsl(360, 100%, 27%);
}
 .lite-heading hr{
     width: 55%;
     margin: auto;
 
     border-width: medium;
}
 
 div.image-showcase{ /* ---- Alternative Image Showcase ---- */
     width: 25em;
     margin-bottom: 1em;
 
     background: hsl(0, 0%, 100%);
     border: 3px ridge hsl(0, 0%, 5%);
}
 div.image-showcase.block-center{
     margin-right: auto;
     margin-left: auto;
}
 
 .scene-break{ /* ---- Fancy Scene/Section Break ---- */
     width: 3.5em;
     margin: 2em 0;
}
 
 .listPagesNav{ margin-bottom: 5em; }
 .listPagesNav-prev, /* ---- ListPages Navigation (Adapted from 'SCP-5552') ---- */
 .listPagesNav-next{
     width: 45%;
     margin: 0 0 1em;
     padding: 0 2%;
 
     background: hsl(0, 0%, 90%);
     border: 1px solid hsl(0, 0%, 60%);
}
 .listPagesNav-prev{
     float: left;
     text-align: left;
}
 .listPagesNav-next{
     float: right;
     text-align: right;
}
 
 .fade-away{
     background: linear-gradient(to bottom, hsl(0, 0%, 95%), hsl(0, 0%, 5%));
}
 
 .footing::before{ /* ---- Page Footing ---- */
     content: " ";
     position: absolute;
     bottom: 1px;
     left: 0;
     right: 0;
 
     border-bottom: 2px solid hsl(0, 0%, 47%);
}
 .footing{
     position: relative;
     bottom: -2px;
     margin-bottom: 2px;
 
     border-bottom: 1px solid hsl(0, 0%, 47%);
}
 
 .related-flex{ /* ---- Related Articles Box ---- */
     display: flex;
     justify-content: center;
}
 .related{
     margin: 1em 0;
     padding: 0 1em;
 
     background-color: hsl(0, 0%, 100%);
     border: thick solid hsla(0, 0%, 60%, 0.5);
 
     text-align: left;
}
 
 .series-nav{ /* ---- Series Navigation ---- */
     margin: .5em 0;
 
     background:
       linear-gradient(to bottom right,
          hsla(0, 0%, 100%, 1),
          hsla(0, 0%, 50%, .5));
     border: outset 1.5px hsl(0, 0%, 5%);
     border-radius: 2em;
 
     font-size: 85%;
     font-weight: bold;
     text-align: center;
}
 
/* -------- ADVANCED WARNING HEADER --------
 * Adapted From 'SCP-001-JP - indonootoko's Proposal'
 * See the Example at the Top of the Page
**/
 .orderwrapper{
     position: relative;
     width: auto;
 
     text-align: center;
}
 .council{
     position: relative;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     width: 295px;
     height: 295px;
     margin: auto;
 
     background-image: url(https://scp-wiki.wdfiles.com/local--files/scp-style-resource/scp_trans.png);
     background-position: center;
     background-repeat: no-repeat;
     background-size: 295px 295px;
}
 .ordertitle{
     position: absolute;
     top: 27px;
     left: 0;
     right: 0;
}
 .ordertitle h1{
     color: hsl(0, 0%, 5%);
 
     font-size: 220%;
     line-height: 90%;
}
 .orderdescription{
     position: absolute;
     top: 93px;
     left: 0;
     right: 0;
     width: 100%;
}
 .orderdescription h1{
     color: hsl(0, 0%, 5%);
 
     font-size: 120%;
}
 .orderdescription p{
     color: hsl(0, 0%, 5%);
 
     font-size: 90%;
}
 .itemno{
     position: absolute;
     bottom: 18px;
     left: 0;
     right: 0;
}
 .itemno h1{
     color: hsl(0, 0%, 5%);
 
     font-size: 170%;
}
 
/* -------- 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 --------
 * Adapted From 'Black Highlighter Theme'
**/
 .yui-navset *{
     transition:
          color 80ms cubic-bezier(.4, 0, .2, 1),
          background-color 80ms cubic-bezier(.4, 0, .2, 1);
}
 .yui-navset .yui-nav,
 .yui-navset .yui-navset-top .yui-nav{
     display: flex;
     flex-wrap: wrap;
     width: calc(100% - .125rem);
     margin: 0 auto;
 
     border-color: hsl(360, 94%, 20%);
     box-shadow: 0 calc(.0625rem * 5) 0 0 hsl(360, 94%, 20%);
}
 .yui-navset .yui-nav a, /* ---- Link Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav a{
     color: hsl(0, 0%, 5%);
     /* ---- Tab Background Colour | [UNSELECTED] ---- */
     background-color: hsl(0, 0%, 99%);
     /* -------- */
     background-image: none;
     border: unset;
}
 .yui-navset .yui-nav a:hover,
 .yui-navset .yui-nav a:focus{
     color: hsl(0, 0%, 96%);
     /* ---- Tab Background Colour | [HOVER] ---- */
     background-color: hsl(360, 100%, 27%);
     /* -------- */
}
 .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;
     padding: 0;
 
     background-color: hsl(0, 0%, 96%);
     border-color: transparent;
     box-shadow: 0 0 0 .0625rem hsl(360, 94%, 20%);
}
 .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%;
}
 .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;
 
     /* ---- Tab Background Colour | [SELECTED] ---- */
     background-color: hsl(360, 94%, 20%);
     /* -------- */
}
 .yui-navset .yui-nav .selected a,
 .yui-navset .yui-nav .selected a em{
     border: hsl(360, 94%, 20%);
}
 .yui-navset .yui-nav .selected a{
     width: 100%;
 
     color: hsl(0, 0%, 96%) !important;
     background-image: none;
}
 .yui-navset .yui-nav .selected a:focus,
 .yui-navset .yui-nav .selected a:active{
     color: hsl(0, 0%, 96%);
     background-color: hsl(360, 94%, 20%);
}
 .yui-navset .yui-nav .selected a:hover{
     cursor: default;
}
 .yui-navset-left .yui-content{
     /* ---- Content Background ---- */
     background-color: hsl(0, 0%, 99%);
     /* -------- */
}
 .yui-navset .yui-content,
 .yui-navset .yui-navset-top .yui-content{
     padding: .5em;
     border-color: hsl(0, 0%, 60%);
}
 
/* -------- PAGE TAGS -------- */
 #main-content .page-tags{
     border-top: 1px solid hsl(0, 0%, 73%);
}
 #main-content .page-tags a{
     display: inline-block;
     height: .8125rem;
     margin: 0 0 .5rem .75rem;
     padding: .1875rem .3125rem .1875rem 0;
 
     color: hsl(0, 0%, 95%);
     background-color: hsl(0, 0%, 27%);
     border-bottom-right-radius: .25rem;
     border-top-right-radius: .25rem;
 
     line-height: 13px;
     line-height: .8125rem;
     font-size: 11px;
     font-size: .6875rem;
     font-weight: normal;
}
 #main-content .page-tags a:before{
     width: 0;
     height: 0;
     top: -.1875rem;
     left: -.625rem;
     padding: 0 .0625rem .1875rem;
 
     border-color: transparent hsl(0, 0%, 27%) transparent transparent;
     border-style: solid;
     border-width: .5rem .5rem .5rem 0;
}
 #main-content .page-tags a:before,
 #main-content .page-tags a:after{
     content: "";
     position: relative;
     float: left;
}
 #main-content .page-tags a:after{
     width: .25rem;
     height: .25rem;
     top: .2813rem;
     left: -.5rem;
 
     background-color: hsl(0, 0%, 100%);
     border-radius: .125rem;
}
 #main-content .page-tags span{
     max-width: 100%;
     border-top: .5rem solid transparent;
}
 
/* -------- INTERWIKI -------- */
 iframe.scpnet-interwiki-frame{
     position: relative;
     width: 15.734em;
     height: unset;
     margin-bottom: .78em;
     margin-left: 4px;
 
     background-color: hsl(0, 0%, 100%);
     border: 2px solid hsl(0, 0%, 20%);
}
 
/* -------- SHOW-CHANGES HIGHLIGHTS -------- */
 .inline-diff ins::before{
     color: hsl(240, 100%, 93%);
}
 .inline-diff del::before{
     color: hsl(0, 100%, 90%);
}
 .inline-diff ins + del::before,
 .inline-diff del + ins::before{
     color: transparent;
}
 .inline-diff br + ins::before,
 .inline-diff br + del::before,
 .inline-diff ins:first-of-type::before,
 .inline-diff del:first-of-type::before{
     position: absolute;
     display: inline-block;
     left: -1em;
 
     content: "\f111";
     font: normal normal normal 16px/1 "FontAwesome";
     text-rendering: auto;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
}
 
/* -------- PRESENTATION -------- */
 .templateInfo{
     margin: 1em 0;
     padding: 0 1em;
     background: hsl(0, 0%, 100%);
     border: 1px solid hsl(0, 0%, 87%);
}
 
/* -------- CROQSTYLE ALTERATIONS -------- */
 #edit-page-textarea{ font-family: unset; }
 tt{
     background-color: unset;
     font-size: unset;
     padding: unset;
     margin: unset;
     border-radius: unset;
}
 
/* -------- REDUCED MOTION ACCESSIBILITY -------- */
 @media (prefers-reduced-motion: reduce){
     *, *::before, *::after{
          animation-duration: .001s !important;
          animation-iteration-count: 1 !important;
          transition-duration: .001s !important;
    }
}
 
/* -------- MOBILE MEDIA QUERY -------- */
 @media (max-width: 479px){
     #header h1 a{
          font-size: 85%;
    }
     div.image-showcase{
          width: 90%;
    }
     div.o5-box{
          margin: 1em 0;
    }
}
 
/* -------- NOTE MEDIA QUERY -------- */
 @media (min-width: 480px) and (max-width: 580px){
     #header h1 a{
          font-size: 100%;
    }
     div.image-showcase{
          width: 100%;
    }
     div.o5-box{
          margin: .5em;
    }
}
 
/* -------- MINI TABLET MEDIA QUERY -------- */
 @media (min-width: 581px) and (max-width: 767px){
     #header h1 a{
          font-size: 120%;
    }
}
 @media (max-width: 767px){
     .open-menu a:hover{
          box-shadow: none;
    }
}
 
/* -------- TABLET MEDIA QUERY -------- */
 @media (min-width: 768px) and (max-width: 979px){
     #header h1 a{
          font-size: 140%;
    }
}

ITEM NUMBER: SCP-XXXX	LEVEL 4/XXXX
CONTAINMENT CLASS: Safe	secret

DISRUPTION CLASS: ekhi

---

Thermal image of SCP-XXXX after Event PROTO-A, courtesy of CARRION-8-MII. The red area pictured in this image is Site-∏.

Special Containment Procedures: Foundation webcrawlers are to suppress all discussion regarding SCP-XXXX. Altered scientific documents have been purposefully disseminated among the civilian scientific community to discredit Event PROTO-A.

All photographic evidence of Event PROTO-A is to be destroyed. Any resultant discrepancy is to be blamed on technical issues by civilian satellites.

Diplomatic ties with the inhabitants of SCP-XXXX are suspended indefinitely.

Description: SCP-XXXX is a massive, unexplored planet (three times the size of Earth) situated 7000 light-years away, near the edge of the Eagle Nebula, or colloquially recognized as the origin of the "Pillars of Creation". Despite the absence of any stars located within its logical proximity, SCP-XXXX initially appeared to exhibit habitable conditions.

After Event PROTO-A, SCP-XXXX is deemed impossible to sustain life.

---

ADDENDA

---

I. Discovery & Communications

On 05/04/2046, VOYAGER-6¹ captured photographic evidence of SCP-XXXX. Embedded Foundation agents informed the Overseer Council of the abnormal sighting and proceeded to implement relevant information suppression tactics.

Foundation satellites (CARRION-8) were deployed to monitor SCP-XXXX. Illuminations could be seen across most of SCP-XXXX; these varied in size, with several spanning between 10-1000 kilometers. Heat signatures corresponded proportionately to the size of the illuminations; four areas with the highest concentration of thermal signatures had been designated as Site-ℶ, Site-∆, Site-∏ and Site-∑ for ease of reference. Meteorological and geological phenomena that occurred on the surface were largely congruent with ones observed on Earth. Two polar ice caps could be seen on both extreme axis.

Recovered artifact.

On 05/05/2046, 03:14 EST, CARRION-8 detected movement 25 kilometers above the upper atmosphere. Surveillance records showed a dark cylindrical projectile, approximately five meters in length and 40 centimeters wide, rapidly decelerating. The projectile spontaneously dissipated to produce several colored illuminations, releasing multiple unidentified objects. CARRION-8 intercepted the objects; these had been identified as artifacts possibly belonging to the inhabitants of SCP-XXXX. Such artifacts included:

• A papyrus document written in an unknown language. Coated in an unknown substance, theorized to behave as preservation.
• Several daggers consisting of an unknown material of markedly resilient nature.
• A clay tablet coated in unknown substance. [Refer to table for more information]

CARRION-8 collected and sent the artifacts to the nearest manned Foundation module (FSS-5) for examination. The artifacts did not possess any harmful properties, and were subsequently stored in containment lockers.

In response to the non-hostile nature of SCP-XXXX's inhabitants, a cultural exchange was initiated on 05/06/2046. FSS-5 launched several satellites containing Earth artifacts to CARRION-8, which would then be sent to SCP-XXXX. Due to this effort, the Foundation was able to gain increased understanding of the social, political and linguistic structures of local society.

All tablets originating from SCP-XXXX have been translated.

Nth cultural exchange	Description of tablet	Translation
1st	Clay, coated in preservative of unknown chemical composition. Written in local language.	WELCOME
24th	Clay, coated in preservative. Written in local language, accompanied by an illustration of two large hands arching around a circular object2. A small humanoid entity is below, outstretching its arms towards the object.	HOPE
48th	Stone. Written in local language, accompanied by an illustration of several humanoid figures firing projectiles towards the sky, which transition into germinating seedlings.	HISTORY
68th	Marble. Written in broken English, accompanied by a flat cylindrical component fitted with a button on its side. Pressing the button produces two holographic depictions of humanoid entities adorned with decorations similar to Hawaiian culture, dancing.	GIFT, NICE
100th	Luminescent material of unknown chemical composition. Humanoid entities, some small, while others being slightly larger, kneel towards a large humanoid figure in the center. Written in broken English. Several large colored illuminations were observed across all four Sites which continued for three hours before ceasing.	WE APPRECIATE, THANK THANK

---

II. Event PROTO-A

Shortly after the 132^nd cultural exchange on 10/24/2052, at 13:04 EST, CARRION-8 detected a sudden spike in light intensity and ɣ-ray radiation levels. The origin was determined to be the result of a supernova situated 150 kilometers away. CARRION-8 received irreparable amounts of electronic damage, and was declared permanently disabled. Communications with FSS-5 were lost.

Several more Foundation satellites and expedition teams were deployed. Most of FSS-5 was severely damaged and burnt. Crew members of FSS-5 were collected and examined; most body parts were liquefied, cauterized and contaminated with hazardous quantities of ionizing radiation. Some appeared to be locked in an embrace, with their limbs bound to one another on a molecular level.

CARRION-8-MII was designated as the new surveillance satellite. Several artifacts, initially orbiting SCP-XXXX, were collected for analysis. Recovered objects included:

• A total of 34 clay tablets, partially damaged. 11 of these were empty, while the remaining contained unintelligible scribbles.
• Several Earth artifacts. Most were intact, except for engravings resembling question marks present.
• 53 daggers stained with a viscous black liquid.
• A burnt papyrus document. Its contents were translated to "WHERE YOU", repeated 94 times.

An unmanned, automated drone was sent to SCP-XXXX's atmosphere. The following was detected:

• A drastic increase in methane, hydrogen sulfide and carbon dioxide gas levels
• Several distant wails and incoherent vocalizations
• A drastic increase in the frequency of geological tremors

According to CARRION-8-MII, Site-ℶ, Site-∆, Site-∏ and Site-∑ were moving with no discernable pattern through unknown means.

In consideration of potential risks in deploying Foundation assets to SCP-XXXX, no exploration attempts have been planned as of yet.

Footnotes

1. A satellite owned and launched by NASA in 2021.

2. Resembled the VOYAGER Golden Record.