Link to article: Curated Tale Series Hub.
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
:root {
--basalt-overtone: 40,40,40;
--basalt-undertone: 248,60,55;
--basalt-background-color: 252,252,252;
--link-color: var(--basalt-undertone);
--link-visited-color: 240,52,50;
--main-content-width: 63.5rem;
--main-content-top-margin: 0rem;
--base-font-size: 0.9675rem;
--base-header-height: 2.875rem;
--header-title: "SCP FOUNDATION";
--subtitle-size: 0rem;
}
body {
background-size: 1.5rem 1.5rem;
background-image: linear-gradient(rgb(var(--basalt-undertone),0.07) 1px, transparent 1px), linear-gradient(to right, rgb(var(--basalt-undertone),0.07) 1px, transparent 1px);
}
#header h1 a::before { content: unset; }
#page-title { display: none; }
/* --- big display feature ---*/
.display-container {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: auto;
grid-template-areas:
'image text'
'image text';
padding: 8px;
margin-bottom: 2rem;
box-sizing: border-box;
}
.display-container.second {
grid-template-areas:
'text image'
'text image';
}
.tale-cover {
grid-area: image;
place-self: center;
justify-self: center;
box-sizing: border-box;
}
.tale-desc {
grid-area: text;
justify-self: stretch;
padding-left: 1.4rem;
border-left: solid 0.1rem #333;
margin-left: 0.8rem;
box-sizing: border-box;
font-size: 105%;
}
.tale-desc h4 {
text-align: right;
font-weight: normal;
font-style: italic;
}
.display-container.second .tale-desc {
padding-left: 0; padding-right: 1.4rem;
border-left: none; border-right: solid 0.1rem #333;
margin-left: 0; margin-right: 0.8rem;
}
.tale-cover img {
width: 480px;
border-radius: 15px;
box-sizing: border-box;
box-shadow: 0px 0px 7px rgba(0,0,0,0.3);
transition: 0.34s ease-in-out transform, 0.38s ease-in-out box-shadow;
}
.tale-cover img:hover {
transform:
perspective(75em)
rotateY(25deg);
box-shadow: -2px 0px 8px rgba(0,0,0,0.2);
}
.display-container.second .tale-cover img:hover {
transform:
perspective(75em)
rotateY(-25deg);
box-shadow: 2px 0px 8px rgba(0,0,0,0.2);
}
.tale-desc h1, .multi-grid div h1, .multi-grid-small div h1 {
font-size: 2em;
text-align: center;
letter-spacing: -0.045em;
}
.multi-grid div h1 { font-size: 1.25em; }
.multi-grid-small div h1 { font-size: 1.15em; }
@media (max-width: 700px) {
.display-container, .display-container.second {
grid-template-areas:
'image image'
'text text';
}
.tale-desc, .display-container.second .tale-desc {
padding: 4px;
border: none;
border-top: solid 0.1rem #333;
margin: 0; margin-top: 1rem;
}
.tale-cover img:hover, .display-container.second .tale-cover img:hover {
transform: none;
}
}
/* --- medium display features ---*/
.multi-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr));
grid-gap: 1.5rem;
margin-bottom: 2.4rem;
box-sizing: border-box;
}
.multi-grid > div {
background: #fff;
box-shadow: 0px 0px 6px rgba(0,0,0,0.24);
padding: 1.5rem;
border-radius: 8px;
box-sizing: border-box;
}
#page-content h2 {
text-align: right;
}
.multi-grid-small {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
grid-gap: 1rem;
margin-bottom: 2.4rem;
box-sizing: border-box;
}
.multi-grid-small > div {
background: #fff;
box-shadow: 0px 0px 4px rgba(0,0,0,0.2);
padding: 0.8rem;
border-radius: 6px;
box-sizing: border-box;
position: relative;
}
.multi-grid-small > div > .image-container { margin-bottom: -0.4rem; margin-top: -0.4rem; }
.multi-grid > div a, .multi-grid-small > div a {
font-size: 105%;
display: block;
color: inherit;
background-color: inherit;
padding: 6px;
text-align: center;
font-style: oblique;
margin: auto; margin-top: 0.6rem; margin-bottom: -0.8rem;
}
.multi-grid-small > div a { margin-top: -0.4rem; }
.multi-grid > div a::before, .multi-grid > div a::after,
.multi-grid-small > div a::before, .multi-grid-small > div a::after {
content: " ";
display: block;
width: 100%;
height: 0.1rem;
background-color: #fff;
mix-blend-mode: difference;
}
.multi-grid > div a::before, .multi-grid-small > div a::before { margin-bottom: 0.4rem; }
.multi-grid > div a::after, .multi-grid-small > div a::after { margin-top: 0.45rem; }
div.standalone::before {
content: "Standalone";
font-size: 83%;
color: white;
background-color: rgb(var(--basalt-undertone));
padding: 4px; padding-left: 6px; padding-right: 7px;
position: absolute;
top: -0.55rem; left: -0.3rem;
border-radius: 0 4px 4px 0;
}
div.standalone::after {
content: " ";
background: rgb(0,0,0);
background: linear-gradient(45deg, rgba(0,0,0,0) 50%, rgb(var(--basalt-undertone)) 50%);
display: block;
width: 2rem; height: 2rem;
position: absolute;
top: 1.05rem; left: -0.3rem;
border-radius: 0 4px 4px 0;
filter: brightness(0.625);
z-index: -2;
}
/*--- Content Warning span ---*/
#page-content .content-warning {
display: flex;
align-items: center;
color: black;
font-weight: bold;
font-size: .825em;
background-color: #FFD101;
box-shadow: 0 0 0 4px #ffd101;
padding: .25em; padding-inline-end: 1em;
border-radius: 2rem;
border: solid .125rem currentColor;
justify-content: center;
text-align: center;
max-width: max-content;
margin: 1rem auto auto;
}
#page-content .content-warning::before {
content: "\26A0";
font-size: 1.75em;
font-weight: normal;
padding: .25em;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
margin-right: 0.3rem;
}
/*--- Complete span ---*/
#page-content .complete {
display: flex;
align-items: center;
font-weight: bold;
font-family: var(--mono-font);
color: white;
background-color: #0096f0;
box-shadow: 0 0 0 4px #0096f0;
padding: .5em 1em .5em .75em;
border-radius: .5rem;
border: solid .125rem currentColor;
justify-content: center;
text-align: center;
max-width: max-content;
margin: 1rem auto auto;
}
#page-content .complete::before {
content: "\26A0";
content: '';
display: block;
height: 1.5em;
width: 1.125em;
background-color: currentColor;
clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 67.5%, 0 100%);
text-align: center;
margin-right: 0.575em;
}
border: solid 0.25rem #97ce8e;
background-color: #2F333C; color: #EDEDED; border-bottom: solid 0.25rem #bb88ff
background-color:#21252E; color: #ededed;
background-color: #212121; border-top: 0.2rem solid red; border-bottom: 0.2rem solid red; border-radius: 5% 10%; color: #FF3300;
border: solid 0.3rem #C1930B; background-color: #FFFBF0;
border: solid 0.3rem #F7E3D6
background: linear-gradient(180deg, rgba(6,0,96,1) 0%, rgba(0,0,2,1) 132px, rgba(238,238,238,1) 132px) padding-box, linear-gradient(0deg, #020006, #09005E) border-box; border: 0.4rem solid transparent;
color: #EDEDED; background-color: #2F333C;
color: #EDEDED; background-color: #2F333C; background-image: url(https://scp-wiki.wikidot.com/local--files/curated-tale-series/archebg.png);
background-color: #fffbfe; border: solid .25rem #999; border-radius: 0;
background-color: #1D1F20; color: #C5C9C6;
border: 2px solid black; border-radius: 0;
background-image: url(
background-image: url(
color: #ffeeee; background-color: #25171e; border: solid 0.25em #b94d7b;
background-color: #EEFFCC; color: #66574F
background: linear-gradient(#1A1B28, #242D35); color: #f4f4f4;
background-color: #DCF2B0; color: #3B5C0A;
background-color: #F1F5F9; color: #0E0A06; border-radius: 0; background-image: linear-gradient(to left, black, black 3px, transparent 3px), linear-gradient(to bottom, black, black 3px, transparent 3px), url(
margin-bottom: -70px;
border-radius: 2.5rem
background-color: #f5f5f5; border: solid 1px black;
border-radius: 0; border: double 0.4rem #9F0A08; background-color: #EBDBC2; color: #262017;
background-color: #F4E8E8; border: solid 3px #AD275A;
background: linear-gradient(180deg, rgba(255,131,204,1) 10%, rgba(92,97,168,1) 90%); background-clip: text;-webkit-background-clip: text;color: transparent; padding: 0 1em;
:scp-wiki:info:start
[info]
:scp-wiki:info:end
[info]
:scp-wiki:theme:bedrock
[info]
:scp-wiki:component:license-box-end
[info]
meta-title
display-container
tale-cover
tale-desc
complete
display-container
second
tale-cover
tale-desc
multi-grid
multi-grid-small
standalone
multi-grid-small
multi-grid-small
standalone
multi-grid-small
multi-grid-small
standalone
content-warning
standalone
content-warning
multi-grid-small
multi-grid-small
standalone
standalone
content-warning
multi-grid-small
multi-grid-small
multi-grid-small
standalone
standalone
standalone
multi-grid-small
standalone
standalone