97 lines
2.1 KiB
CSS
97 lines
2.1 KiB
CSS
@media (prefers-reduced-motion: no-preference) and
|
|
(min-height: 650px) and (min-width: 650px) {
|
|
|
|
/* LAYOUT BASICS */
|
|
|
|
body {
|
|
display: grid;
|
|
grid-template-rows: 5em 1fr;
|
|
|
|
perspective: 440vw;
|
|
perspective-origin: 50% 120%;
|
|
}
|
|
|
|
/* MENU ANIMATION */
|
|
|
|
.menu label { position: relative; }
|
|
.menu label::after {
|
|
content: ' ';
|
|
z-index: -1;
|
|
position: absolute;
|
|
inset: 0 0 100% 0;
|
|
background: hsl(var(--menu-bg-hsl));
|
|
transition: inset .15s linear;
|
|
}
|
|
.menu :checked + label::after {
|
|
bottom: 0;
|
|
}
|
|
|
|
|
|
/* CUBE ASSEMBLY */
|
|
/* the rest is in cube.ts */
|
|
|
|
html {
|
|
--side: min(65vh, 70vw);
|
|
--half: calc(var(--side) * .5);
|
|
--nhalf: calc(0em - var(--half));
|
|
--breathe: calc(var(--side) * .1);
|
|
}
|
|
|
|
/* cube shadow */
|
|
html {
|
|
background:
|
|
radial-gradient(circle, hsl(var(--shadow-hsl) / 70%), transparent 58%),
|
|
var(--gradient);
|
|
background-blend-mode: multiply;
|
|
}
|
|
|
|
#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;
|
|
}
|
|
|
|
#cube > section {
|
|
position: absolute;
|
|
inset: 5vh 5vw;
|
|
overflow: auto;
|
|
transform-origin: var(--transform-origin);
|
|
transform: var(--base-transform);
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
@supports (scrollbar-color: pink orange) { /* safari detector */
|
|
#cube:not([data-moving]) > section {
|
|
animation: breathe 9s infinite ease-in-out;
|
|
}
|
|
}
|
|
|
|
@keyframes breathe {
|
|
35% { transform: translateZ(var(--breathe)) var(--base-transform); }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.zoom * { transition: all 0.25s ease-in; }
|
|
.zoom > :hover {
|
|
scale: 110%;
|
|
filter: drop-shadow(4px 4px 5px rgb(0 0 0 / 60%));
|
|
}
|
|
.zoom > :hover:nth-child(5n) { rotate: 4deg; }
|
|
.zoom > :hover:nth-child(5n+1) { rotate: -2deg; }
|
|
.zoom > :hover:nth-child(5n+2) { rotate: 1deg; }
|
|
.zoom > :hover:nth-child(5n+3) { rotate: -3deg; }
|
|
.zoom > :hover:nth-child(10n+4) { rotate: 4deg; }
|
|
.zoom > :hover:nth-child(10n+9) { rotate: -1deg; }
|
|
}
|
|
|
|
}
|