129 lines
2.3 KiB
CSS
129 lines
2.3 KiB
CSS
j-wrap.index {
|
|
|
|
display: grid;
|
|
grid-template-rows: 1fr auto auto;
|
|
grid-template-columns: 1fr;
|
|
grid-template-areas: "centerpiece" "title" "navigation";
|
|
|
|
max-height: 100cqh;
|
|
overflow: auto;
|
|
|
|
figure.centerpiece {
|
|
grid-area: centerpiece;
|
|
}
|
|
|
|
img.centerpiece {
|
|
height: 100%;
|
|
padding: 2em 0 4em 0;
|
|
}
|
|
|
|
h1 {
|
|
grid-area: title;
|
|
text-align: center;
|
|
font-size: calc(1em + 2vw);
|
|
margin-bottom: 0.125em;
|
|
margin-top: 0;
|
|
}
|
|
|
|
nav {
|
|
grid-area: navigation;
|
|
padding-bottom: 2em;
|
|
}
|
|
|
|
nav a {
|
|
text-decoration-style: dotted;
|
|
}
|
|
|
|
nav ul {
|
|
text-align: center;
|
|
padding: 0;
|
|
}
|
|
|
|
nav ul li {
|
|
display: inline;
|
|
margin: 0 0.25em;
|
|
font-size: calc(0.65em + 1vw);
|
|
}
|
|
|
|
* { transition: 5s; }
|
|
}
|
|
|
|
img.centerpiece {
|
|
animation-name: multi;
|
|
animation-timing-function: linear;
|
|
animation-duration: 30s;
|
|
animation-iteration-count: infinite;
|
|
mask-image: repeating-radial-gradient(
|
|
circle at farthest-corner in hsl longer hue,
|
|
light-dark(#222, #000) 0%,
|
|
light-dark(#888, #444) 50%,
|
|
#fff 100%
|
|
);
|
|
mask-mode: luminance;
|
|
}
|
|
|
|
img.two { animation-delay: -6s; }
|
|
img.three { animation-delay: -12s; }
|
|
img.four { animation-delay: -18s; }
|
|
img.four { animation-delay: -24s; }
|
|
img.five { animation-delay: -30s; }
|
|
|
|
@keyframes multi {
|
|
0% {
|
|
transform: rotate3d(0, 1, 0, 0deg);
|
|
}
|
|
|
|
10% {
|
|
filter:
|
|
hue-rotate(0deg)
|
|
drop-shadow(0 0 26vw #3B050580)
|
|
brightness(3)
|
|
blur(0.2px)
|
|
saturate(1)
|
|
contrast(3)
|
|
;
|
|
}
|
|
|
|
40% {
|
|
filter:
|
|
hue-rotate(0deg)
|
|
drop-shadow(0 0 0 #00000000)
|
|
brightness(1)
|
|
blur(0.2px)
|
|
saturate(2)
|
|
contrast(1)
|
|
;
|
|
}
|
|
|
|
60% {
|
|
filter:
|
|
hue-rotate(0deg)
|
|
drop-shadow(0 0 26vw #66000080)
|
|
brightness(1)
|
|
blur(0.2px)
|
|
saturate(1)
|
|
contrast(1)
|
|
;
|
|
}
|
|
|
|
90% {
|
|
filter:
|
|
hue-rotate(50deg)
|
|
drop-shadow(0 0 0 #00000000)
|
|
brightness(3)
|
|
blur(0)
|
|
saturate(1.2)
|
|
contrast(2)
|
|
;
|
|
}
|
|
|
|
100% {
|
|
transform: rotate3d(0, 1, 0, 360deg);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
body {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|