Link to article: ubergoober's AUTHOR PAGE.
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
/* ---- VARS ---- */
:root {
--darkColor: hsl(270, 74%, 5%);
--headerColor: hsl(270, 43%, 21%);
--lightColor: white;
--lgurl: url(https://scp-wiki-cdn.nyc3.cdn.digitaloceanspaces.com/theme/en/black-highlighter/img/logo.svg);
}
/* ---- SITE BANNER ---- */
div#container-wrap {
background-image: none;
}
#header,
div#header {
background-image: none;
}
#header::before {
position: absolute;
width: 100%;
height: 100%;
content: "";
margin-top: 0.5em;
background-image: var(--lgurl);
background-position: center top;
background-repeat: no-repeat;
background-size: auto 9em;
opacity: .33;
}
#header h1,
#header h2 {
float: none;
margin-left: 0;
text-align: center;
}
#header h1 span,
#header h2 span {
display: none;
}
#header h1 a::before {
position: relative;
bottom: .15em;
color: var(--titleColor);
font-size: 115%;
font-weight: 700;
content: var(--header-title, "SCP Foundation");
}
#header h2::before {
position: relative;
top: .1em;
color: var(--lightColor);
font-size: 130%;
font-weight: 600;
content: var(--header-subtitle, "Secure, Contain, Protect");
}
/* ---- TOP BAR ---- */
#top-bar {
right: 0;
display: flex;
justify-content: center;
}
#top-bar ul li ul {
border-bottom: 1px solid hsl(0, 0%, 40%);
box-shadow: none;
}
/* ---- BODY ---- */
#container {
background: linear-gradient(to bottom, var(--headerColor), var(--darkColor) 200px, black 100%);
}
body {
background: var(--darkColor);
color: white;
}
a {
color: hsl(270, 75%, 70%);
}
a:visited {
color: hsl(270, 60%, 60%);
}
.hovertip {
background: var(--darkColor) !important;
border: 1px solid hsl(0, 0%, 50%) !important;
}
/* -------------- SIDE-BAR -------------- */
#side-bar a,
#side-bar a:visited,
#side-bar a.newpage,
#interwiki a,
#interwiki a:visited,
#interwiki a.newpage {
color: hsl(250, 57%, 59%);
}
#side-bar .side-block,
#side-bar .side-block.media,
#side-bar .side-block.resources,
#interwiki .side-block {
background: var(--darkColor);
border-color: hsl(0, 0%, 50%);
box-shadow: none;
}
#side-bar .heading,
#interwiki .heading {
border-bottom: solid 1px hsl(0, 0%, 52%);
color: hsl(0, 0%, 52%);
}
#interwiki {
background: transparent;
}
#interwiki body {
background-image: unset;
}
#top-bar .open-menu a {
background: hsl(0, 0%, 9%);
}
@media (max-width: 767px) {
#side-bar {
background-color: hsl(270, 13%, 18%);
}
}
#top-bar .open-menu a {
position: fixed;
top: 0.5em;
left: 0.5em;
z-index: 5;
font-family: 'Lucida Sans Unicode','Lucida Grande','Lucida Sans','Times New Roman',Helvetica,Roboto,sans-serif;
font-size: 30px;
font-weight: 700;
width: 30px;
height: 30px;
line-height: 0.9em;
text-align: center;
border: 0.2em solid hsl(0, 0%, 53%);
background-color: hsl(0, 0%, 100%);
border-radius: 3em;
color: hsl(0, 0%, 53%);
pointer-events: auto;
}
@media not all and (max-width: 767px) {
#top-bar .mobile-top-bar {
display: block;
pointer-events: none;
}
#top-bar .mobile-top-bar li {
display: none;
}
#main-content {
max-width: 44.5rem;
margin: 0 auto;
padding: 0;
transition: max-width 0.2s ease-in-out;
}
#side-bar {
display: block;
position: fixed;
top: 0;
left: -18rem;
width: 15.25rem;
height: 100%;
margin: 0;
overflow-x: hidden;
overflow-y: auto;
z-index: 10;
padding: 1em 1em 0 1em;
background-color: hsla(0, 0%, 0%, 0.1);
transition: left 0.4s ease-in-out;
scrollbar-width: thin;
}
#side-bar:target,
#side-bar:focus-within {
left: 0;
}
#side-bar:target .close-menu {
display: block;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
margin-left: 17rem;
opacity: 0;
z-index: -1;
visibility: visible;
}
#side-bar:not(:target) .close-menu {
display: none;
}
#top-bar .open-menu a:hover {
text-decoration: none;
}
}
/* -------------- PAGE ELEMENTS -------------- */
/* -- Rate Module -- */
div.page-rate-widget-box .rate-points {
background-color: var(--darkColor) !important;
border-color: hsl(0, 1%, 66%);
color: hsl(0, 1%, 66%) !important;
}
div.page-rate-widget-box .rateup,
div.page-rate-widget-box .ratedown {
background-color: hsl(0, 1%, 66%);
border-top-color: hsl(0, 1%, 66%);
border-bottom-color: hsl(0, 1%, 66%);
}
div.page-rate-widget-box .rateup a,
div.page-rate-widget-box .ratedown a {
color: var(--darkColor);
}
div.page-rate-widget-box .rateup a:hover,
div.page-rate-widget-box .ratedown a:hover {
background: var(--darkColor);
color: hsl(0, 1%, 66%);
}
div.page-rate-widget-box .cancel {
background-color: var(--darkColor);
border-color: hsl(0, 1%, 66%);
}
div.page-rate-widget-box .cancel a {
color: hsl(0, 1%, 66%);
}
div.page-rate-widget-box .cancel a:hover {
background: hsl(0, 1%, 66%);
color: var(--darkColor);
}
/* -- Info Module -- */
#page-content .rate-box-with-credit-button {
background-color: var(--darkColor);
border-color: hsl(0, 1%, 66%);
border-radius: 5px;
box-shadow: 1px 1px 3px rgba(0,0,0,.5);
}
#page-content .creditButton p a {
border-left-color: hsl(0, 1%, 66%);
}
.rate-box-with-credit-button .cancel {
border-radius: 0;
}
#page-content .creditButton p a:hover {
color: hsl(270, 90%, 61%);
}
div.modalbox {
background: linear-gradient(hsl(0, 0%, 5%) 51px, var(--darkColor) 51px, var(--darkColor));
}
/* -- Other Page Elements -- */
#page-title,
.meta-title,
h1 {
color: hsl(270, 62%, 70%);
}
.scp-image-block .scp-image-caption {
background-color: var(--darkColor);
color: hsl(0, 0%, 50%);
}
blockquote,
div.blockquote,
.code,
.wiki-content-table tr th,
#lock-info {
background: hsl(0, 0%, 5%);
border: solid 1.5px gray;
}
.yui-navset .yui-content {
background-color: rgba(0, 0, 0, 0);
border: none;
}
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
background: hsl(0, 1%, 21%);
color: hsl(0, 1%, 66%);
}
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a:focus,
.yui-navset .yui-nav .selected a:hover {
background: hsl(270, 47%, 54%);
}
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {
background: hsl(270, 54%, 19%);
}
/* code highlighter stuff */
.hl-identifier,
.hl-code,
.hl-brackets {
color: hsl(0, 1%, 66%);
}
.hl-var {
color: hsl(300, 60%, 43%);
}
.hl-special,
.hl-quotes {
color: hsl(270, 91%, 50%);
}
.hl-number,
.hl-string {
color: hsl(270, 100%, 50%);
}
/* Page Revisions Readability */
del,
ins {
color: hsl(0, 0%, 20%);
}
/* ---- PAGE TITLE ---- */
.meta-title,
#page-title {
text-align: center;
}
/* ---- MOBILE DISPLAY ---- */
@media (max-width: 767px) {
#search-top-box {
top: 1.85em;
width: unset;
}
.mobile-top-bar {
position: relative;
left: 0;
display: flex;
justify-content: center;
}
#login-status {
top: 0;
right: 0;
}
#header .printuser {
font-size: 0;
}
#header .printuser img.small {
margin: 0;
transform: translate(6px, 4px);
}
#my-account {
display: none;
}
#account-topbutton {
margin-left: 2px;
}
}
/* AUTHOR PAGE DIVS */
div.article {
background-color: rgba(34, 34, 34, 0.5);
width: 100%
border-radius: 5px;
padding: 2em;
margin: 3em auto;
display: flex;
flex-direction: column;
}
.article-title {
display: block;
width: 100%;
font-size: 400%;
font-weight: bold;
font-family: 'Outfit';
text-align: center;
line-height: 1;
}
.mini {
font-size: 250%;
margin-bottom: 1em;
}
.article-subtitle {
display: block;
width: 100%;
font-size: 150%;
font-family: 'Outfit';
text-align: center;
margin-bottom: 1.5em;
}
.h-wrapper {
display: flex;
width: 100%;
flex-direction: row;
}
div.info {
flex: 0 0 60%;
background-color: rgba(50, 50, 50, 0.5);
border-radius: 5px;
padding: 1em;
margin-right: 15px;
box-sizing: border-box;
}
div.info-wide {
flex: 0 0 100%;
background-color: rgba(50, 50, 50, 0.5);
border-radius: 5px;
padding: 1em;
box-sizing: border-box;
}
div.cover-image {
flex: 0 0 40%;
padding: 1em;
box-sizing: border-box;
position: relative;
}
div.cover-image img {
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 5px;
}
img.icon-img {
width: 50px;
display: inline-block;
vertical-align: middle;
padding: 1em;
}
object-position: top;
text-shadow: 0 0 2px gold;
text-shadow: 0 0 2px gold;
background-color: rgba(34, 34, 34, 0.5); width: 100% border-radius: 5px; padding: 2em; margin: 3em auto;
color: #333; background-color: white; border-radius: 10px; padding: 1em; margin: 1em auto;
vertical-align: middle;
vertical-align: middle;
vertical-align: middle;
vertical-align: middle;
vertical-align: middle;
vertical-align: middle;
vertical-align: middle;
vertical-align: middle;
vertical-align: middle;
background-color: rgba(34, 34, 34, 0.5); width: 100% border-radius: 5px; padding: 2em; margin: 3em auto;
font-weight: bold;
component:sybadge
component:sybadge
component:sybadge
component:sybadge
component:sybadge
component:sybadge
component:sybadge
:scp-wiki:component:license-box
[info]
:scp-wiki:component:license-box-end
[info]
article
article-title
article-subtitle
h-wrapper
info-wide
article
article-title
article-subtitle
h-wrapper
info-wide
article
article-title
article-subtitle
h-wrapper
info
cover-image
article
article-title
article-subtitle
h-wrapper
info
cover-image
article
article-title
article-subtitle
h-wrapper
info
cover-image
article
article-title
article-subtitle
info-wide
article
article-title
article-subtitle
h-wrapper
info
cover-image
article
article-title
article-subtitle
h-wrapper
info
cover-image
article
article-title
article-subtitle
info-wide
article
article-title
article-subtitle
h-wrapper
info
cover-image
article
article-title
article-subtitle
h-wrapper
info
cover-image
article
article-title
mini
info-wide
article
article-title
mini
info-wide
article
article-title
mini
h-wrapper
info
cover-image
article
article-title
mini
info-wide
article
article-title
mini
h-wrapper
info
cover-image
article
article-title
mini
info-wide
article
article-title
mini
info-wide
article
article-title
mini
h-wrapper
info
cover-image
article
article-title
article-subtitle
info-wide
article
article-title
mini
h-wrapper
info
cover-image
article
article-title
article-subtitle
h-wrapper
info
cover-image
article
article-title
mini
info
article
article-title
mini
info
article
article-title
mini
h-wrapper
info
cover-image
article-title
article-title
mini
icon-img
icon-img
icon-img
icon-img
icon-img
icon-img
icon-img
icon-img
icon-img
article-title
mini
article
article-title
mini
cover-image