I'm going to take a Tylenol for my tension headache, grab some tea, and maybe get to work on this neverending backlog of technical issues plaguing my inbox.
| SCP-2 |
|---|
| Author: |
| Published on 27 Jun 2020 15:42 |
/* 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):
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; }
@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%; } }
/* Technoblast Theme [2020 Wikidot Theme] By EstrellaYoshte Based on: Simple Yonder Theme by EstrellaYoshte Anderson Robotics Theme by Croquembouche Flopstyle CSS by Lt Flops */ @import url('https://fonts.googleapis.com/css2?family=Cairo&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap'); @import url(https://fonts.googleapis.com/css2?family=Fira+Code&display=swap); #page-content { font-size: 0.91rem; } body { color: #000000; font-family: 'Cairo', sans-serif; word-break: unset; } .page-source, .code pre, .code p, .code, tt{ /* ---- Code by Croquembouche ---- */ font-family: "Fira Code", monospace; } a { color: #00AAB3; } a:visited { color: #013737; } h1, h2, h3, h4, h5, h6 { color: #013737; font-family: 'Orbitron', sans-serif; font-weight: bold; } /* ---- HEADER ---- */ div#container-wrap{ background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Atechnoblast/bg.png'); } div#header { background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Atechnoblast/logoaiad.png'); background-size: 7.3rem; background-position: 3px 29px; } @media (max-width: 767px) and (min-width: 480px) { div#header { background-size: 6rem; background-position: -4px 44px; } } @media (max-width: 479px) { div#header { background-size: 4.6rem; background-position: -3px 58px; } } #account-topbutton{ border: 0px; } #login-status, #login-status a { color: white; font-weight: bold; } #search-top-box-input, #search-top-box-input:hover, #search-top-box-input:focus { border: none; background: #013737; box-shadow: none; border-radius: 0px; color: #f4f4f4; } #search-top-box-form input[type=submit], #search-top-box-form input[type=submit]:hover, #search-top-box-form input[type=submit]:focus { border: solid 1px #00ffff; background: #013737; box-shadow: none; border-radius: 0px; color: #00ffff; } #search-top-box input.empty { color: #bbbbbb; } input { -webkit-appearance: none; } div#header h1 a span { font-family: 'Orbitron', sans-serif; font-weight: bold; font-size: 0.9em; color: #00ffff; text-shadow: 0px 0px 0px #000; } div#header h2 span { font-family: 'Cairo', sans-serif; font-weight: bold; font-size: 1.2em; color: #ff9944; padding: 17px 0; text-shadow: 0px 0px 0px #000; white-space: pre; } /* ---- TOP MENU ---- */ #top-bar a { color: #00ffff; font-weight: normal; } #top-bar ul li.sfhover a, #top-bar ul li:hover a, #login-status ul a, #login-status ul a:hover { color: #00AAB3; } /* ---- SIDE BAR ---- */ #side-bar .side-block{ border: none; border-radius: 3px; box-shadow: none; background: linear-gradient(rgba(1,55,55,0), rgba(1,55,55,0)), url('https://scp-wiki.wdfiles.com/local--files/theme%3Atechnoblast/darkbg.png') !important; color: #00ffff; } #side-bar .side-block.media > * { display: flex; justify-content: space-evenly; } #side-bar .heading{ color: #ff9944; border-bottom: solid 2px #ff9944; } #side-bar .menu-item > img { display: none; } #side-bar .menu-item > a:hover { background-color: #00ffff; color: #013737; text-decoration: none; } #top-bar div.open-menu a { border-radius: 3px; box-shadow: 0px 1px 4px 0 rgba(0, 0, 0, 0.2), 0px 3px 10px 0 rgba(0, 0, 0, 0.19); color: #00ffff; background-color: #013737; border: none; } #side-bar a, #side-bar a:visited { color: #00ffff; } #side-bar .collapsible-block-folded{ background: none; } #side-bar .collapsible-block-unfolded-link{ border-bottom: solid 2px #ff9944; } #side-bar .collapsible-block-unfolded-link .collapsible-block-link{ color: #ff9944; } @media (max-width: 767px) { #main-content { padding: 0; margin: 0 5%; border-left: none; } #page-title { margin-top: 0.7em; } #side-bar { background-color: #013737; left: -19em; } #side-bar:target { border: none; box-shadow: 3px 0 1px -2px rgba(0,0,0,0.04), 1px 0 5px 0 rgba(0,0,0,0.2); } #side-bar .close-menu { transition: width 0.5s ease-in-out 0.1s, opacity 1s ease-in-out 0s; display: block; position: fixed; width: 100%; height: 100%; top: 0; right: 0; background: rgba(0,0,0,0.3); background-position: 19em 50%; z-index: -1; opacity: 0; pointer-events: none; } #side-bar:target .close-menu { width: calc(100% - 19em); right: 0; left: auto; opacity: 1; pointer-events: auto; } #page-content > hr, #page-content > .list-pages-box > .list-pages-item > hr { margin: 3em -5.5%; } #side-bar { top: 0; } #side-bar .heading { padding-left: 1em; margin-left: -1em; } #search-top-box { top: 107px; } } /* ---- 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-color: #013737; box-shadow: none; } .yui-navset .yui-nav a, /* ---- Link Modifier ---- */ .yui-navset .yui-navset-top .yui-nav a{ color: #013737; /* ---- Tab Background Colour | [UNSELECTED] ---- */ background-color: #f4f4f4; border: unset; } .yui-navset .yui-nav a:hover, .yui-navset .yui-nav a:focus{ color: #f4f4f4; /* ---- Tab Background Colour | [HOVER] ---- */ background-color: #00AAB3; } .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; color: #00ffff; background-color: #f4f4f4; border-color: transparent; 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%; } .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: linear-gradient(rgba(1,55,55,0), rgba(1,55,55,0)), url('https://scp-wiki.wdfiles.com/local--files/theme%3Atechnoblast/darkbg.png'); } .yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a em{ border: none; } .yui-navset .yui-nav .selected a{ width: 100%; color: #00ffff; } .yui-navset .yui-nav .selected a:focus, .yui-navset .yui-nav .selected a:active{ color: #00ffff; background-color: #013737; } .yui-navset-left .yui-content{ /* ---- Content Background ---- */ background: linear-gradient(rgba(1,55,55,0), rgba(1,55,55,0)), url('https://scp-wiki.wdfiles.com/local--files/theme%3Atechnoblast/darkbg.png'); } .yui-navset .yui-content, .yui-navset .yui-navset-top .yui-content{ padding: .5em; border: none; } /* ---- INFO BAR ---- */ body{ --barColour: #013737; } .info-container .collapsible-block-content .wiki-content-table{ width: 100%; } /* ---- INFO PANE ---- */ #page-content .creditRate{ margin: unset; } #page-content .rate-box-with-credit-button { background-color: #013737; border: solid 1px #013737; box-shadow: none; border-radius: 0; } #page-content .rate-box-with-credit-button .fa-info { border: none; color: #ff9944; } #page-content .rate-box-with-credit-button .fa-info:hover { background: #ff9944; color: #013737; } .rate-box-with-credit-button .cancel { border: solid 1px #013737; } /* ---- PAGE RATING ---- */ .page-rate-widget-box { box-shadow: none; margin: unset; border-radius: 0; } .page-rate-widget-box .rate-points { background-color: #013737 !important; color: #00ffff !important; border: solid 1px #013737; border-radius: 0; } .page-rate-widget-box .rateup, .page-rate-widget-box .ratedown { background-color: #013737; border-top: solid 1px #013737; border-bottom: solid 1px #013737; } .page-rate-widget-box .rateup a, .page-rate-widget-box .ratedown a { background: transparent; color: #00ffff; } .page-rate-widget-box .rateup a:hover, .page-rate-widget-box .ratedown a:hover { background: #00ffff; color: #013737; } .page-rate-widget-box .cancel { background: transparent; background-color: #013737; border: solid 1px #013737; border-radius: 0; } .page-rate-widget-box .cancel a { color: #00ffff; } .page-rate-widget-box .cancel a:hover { background: #00ffff; color: #013737; border-radius: 0; } /* ---- PAGE ELEMENTS ---- */ #page-title { font-family: 'Orbitron', sans-serif; font-size: 2.2em; font-weight: bold; color: #013737; border-color: #013737; } #page-content .wiki-content-table tr th { border: solid 1px #013737; color: #f4f4f4; background: linear-gradient(rgba(1,55,55,0), rgba(1,55,55,0)), url('https://scp-wiki.wdfiles.com/local--files/theme%3Atechnoblast/darkbg.png'); /* set border for table title */ } #page-content .wiki-content-table tr td { border: solid 1px #013737; /* set border for table content */ } blockquote, div.blockquote, #toc, .code { background-color: #f5f5f5; border: solid 1px #013737; } .scp-image-block { border: solid 1px #013737; box-shadow: none; } .scp-image-block .scp-image-caption { background: linear-gradient(rgba(1,55,55,0), rgba(1,55,55,0)), url('https://scp-wiki.wdfiles.com/local--files/theme%3Atechnoblast/darkbg.png'); border-top: solid 1px #013737; color: #f4f4f4; } /* ---- Horizontal Rules ---- */ hr { background-color: rgba(1,55,55,1); } /* ---- Footer ---- */ #footer { background: transparent; } #footer a { color: #00AAB3; }
Nota do Autor: Este conto tem QUATRO iterações diferentes. Por favor veja os links de navegação no final de cada página para ver a próxima parte do artigo!
Criar uma nova página
Título da página: Uma nota sobre SCP-2
NOTA DO PESQUISADOR
Para aliviar suas preocupações,
Não, SCP-2 não é uma tentativa de usar o suprimento ilimitado do poder de um deus morto para eliminar a crescente crise energética mundial. Não, não é uma campanha secreta de militarização de black ops para conquistar uma posição sobre os Grupos de Interesse rebeldes. E não, não é o nadir da Fundação porque encontramos algo embaixo de uma rocha que nunca deveríamos ter visto e que vai escravizar a todos nós.
É apenas um bug estúpido na rede. Isso é tudo. Eu prometo. Por que eu aprovaria uma designação de SCP-2? Vocês acham que sou um idiota? Qualé. E parem de tentar acessá-lo; ele não existe, e todas essas consultas por ele estão dando à rede uma carga tremenda com a qual não posso lidar com todos os dias.
Vou tomar um Tylenol para a minha dor de cabeça tensional, tomar um chá e talvez começar a trabalhar nessa lista interminável de problemas técnicos que assolam minha caixa de entrada.
Se vocês ouvirem gritos, vocês sabem exatamente o porque.
—Pesquisador Técnico Rosen
Departamento de TI
RELATÓRIO DE INCIDENTE S42-2018-10-22
Em 22 de outubro às 21:15 ET, o Sítio-42 detectou perturbações taumicas a aproximadamente 3 km da costa da Carolina do Norte. Após a manifestação, anormalidades climáticas ocorreram por duas horas, culminando no surgimento de um buraco de minhoca de 22 cm de diâmetro. As equipes de resposta não puderam ser despachadas para o buraco de minhoca a tempo já que elas estavam tentando re-conter SCP-████.
Cinco horas após o início do evento, o Sítio-42 sofreu um surto em massa de energia. O Comando do Sítio discerniu que o surto originou-se de dentro da Ala de Projeção do Simulespaço da DAIA. A Ala não estava programa para uso na hora. Enquanto conduzia uma investigação em todo o sítio, o sítio irradiou energia taumica com a mesma intensidade que o buraco de minhoca por um breve instante, momento em que a energia caiu.
Ao se ativarem os geradores de emergência, todas as perturbações cessaram. As equipes de inspeção não recolheram mais informações.
teus votos estão todos quebrados
e a luz é tua fama
eu ouço teu nome falado
agora 2wo compartilha minha vergonha
|Central|




