Link to article: etcetera, etcetera.
@import url('https://fonts.googleapis.com/css2?family=Noticia+Text:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manufacturing+Consent&display=swap');
/* Page title */
#page-title {
display: none;
}
/* Page background */
html,
body {
background-image: url("https://scp-wiki.wdfiles.com/local--files/montagueetc/paper.png");
background-position: center top;
background-repeat: repeat;
background-size: contain;
background-size: 20%;
background-attachment: scroll;
}
/* Hover overlay over whole page */
body::before {
content: "";
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.10);
opacity: 0;
transition: opacity 180ms ease;
pointer-events: none;
z-index: 50;
}
body:has(.basic:hover)::before {
opacity: 1;
}
/* Global image styles */
img {
padding-top: 8px;
padding-bottom: 8px;
filter: grayscale(100%);
}
/* Card image styles */
.basic img {
max-height: 80px;
object-fit: cover;
margin: 0;
padding: 0;
}
/* Large title text */
.bigguy {
font-size: 7em;
line-height: 0.7em;
letter-spacing: 0.5rem;
font-family: "Manufacturing Consent", system-ui;
}
/* Main header bar */
.header {
font-size: 5em;
text-align: center;
padding-bottom: 2px;
height: 1.5em;
align-items: center;
justify-content: center;
margin-top: -1em;
position: relative;
border-bottom: 3px solid #000;
--gap: 8px;
--thick: 6px;
margin-bottom: 0.4em;
}
/* Extra line under header */
.header::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: var(--thick);
background: #000;
bottom: calc(-1 * (var(--gap) + var(--thick)));
}
/* Extra info banner */
.extra {
font-size: 155%;
position: relative;
text-align: center;
margin-top: 5px;
border: none;
background: #9c1e1e;
color: white;
padding: 0.15em 2em;
line-height: 0.5;
text-transform: uppercase;
transition: all 200ms ease-in-out;
}
.extra a,
.extra a:visited {
color: white;
text-decoration: none;
}
.extra::before,
.extra::after {
content: "";
position: absolute;
top: 50%;
width: 1.4em;
height: 1.4em;
transform: translateY(-50%);
background-image: url("https://scp-wiki.wdfiles.com/local--files/montagueetc/megaphone.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.extra::before {
left: 0.75em;
}
.extra::after {
right: 0.75em;
}
.extra:hover,
.extra:focus,
.extra:active {
transform: scale(1.05);
z-index: 9999;
transition: all 200ms;
}
.extralink {
display: flex;
flex-direction: column;
justify-content: flex-start;
position: static;
text-decoration: none !important;
}
/* Card grid layout */
.groot {
display: grid;
grid-template-columns: repeat(4, minmax(10px, 1fr));
align-items: stretch;
column-gap: 0.75rem;
row-gap: 0.75rem;
grid-auto-flow: dense;
width: auto;
max-width: 100vw !important;
}
/* Base card styles */
.basic {
position: relative;
padding: 5px;
background: none;
border: none;
transform: translateZ(0);
break-inside: avoid;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
box-sizing: border-box;
font-size: 90%;
color: black !important;
text-decoration: none !important;
line-height: 1.25;
z-index: 0;
place-self: stretch;
transition: all 200ms ease-in-out;
height: auto;
}
/* Reset inner margins */
.basic * {
margin: 0;
}
.basic p {
margin: 0 0 4px;
}
/* Card headings */
.basic h1,
.basic h2,
.basic h3 {
font-family: "DM Serif Display", serif;
font-style: italic;
}
/* Clickable card content wrapper */
.basiclink {
display: flex;
flex-direction: column;
justify-content: flex-start;
position: static;
padding: 3%;
padding-top: 0;
color: black !important;
text-decoration: none !important;
}
/* Card hover effect */
.basic:hover,
.basic:focus,
.basic:active {
transform: scale(1.05);
background-image: url("https://live.staticflickr.com/3183/2646553223_d59f63646f_b.jpg");
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
z-index: 9999;
transition: all 200ms;
}
/* Card border variants */
.black {
border-bottom: 3px solid black;
}
.contest {
border: 3px dashed #d1d1d1;
}
.proposal {
border: 3px solid black;
}
/* Title block */
.title {
box-sizing: border-box;
display: inline-flex;
justify-content: center;
align-items: center;
background: black;
color: white;
font-family: Arial, sans-serif;
font-size: 150%;
width: 11rem;
height: 3rem;
margin-bottom: -0.01rem;
}
.title * {
margin: 0;
line-height: 1;
}
/* Feature label */
.feature {
font-size: 75%;
text-align: center;
}
/* Pill-style feature title */
.title.feature {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
background: #b8b8b8;
border-radius: 50px;
padding: 0.35rem 1.8rem;
line-height: 1;
width: auto;
height: auto;
margin: 0 0 0.5rem;
}
/* Mobile Parity */
@media (max-width: 768px) {
.bigguy {
font-size: 5em;
}
.groot {
grid-template-columns: repeat(2, minmax(10px, 1fr));
align-items: stretch;
column-gap: 0.75rem;
row-gap: 0.75rem;
grid-auto-flow: dense;
width: auto;
max-width: 100vw !important;
}
.header {
font-size: 3em;
}
.extra {
line-height: 1;
}
}
/* BHL */
/* Root variables */
:root {
--black-monochrome: 23, 23, 23;
--medium-accent: 156, 30, 30;
--white-monochrome: 227, 227, 227;
--gray-monochrome: var(--white-monochrome);
--dark-gray-monochrome: 201, 201, 201;
--bright-accent: 156, 30, 30;
--dark-accent: 245, 233, 233;
--pale-gray-monochrome: 201, 201, 201;
--pale-accent: 156, 30, 30;
--light-pale-gray-monochrome: 128, 0, 255;
--very-light-gray-monochrome: 255, 0, 247;
--light-gray-monochrome: 156, 30, 30;
--light-red: 176, 75, 75;
--lighter-red: 196, 120, 120;
--header-title: "Ellipsis Gazette";
--header-subtitle: " ";
--logo-image: mone;
--body-font: "Noticia Text", serif;
--header-font: var(--body-font);
--title-font: var(--body-font);
--UI-font: var(--body-font);
--main-content-width: 80rem;
/* Header font override + size */
--header-font: "Manufacturing Consent", system-ui;
--header-h1-font-size: calc(var(--base-font-size) * (100 / 15));
--link-color: var(--medium-accent);
--visited-link-color: var(--lighter-red);
--hover-link-color: var(--light-red);
}
/* Login dropdown + account options */
#login-status #account-options ul li > a,
#login-status #account-options ul li > a:visited {
color: #000000;
}
/* Top bar base links */
#top-bar a,
#top-bar a:link,
#top-bar a:visited {
color: #000000 !important;
}
/* Top bar hover/selected states */
#top-bar li:hover > a,
#top-bar .selected > a,
#top-bar .open > a {
color: #000000 !important;
}
/* Remove default site background */
div#container-wrap {
background-image: none;
}
/* Header-level color variables */
#header {
--swatch-headerh1-color: var(--black-monochrome);
--search-icon-color: var(--black-monochrome);
--search-icon-hover-color: var(--medium-accent);
--login-line-divider-color: var(--black-monochrome);
--login-username-color: var(--black-monochrome);
--login-myaccount-color: var(--black-monochrome);
--login-myaccount-hover-color: var(--medium-accent);
--login-myaccount-hover-bg-color: var(--white-monochrome);
--login-dropdown-bg-color: var(--dark-gray-monochrome);
--login-dropdown-bg-image: var(--dark-gray-monochrome);
--login-dropdown-text-color: var(--white-monochrome);
--login-dropdown-text-hover-color: var(--white-monochrome);
--login-dropdown-bg-hover-color: var(--medium-accent);
}
/* Top bar dropdown variables */
#top-bar {
--dropdown-links-hover-color: var(--medium-accent);
--dropdown-links-hover-bg-color: var(--white-monochrome);
--mobile-topmenu-sidebar-button-color: var(--black-monochrome);
}
/* Main content UI color */
#main-content {
--ui-icon-color: var(--medium-accent);
}
/* Header title stroke override */
#header h1 a::before {
content: none;
-webkit-text-stroke: 0;
}
@media (max-width: 900px) {
:root {
--header-title: "Ellipsis";
}
}
display: none
height: 1.5rem;
height: 1.5rem;
component:preview
:scp-wiki:theme:black-highlighter-theme
[info]
:scp-wiki:component:centered-header-bhl
[info]
:scp-wiki:component:toggle-sidebar-bhl
[info]
:scp-wiki:component:fade-in
[info]
component:image-block
:scp-wiki:component:sybadge
[info]
:scp-wiki:component:sybadge
[info]
:scp-wiki:component:sybadge
[info]
:scp-wiki:component:sybadge
[info]
:scp-wiki:component:sybadge
[info]
:scp-wiki:component:sybadge
[info]
:scp-wiki:component:sybadge
[info]
:scp-wiki:component:sybadge
[info]
:scp-wiki:component:sybadge
[info]
:scp-wiki:component:sybadge
[info]
:scp-wiki:component:sybadge
[info]
:scp-wiki:component:sybadge
[info]
:scp-wiki:component:license-box
[info]
:scp-wiki:component:license-box-end
[info]
crom-thumbnail
extra
extralink
bigguy
header
groot
basic
black
basiclink
basic
contest
title
feature
basiclink
basic
contest
title
feature
basiclink
basic
black
basiclink
basic
black
basiclink
basic
contest
title
feature
basiclink
basic
black
basiclink
basic
black
basiclink
basic
contest
title
feature
basiclink
basic
black
basiclink
basic
black
basiclink
basic
contest
title
feature
basiclink
basic
black
basiclink
basic
contest
title
feature
basiclink
basic
black
basiclink
basic
black
basiclink
basic
contest
title
feature
basiclink
basic
proposal
basiclink
basic
contest
title
feature
basiclink
basic
black
basiclink
basic
black
basiclink
basic
contest
title
feature
basiclink
basic
black
basiclink
basic
black
basiclink
basic
black
basiclink
basic
black
basiclink
header
groot
basic
black
basiclink
basic
contest
basiclink
basic
black
basiclink
basic
black
basiclink
basic
black
basiclink
basic
black
basiclink
basic
black
basiclink
basic
black
basiclink
basic
black
basiclink
header
groot
basic
black
basiclink
basic
black
basiclink
basic
black
basiclink
basic
black
basiclink
basic
black
basiclink
header