yummy.cricket/style/cube.css

149 lines
4.1 KiB
CSS
Raw Normal View History

2024-09-22 21:32:01 +02:00
@media (prefers-reduced-motion: no-preference) and
(min-height: 650px) and (min-width: 650px) {
2025-02-16 17:08:50 +01:00
@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;
}
}
2025-02-16 17:08:50 +01:00
body {
display: grid;
grid-template-rows: 5em 1fr;
2025-02-16 17:08:50 +01:00
perspective: 440vw;
perspective-origin: 50% 120%;
}
2025-02-16 17:08:50 +01:00
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;
}
}
}
2025-02-16 17:08:50 +01:00
@layer cube {
:root {
--side: min(65vh, 70vw);
--half: calc(var(--side) * .5);
--nhalf: calc(0em - var(--half));
--breathe: calc(var(--side) * 0.02);
}
2025-02-16 17:08:50 +01:00
#outer {
--transform-origin: 50% 50% calc(var(--nhalf) - min(6vh, 6vw));
}
2024-09-04 15:31:06 +02:00
2025-02-16 17:08:50 +01:00
#outer, #cube {
transform-style: preserve-3d;
transform-origin: var(--transform-origin);
width: calc(var(--side) + 10vw);
height: calc(var(--side) + 10vh);
margin: auto;
}
2024-09-04 15:31:06 +02:00
2025-02-16 17:08:50 +01:00
#cube {
position: relative;
> section {
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;
}
}
2024-09-22 21:32:01 +02:00
2025-02-16 17:08:50 +01:00
@keyframes breathe {
40% { transform: var(--base-transform) translateZ(var(--breathe)); }
2024-09-22 21:32:01 +02:00
}
2025-02-16 17:08:50 +01:00
@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; }
}
}
2024-09-22 21:32:01 +02:00
}