Link to article: End of Death Hub.
html, body {
overflow-x: hidden;
}
#content-wrap {
position: relative;
margin-top: 0;
}
#main-content::before,
#content-wrap::before,
#content-wrap::after {
width: 75rem;
height: 37.5rem;
content: "";
display: block;
left: -3.75rem;
}
#main-content::before,
#content-wrap::before {
position: relative;
}
#content-wrap::before {
top: 0;
background-image: -webkit-gradient(
linear,
left top, left bottom,
color-stop(0, rgba(0, 0, 0, 0)),
color-stop(450px, rgba(0, 0, 0, 0)),
color-stop(550px, rgba(255, 255, 255, 0.5)),
color-stop(600px, rgba(255, 255, 255, 1)),
color-stop(1200px, rgba(255, 255, 255, 1))
);
background-image: linear-gradient(
to bottom,
rgba(0,0,0,0) 0,
rgba(0,0,0,0) 450px,
rgba(255,255,255,0.5) 550px,
rgba(255,255,255,1) 600px,
rgba(255,255,255,1) 1200px
);
animation: 2s ease-out 0s 1 swipeDown;
background-position: 0 0;
background-size: 75rem 75rem;
transition-timing-function: cubic-bezier(0, 0.7, 0.31, 0.96);
z-index: 3;
}
#main-content::before {
background-image:
url(https://scp-wiki.wdfiles.com/local--files/end-of-death-hub/eod_new_large.webp),
url(https://scp-wiki.wdfiles.com/local--files/end-of-death-hub/eod_new_large_preload.png);
background-size: cover, cover;
background-position: center, center;
margin-left: -17.75rem;
margin-top: -38.25rem;
z-index: 2;
animation: 2s ease-in-out 0s 1 fadeIn;
}
#content-wrap::after {
position: absolute;
top: 0;
background-image: url(https://scp-wiki.wdfiles.com/local--files/end-of-death-hub/eod_new_small_preload.png);
background-size: cover;
background-position: center;
z-index: 1;
}
.attribution {
text-transform: uppercase;
font-weight: bold;
font-size: 0.8em;
position: absolute;
top: -1.75em;
right: -3.75rem;
z-index: 10;
text-align: right;
white-space: nowrap;
overflow: hidden;
}
.attribution p {
margin: 0;
}
@media only screen and (min-width: 75rem) {
#side-bar {
margin-top: 37.5rem;
}
}
@media only screen and (max-width: 75rem) {
#side-bar {
margin-top: 18.750rem;
}
#content-wrap::before {
height: 18.75rem;
width: 100%;
top: 0;
left: 0;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0) 0,
rgba(0, 0, 0, 0) 14.0625rem,
rgba(255, 255, 255, 0.5) 17.1875rem,
rgba(255, 255, 255, 1) 18.75rem,
rgba(255, 255, 255, 1) 37.5rem
);
margin-left: auto;
margin-right: auto;
background-position: 0 0;
background-size: 37.5rem 37.5rem;
}
#content-wrap::after {
height: 18.75rem;
width: 100%;
background-image:
url(https://scp-wiki.wdfiles.com/local--files/end-of-death-hub/eod_new_large.webp),
url(https://scp-wiki.wdfiles.com/local--files/end-of-death-hub/eod_new_large_preload.png);
background-size: cover, cover;
background-position: center, center;
margin-left: auto;
margin-right: auto;
left: 0;
top: 0;
animation: none;
background-position: 0 30%;
}
#main-content::before {
display: none;
}
.attribution {
right: -1rem;
}
}
@media only screen and (max-width: 43.75rem) {
#content-wrap::before {
height: 50vw;
background-image: url(https://scp-wiki.wdfiles.com/local--files/end-of-death-hub/eod_new_medium.png);
background-size: 100vw 50vw;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0) 0,
rgba(0, 0, 0, 0) 48vw,
rgba(255, 255, 255, 0.5) 49vw,
rgba(255, 255, 255, 1) 50vw,
rgba(255, 255, 255, 1) 50vw
);
animation: 2s ease-out 0s 1 swipeDownMobile;
}
#content-wrap::after {
height: 50vw;
background-size: 100vw 50vw;
}
.attribution {
right: 0;
box-shadow: 0 0 0.3125rem 0.3125rem #fff;
background-color: #fff;
}
#page-title {
padding-top: 1em;
}
}
@keyframes swipeDown {
0% { background-position: 0 -300px }
100% { background-position: 0 0 }
}
@keyframes swipeDownMobile {
0% { background-position: 0 0 }
100% { background-position: 0 0 }
}
@keyframes fadeIn {
0% { opacity: 0.01 }
100% { opacity: 1 }
}
.project-proposal.blockquote {
padding: 1.5ex 2ch;
border-style: solid;
background-color: #ffd0d045;
}
.project-proposal.blockquote th {
background-color: #ffd0d0;
}
.project-proposal.blockquote table {
background-color: #fffe;
}
text-align: center;
attribution
project-proposal
blockquote
blockquote
blockquote