Link to article: SCP Anthology 2024.
@font-face {
font-family: 'TT2020 Style D';
src: url(https://cdn.jsdelivr.net/gh/SYwaves/Webfont-Archive@master/TT2020StyleD-Regular.woff2) format("woff2");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'TT2020 Style D';
src: url(https://cdn.jsdelivr.net/gh/SYwaves/Webfont-Archive@master/TT2020StyleD-Italic.woff2) format("woff2");
font-weight: normal;
font-style: italic;
font-display: swap;
}
:root {
--accent-h: -12deg;
--complement-h: calc(var(--accent-h) + 200deg);
--primary-accent-1: var(--accent-h) 87.5% 54.25%;
--primary-accent-2: var(--accent-h) 70% 62.5%;
--primary-accent-3: calc(var(--accent-h) - 5deg) 67.5% 67.25%;
--dark-accent: calc(var(--accent-h) - 1.5deg) 50% 12.5%;
--dark-complement: var(--complement-h) 10.5% 2.5%;
--assist-color: var(--accent-h) 6% 10%;
--s-header-desktop-height: 39.5rem;
--s-header-mobile-height: var( --s-header-desktop-height);
--sp_dropdown-width: 22ch;
--header-title: 'SCP Anthology 2024';
--header-subtitle: 'Face Your Fears.';
--sp_header-title-size: min(calc(2.675rem * var(--sp_header-title-scale)), calc(.875rem * var(--sp_header-title-scale) + 2.5vw));
--sp_header-title-scale: 2.75;
--sp_header-subtitle-scale: 2.25;
--anthology-fg: url(https://smlt.wdfiles.com/local--files/odule%3Acrab/ant24fig.png);
--anthology-bg: url(https://smlt.wdfiles.com/local--files/odule%3Acrab/ant24.jpg);
--anthology-blend-color: rgb(4 4 4);
--anthology-blend-gap: 6.5rem;
--anthology-body-bg: url(https://smlt.wdfiles.com/local--files/odule%3Acrab/tilebg.png);
--header-font: 'TT2020 Style D', monospace;
--body-font: InterVariable,Inter,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',sans-serif;
--main-content-width: 84.25rem;
--sp_area-max-width: 84.25rem;
--sp_area-min-margin: 1.75rem;
}
body, textarea, input {
background-color: hsl(var(--dark-complement));
color: hsl(var(--light-accent-1));
}
body {
background-image: linear-gradient(to right, transparent 0%, hsl(var(--dark-complement)) 25%, hsl(var(--dark-complement)) 75%, transparent 100%), var(--anthology-body-bg);
background-size: auto, 31.75rem;
}
#container::before {
clip-path: initial;
width: 100%;
height: var(--anthology-blend-gap);
background: linear-gradient(to bottom, var(--anthology-blend-color), transparent);
}
/*-------------------------------*/
/*-------------------------------*/
/*-------------------------------*/
#header {
grid-template-areas:
"login login login search"
"top-bar top-bar top-bar top-bar"
". . . ."
"h1 h1 h1 h1"
"h2 h2 h2 h2";
grid-template-rows: auto auto 1fr auto auto;
background-color: var(--anthology-blend-color);
background-image: var(--anthology-bg);
background-size: auto 100%;
background-position: center;
background-repeat: no-repeat;
}
#header::before { all: unset; }
#login-status {
background-color: var(--anthology-blend-color);
}
#top-bar {
background: transparent;
}
#top-bar div[class*="top-bar"] > ul > li { flex-grow: 1; }
#header :is(h1,h2) {
margin: initial;
text-align: center;
z-index: 1;
position: relative;
}
#header h1 a {
color: hsl(var(--primary-accent-1));
text-shadow: 0 0 0.325rem hsl(var(--primary-accent-2) /.25);
letter-spacing: -.1rem;
line-height: 0.875;
}
#header-extra-div-1, #header-extra-div-2, #header-extra-div-3 { all: unset; }
#top-bar div.open-menu a {
background-color: hsl(var(--dark-complement));
clip-path: unset;
}
/*-------------------------------*/
/*-------------------------------*/
/*-------------------------------*/
#container {
overflow-x: hidden;
}
#content-wrap {
margin-top: 0;
}
#page-title {
display: none;
}
/*-------------------------------*/
.page-source, .code,
.owindow, div.modalbox, #lock-info {
background-color: hsl(var(--dark-complement));
}
.city-block {
width: min(calc(100% - 2rem), 80ch);
padding: 0.5rem 1.75rem;
margin-block: 2.25rem;
background-color: hsl(var(--primary-complement) / 0.05);
}
.collapsible-block-folded, .collapsible-block-unfolded-link { text-align: center; }
/*-------------------------------*/
.a-randomizer { padding-block-end: .001rem; pointer-events: none; }
.a-randomizer div[id] { display: none; }
.a-randomizer .dude {
background-image: var(--anthology-fg);
background-size: auto 100%;
background-position: center;
background-repeat: no-repeat;
position: absolute;
height: var(--sp_final-header-height); width: 100%;
left: 0; bottom: calc(100% + var(--anthology-blend-gap));
visibility: hidden;
}
.a-randomizer div:is([id$="4"]) + .dude {
visibility: visible;
}
.aria-only {
position: absolute;
border: none;
font-size: 0.1em;
opacity: .01;
color: transparent;
pointer-events: none;
}
/*-------------------------------*/
/*-------------------------------*/
/*-------------------------------*/
.anthology-cards-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2.25rem 1.625rem;
margin: 2.5rem auto;
}
.anthology-card {
--cut: 1.25rem;
--w: .3875rem;
--card-size: 17.5rem;
--time: .175s ease-out .075s;
display: flex;
flex-direction: column;
align-items: center;
flex-basis: var(--card-size);
aspect-ratio: 7 / 9;
position: relative;
text-align: center;
isolation: isolate;
transition: all var(--time);
}
.eulogy {
display: grid;
place-content: center;
height: calc(var(--cut)* 2);
font-family: var(--UI-font);
font-size: 1.05em;
font-weight: bold;
letter-spacing: .05rem;
position: relative;
z-index: 1;
width: calc(100% - 2.75rem);
margin-block-end: calc(var(--cut)* -1);
line-height: 1.15;
}
.eulogy::before, .eulogy::after {
content: "";
position: absolute;
bottom: 0; left: 0;
width: 100%; height: 100%;
clip-path: polygon( 0% var(--cut), var(--cut) 0%, calc(100% - var(--cut)) 0%, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0% calc(100% - var(--cut)) );
z-index: -1;
background-color: hsl(var(--assist-color));
}
.eulogy::before {
background-color: var(--acc);
transition: all var(--time);
}
.backing-img {
flex-grow: 1;
position: relative;
background-color: hsl(var(--assist-color));
align-self: stretch;
isolation: isolate;
}
.backing-img::before, .backing-img::after {
content: "";
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
.backing-img::after {
background-color: hsl(var(--dark-complement));
background-image: var(--cover-img);
background-size: cover;
background-position: center;
}
.backing-img::before {
background-image: linear-gradient(to bottom, var(--acc) var(--cut), hsl(var(--dark-complement)));
transition: all var(--time);
}
.backing-img > a {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
border: none;
background: unset;
color: transparent;
font-size: 0.1em;
z-index: 1;
}
.anthology-title {
position: relative;
align-self: stretch;
}
.anthology-title .main {
position: absolute;
bottom: calc(100% - 1px);
left: 0;
width: 100%;
font-family: var(--header-font);
font-weight: bold;
font-size: 1.5em;
padding: .25em;
padding-block-start: .5em;
box-sizing: border-box;
background-image: linear-gradient(to bottom, transparent, hsl(var(--dark-complement)) 67.5%);
text-shadow: 0 0 0.625em hsl(var(--dark-complement));
transition: color var(--time);
}
.anthology-title .sub {
display: grid;
place-content: center;
position: relative;
padding-block: 0.325rem;
box-sizing: border-box;
height: 1.875rem;
font-family: var(--UI-font);
}
.anthology-title .sub p {
margin: 0;
padding-inline: .25rem;
line-height: 1.25;
clip-path: inset(0 50%);
transition: clip-path var(--time);
}
.anthology-title .sub strong {
color: var(--acc);
}
.anthology-title .sub::before,
.anthology-title .sub::after {
content: "";
position: absolute;
width: var(--cut);
height: var(--cut);
box-sizing: border-box;
border: solid .175rem var(--acc);
background-color: var(--acc);
box-shadow: inset 0 0 0 .225rem hsl(calc( -12deg + 190deg) 10.5% 3.25%);
top: calc(50% - var(--cut)/2);
transform: rotate(45deg);
transition: all var(--time);
}
.anthology-title .sub::before {
left: calc(50% - var(--cut)/2);
clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.anthology-title .sub::after {
right: calc(50% - var(--cut)/2);
clip-path: polygon(0 0, 0 100%, 100% 100%);
}
/*-------------------------------*/
/* Card hover */
.anthology-card:is(:hover,:focus-within) {
z-index: 1;
transform: scale(1.1);
}
.anthology-card:is(:hover,:focus-within) .eulogy::before {
bottom: calc(var(--w));
left: calc(var(--w)*-.3535);
width: calc(var(--w)*.707 + 100%);
}
.anthology-card:is(:hover,:focus-within) .backing-img::before {
top: calc(var(--w)*-1);
left: calc(var(--w)*-1);
right: calc(var(--w)*-1);
}
.anthology-card.a-active:is(:hover,:focus-within) .anthology-title .main {
color: var(--acc);
}
.anthology-card.a-active:is(:hover,:focus-within) .sub p { clip-path: inset(0); }
.anthology-card.a-active:is(:hover,:focus-within) .sub::before { left: calc(var(--cut)*-1); }
.anthology-card.a-active:is(:hover,:focus-within) .sub::after { right: calc(var(--cut)*-1); }
/*-------------------------------*/
/* Fallback if no set accent color */
.anthology-card[style*="$color"] {
--acc: hsl(var(--primary-accent-1))!important;
}
/* Not active card */
.anthology-card:not(.a-active) {
--acc: hsl(var(--accent-h) 5% 50%)!important;
opacity: .675;
cursor: not-allowed;
}
.anthology-card:not(.a-active) :is(.backing-img > a, .sub p) { visibility: hidden; }
.anthology-card:not(.a-active) .backing-img::after {
background-image: url(https://smlt.wdfiles.com/local--files/odule%3Acrab/brick.jpg);
}
.anthology-card:not(.a-active) .anthology-title .sub::before,
.anthology-card:not(.a-active) .anthology-title .sub::after {
background: transparent;
box-shadow: none;
}
/*-------------------------------*/
/*-------------------------------*/
/*-------------------------------*/
.yui-navset .yui-nav {
justify-content: center;
gap: 0.75rem 1.625rem;
}
.yui-navset .yui-nav li {
flex: 0 1 clamp(5rem, 22%, 17.5rem);
}
.closable-tab .yui-navset .yui-nav {
position: relative;
z-index: 1;
}
.closable-tab .yui-navset .yui-nav li:first-child {
position: absolute;
top: calc(100% + 1.5rem);
left: 0;
transform: translateX(-50%);
}
.closable-tab .yui-navset .yui-nav li:first-child a {
display: grid;
place-items: center;
aspect-ratio: 1;
height: 1.875rem;
min-height: unset;
padding: 0.175rem;
clip-path: unset;
background: transparent;
font-weight: bold;
isolation: isolate;
}
.closable-tab .yui-navset .yui-nav li:first-child a::before {all: unset;}
.closable-tab .yui-navset .yui-nav li:first-child a::after {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
box-sizing: border-box;
border: solid .175rem hsl(var(--primary-accent-1));
background-color: hsl(var(--dark-complement));
transform: rotate(45deg);
z-index: -1;
}
.closable-tab .yui-navset .yui-nav li:first-child.selected,
.closable-tab .yui-navset .yui-nav:has(li:first-child.selected)::after,
.closable-tab .yui-navset:has(.yui-nav li:first-child.selected) .yui-content {
display: none;
}
.closable-tab .yui-navset:has(.yui-nav li:first-child.selected) .yui-content:has(#u-newest) { display: block; }
.closable-tab .yui-navset:has(.yui-nav li:first-child.selected) .yui-content > div:has(#u-newest) { display: block!important; }
.closable-tab .yui-navset .yui-content {
padding-inline: 1.5rem;
}
.closable-tab div.audio_iframe {
width: 28rem;
margin-inline: auto;
padding-bottom: 0;
}
/* Randomise Mnemophobia/Alethophobia */
/* Cover image - each of these has a cumulative 25% chance of applying */
.a-randomizer:has([id*='34'],[id*='93'],[id$='4'],[id$='5'],[id$='6']) ~ .anthology-cards-container [style*='alethophobia'] {
--cover-img: url(https://scp-sandbox-3.wdfiles.com/local--files/test544/alethophobia2.jpg) !important;
}
.a-randomizer:has([id*='23'],[id*='63'],[id*='88'],[id$='7'],[id$='8']) ~ .anthology-cards-container [style*='alethophobia'] {
--cover-img: url(https://scp-sandbox-3.wdfiles.com/local--files/test544/alethophobia3.jpg) !important;
}
.a-randomizer:has([id*='12'],[id*='54'],[id*='22'],[id*='99'],[id$='9']) ~ .anthology-cards-container [style*='alethophobia'] {
--cover-img: url(https://scp-sandbox-3.wdfiles.com/local--files/test544/alethophobia4.png) !important;
}
/* Title - 50% chance of applying */
.anthology-cards-container [style*='alethophobia'] .main::before,
.yui-navset:has(.monologue-alethophobia) .yui-nav li:nth-child(2) em::before {
content: "Aletho";
}
.a-randomizer:has([id$='0'],[id$='2'],[id$='4'],[id$='6'],[id$='8']) ~ .anthology-cards-container [style*='alethophobia'] .main::before,
.a-randomizer:has([id$='0'],[id$='2'],[id$='4'],[id$='6'],[id$='8']) ~ .closable-tab .yui-navset:has(.monologue-alethophobia) .yui-nav li:nth-child(2) em::before {
content: "Mnemo";
}
/* Monologue content - 50% chance of applying; matches title */
.monologue-mnemophobia, .a-randomizer:has([id$='0'],[id$='2'],[id$='4'],[id$='6'],[id$='8']) ~ .closable-tab .monologue-alethophobia { display: none }
.monologue-alethophobia, .a-randomizer:has([id$='0'],[id$='2'],[id$='4'],[id$='6'],[id$='8']) ~ .closable-tab .monologue-mnemophobia { display: block }
component:preview
:scp-wiki:theme:sunside
[info]
:scp-wiki:component:audio-player-woed-source
[info]
:scp-wiki:component:audio-player-woed-source
[info]
:scp-wiki:component:audio-player-woed-source
[info]
:scp-wiki:component:audio-player-woed-source
[info]
:scp-wiki:component:audio-player-woed-source
[info]
:smlt:odule:paella
:smlt:odule:paella
:smlt:odule:paella
:smlt:odule:paella
:scp-wiki:component:audio-player-woed-source
[info]
:scp-wiki:component:audio-player-woed-source
[info]
:scp-wiki:component:audio-player-woed-source
[info]
:scp-wiki:component:audio-player-woed-source
[info]
:smlt:odule:paella
:smlt:odule:paella
:smlt:odule:paella
:smlt:odule:paella
:scp-wiki:component:audio-player-woed-source
[info]
:scp-wiki:component:audio-player-woed-source
[info]
:scp-wiki:component:audio-player-woed-source
[info]
:scp-wiki:component:audio-player-woed-source
[info]
:smlt:odule:paella
:smlt:odule:paella
:smlt:odule:paella
:smlt:odule:paella
:scp-wiki:component:audio-player-woed-source
[info]
:scp-wiki:component:audio-player-woed-source
[info]
:scp-wiki:component:audio-player-woed-source
[info]
:scp-wiki:component:audio-player-woed-source
[info]
:scp-wiki:component:audio-player-woed-source
[info]
:smlt:odule:paella
:smlt:odule:paella
:smlt:odule:paella
:smlt:odule:paella
:scp-wiki:component:audio-player-woed-source
[info]
:scp-wiki:component:audio-player-woed-source
[info]
:scp-wiki:component:audio-player-woed-source
[info]
:scp-wiki:component:audio-player-woed-source
[info]
:smlt:odule:paella
:smlt:odule:paella
:smlt:odule:paella
:smlt:odule:paella
:scp-wiki:component:audio-player-woed-source
[info]
:scp-wiki:component:audio-player-woed-source
[info]
:scp-wiki:component:audio-player-woed-source
[info]
:scp-wiki:component:audio-player-woed-source
[info]
:smlt:odule:paella
:smlt:odule:paella
:smlt:odule:paella
:smlt:odule:paella
:scp-wiki:component:audio-player-woed-source
[info]
:scp-wiki:component:audio-player-woed-source
[info]
:scp-wiki:component:audio-player-woed-source
[info]
:scp-wiki:component:audio-player-woed-source
[info]
:smlt:odule:paella
:smlt:odule:paella
:smlt:odule:paella
:smlt:odule:paella
:scp-wiki:component:audio-player-woed-source
[info]
:scp-wiki:component:audio-player-woed-source
[info]
:scp-wiki:component:audio-player-woed-source
[info]
:smlt:odule:paella
:smlt:odule:paella
:smlt:odule:paella
:scp-wiki:component:audio-player-woed-source
[info]
:scp-wiki:component:audio-player-woed-source
[info]
:scp-wiki:component:audio-player-woed-source
[info]
:scp-wiki:component:audio-player-woed-source
[info]
:smlt:odule:paella
:smlt:odule:paella
:smlt:odule:paella
:smlt:odule:paella
:scp-wiki:component:audio-player-woed-source
[info]
:smlt:odule:paella
:scp-wiki:component:license-box
[info]
:scp-wiki:component:license-box-end
[info]
aria-only
a-randomizer
dude
city-block
closable-tab
anthology-cards-container
closable-tab
anthology-cards-container
closable-tab
anthology-cards-container
closable-tab
monologue-alethophobia
monologue-mnemophobia
anthology-cards-container
closable-tab
anthology-cards-container
closable-tab
anthology-cards-container
closable-tab
anthology-cards-container
closable-tab
anthology-cards-container
closable-tab
anthology-cards-container
closable-tab
anthology-cards-container