style stuff

rainbow-quox/style/palette.scss

@@ -1,5 +1,5 @@
-@import url(../fonts/muller/muller.css);
-@import url(../fonts/pragmatapro/pragmatapro.css);
+@import url(../../fonts/muller/muller.css);
+@import url(../../fonts/pragmatapro/pragmatapro.css);
 
 :root {
   --hue:   300;
@@ -14,7 +14,7 @@
 .swatch, .text-bg {
   transition:   fill 0.2s ease;
   fill:         var(--col);
-  stroke:       oklch(from var(--col) 0.15 0.25 calc(h + 180));
+  stroke:       oklch(from var(--col) 0.15 0.15 h);
   stroke-width: 2;
 
   filter: drop-shadow(6px 6px 0 oklch(0.4 0.2 var(--hue) / 0.45));
@@ -24,8 +24,8 @@
   }
 }
 
-.light :is(text, use) { fill: oklch(from var(--col) 0.95 0.075 calc(h + 180)); }
-.dark  :is(text, use) { fill: oklch(from var(--col) 0.15 0.25 calc(h + 180)); }
+.light :is(text, use) { fill: oklch(from var(--col) 0.96 0.05 calc(h + 180)); }
+.dark  :is(text, use) { fill: oklch(from var(--col) 0.18 0.2  calc(h + 180)); }
 
 .name {
   font-weight: 700;

rainbow-quox/style/style.scss

@@ -1,4 +1,4 @@
-@import url(/fonts/muller/muller.css);
+@import url(../../fonts/muller/muller.css);
 
 @keyframes swap1 {
   0%   { transform: none; }
@@ -32,7 +32,10 @@
   padding:    0.2rem 0.5rem;
 }
 
-@layer layout {
+
+@layer base, layering, come-in;
+
+@layer base {
   * { box-sizing: border-box; }
 
   :root {
@@ -57,12 +60,11 @@
       --shadow-color: 6px 6px 0 oklch(0.1 0.15 var(--hue) / 0.45);
     }
     background-blend-mode: screen;
-
-    overflow-x: hidden;
   }
 
   body {
-    min-height: 100vh;
+    height: 100vh;
+    min-height: 100lvh;
     padding: 1em;
     margin: 0;
 
@@ -72,7 +74,7 @@
   }
 
   #pic-holder, #main, #aux {
-    width: min(1000px, 75vw);
+    width: 1000px;
     margin: auto;
     aspect-ratio: 2000/1346;
   }
@@ -85,11 +87,38 @@
     pointer-events: none;
   }
 
-  #buttons {
-    position: absolute; top: -5em; left: 0;
+  #buttons { position: fixed;    top:    -60px; left: -20px; }
+  #reroll  { position: absolute; bottom: 0;     left: 0; }
+  #swap    { position: absolute; bottom: 0;     left: 2.5em; }
+
+  #buttons button {
+    @include box;
+    width: calc(6em + 100px);
+    text-align: left;
+
+    $rotate: rotate(-60deg);
+    transform: $rotate;
+    transform-origin: center right;
+
+    :root:not([data-running]) &:active,
+    [data-running=swap]       &#swap,
+    [data-running=reroll]     &#reroll {
+      transform: $rotate translateX(-1.5em);
+    }
+  }
+
+  #back { position: fixed; top: 22px; left: 22px; }
+
+  #palette-holder { margin: -60px auto 0; }
+
+  #state-message {
+    @include box;
+    position: fixed; top: 1em; right: -1em;
+    padding-right: 2em;
   }
 }
 
+
 @layer layering {
   #main { z-index: 0; }
   #aux { z-index: 1; }
@@ -97,46 +126,14 @@
   #buttons, #state-message, #palette-holder { z-index: 2; }
 }
 
-@layer a {
-
-  button {
-    @include box;
-    transform-origin: center right;
-    padding-right: 3em;
-
-    $rotate: rotate(-60deg);
-    transform: $rotate;
-    &:not(:first-child) { margin-left: -5em; }
-
-    :root:not([data-running]) &:active,
-    [data-running=swap]       &#swap,
-    [data-running=reroll]     &#reroll {
-      transform: $rotate translate(-1.5em);
-    }
-  }
-
-  #back { position: absolute; top: 22px; left: 22px; }
-
-  #palette-holder {
-    width: min(90vw, 1126px);
-    margin: 2.5rem auto 0;
-  }
-  #palette { width: 100%; }
-
-  #state-message {
-    @include box;
-    position: absolute; top: 1em; right: -1em;
-    padding-right: 2em;
-  }
-
-}
 
 @layer come-in {
-  button, #state-message, #palette { @include transy; }
+  button, #state-message, #palette, #back { @include transy; }
 
-  :root:not([data-ready]) {
+  [data-state=loading] {
     button         { transform: none;             }
     #state-message { transform: translateX(100%); }
     #palette       { transform: translateY(125%); }
+    #back          { transform: translateX(-200%); }
   }
 }