Link to article: Samara: Be the Itsy Bitsy Spider..
/* ==== GLOBAL ==== */
@import url(https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap);
/* ==== COMMON ==== */
:root {
--celeste: hsl(270, 93%, 77%);
--celesteLite: hsla(270, 93%, 87%, .5);
--tint: calc(var(--hue) - 168deg);
--telespeak: "Space Mono", monospace;
}
/* ==== FORMATTING | [GENERAL] ==== */
#page-content p {
font-variant-ligatures: no-common-ligatures;
}
/* ==== DIV BLOCKS ==== */
.narration {
font-size: 1.05rem;
text-align: start;
text-indent: 0;
}
@media (min-width: 768px) {
.narration {
margin: 2rem -2rem;
padding: .5rem 2rem;
}
}
.narration.cLead p:nth-of-type(2n+1),
.narration.sLead p:nth-of-type(2n+2) {
color: var(--celeste);
font-family: var(--telespeak);
}
.narration.sLead p:nth-of-type(2n+1),
.narration.cLead p:nth-of-type(2n+2) {
color: var(--accentColor);
filter: saturate(.85) brightness(1.15);
text-decoration-color: inherit;
}
.narration.cLead p:nth-of-type(2n+1)::selection,
.narration.sLead p:nth-of-type(2n+2)::selection,
.narration.cLead p:nth-of-type(2n+1) em::selection,
.narration.sLead p:nth-of-type(2n+2) em::selection {
--accentColor: var(--celeste) !important;
--accentColorLite: var(--celesteLite) !important;
}
/* ==== FORMATTING | [SPECIAL] ==== */
.indented {
text-indent: 2rem;
}
.scene-break {
width: 4rem;
}
.hide {
display: none;
}
.c,
.c a {
--accentColor: var(--celeste) !important;
--accentColorLite: var(--celesteLite) !important;
}
.c strong {
color: var(--celeste);
filter: none;
}
.c a, .c a:hover,
.c::selection {
--accentColor: var(--celeste) !important;
--accentColorLite: var(--celesteLite) !important;
font-size: inherit;
}
.c em::selection,
.c strong::selection {
--accentColor: var(--celeste) !important;
--accentColorLite: var(--celesteLite) !important;
}
.psych {
position: relative;
left: calc(-50vw + 50%);
width: 100vw;
max-width: 100vw;
height: 512px;
background-position-x: center;
}
@media (max-width: 767px) {
.psych {
margin: 256px 0;
background-image:
linear-gradient(
hsla(222, 12%, 21%, 1) 0%,
hsla(222, 12%, 21%, 0) 20%,
hsla(222, 12%, 21%, 0) 80%,
hsla(222, 12%, 21%, 1) 100%),
url(https://scp-wiki.wdfiles.com/local--files/samara-be-the-itsy-bitsy-spider/Fractal_Purple_Waves_Mobile.jpg);
}
}
@media (min-width: 768px) {
.psych {
margin: 320px 0;
background-image:
linear-gradient(
hsla(222, 12%, 21%, 1) 0%,
hsla(222, 12%, 21%, 0) 30%,
hsla(222, 12%, 21%, 0) 70%,
hsla(222, 12%, 21%, 1) 100%),
url(https://scp-wiki.wdfiles.com/local--files/samara-be-the-itsy-bitsy-spider/Fractal_Purple_Waves.jpg);
}
}
/* == Earthworm Series Navigator ==
* by Croquembouche
**/
#page-content .earthworm .hub {
background: var(--accentColorLite);
border-color: transparent;
}
#page-content .earthworm .hub a {
color: var(--keyColor);
}
/* ==== COMBINED FLOPSTYLE: DARK MODS ==== */
#u-fade-away {
/* Mouse Hover Reveals Rating Module */
opacity: calc(1 / 3);
transition: all .25s ease-in-out;
}
#u-fade-away:hover {
opacity: 1;
}
/* ======== */
.end-mark > p:last-of-type::after {
/* Displays End-Mark */
color: var(--accentColor);
filter: saturate(.85) brightness(1.15);
font-size: 1.35rem;
}
/* ======== */
.footing {
/* == Page Footing == */
padding-top: 1.6rem;
}
.footing::before {
bottom: .27rem;
border-bottom: 4px solid var(--accentColor);
}
.footing::after {
top: .13rem;
border-bottom: 2px solid var(--accentColorLite);
}
width: 30%; margin: auto; text-indent: 0
border: 7px solid transparent; outline: 7px solid var(--fgColor)
:scp-wiki:more-by:lt-flops
[info]
:scp-wiki:component:license-box
[info]
:scp-wiki:component:license-box-end
[info]
hide
bt
bb
byline
hide
blockquote
lightweight
centered
c
meta-title
pseudocrumbs
justified
indented
scene-break
icon-tint
scene-break
icon-tint
centered
scene-break
icon-tint
narration
cLead
scene-break
icon-tint
scene-break
icon-tint
scene-break
icon-tint
scene-break
icon-tint
scene-break
icon-tint
centered
centered
psych
narration
cLead
scene-break
icon-tint
scene-break
icon-tint
narration
sLead
narration
cLead
byline
hide
narration
sLead
narration
cLead
hide
hide
hide
hide
c
hide
hide
hide
hide
hide
hide
scene-break
icon-tint
blockquote
lightweight
footing
blockquote
blockquote
blockquote
blockquote