Link to article: Nagiros's Proposal (Frag. 0).
/* FONTS */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&family=Poppins:wght@500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Road+Rage&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap');
/* AESTHETIC */
#page-content div[style="text-align: center;"] .collapsible-block-folded a.collapsible-block-link,
#page-content div[style="text-align: center;"] .collapsible-block-link {
font-size: 1.5em;
line-height: 1;
word-wrap: break-word;
font-weight: 900;
color: #cc0215;
}
.foldable-list-container a:first-child {
text-shadow: 1px 1px 1px #605099;
}
.wiki-content-table td {
text-align: center;
}
/* FUNCTIONAL */
.unfolded {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 999;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
background: #5c5c5c;
animation: 1.5s coll-in ease-out;
}
.foldable-list-container a:nth-child(2) {
position: fixed;
display: flex;
align-items: center;
justify-content: center;
bottom: 1rem;
right: 25%;
background-color: #5e4391;
color: #d2aef0;
min-width: 50%;
min-height: 3.375rem;
font-size: 2rem;
z-index: 9999;
box-shadow: 5px 5px 15px 1px #000000;
border-radius: 10px;
animation: 1.5s coll-in ease-out;
}
@keyframes coll-in {
from {transform: translateY(200%);}
to {transform: translateY(0);}
}
/* CUSTOM */
.terminal {
border: 10px solid gray;
font-size: 1.15em;
background: #1a1a1a;
border-radius: 50px;
padding: 0 25px;
box-shadow: inset 0px 0px 15px 10px #000000;
color: #ededed;
}
.t-real {
height: 80%;
margin: 20px;
overflow-y: scroll;
position: absolute;
padding: 0 4em 2em;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.declaration {
padding: 0 10px;
margin: 10px 20px;
color: #333;
}
.declaration.red {
border: solid 2px #ee9999;
background: #ffeeee;
}
.declaration.green {
border: solid 2px #66a266;
background: #cce0cc;
}
.declaration.purple {
border: solid 2px rgb(203, 90, 204);
background: rgb(27,22,62);
color: #ededed;
padding: 0 1em;
}
.declaration.red > hr,
.declaration.green > hr {
background: #333;
}
.declaration.purple > hr,
.t-real hr {
background: #f2f2f2;
}
.declaration ul,
.declaration .colmod-block {
margin-bottom: 1em;
}
.scptop-wrap {
position: relative;
padding: 1em;
margin: 2em auto 3em;
}
.scptop-bg {
opacity: 0.25;
filter: invert(1);
position: absolute;
left: 0;
top: -2em;
width: 100%;
height: auto;
}
.scptop-content {
position: relative;
text-align: center;
font-size: 200%;
font-weight: bold;
}
.hover .hover-text {
position: absolute;
display: none;
margin: 20px 0px;
height: auto;
background-color: #121212;
border: 1px solid #8870df;
border-radius: 0.5em;
padding: 0.5em;
left: 2em;
right: 2em;
z-index: 4;
}
.hover:hover .hover-text {
display: inline;
}
.hover .hover-number {
color: #9179e7;
position: relative;
z-index: 3;
}
.hover:hover .hover-number {
text-decoration: underline;
}
.end-link {
text-align: center;
background-color: #5e4391;
font-size: 2rem;
box-shadow: 5px 5px 15px 1px #000000;
border-radius: 10px;
margin-top: 1.5em;
}
.end-link a,
.end-link a:visited {
color: #d2aef0;
}
/* FONT CONTAINERS */
.pop {
font: 1.15em 'Poppins', sans-serif;
letter-spacing: normal;
}
.element {
font-family: 'IBM Plex Mono', monospace;
letter-spacing: 1px;
}
.death {
font: 4em 'Road Rage', cursive;
}
.splice {
padding: 0 4px;
}
.article {
font: 1.15em Inter,"Helvetica Neue","Helvetica",Arial,sans-serif;
background: white;
color: rgb(12, 12, 12);
}
.self {
font: 1.15em 'IBM Plex Mono', monospace;
background: #404040;
}
.library {
font: 1.15em verdana,arial,helvetica,sans-serif;
background: #EEF6EE;
color: #333;
}
/* GLITCH THING - https://codepen.io/aldrie/pen/PojGYLo */
.glitch-body,
.glitch-body * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.glitch-body {
font: 8em 'Road Rage', cursive;
transform: rotate(-1deg);
}
.glitch-body {
display: flex;
justify-content: center;
align-items: center;
}
.glitch-container {
color: var(--color);
display: flex;
flex-direction: column;
}
.glitch-stack {
display: grid;
grid-template-columns: 1fr;
}
.glitch-stack span {
font-weight: bold;
grid-row-start: 1;
grid-column-start: 1;
--stack-height: calc(100% / var(--stacks) - 1px);
--inverse-index: calc(calc(var(--stacks) - 1) - var(--index));
--clip-top: calc(var(--stack-height) * var(--index));
--clip-bottom: calc(var(--stack-height) * var(--inverse-index));
clip-path: inset(var(--clip-top) 0 var(--clip-bottom) 0);
text-shadow: -2px 3px 0 red, 2px -3px 0 #4d52ff;
}
.glitch-stack span:nth-child(odd) { --glitch-translate: 8px; transform: translateX(-2%);}
.glitch-stack span:nth-child(even) { --glitch-translate: -8px; transform:translateX(2%);}
.mobile-display {display: none;}
/* MOBILE COMPAT */
@media (max-width: 479px) {
.mobile-display {
display: block;
}
.desktop-display {
display: none;
}
body {
background: #1a1a1a;
}
ul {
padding-left: 20px;
}
.top-dec {
margin-left: 0;
margin-right: 0;
}
.terminal .declaration {
margin: 10px 0;
}
.t-real {
height: auto;
padding: 0 1em 2em;
margin: 0;
}
.terminal.t-real {
border: 0;
border-radius: 0;
}
.unfolded {
background: none;
}
.t-real:nth-child(1) .pop {font-size: 1em}
t-real:nth-child(1) .death {font-size: 3em}
.t-real hr {
margin: 1em 0;
}
.scptop-content {
margin-top: -1em;
}
.glitch-body {
font-size: 4em;
}
.glitch-stack span:nth-child(odd) { --glitch-translate: 4px; transform: translateX(-1%);}
.glitch-stack span:nth-child(even) { --glitch-translate: -4px; transform:translateX(1%);}
}
--stacks: 3;
--index: 0;
--index: 1;
--index: 2;
:scp-wiki:component:coltop
[info]
:scp-wiki:component:colend
[info]
:scp-wiki:component:coltop
[info]
:scp-wiki:component:colend
[info]
:scp-wiki:component:coltop
[info]
:scp-wiki:component:colend
[info]
:scp-wiki:component:coltop
[info]
:scp-wiki:component:colend
[info]
declaration
red
declaration
red
declaration
red
element
element
element
declaration
red
element
declaration
green
top-dec
declaration
red
top-dec
declaration
green
top-dec
terminal
declaration
green
element
terminal
t-real
scptop-wrap
scptop-bg
scptop-content
desktop-display
scptop-content
mobile-display
declaration
purple
hover
hover-text
hover-number
hover
hover-text
hover-number
hover
hover-text
hover-number
declaration
purple
blockquote
blockquote
declaration
red
element
terminal
t-real
pop
death
death
splice
self
death
splice
article
death
splice
library
death
death
glitch-body
glitch-container
glitch-stack
declaration
green
element
terminal
t-real
declaration
green
blockquote
element
declaration
red
element
terminal
t-real
pop
declaration
red
declaration
green
declaration
purple
end-link
element