Link to article: Visual Archives Contest Hub - Classic SCPs.
@import url('https://fonts.cdnfonts.com/css/ironick-nf');
:root {
--basalt-secondary-color: 0, 0, 0;
--basalt-overtone: 181, 154, 100;
--basalt-undertone: 181, 154, 100;
--basalt-bright-element-color: 181, 154, 100;
--basalt-dark-element-color: 181, 154, 100;
--link-color: 181, 154, 100;
--link-visited-color: 181, 154, 100;
--link-newpage-color: 181, 154, 100;
--top-bar-link-color-hover: 255, 255, 255;
--login-status-text-color-hover: 0, 0, 0;
--side-bar-link-color-hover: 0, 0, 0;
--side-bar-link-background-hover: 255, 255, 255;
--selection-text-color: 0, 0, 0;
--header-border-width: 0rem;
--title-size: 1.25rem;
--subtitle-size: 0rem;
--side-bar-button-height: 50vh;
--user-button-width: 2rem;
--header-logo-size: 67.5%;
--basalt-UI-dark-palette: 0, 0, 0;
--top-bar-link-background-hover: 181, 154, 100;
}
#header h1 a::before {
display: none;
}
#header h1 a span::after {
margin-bottom: 0;
}
#container #header {
background: none;
position: absolute;
box-shadow: unset;
backdrop-filter: none;
}
div #container-wrap {
background-color: #060C0C;
background: url(https://scp-wiki.wdfiles.com/local--files/visual-archives-art-contest/paint_bg.png);
background-size: contain;
}
#main-content {
margin-top: 0;
}
#page-content {
padding-top: 0;
}
#page-content > p:nth-child(-n+4) {
display: none;
}
.widebox div {
position: relative;
top: 70%;
}
.widebox .winnerbox {
top: 5%;
}
.widebox {
position: relative;
left: calc(-50dvw + 50%);
width: 100dvw !important;
height: calc(120dvh);
max-width: 100dvw !important;
background-image: url(https://scp-wiki.wikidot.com/local--files/va-art-contest-hub-series-1/ucP2hmY.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: top;
}
.widebox:before {
/*content: "";*/
position: absolute;
left: calc(-50dvw + 50%);
width: 100dvw !important;
height: calc(100dvh);
max-width: 100dvw !important;
background-image: linear-gradient(180deg, transparent 0%, transparent 80vh, rgb(13,13,15) 100vh, transparent 100%);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
pointer-events: none;
}
.widebox img {
display: block;
position: relative;
max-height: 60dvh;
margin: auto;
box-shadow: 0px 5rem 10rem black;
}
.widebox br {
content: "";
display: block;
font-size: 24%;
}
.widebox span {
color: white;
font-family: 'Ironick NF', sans-serif;
font-size: 3rem;
transform: scale(1, 1.2);
display: block;
position: relative;
margin: auto;
text-align: center;
line-height: 1.2;
}
.widebox .winnerheader {
padding-bottom: 2rem;
}
.widebox .winnertitle {
padding-top: 2rem;
font-size: 3rem;
line-height: 1;
}
.widebox .winnerauthor {
font-size: 2.5rem;
color: #F7EEEE;
}
.page-rate-widget-box span {
font-size: initial;
display: block;
font-family: revert;
transform: scale(1, 1);
font-size: 1rem !important;
}
.widebox2 {
position: relative;
left: calc(-50dvw + 50%);
width: 100dvw !important;
max-width: 100dvw !important;
color: black;
top: 5dvh;
margin-bottom: 10rem;
}
.widebox2 .bannerseparator img {
position: absolute;
z-index: 1;
left: calc(-50dvw + 50%);
width: 100%;
max-width: 100dvw !important;
top: -12dvw;
pointer-events: none;
box-shadow: 0px 5rem 10rem black;
}
.widebox2 .bannerseparator2 img {
position: absolute;
z-index: 1;
left: calc(-50dvw + 50%);
width: 100%;
max-width: 100dvw !important;
bottom: 0dvw;
pointer-events: none;
box-shadow: 0px -5rem 4rem black;
}
.widebox2 .wideboxinner {
position: relative;
background: url(https://scp-wiki.wdfiles.com/local--files/visual-archives-art-contest/greypaint_bg.png);
color: #F7EEEE;
font-family: 'Palatino Linotype';
padding: 6rem 1rem;
padding-bottom: 12rem;
width: 95vw;
font-size: 1.3rem;
margin: auto;
box-shadow: 0rem 0rem 10rem #000, 0rem 0rem 10rem #000, 0rem 0rem 10rem #000, 0rem 0rem 10rem #000;
}
.widebox2 .wideboxinner:before {
content: "";
position: absolute;
background: url(https://scp-wiki.wdfiles.com/local--files/visual-archives-art-contest/widebox_line.png);
background-repeat: repeat-y;
height: 100%;
width: 5%;
pointer-events: none;
left: 0px;
top: 0;
padding: 0;
}
.widebox2 .wideboxinner:after {
content: "";
position: absolute;
background: url(https://scp-wiki.wdfiles.com/local--files/visual-archives-art-contest/widebox_line.png);
background-repeat: repeat-y;
height: 100%;
width: 5%;
transform: scaleX(-1);
pointer-events: none;
right: 0px;
top: 0;
padding: 0;
}
.widebox2 .wideboxinner h3 {
color: #0F0E0E;
text-align: center;
font-size: 2.5rem;
font-family: 'Palatino Linotype';
width: 62rem;
padding: 20px 0;
margin: 4rem auto;
background: url(https://scp-wiki.wdfiles.com/local--files/visual-archives-art-contest/maskingtape_bg.png);
}
.widebox .backhub {
width: 20rem;
padding: 0;
font-size: 2rem;
opacity: 0.5;
color: black !important;
}
.widebox .backhub:hover {
opacity: 1;
transition: 0.5s;
}
.widebox2 .wideboxinner p, .widebox2 .wideboxinner ul {
width: 50rem;
margin-left: auto;
margin-right: auto;
}
hr {
border: none;
height: 1px;
width: 90%;
background-color: white;
margin: 25px auto;
}
blockquote div {
overflow: hidden;
}
blockquote {
box-sizing: content-box;
}
h1, #page-options-container, .licensebox .collapsible-block-folded a, .page-watch-options a {
color: white;
}
#action-area, .licensebox .collapsible-block-content {
background: #0D0D0F;
padding: 10px;
}
.licensebox .collapsible-block-link {
background: #0D0D0F;
padding: 10px;
}
/* Piece of shit sidebar */
#top-bar div.mobile-top-bar>.open-menu {
visibility:visible;
opacity: 0.6;
transition: opacity 0.2s;
}
#top-bar div.mobile-top-bar>.open-menu:hover {
opacity: 1;
}
#side-bar {
margin-top:0;
height:100%
}
#side-bar, #side-bar:is(:hover, :focus-within):not(:target) {
left:calc(var(--side-bar-width) * -1)
}
#side-bar::after, #side-bar::before {
display:none
}
#side-bar:target {
left:0;
width:var(--side-bar-width);
z-index:10
}
#side-bar a.close-menu, #side-bar:target a.close-menu {
display:block;
pointer-events:none;
position:fixed;
top:0;
right:0;
left:auto;
width:100%;
min-width:3.75rem;
height:100%;
margin-left:0;
opacity:0;
z-index:-1;
transition:width var(--side-bar-transition),opacity var(--side-bar-transition)
}
#side-bar:target a.close-menu {
width:calc(100% - var(--side-bar-width));
pointer-events:auto;
opacity:1;
}
/* Mobile */
@media only screen and (max-width: 640px) {
#container #header {
background: black;
position: sticky;
}
.widebox div {
position: relative;
top: 60%
}
.widebox {
height: calc(110dvh);
}
.widebox .bannertext {
font-size: 10dvw;
margin: 0 auto;
left: 0;
right: 0;
top: 38dvh;
}
.widebox .backhub {
padding-bottom: 2rem;
}
.widebox span {
font-size: 10dvw;
line-height: 1;
}
.page-rate-widget-box {
margin-bottom: 1rem !important;
}
.widebox img {
display: block;
position: relative;
overflow: auto;
margin: auto;
max-width: 100vw !important;
max-height: 50dvh;
box-shadow: 0px 5rem 10rem black;
}
.widebox2 .bannerseparator img {
position: absolute;
z-index: 1;
left: calc(-50dvw + 50%);
width: 100%;
max-width: 100dvw !important;
top: -12dvw;
box-shadow: 0px 5m 5em black;
}
.widebox2 .wideboxinner {
padding: 2rem 0;
width: 100%;
font-size: 1.1rem;
margin: auto;
}
.widebox2 .wideboxinner h3 {
font-size: 2rem;
width: 80dvw;
}
.widebox2 .wideboxinner p, .widebox2 .wideboxinner ul {
width: 80dvw;
}
}
/* contains multitudes..... and images */
.imagecollection {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
padding: 0 3rem;
}
/* makes ur image boxes square */
.imagecollection .imagebox {
background: transparent;
position: relative;
box-sizing: border-box;
width: 20%;
aspect-ratio : 1 / 1;
margin: 0;
box-shadow: 0px 2rem 20rem black;
}
/* adds that hover gradient to each image box */
.imagecollection .imagebox:before{
content: "";
position: absolute;
background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 35%);
height: 100%;
width: 100%;
z-index: 1;
opacity: 0.75;
transition: 0.5s;
pointer-events: none;
}
.imagecollection .imagebox:hover:before {
opacity: 1;
}
/* the image */
.imagecollection .imagebox img {
display: block;
margin: auto;
height: 100%;
width: 100%;
object-fit: cover;
object-position: center;
}
/* caption below every image ,,,. */
.caption {
padding: 0.8em;
bottom: 0;
position: absolute;
z-index: 2;
}
.caption a {
color: white;
font-family: 'Open Sans';
font-size: 1.5em;
text-decoration: none;
}
.caption a:hover {
color: white;
text-decoration: underline;
}
/* mobile shit */
@media screen and (max-width: 1200px) {
.imagecollection .imagebox {
width: 24.82vw;
height: 24.82vw;
}
}
@media screen and (max-width: 640px) {
.imagecollection .imagebox {
width: 100vw;
height: 56.25vw;
}
}
:scp-wiki:theme:basalt
[info]
:scp-wiki:component:license-box
[info]
:scp-wiki:component:license-box-end
[info]
widebox
winnerbox
backhub
winnerheader
winnerimage
winnertitle
winnerauthor
widebox2
bannerseparator
wideboxinner
imagecollection
imagebox
caption
imagebox
caption
imagebox
caption
imagebox
caption
imagebox
caption
imagebox
caption
imagebox
caption
imagebox
caption
imagebox
caption
imagebox
caption
imagebox
caption
imagebox
caption
imagebox
caption
imagebox
caption
imagebox
caption
imagebox
caption
imagebox
caption
imagebox
caption
imagebox
caption
imagebox
caption
imagebox
caption
imagebox
caption
imagebox
caption
imagebox
caption
imagebox
caption
imagebox
caption
bannerseparator2