yummy.cricket/style/flat.css

123 lines
2.3 KiB
CSS
Raw Normal View History

2024-09-22 21:32:01 +02:00
@media (prefers-reduced-motion: reduce),
(max-height: 649px), (max-width: 649px) {
2025-02-16 17:08:50 +01:00
:root {
--side: 0px;
--half: 0px;
--nhalf: 0px;
}
2025-02-16 17:08:50 +01:00
@layer outer {
body {
display: grid;
grid-template: "menu" 5em "body" 1fr;
}
2024-09-22 21:32:01 +02:00
2025-02-16 17:08:50 +01:00
#face-menu { grid-area: menu; }
#outer {
grid-area: body;
position: relative;
height: 90%;
width: 90%;
margin: auto;
&::after {
content: ' ';
position: absolute;
inset: 0;
box-shadow: 0 0 40px hsl(var(--shadow-hsl) / 40%);
mix-blend-mode: multiply;
}
}
2024-09-22 21:32:01 +02:00
}
/* not really a cube any more. but */
2025-02-16 17:08:50 +01:00
@layer cube {
#cube, #cube > section {
position: absolute;
inset: 0;
}
#cube > section { overflow: auto; }
2024-09-22 21:32:01 +02:00
2025-02-16 17:08:50 +01:00
@media (prefers-color-scheme: dark) {
html { --shadow-hsl: 60deg 100% 96%; }
}
2024-09-22 21:32:01 +02:00
}
/* BACKGROUND FIXES */
2025-02-16 17:08:50 +01:00
@layer faces {
@layer hello {
#hello {
@media (max-width: 649px) {
background-size: auto 80%, auto, auto;
background-position: bottom -20% right 60%, center, center;
}
@media (max-height: 649px) {
background-size: auto 80%, auto, auto;
background-position: bottom right, center, center;
}
}
2024-09-22 21:32:01 +02:00
}
2025-02-16 17:08:50 +01:00
@layer activities {
#activities {
@media (max-width: 649px) {
background-size: auto 30%, auto, auto;
background-position: bottom left 70%, center, center;
}
}
2024-09-22 21:32:01 +02:00
}
2025-02-16 17:08:50 +01:00
@layer six {
#six {
background-position: bottom left 70%, center, center;
@media (max-width: 649px) {
background-size: auto 100%, auto, auto;
background-position: bottom left 70%, center, center;
}
2024-09-22 21:32:01 +02:00
2025-02-16 17:08:50 +01:00
@media (max-height: 649px) {
background-size: cover;
background-position: top 15% center;
}
}
2024-09-22 21:32:01 +02:00
}
}
2025-02-16 17:08:50 +01:00
@layer cube {
#face-menu {
label { transition: background 0.1s ease-in; }
:checked + label { background: hsl(var(--menu-bg-hsl)); }
2024-09-22 21:32:01 +02:00
}
2025-02-16 17:08:50 +01:00
#cube > section {
&[data-state=entering] {
z-index: 1;
opacity: 0;
}
&[data-state=active] {
z-index: 1;
opacity: 1;
transition: opacity 0.1s ease-in;
}
&[data-state=leaving] {
z-index: -1;
opacity: 0;
transition: opacity 0s 0.1s ease-in;
}
&[data-state=hidden] {
display: none;
}
2024-09-22 21:32:01 +02:00
}
}
2025-02-17 00:32:43 +01:00
} /* (the media query) */