Link to article: Tanijas Art Corner.
html, body {
overflow-x: hidden;
}
.attribution {
text-transform: uppercase;
font-weight: bold;
font-size: 0.8em;
position: absolute;
top: -20px;
z-index: 10;
text-align: right;
right: -200px;
white-space: nowrap;
overflow: hidden;
}
.attribution p {
margin: 0;
}
#main-content::before {
height: 600px;
width: 1400px;
content: "";
background-image: url(xx);
background-size: contain;
position: relative;
display: block;
background-position: center;
margin-left: calc(-180px - 22em - 1em);
margin-top: calc(-600px - 1em);
z-index: 1;
}
#content-wrap::before {
height: 600px;
width: 1400px;
content: "";
background-image: url(https://i.imgur.com/zAfxSsu.png);
background-size: auto;
background-repeat: no-repeat;
position: relative;
display: block;
background-position: center;
margin-left: -180px;
z-index: 2;
animation: 2s ease-in-out 0s 1 fadeIn;
}
#content-wrap::after {
height: 600px;
width: 1400px;
content: "";
position: absolute;
display: block;
top: 0;
background: 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);
margin-left: -180px;
animation: 2s ease-out 0s 1 swipeDown;
background-position: 0 0;
background-size: 1200px 1400px;
transition-timing-function: cubic-bezier(0,0.7,0.31,0.96);
z-index: 3;
}
@keyframes swipeDown {
0% {
background-position: 0 -300px;
}
100% {
background-position: 0 0;
}
}
@keyframes swipeDownMobile {
0% {
/*background-position: 0 -21.4vw;*/
background-position: 0 0;
}
100% {
background-position: 0 0;
}
}
@keyframes fadeIn {
0% {
opacity: 0.01;
}
100% {
opacity: 1;
}
}
#content-wrap {
position: relative;
margin-top: 0;
}
#side-bar {
margin-top: 600px;
}
@media only screen and (max-width: 1400px) {
#content-wrap::before {
width: 100%;
margin-left: 0;
}
#main-content::before {
width: 100%;
margin-left: calc(-22em - 1em);
padding-right: 26em;
background-size: cover;
}
.attribution {
right: -2em;
}
}
@media only screen and (max-width: 1040px) {
#content-wrap::before {
height: 300px;
[!-- width: 100%; --]
background-image: url(https://i.imgur.com/zAfxSsu.png);
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
animation: none;
}
#main-content::before {
display: none;
}
#content-wrap::after {
height: 300px;
width: 100%;
top: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 225px, rgba(255,255,255,0.5) 275px, rgba(255,255,255,1) 300px, rgba(255,255,255,1) 600px);
margin-left: auto;
margin-right: auto;
background-position: 0 0;
background-size: 600px 700px;
}
#side-bar {
margin-top: 300px;
}
.attribution {
right: calc(50vw - 350px - 2em)
}
}
@media only screen and (max-width: 700px) {
#content-wrap::before {
[!-- height: 42.8vw; --]
background-size: 100vw 42.8vw;
}
#content-wrap::after {
[!-- height: 21.4vw;
background-size: 100vw 42.8vw;
background: linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 16vw, rgba(255,255,255,0.5) 19.6vw, rgba(255,255,255,1) 21.4vw, rgba(255,255,255,1) 42.8vw);
animation: 2s ease-out 0s 1 swipeDownMobile; --]
top: 21.4vw
}
.attribution {
right: 0;
box-shadow: 0 0 5px 5px #fff;
background-color: #fff;
}
#page-title {
padding-top: 1em;
}
}
.yui-navset .yui-content,
.yui-navset .yui-navset-top .yui-content {
border: 0;
background: 0;
padding: 0;
}
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
border-width: 0 0 2px;
}
.yui-navset .yui-nav a, .yui-navset .yui-navset-top .yui-nav a {
background: 0;
border: 0;
color: ;
color: #b01;
}
.yui-navset .yui-nav a em, .yui-navset .yui-navset-top .yui-nav a em {
border: 0;
}
.yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a:focus, .yui-navset .yui-nav .selected a:hover {
background: 0;
color: #b01;
font-weight: bold;
}
/* This tooltip hover effect is adapted from LurkD's code on http://www.scp-wiki.net/command-query-separation */
.hover span {
display: none;
}
.hover:hover {
border-bottom: none;
text-decoration: none;
}
.hover:hover span {
background: rgba(245, 245, 245, 0.75);
border-color: rgba(250, 250, 250, 0.75);
border-style: double;
color: #b01;
display: inline;
font-weight: bold;
height: auto;
margin: 1px;
padding: 1em;
position: absolute;
width: auto;
}
.hover:hover span span {
border: none;
height: auto;
margin: auto;
padding: 0;
position: relative;
width: auto;
}
.hover img {
border: 1px solid #666;
}
.yui-navset .yui-content,
.yui-navset .yui-navset-top .yui-content {
border: 0;
background: 0;
padding: 0;
}
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
border-width: 0 0 2px;
}
.yui-navset .yui-nav a, .yui-navset .yui-navset-top .yui-nav a {
background: 0;
border: 0;
color: ;
color: #b01;
}
.yui-navset .yui-nav a em, .yui-navset .yui-navset-top .yui-nav a em {
border: 0;
}
.yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a:focus, .yui-navset .yui-nav .selected a:hover {
background: 0;
color: #b01;
font-weight: bold;
}width:33%;border-left:0; border-right:0;width:33%;width:33%;width:33%;border-left:0; border-right:0;width:33%;width:33%;width:33%;border-left:0; border-right:0;width:33%;width:33%;hoverhoverhoverhoverhoverhoverhoverhoverhover