Link to article: ROUNDERPAGE.
/* FONTS */
@import url('https://fonts.googleapis.com/css?family=Bungee+Shade&display=swap');
@import url('https://fonts.googleapis.com/css?family=Staatliches');
@import url('https://fonts.googleapis.com/css?family=Bungee&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
/* ROOT */
:root {
/* Rating Module Colors */
--rating-module-button-color: var(--light-gray-monochrome);
--rating-module-button-plus-color: 0, 200, 0;
--rating-module-button-negative-color: 200, 0, 0;
--rating-module-button-cancel-color: 200, 200, 200;
--rating-module-button-credit-color: 50, 50, 50;
--rating-module-text-color: var(--swatch-menutxt-light-color);
--rating-module-text-hover-color: var(--swatch-menutxt-light-color);
--background-gradient-distance: 0rem;
/* Primary Theme Colors */
--swatch-background: 39, 39, 39;
--swatch-primary: var(--medium-accent);
--swatch-primary-darker: var(--bright-accent);
--swatch-primary-darkest: var(--medium-accent);
/* Primary Text Colors */
--swatch-text-dark: var(--white-monochrome);
--swatch-text-light: var(--black-monochrome);
--swatch-important-text: var(--bright-accent);
--rounder-red: #ED1B24;
}
/* HEADER */
#header{
background: url(null)
}
#header:before{
display:block;
position: absolute;
width: 100px;
height: 100px;
top: 10%;
content: "";
background:url(https://scp-wiki.wdfiles.com/local--files/rounderhouse-s-author-page/rounderlogo.png);
background-repeat: no-repeat;
background-size:100px 100px;
background-position: 0px 0px;
z-index: 201;
animation: spinny1 7s infinite linear;
}
#header h1 a {
font-size: 150%;
color: transparent;
text-shadow: none;
}
#header h1 a::before {
content: "the rounderpage™";
text-shadow: none;
font-family: 'Bungee', cursive;
color: white;
-webkit-text-fill-color: white;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: black;
}
#header h2 span {
font-size: 100%;
color: transparent;
text-shadow: none;
}
#header h2 span::before {
content: "I have information that could lead to the arrest of Rounderhouse";
color: white;
-webkit-text-fill-color: white;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
text-shadow: none;
font-family: 'Bungee', cursive;
}
#skrollr-body {
width: 100%;
height: 7.625rem;
position: absolute;
top: 0;
left: 0;
background-image: url(https://scp-wiki.wdfiles.com/local--files/rounderhouse-s-author-page/rounderception.png);
background-repeat: repeat-x;
background-size: contain;
}
/* STYLING */
/* Bungee Header */
span.bungee {
font-family: 'Bungee Shade', cursive;
font-size: 300%;
color: #fff;
}
/* Intro Box */
div.intro {
background: #3D3D3D;
border-radius: 3px;
padding: 2rem 1.5rem;
margin: 1rem auto;
z-index: 0;
}
/* Latest Article Ticker */
.ticker {
background-color: #272727;
color: red;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
border: 4px grey solid;
position: sticky;
top: 0;
text-align: center;
z-index: 1;
}
.ticker p {
font-size: 1.1rem;
font-family: 'Share Tech Mono', monospace;
display: inline-block;
padding-left: 100%;
animation: marquee 10s linear infinite;
}
/* Article Boxes */
div.solo {
display: flex;
justify-content: space-evenly;
align-items: stretch;
align-content: stretch;
flex-wrap: wrap;
}
div.article {
display: block;
max-width: 30%;
background: #3d3d3d;
padding: 1.3rem;
margin: 1rem 1rem;
border-radius: 3px;
color: white;
box-shadow: 20px 20px rgba(0,0,0,.15);
transition: all .4s ease;
}
div.article:hover {
box-shadow: 10px 10px rgba(0,0,0,.25);
}
div.solo.list-pages-box {
display: block;
width: 100%;
}
div.solo.list-pages-item {
display: inline-block!important;
}
/* Listpages Fix */
.fivek.list-pages-box a {
color: #850005;
}
.ticker > .list-pages-box a {
text-decoration: underline;
}
/* Listpages Block */
div.list-pages-box * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
div.list-pages-box br {
display: none;
}
div.list-pages-box ol {
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
position: relative;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
padding: inherit;
overflow: hidden;
}
div.list-pages-box ol li {
-ms-flex-preferred-size: calc(100% / 5);
-webkit-flex-basis: -webkit-calc(100% / 5);
flex-basis: -moz-calc(100% / 5);
flex-basis: calc(100% / 5);
color: #fff;
padding: 0.75em;
margin: 0.5em;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-flex: 2;
-ms-flex-positive: 2;
-webkit-flex-grow: 2;
-moz-box-flex: 2;
flex-grow: 2;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
position: relative;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-box-align: center;
align-items: center;
text-align: center;
border: 0.125rem solid #3d3d3d;
background: #3d3d3d;
font-size: -webkit-calc(var(--base-font-size) * 1.25);
font-size: -moz-calc(var(--base-font-size) * 1.25);
font-size: calc(var(--base-font-size) * 1.25);
overflow: hidden;
box-shadow: 15px 15px rgba(0,0,0,.15);
transition: all .4s ease;
}
div.list-pages-box ol li:hover {
box-shadow: 7px 7px rgba(0,0,0,.25);
}
div.list-pages-box ol li a {
font-family: 'Poppins', sans-serif;
}
div.list-pages-box ol li > span:first-of-type {
padding-top: 0.5em;
}
div.list-pages-box ol li > span:nth-of-type(5) {
padding-bottom: 0.5em;
}
span.page_tags {
font-size: 80%;
}
div.list-pages-box ol li a,
div.list-pages-box ol li > span {
will-change: color, border, filter;
-webkit-transition: color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1), border-top 500ms cubic-bezier(0.4, 0, 0.2, 1), filter 500ms cubic-bezier(0.4, 0, 0.2, 1);
-o-transition: color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1), border-top 500ms cubic-bezier(0.4, 0, 0.2, 1), filter 500ms cubic-bezier(0.4, 0, 0.2, 1);
-webkit-transition: color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1), border-top 500ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-filter 500ms cubic-bezier(0.4, 0, 0.2, 1);
transition: color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1), border-top 500ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-filter 500ms cubic-bezier(0.4, 0, 0.2, 1);
-moz-transition: color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1), border-top 500ms cubic-bezier(0.4, 0, 0.2, 1), filter 500ms cubic-bezier(0.4, 0, 0.2, 1);
transition: color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1), border-top 500ms cubic-bezier(0.4, 0, 0.2, 1), filter 500ms cubic-bezier(0.4, 0, 0.2, 1);
transition: color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1), border-top 500ms cubic-bezier(0.4, 0, 0.2, 1), filter 500ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-filter 500ms cubic-bezier(0.4, 0, 0.2, 1);
z-index: 0;
width: 100%;
height: 100%;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
display: -webkit-box;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-filter: invert(0) hue-rotate(0deg);
filter: invert(0) hue-rotate(0deg);
}
div.list-pages-box ol li::before {
content: " ";
width: 125%;
height: 100%;
position: absolute;
top: 0;
pointer-events: none;
opacity: 1;
background-color: rgb(255, 219, 90);
background-color: rgb(var(--bright-accent));
-webkit-transform: translateX(-webkit-calc(-100% - 4rem));
-moz-transform: translateX(-moz-calc(-100% - 4rem));
-ms-transform: translateX(calc(-100% - 4rem));
-o-transform: translateX(calc(-100% - 4rem));
transform: translateX(calc(-100% - 4rem));
-webkit-transition: -webkit-transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
transition: -webkit-transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
-o-transition: -o-transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
-moz-transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1), -moz-transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 500ms cubic-bezier(0.4, 0, 0.2, 1), -moz-transform 500ms cubic-bezier(0.4, 0, 0.2, 1), -o-transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
-webkit-clip-path: polygon(0.00% 0.00%, 100% 0px, 90% 100%, 0px 100%);
clip-path: polygon(0.00% 0.00%, 100% 0px, 90% 100%, 0px 100%);
}
div.list-pages-box ol li a,
div.list-pages-box ol li > span:first-of-type {
border-top: 0.0625rem solid rgb(var(--swatch-menutxt-light-color));
}
div.list-pages-box ol li:hover a,
div.list-pages-box ol li:hover > span {
color: rgb(var(--swatch-menutxt-dark-color)) !important;
}
div.list-pages-box ol li:hover a {
-webkit-filter: invert(1) hue-rotate(195deg);
filter: invert(1) hue-rotate(195deg);
}
div.list-pages-box ol li:hover > span:first-of-type {
border-top: 0.0625rem solid rgb(var(--swatch-menutxt-dark-color)) !important;
}
div.pages_container {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
position: relative;
width: 100%;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
/* Wanderer's Library Box */
.library {
box-sizing: border-box;
border: 2vw solid rgba(0,0,0,0.5);
border-image: url(https://wanderers-library.wdfiles.com/local--files/component%3Adustjacket-theme/wl_border.png) 600 round;
border-image-width: 6;
background-color: rgb(45, 70, 45);
border-radius: 3vw;
padding: 1em 0;
color: #FFDB5A;
text-align: center;
}
.library a {
color: #FFDB5A!important;
}
/* Fix Login */
#login-status a {
color: rgb(0, 0, 0);
background: transparent;
}
#login-status {
color: #000000;
font-size: 90%;
z-index: 30;
}
#login-status a {
background: transparent;
color: #000000;
}
#login-status ul a {
color: #000000;
background: transparent;
}
#account-topbutton {
background: #ddd;
color: #000000;
}
/* Images */
#page-content .scp-image-block {
border: groove 8px #D4AF37;
box-shadow: none;
}
#page-content .scp-image-block .scp-image-caption {
border-color: rgba(0,0,0,0.12);
background-color: #8B4513;
}
/* BUDDY MENU */
#page-content {
position: relative;
}
.desktop-only {
text-align: center;
height: 16rem;
width: 10rem;
background: #3D3D3D;
position: -webkit-sticky;
position: sticky;
top: 15rem;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
border-radius: 3px;
padding: 10px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
overflow: visible;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-transform: translateX(400%);
-moz-transform: translateX(400%);
-ms-transform: translateX(400%);
-o-transform: translateX(400%);
transform: translateX(400%);
box-shadow: 20px 20px rgba(0,0,0,.15);
transition: all .4s ease;
}
.desktop-only:hover {
box-shadow: 10px 10px rgba(0,0,0,.25);
}
.desktop-only a, a:visited {
color: var(--rounder-red);
}
#page-content {
margin-top: -16rem!important;
}
/* OTHER */
#side-bar .side-block {
background: linear-gradient(0deg, rgba(48,48,52,0.92) 37%, rgba(48,48,52,0.92) 51%, rgba(48,48,52,0.92) 68%), url('https://upload.wikimedia.org/wikipedia/commons/a/ab/Radial_engine.gif');
}
#page-title {
display: none;
}
h1, h2, h3, h4, h5, h6 {
color: #fff;
}
#lock-info {
background-color: #3d3d3d;
border: none
}
.hovertip {
border: none;
background: #3d3d3d;
color: #fff;
}
/* ANIMATIONS */
@keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
@keyframes spinny1{
from {
-webkit-transform: rotate(0deg);
webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
#page-content > div:nth-child(5) {
margin-top: 0;
}
/* @MEDIA */
@media only screen and (max-width: 767px) {
.ticker {
top: 9%;
}
}
@media (max-width: 1250px) {
.desktop-only {
display: none !important;
visibility:hidden
}
#page-content {
margin-top: 0rem!important;
}
}
font-size: 150%; font-family: 'Staatliches', cursive;
display: inline-block;width: 80px; border: 4px solid #fff; margin: auto; border-radius: 100%; padding: 2%;
display: inline-block;width: 80px; border: 4px solid #fff; margin: auto; border-radius: 100%; padding: 2%;
color:white
color:white
color:white
color:white
color:white
color:white
color:white
color:white
color:white
desktop-only
ticker
intro
bungee
bungee
pages_container
pages
page_tags
page_tags
page_tags
pages_container
pages
page_tags
page_tags
page_tags
pages_container
pages
page_tags
page_tags
page_tags
pages_container
pages
page_tags
page_tags
page_tags
bungee
solo
article
article
article
article
article
article
article
article
article
article
bungee
library
bungee
bungee
bungee