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
);
-webkit-animation: 2s ease-out 0s 1 swipeDown;
animation: 2s ease-out 0s 1 swipeDown;
background-position: 0 0;
background-size: 75rem 75rem;
-webkit-transition-timing-function: cubic-bezier(0, 0.7, 0.31, 0.96);
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;
-webkit-animation: 2s ease-in-out 0s 1 fadeIn;
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: -webkit-gradient(
linear,
left top, left bottom,
color-stop(0, rgba(0, 0, 0, 0)),
color-stop(14.0625rem, rgba(0, 0, 0, 0)),
color-stop(17.1875rem, rgba(255, 255, 255, 0.5)),
color-stop(18.75rem, rgba(255, 255, 255, 1)),
color-stop(37.5rem, rgba(255, 255, 255, 1))
);
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;
-webkit-animation: none;
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: -webkit-gradient(
linear,
left top, left bottom,
color-stop(0, rgba(0, 0, 0, 0)),
color-stop(48vw, rgba(0, 0, 0, 0)),
color-stop(49vw, rgba(255, 255, 255, 0.5)),
color-stop(50vw, rgba(255, 255, 255, 1)),
color-stop(50vw, rgba(255, 255, 255, 1))
);
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
);
-webkit-animation: 2s ease-out 0s 1 swipeDownMobile;
animation: 2s ease-out 0s 1 swipeDownMobile;
}
#content-wrap::after {
height: 50vw;
background-size: 100vw 50vw;
}
.attribution {
right: 0;
-webkit-box-shadow: 0 0 0.3125rem 0.3125rem #fff;
box-shadow: 0 0 0.3125rem 0.3125rem #fff;
background-color: #fff;
}
#page-title {
padding-top: 1em;
}
}
@-webkit-keyframes swipeDown {
0% {
background-position: 0 -300px;
}
100% {
background-position: 0 0;
}
}
@keyframes swipeDown {
0% {
background-position: 0 -300px;
}
100% {
background-position: 0 0;
}
}
@-webkit-keyframes swipeDownMobile {
0% {
background-position: 0 0;
}
100% {
background-position: 0 0;
}
}
@keyframes swipeDownMobile {
0% {
background-position: 0 0;
}
100% {
background-position: 0 0;
}
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0.01;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0.01;
}
100% {
opacity: 1;
}
}
text-align: center;
attribution