refactor cube styles using @layer

style/cube.css

@@ -1,160 +1,148 @@
 @media (prefers-reduced-motion: no-preference) and
        (min-height: 650px) and (min-width: 650px) {
 
-/* BACKGROUND STUFF */
+@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);
 
-html {
+    @media (prefers-color-scheme: dark) {
-  --bg-60309: url(../media/bg/60309.png);
+      --bg-60309: url(../media/bg/60309_neon.png);
-  --bg-kesi: url(../media/bg/kesi.png);
+      --bg-kesi: url(../media/bg/kesi_neon.png);
-  --bg-korai: url(../media/bg/korai.png);
+      --bg-korai: url(../media/bg/korai_neon.png);
-  --bg-mirai: url(../media/bg/mirai.png);
+      --bg-mirai: url(../media/bg/mirai_neon.png);
-  --bg-niss: url(../media/bg/niss.png);
+      --bg-niss: url(../media/bg/niss_neon.png);
-  --bg-niss2: url(../media/bg/niss2.png);
+      --bg-niss2: url(../media/bg/niss2_neon.png);
-  --bg-nisse: url(../media/bg/nisse.png);
+      --bg-nisse: url(../media/bg/nisse_neon.png);
-  --bg-prickly: url(../media/bg/prickly.png);
+      --bg-prickly: url(../media/bg/prickly_neon.png);
-  --bg-qt: url(../media/bg/qt.png);
+      --bg-qt: url(../media/bg/qt_neon.png);
-  --bg-qt2: url(../media/bg/qt2.png);
+      --bg-qt2: url(../media/bg/qt2_neon.png);
-}
+    }
 
-@media (prefers-color-scheme: dark) {
+    background-blend-mode: overlay;
-  html {
+
-    --bg-60309: url(../media/bg/60309_neon.png);
+    @media (prefers-color-scheme: dark) {
-    --bg-kesi: url(../media/bg/kesi_neon.png);
+      background-blend-mode: soft-light;
-    --bg-korai: url(../media/bg/korai_neon.png);
+    }
-    --bg-mirai: url(../media/bg/mirai_neon.png);
+
-    --bg-niss: url(../media/bg/niss_neon.png);
+    background:
-    --bg-niss2: url(../media/bg/niss2_neon.png);
+      var(--bg-60309) bottom 29% right calc(44% - var(--half))
-    --bg-nisse: url(../media/bg/nisse_neon.png);
+        / auto 17% no-repeat,
-    --bg-prickly: url(../media/bg/prickly_neon.png);
+      var(--bg-kesi) bottom 23% left calc(44% - var(--half))
-    --bg-qt: url(../media/bg/qt_neon.png);
+        / auto 20% no-repeat,
-    --bg-qt2: url(../media/bg/qt2_neon.png);
+      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;
+    }
   }
 }
 
-html {
+@layer cube {
-  background:
+  :root {
-  /*
+    --side: min(65vh, 70vw);
-    url(../media/bg/kesi_sprite_front.png) top 100px right no-repeat,
+    --half: calc(var(--side) * .5);
-    url(../media/bg/kesi_sprite_mid.png) top 150px center repeat-x,
+    --nhalf: calc(0em - var(--half));
-    url(../media/bg/kesi_sprite_back.png) top 200px left no-repeat,
+    --breathe: calc(var(--side) * 0.02);
-  */
+  }
-    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);
-  background-blend-mode: overlay;
-}
 
-@media (prefers-color-scheme: dark) {
+  #outer {
-  html {
+    --transform-origin: 50% 50% calc(var(--nhalf) - min(6vh, 6vw));
-    background-blend-mode: soft-light;
+  }
+
+  #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 {
+      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;
+    }
+  }
+
+  @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; }
+    }
   }
 }
-
-@media (prefers-reduced-data: reduce) {
-  html {
-    background: var(--base-background);
-    background-blend-mode: unset;
-  }
-}
-
-
-/* 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) * 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;
-}
-
-#cube > section {
-  position: absolute;
-  inset: 5vh 5vw;
-  overflow: auto;
-  transform-origin: var(--transform-origin);
-  transform: var(--base-transform);
-  overscroll-behavior: contain;
-}
-
-#cube:not([data-moving]) > section:not([data-state=active]) {
-  animation: breathe 7.5s infinite ease-in-out;
-}
-
-@keyframes breathe {
-  40% { transform: var(--base-transform) translateZ(var(--breathe)); }
-}
-
-@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; }
-}
-
-}

style/flat.css

@@ -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 {
+  #face-menu { grid-area: menu; }
-  display: grid;
-  grid-template: "menu" 5em "body" 1fr;
-  /* height: 100vh; height: 100dvh; */
-  /* width:  100vw; width:  100dvw; */
-}
 
-#face-menu { grid-area: menu; }
+  #outer {
-#outer     { grid-area: body; }
+    grid-area: body;
+    position: relative;
+    height: 90%;
+    width: 90%;
+    margin: auto;
 
-#outer {
+    &::after {
-  position: relative;
+      content: ' ';
-  height: 90%;
+      position: absolute;
-  width: 90%;
+      inset: 0;
-  margin: auto;
+      box-shadow: 0 0 40px hsl(var(--shadow-hsl) / 40%);
-}
+      mix-blend-mode: multiply;
-
+    }
-#outer::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 {
+@layer cube {
-  position: absolute;
+  #cube, #cube > section {
-  inset: 0;
+    position: absolute;
-}
+    inset: 0;
-#cube > section { overflow: auto; }
+  }
+  #cube > section { overflow: auto; }
 
-@media (prefers-color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
-  html { --shadow-hsl: 60deg 100% 96%; }
+    html { --shadow-hsl: 60deg 100% 96%; }
+  }
 }
 
-
 /* BACKGROUND FIXES */
 
-@media (max-width: 649px) {
+@layer faces {
-  #cube #hello {
+  @layer hello {
-    background-size: auto 80%, auto, auto;
+    #hello {
-    background-position: bottom -20% right 60%, center, center;
+      @media (max-width: 649px) {
-  }
+        background-size: auto 80%, auto, auto;
-}
+        background-position: bottom -20% right 60%, center, center;
+      }
 
-@media (max-height: 649px) {
+      @media (max-height: 649px) {
-  #cube #hello {
+        background-size: auto 80%, auto, auto;
-    background-size: auto 80%, auto, auto;
+        background-position: bottom right, center, center;
-    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) {
+@layer cube {
-  #cube #activities {
+  #face-menu {
-    background-size: auto 30%, auto, auto;
+    label { transition: background 0.1s ease-in; }
-    background-position: bottom left 70%, center, center;
+    :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;
-}
-
-}

style/properties.css

@@ -0,0 +1,44 @@
+/* face backgrounds */
+
+@property --hue {
+  syntax: "<angle>";
+  inherits: true;
+  initial-value: 0deg;
+}
+
+@property --bg-angle {
+  syntax: "<angle>";
+  inherits: true;
+  initial-value: 45deg;
+}
+
+
+/* link buttons */
+
+@property --icon {
+  syntax: "<url>";
+  inherits: true;
+  initial-value: url(../media/favicon.webp);
+}
+
+@property --fg {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: white;
+}
+
+@property --bg {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: black;
+}
+
+@property --icon-bg {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: white;
+}
+/* the initial value can't be `var(--bg)` because only "computationally
+ * independent" values are allowed
+ * https://drafts.css-houdini.org/css-properties-values-api/#initial-value-descriptor
+ */