Link to article: Visual Archives Contest Hub - International 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-international/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-width: 20vw !important;
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
bannerseparator2