Link to article: Jezixo's Author Page.
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+DW+Pica+SC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Eagle+Lake&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gelasio:ital,wght@0,400..700;1,400..700&display=swap');
/* VARIABLES */
:root {
--page-content-font-size: 1rem;
--main-content-width: 100%;
--main-content-side-margin: 0px;
--basalt-bright-element-color: 133, 83, 172;
--header-UI-font-size: 1rem;
}
/* MAKING ACTION AREA USABLE */
#action-area, #history-subarea {
margin: 1rem auto 0;
max-width: 80%;
}
.licensebox .collapsible-block-link {
color: darkgray !important;
}
div#page-options-container {
max-width: 45rem;
margin: auto;
}
.collapsible-block-folded {
margin-top: 3rem;
}
/* BACKGROUNDS */
div#content-wrap {
background: linear-gradient(203.04deg, #FBFAF9 40.5%, #f1f1f1 100%);
}
.scp-section {
background: linear-gradient(90deg, #E6EAED 0%, #FFFFFF 50%, #E6EAED 100%);
}
.shark-section {
background: linear-gradient(90deg, #CDDFE4 0%, #FCFCFC 50%, #CDDFE4 100%);
}
.mosaic-section {
background: linear-gradient(34.77deg, #011018 29.51%, #132934 76.89%, #011018 107.83%);
}
.scp-section, .shark-section {
padding-block: 2rem;
}
.mosaic-section {
padding-block: 2rem 4rem;
}
/* TITLES */
.intro {
font-family: 'Gelasio', 'Noto Serif', serif;
}
.pre-title {
font-size: 1.6rem;
font-weight: bold;
}
.title {
font-size: 5rem;
font-weight: bold;
}
.subtitle {
font-size: 1.4rem;
font-style: italic;
display: block;
border-block: 1px solid #cccccc;
padding-block: 1rem;
}
.intro-text {
font-size: 1.2rem;
text-align: left;
margin-inline: 1rem;
}
span.legal {
font-size: 1rem;
display: block;
margin-top: 2rem;
border-top: 1px solid #cccccc;
padding-top: 1rem;
}
.section-header {
font-size: 1.5rem;
font-weight: bold;
}
.scp {
font-family: 'Sofia Sans', sans-serif;
font-size: 2rem;
}
.shark {
font-family: 'Sans Normalcy', sans-serif;
font-size: 2rem;
}
.shark-section .centerbox p {
font-size: 1.1rem;
}
.mosaic {
font-family: 'IM Fell DW Pica SC', serif;
color: white;
font-size: 2.4rem;
}
.mosaic-section p {
font-family: 'EB Garamond', serif;
}
a {
font-weight: bold;
}
/* DIVS */
.centerbox {
max-width: 30rem !important;
margin: auto;
text-align: center;
}
.scp-section .centerbox p, .shark-section .centerbox p, .mosaic-section .centerbox p {
margin: 0px;
}
.intro {
padding-bottom: 1rem;
}
.intro a {
color: black;
}
.title-block {
margin-block: 3rem 2rem;
}
.title-block p {
margin-block: 0px;
}
.title-block br {
display:none;
}
div.card-container {
margin: auto;
width: fit-content;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.scp-section div.card-container, .shark-section div.card-container {
margin: 1rem auto 0rem;
}
div.card {
max-width: 18rem !important;
min-width: 15rem;
background-color: white;
padding: 1.5rem 2.5rem;
background: #FCFBFC;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
margin: 1rem 0.5rem;
position: relative;
text-align: left;
display: flex;
flex-direction: column;
justify-content: space-between;
}
div.card:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
div.card a:not(.intro div.card a) {
position: absolute;
color: transparent;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
.pagebreak {
width: 100%;
height: 2rem;
background: #FFFFFF;
box-shadow: inset 0px 16px 32px -4px rgba(12, 12, 13, 0.1);
border-bottom: 1px solid #BABDBF;
border-top: 1px solid #BABDBF;
}
.mosaic-section .centerbox > p {
color: white;
font-size: 1.2rem;
}
.mosaic-section div.paper {
background: linear-gradient(203.04deg, #FBFAF9 40.5%, #f1f1f1 100%);
box-shadow: 0px 16px 32px -4px rgba(12, 12, 13, 0.1), 0px 4px 4px -4px rgba(12, 12, 13, 0.05), inset 0px 0px 30px 0px #AE8B75;
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.mosaic-section div.paper:hover {
box-shadow: 0px 16px 32px -4px rgba(12, 12, 13, 0.1), 0px 4px 4px -4px rgba(12, 12, 13, 0.05), inset 0px 0px 50px 0px #8a5433;
}
.paper p, .paper li {
font-weight: 500;
font-size: 1.2rem;
color: #262521;
margin-top: 0.5rem;
}
.paper h2 {
font-family: EB Garamond, serif;
margin-block: 1rem 0.5rem;
font-size: 1.5rem;
}
.whiteline-header {
margin: 2rem auto 1rem;
display: flex;
align-items: center;
max-width: 15rem !important;
}
.whiteline-label {
text-transform: uppercase;
color: white;
font-weight: 700;
font-size: 1.2rem;
width: max-content;
display: block;
margin-inline: 1rem;
letter-spacing: 0.15rem;
font-family: 'IM Fell DW Pica SC';
}
.whiteline-header p {
margin: 0px;
}
.whiteline-header::before, .whiteline-header::after {
content: "";
height: 1px;
background: white;
width: 100%;
}
/* EARL SECTION */
.earl-pic {
max-width: 20rem !important;
}
.earl-pic img.image {
border-radius: 100%;
}
.earl-section {
display: flex;
align-items: center;
justify-content: center;
margin-block: 4rem;
}
.earl-text {
margin-left: 2rem;
}
span.earl-header {
font-family: 'Gelasio';
font-size: 4rem;
font-weight: bold;
}
span.earl-body {
font-family: 'Gelasio';
font-size: 1.5rem;
}
/* SHIMMER */
.shimmer {
text-align: center;
color: rgba(255, 255, 255, 0.1);
background: -webkit-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff));
background: -moz-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff));
background: gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff));
-webkit-background-size: 125px 100%;
-moz-background-size: 125px 100%;
background-size: 25px 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
-webkit-animation-name: shimmer;
-moz-animation-name: shimmer;
animation-name: shimmer;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
animation-iteration-count: 1;
background-repeat: no-repeat;
background-position: 0 0;
background-color: #222;
}
@-moz-keyframes shimmer {
0% {
background-position: top left;
}
100% {
background-position: top right;
}
}
@-webkit-keyframes shimmer {
0% {
background-position: top left;
}
100% {
background-position: top right;
}
}
@-o-keyframes shimmer {
0% {
background-position: top left;
}
100% {
background-position: top right;
}
}
@keyframes shimmer {
0% {
background-position: top left;
}
100% {
background-position: top right;
}
}
/* SMALL SCREENS */
@media screen and (max-width: 600px) {
div.card {
padding-inline: 1.25rem;
}
:root {
--header-UI-font-size: 0.75rem;
}
.earl-section {
flex-direction: column;
margin-inline: 1rem;
}
.earl-text {
text-align: center;
}
span.earl-header {
font-size: 3rem;
}
.earl-text {
margin-left: 0px;
}
}
color:red;
color:red; font-size:1rem;
color:#0359A5;
color: #ccc; font-style: normal;
color:#0359A5;
color: #ccc; font-style: normal;
color:#0359A5;
color: #ccc; font-style: normal;
font-family:'Sans Normalcy';
color: #ccc; font-style: normal;
color: #ccc; font-style: normal;
color: #ccc; font-style: normal;
color: #ccc; font-style: normal;
color: #ccc; font-style: normal;
:scp-wiki:component:preview
[info]
:scp-wiki:theme:basalt
[info]
:scp-wiki:component:fade-in
[info]
:scp-wiki:component:license-box
[info]
:scp-wiki:component:license-box-end
[info]
centerbox
intro
title-block
pre-title
shimmer
title
subtitle
intro-text
legal
pagebreak
scp-section
centerbox
section-header
scp
card-container
card
card
card
pagebreak
shark-section
centerbox
section-header
shark
card-container
card
pagebreak
mosaic-section
centerbox
section-header
mosaic
whiteline-header
whiteline-label
card-container
card
paper
whiteline-header
whiteline-label
card-container
card
paper
card
paper
card
paper
pagebreak
earl-section
earl-pic
earl-text
earl-header
earl-body