Link to article: Quikngruvn's Workbench.
#page-title {
display: none;
}
@media not all and (max-width: 767px) {
#main-content {
max-width: min(57.5rem,calc(100% - 3rem));
}
}
:root { --box-accent: #823f3f; }
.scp-list {
display: grid;
gap: .75rem;
margin-block: 1.5rem;
}
.scp-list .pager { border-block-start: .225rem solid var(--box-accent); }
.scp-block {
background-color: #fff;
box-shadow: 0 0 0.325rem rgb(0 0 0 / 0.25);
contain: paint;
display: grid;
grid-template-areas:
"title date"
"meta meta";
grid-template-columns: 1fr max-content;
gap: .425rem;
padding: .625rem;
--box-accent: inherit;
}
.scp-block:not(.scp) { display: none; }
.scp-block .title {
grid-area: title;
display: flex;
gap: .325ex 0.75ex;
align-items: center;
flex-wrap: wrap;
}
.scp-block .title > a {
font-weight: bold;
font-size: 1.075em;
}
.scp-block .title > .author { font-size: .775em; flex-grow: 1; }
.author .printuser {
display: inline-flex;
align-items: baseline;
gap: .325em;
}
.author .printuser img {
margin: 0;
padding: 0;
padding-left: .475rem;
}
.scp-block .date {
grid-area: date;
font-feature-settings: 'case','ss01','ss04','tnum';
font-size: .725em;
}
.scp-block .meta {
grid-area: meta;
display: flex;
font-size: .775em;
gap: .75rem;
justify-content: space-between;
}
.meta .tag-list {
display: flex;
flex-wrap: wrap;
gap: .25rem;
align-items: flex-start;
}
.tag-list a {
display: block;
border-radius: 1.5rem;
padding: .125em .675em;
text-decoration: none;
font-weight: 550;
color: var(--box-accent);
background-color: #823f3f0f;
}
.tag-list a[href$="scp"] { display: none; }
.tag-list a:is(:hover,:focus) {
color: white;
background-color: var(--box-accent);
}
.meta .sec-info {
display: grid;
grid-template-columns: 3rem 3.5rem;
align-items: center;
text-align: end;
gap: .25rem;
min-width: max-content;
align-self: flex-end;
}
.sec-info > br { display: none; }
.sec-info .comments > span { font-size: 0; }
.scp-block .description {
grid-column: 1/-1;
}
.description > :not(.preview) { display: none; }
.description:not(:has(> .preview)) { display: none; } /* progressive enhancement */
.description > .preview {
display: block;
font-size: .9125em;
padding-block-start: .425rem;
border-block-start: .05rem solid #ddd;
}
.description > .preview > p:first-child { margin-block-start: 0.25em; }
.description > .preview > p:last-child { margin-block-end: 0.25em; }
div.tag-nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .25rem;
font-size: .9125em;
margin-block: .5rem;
}
div.tag-nav br { display: none; }
div.tag-nav p { display: contents; }
/*-------------------------------*/
.shelf-tag {
text-align: center;
font-size: .875em;
font-weight: bold;
color: #888;
margin-block: .75rem .25rem;
}
.shelf-epoch {
display: flex;
justify-content: space-between;
font-size: 1.5em;
font-variant-numeric: tabular-nums;
align-items: center;
.small-tag { font-size: .5em; color: #888; padding-inline-end: .75rem; }
}
.shelf-epoch::after {
content: "";
flex-basis: 9ch;
flex-shrink: 99;
font-size: .5em;
}
.deca-series {
display: flex;
flex-wrap: wrap;
gap: .5rem;
text-align: center;
flex-basis: min(100%, 36rem);
flex-shrink: 1;
justify-content: center;
font-weight: bold;
a {
min-width: 2.325rem;
border-inline-end: solid .05rem #888;
display: block;
padding-inline-end: .5rem;
}
}
display: block;
shelf-tag
shelf-epoch
small-tag
deca-series
shelf-tag
shelf-epoch
small-tag
deca-series
shelf-tag
shelf-epoch
small-tag
deca-series
tag-nav
tag-list
tag-nav
tag-list
tag-nav
tag-list
tag-nav
tag-list
tag-nav
tag-list
tag-nav
tag-list
tag-nav
tag-list
tag-nav
tag-list
tag-nav
tag-list
tag-nav
tag-list
tag-nav
tag-list
tag-nav
tag-list
tag-nav
tag-list
tag-nav
tag-list
scp-list
content-type-description
scp-block
%%tags%%
title
author
date
meta
tag-list
sec-info
rating
comments
description
scp-block