move scripts/styles into dirs

rainbow-quox/style/palette.scss

@@ -0,0 +1,40 @@
+@import url(../fonts/muller/muller.css);
+@import url(../fonts/pragmatapro/pragmatapro.css);
+
+:root {
+  --hue:   300;
+  --c-hue: calc(var(--hue) + 180);
+  --col:   oklch(0.8 0.04 var(--hue));
+  color-scheme: light dark;
+
+  font-family: 'Muller', sans-serif;
+  text-anchor: end;
+}
+
+.swatch, .text-bg {
+  transition:   fill 0.2s ease;
+  fill:         var(--col);
+  stroke:       oklch(from var(--col) 0.15 0.25 calc(h + 180));
+  stroke-width: 2;
+
+  filter: drop-shadow(6px 6px 0 oklch(0.4 0.2 var(--hue) / 0.45));
+
+  @media (prefers-color-scheme: dark) {
+    filter: drop-shadow(6px 6px 0 oklch(0.1 0.15 var(--hue) / 0.45));
+  }
+}
+
+.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)); }
+
+.name {
+  font-weight: 700;
+  font-size:   25px;
+}
+
+.hex {
+  font-family: monospace;
+  font-weight: 500;
+  font-size:   15px;
+}
+

rainbow-quox/style/style.scss

@@ -0,0 +1,142 @@
+@import url(/fonts/muller/muller.css);
+
+@keyframes swap1 {
+  0%   { transform: none; }
+  49%  { transform: translateX(-150vw); }
+  50%  { content-visibility: hidden; }
+  100% { content-visibility: hidden; transform: none; }
+}
+
+@keyframes swap2 {
+  0%   { content-visibility: hidden; transform: translateX(150vw); }
+  49%  { content-visibility: visible; opacity: 1; }
+  100% { transform: none; opacity: 1; }
+}
+
+@keyframes fade-in {
+  from { opacity: 0 }
+  to   { opacity: 1 }
+}
+
+
+@mixin transy {
+  transition: transform 0.25s cubic-bezier(.47,.74,.61,1.2);
+}
+
+@mixin box {
+  font:       700 20pt var(--font); // respecify font family for <button>
+  color:      oklch(0.95 0.075 var(--c-hue));
+  background: oklch(0.5 0.2 var(--hue));
+  border:     3px solid oklch(0.2 0.05 var(--hue));
+  box-shadow: var(--shadow-color);
+  padding:    0.2rem 0.5rem;
+}
+
+@layer layout {
+  * { box-sizing: border-box; }
+
+  :root {
+    --hue: 300;
+    --c-hue: calc(180 + var(--hue));
+
+    --font: Muller, sans-serif;
+    font-family: var(--font);
+
+    @function bg($lcs) {
+      $lg: to bottom in oklch;
+      @each $l, $c in $lcs { $lg: $lg, oklch($l $c var(--hue)); }
+      @return url(bright-squares.png), linear-gradient($lg);
+    }
+
+    background: bg([0.9 0.08, 0.7 0.1]);
+    --shadow-color: 6px 6px 0 oklch(0.4 0.2 var(--hue) / 0.45);
+
+    color-scheme: light dark;
+    @media (prefers-color-scheme: dark) {
+      background: bg([0.3 0.08, 0.2 0.09]);
+      --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;
+    padding: 1em;
+    margin: 0;
+
+    display: flex;
+    flex-flow: column;
+    justify-content: space-between;
+  }
+
+  #pic-holder, #main, #aux {
+    width: min(1000px, 75vw);
+    margin: auto;
+    aspect-ratio: 2000/1346;
+  }
+
+  #pic-holder { position: relative; }
+  #main, #aux { position: absolute; inset: 0; }
+
+  #aux {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  #buttons {
+    position: absolute; top: -5em; left: 0;
+  }
+}
+
+@layer layering {
+  #main { z-index: 0; }
+  #aux { z-index: 1; }
+
+  #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; }
+
+  :root:not([data-ready]) {
+    button         { transform: none;             }
+    #state-message { transform: translateX(100%); }
+    #palette       { transform: translateY(125%); }
+  }
+}