156 lines
4.3 KiB
CSS
156 lines
4.3 KiB
CSS
@media (prefers-reduced-motion: no-preference) and
|
|
(min-height: 650px) and (min-width: 650px) {
|
|
|
|
@layer outer {
|
|
:root {
|
|
--bg-60309: url(../media/bg/60309.png);
|
|
--bg-kesi: url(../media/bg/kesi.png);
|
|
--bg-korai: url(../media/bg/korai.png);
|
|
--bg-mirai: url(../media/bg/mirai.png);
|
|
--bg-niss: url(../media/bg/niss.png);
|
|
--bg-niss2: url(../media/bg/niss2.png);
|
|
--bg-nisse: url(../media/bg/nisse.png);
|
|
--bg-prickly: url(../media/bg/prickly.png);
|
|
--bg-qt: url(../media/bg/qt.png);
|
|
--bg-qt2: url(../media/bg/qt2.png);
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
--bg-60309: url(../media/bg/60309_neon.png);
|
|
--bg-kesi: url(../media/bg/kesi_neon.png);
|
|
--bg-korai: url(../media/bg/korai_neon.png);
|
|
--bg-mirai: url(../media/bg/mirai_neon.png);
|
|
--bg-niss: url(../media/bg/niss_neon.png);
|
|
--bg-niss2: url(../media/bg/niss2_neon.png);
|
|
--bg-nisse: url(../media/bg/nisse_neon.png);
|
|
--bg-prickly: url(../media/bg/prickly_neon.png);
|
|
--bg-qt: url(../media/bg/qt_neon.png);
|
|
--bg-qt2: url(../media/bg/qt2_neon.png);
|
|
}
|
|
|
|
background-blend-mode: overlay;
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
background-blend-mode: soft-light;
|
|
}
|
|
|
|
background:
|
|
var(--bg-60309) bottom 29% right calc(44% - var(--half))
|
|
/ auto 17% no-repeat,
|
|
var(--bg-kesi) bottom 23% left calc(44% - var(--half))
|
|
/ auto 20% no-repeat,
|
|
var(--bg-korai) bottom left 7% / auto 19% no-repeat,
|
|
var(--bg-mirai) top calc(5em + 3%) right 6% / 20% auto no-repeat,
|
|
var(--bg-niss) top 30% left calc(31% - var(--half))
|
|
/ auto 20% no-repeat,
|
|
var(--bg-niss2) top 51% right calc(33% - var(--half))
|
|
/ auto 20% no-repeat,
|
|
var(--bg-nisse) top 29% right calc(36% - var(--half))
|
|
/ auto 15% no-repeat,
|
|
var(--bg-qt) bottom 41% left calc(24% - var(--half))
|
|
/ auto 18% no-repeat,
|
|
var(--bg-qt2) top 10% left calc(46% - var(--half))
|
|
/ auto 16% no-repeat,
|
|
var(--bg-prickly) bottom 9% right calc(28% - var(--half))
|
|
/ auto 15% no-repeat,
|
|
var(--base-background);
|
|
|
|
@media ((prefers-reduced-data: reduce),
|
|
(prefers-reduced-transparency: reduce)) {
|
|
background: var(--base-background);
|
|
background-blend-mode: initial;
|
|
}
|
|
}
|
|
|
|
body {
|
|
display: grid;
|
|
grid-template-rows: 5em 1fr;
|
|
|
|
perspective: 440vw;
|
|
perspective-origin: 50% 120%;
|
|
}
|
|
|
|
menu {
|
|
label {
|
|
position: relative;
|
|
&::after {
|
|
content: ' ';
|
|
z-index: -1;
|
|
position: absolute;
|
|
inset: 0 0 100% 0;
|
|
background: hsl(var(--menu-bg-hsl));
|
|
|
|
@media not (prefers-reduced-motion: reduce) {
|
|
transition: inset .15s linear;
|
|
}
|
|
}
|
|
}
|
|
|
|
:checked + label::after {
|
|
bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer cube {
|
|
:root {
|
|
--side: min(65vh, 70vw);
|
|
--half: calc(var(--side) * .5);
|
|
--nhalf: calc(0em - var(--half));
|
|
--breathe: calc(var(--side) * 0.02);
|
|
}
|
|
|
|
#outer {
|
|
--transform-origin: 50% 50% calc(var(--nhalf) - min(6vh, 6vw));
|
|
}
|
|
|
|
#outer, #cube {
|
|
transform-style: preserve-3d;
|
|
transform-origin: var(--transform-origin);
|
|
width: calc(var(--side) + 10vw);
|
|
height: calc(var(--side) + 10vh);
|
|
margin: auto;
|
|
}
|
|
|
|
#cube {
|
|
position: relative;
|
|
|
|
> section, &::after {
|
|
position: absolute;
|
|
inset: 5vh 5vw;
|
|
overflow: auto;
|
|
transform-origin: var(--transform-origin);
|
|
transform: var(--base-transform);
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
&:not([data-moving]) > section:not([data-state=active]) {
|
|
animation: breathe 7.5s infinite ease-in-out;
|
|
}
|
|
}
|
|
|
|
#outer::after {
|
|
content: ' ';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: url(../media/blackhole.png) center / 60% no-repeat;
|
|
transform: translateZ(var(--nhalf));
|
|
}
|
|
|
|
@keyframes breathe {
|
|
40% { transform: var(--base-transform) translateZ(var(--breathe)); }
|
|
}
|
|
|
|
@media not (prefers-reduced-motion: reduce) {
|
|
.zoom * { transition: all 0.25s ease-in; }
|
|
.zoom > :hover {
|
|
scale: 110%;
|
|
filter: drop-shadow(4px 4px 5px rgb(0 0 0 / 60%));
|
|
&:nth-child(5n) { rotate: 4deg; }
|
|
&:nth-child(5n+1) { rotate: -2deg; }
|
|
&:nth-child(5n+2) { rotate: 1deg; }
|
|
&:nth-child(5n+3) { rotate: -3deg; }
|
|
&:nth-child(10n+4) { rotate: 4deg; }
|
|
&:nth-child(10n+9) { rotate: -1deg; }
|
|
}
|
|
}
|
|
}
|