rhi/yummy.cricket
1
0
Fork 0
Code Issues Releases Activity

refactor cube styles using @layer

Browse source
This commit is contained in:
Rhiannon Morris 2025-02-16 17:08:50 +01:00
parent 732e5a3d47
commit 3ff1fb1aae
4 changed files with 764 additions and 735 deletions
Download patch file Download diff file Expand all files Collapse all files

190
style/flat.css
View file

@ -1,122 +1,120 @@
@media (prefers-reduced-motion: reduce),
(max-height: 649px), (max-width: 649px) {
html {
:root {
--side: 0px;
--half: 0px;
--nhalf: 0px;
}
/* LAYOUT */
@layer outer {
body {
display: grid;
grid-template: "menu" 5em "body" 1fr;
}
body {
display: grid;
grid-template: "menu" 5em "body" 1fr;
/* height: 100vh; height: 100dvh; */
/* width: 100vw; width: 100dvw; */
}
#face-menu { grid-area: menu; }
#face-menu { grid-area: menu; }
#outer { grid-area: body; }
#outer {
grid-area: body;
position: relative;
height: 90%;
width: 90%;
margin: auto;
#outer {
position: relative;
height: 90%;
width: 90%;
margin: auto;
}
#outer::after {
content: ' ';
position: absolute;
inset: 0;
box-shadow: 0 0 40px hsl(var(--shadow-hsl) / 40%);
mix-blend-mode: multiply;
&::after {
content: ' ';
position: absolute;
inset: 0;
box-shadow: 0 0 40px hsl(var(--shadow-hsl) / 40%);
mix-blend-mode: multiply;
}
}
}
/* not really a cube any more. but */
#cube, #cube > section {
position: absolute;
inset: 0;
}
#cube > section { overflow: auto; }
@layer cube {
#cube, #cube > section {
position: absolute;
inset: 0;
}
#cube > section { overflow: auto; }
@media (prefers-color-scheme: dark) {
html { --shadow-hsl: 60deg 100% 96%; }
@media (prefers-color-scheme: dark) {
html { --shadow-hsl: 60deg 100% 96%; }
}
}
/* BACKGROUND FIXES */
@media (max-width: 649px) {
#cube #hello {
background-size: auto 80%, auto, auto;
background-position: bottom -20% right 60%, center, center;
}
}
@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) {
#cube #hello {
background-size: auto 80%, auto, auto;
background-position: bottom right, center, center;
@media (max-height: 649px) {
background-size: auto 80%, auto, auto;
background-position: bottom right, center, center;
}
}
}
@layer activities {
#activities {
@media (max-width: 649px) {
background-size: auto 30%, auto, auto;
background-position: bottom left 70%, center, center;
}
}
}
@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;
}
@media (max-height: 649px) {
background-size: cover;
background-position: top 15% center;
}
}
}
}
@media (max-width: 649px) {
#cube #activities {
background-size: auto 30%, auto, auto;
background-position: bottom left 70%, center, center;
@layer cube {
#face-menu {
label { transition: background 0.1s ease-in; }
:checked + label { background: hsl(var(--menu-bg-hsl)); }
}
#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;
}
}
}
#cube #six {
background-position: bottom left 70%, center, center;
}
@media (max-width: 649px) {
#cube #six {
background-size: auto 100%, auto, auto;
background-position: bottom left 70%, center, center;
}
}
@media (max-height: 649px) {
#cube #six {
background-size: cover;
background-position: top 15% center;
}
}
/* TRANSITIONS */
#face-menu :checked + label {
background: hsl(var(--menu-bg-hsl));
}
#face-menu label {
transition: background 0.1s ease-in;
}
#cube > :is(section[data-state=entering], #a) {
z-index: 1;
opacity: 0;
}
#cube > :is(section[data-state=active], #a) {
z-index: 1;
opacity: 1;
transition: opacity 0.1s ease-in;
}
#cube > :is(section[data-state=leaving], #a) {
z-index: -1;
opacity: 0;
transition: opacity 0s 0.1s ease-in;
}
#cube > :is(section[data-state=hidden], #a) {
display: none;
}
}