styles

Makefile

@@ -6,7 +6,8 @@ MEDIA = \
   $(wildcard media/flags/*) $(wildcard media/buttons/*) \
   $(wildcard media/icons/*) $(wildcard media/bg/*) 8831.png 8831-quox.png \
   $(wildcard rainbow-quox/front/*) $(wildcard rainbow-quox/back/*) \
-  rainbow-quox/palette.svg
+  rainbow-quox/palette.svg rainbow-quox/bright-squares.png \
+  rainbow-quox/back.svg
 SCRIPTS = $(patsubst %.ts,%.js,$(wildcard script/*.ts rainbow-quox/*.ts))
 MISC  = $(shell find .well-known -type f)
 ALL   = $(CSS) $(PAGES) $(MEDIA) $(SCRIPTS) $(MISC)

fonts/pragmatapro/pragmatapro.css

@@ -0,0 +1,25 @@
+@font-face {
+  font-family: PrgmataPro;
+  font-weight: 400;
+  src:         url(r.woff2) format('woff2');
+}
+
+@font-face {
+  font-family: PrgmataPro;
+  font-weight: 500;
+  src:         url(b.woff2) format('woff2');
+}
+
+@font-face {
+  font-family: PrgmataPro;
+  font-weight: 400;
+  font-style:  italic;
+  src:         url(i.woff2) format('woff2');
+}
+
+@font-face {
+  font-family: PrgmataPro;
+  font-weight: 500;
+  font-style:  italic;
+  src:         url(bi.woff2) format('woff2');
+}

rainbow-quox/back.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="70" height="70" viewBox="0 15 70 85">
+<path stroke="white" stroke-width="10" fill="transparent"
+      stroke-linecap="round" stroke-linejoin="round"
+      d="M 35,20 L 5,50 L 35,80 M 5,50 H 65" />
+</svg>

rainbow-quox/canvas.ts

@@ -144,6 +144,7 @@ function message(msg: string, ctx: CanvasRenderingContext2D) {
 
 function startAnim(name: string) {
   document.documentElement.dataset.running = name;
+  document.getElementById('buttons')?.style.removeProperty('z-index');
 }
 
 function isRunning(): boolean {
@@ -152,6 +153,7 @@ function isRunning(): boolean {
 
 function finishAnim() {
   delete document.documentElement.dataset.running;
+  document.getElementById('buttons')?.style.setProperty('z-index', '1');
 }
 
 type SideName = 'front' | 'back';
@@ -238,7 +240,7 @@ async function animateReroll(ctx1: CanvasRenderingContext2D,
                              side: Side, done: () => void) {
   const duration = 200;
   const [oklch, rgb] = await side.recolorOn(ctx2, buf);
-  ctx2.canvas.style.animation = `${duration}ms ease fade-in`;
+  ctx2.canvas.style.animation = `${duration}ms ease forwards fade-in`;
   setBg(oklch.outer.h);
   setPalette(oklch, rgb);
   setTimeout(finish, duration);
@@ -310,6 +312,8 @@ document.addEventListener('DOMContentLoaded', async function() {
 
   addListeners();
 
+  document.documentElement.dataset.ready = '1';
+
   type Done = (finish: () => void) => void;
 
   function handleReroll(e: Event) {

rainbow-quox/index.html

@@ -30,5 +30,7 @@
 </div>
 
 <nav id=back>
-  <a href=/>back</a>
+  <a href=/>
+    <img src=back.svg>
+  </a>
 </nav>

rainbow-quox/palette.svg.raku

@@ -10,8 +10,12 @@ my $doc = q:to/EOP/;
 
   <style><![CDATA[
     @import url(../fonts/muller/muller.css);
+    @import url(../fonts/pragmatapro/pragmatapro.css);
 
-    :root { --hue: 300; }
+    :root {
+      --hue: 300;
+      color-scheme: light dark;
+    }
 
     rect, .textbg {
       filter:       drop-shadow(6px 6px 2px oklch(0.4 0.2 var(--hue) / 0.45));
@@ -19,6 +23,10 @@ my $doc = q:to/EOP/;
       fill:         lightgray;
       stroke:       black;
       stroke-width: 1;
+
+      @media (prefers-color-scheme: dark) {
+        filter: drop-shadow(6px 6px 2px oklch(0.1 0.15 var(--hue) / 0.45));
+      }
     }
 
     text {
@@ -47,8 +55,8 @@ sub make-item($layer, :$display = $layer, :$use-vit?, :$vit?) { ... }
 make-item 'outer', upper => 'vitiligo1';
 make-item 'spines', use => 'vitiligo1';
 make-item 'stripes', upper => 'cuffs', display => 'socks';
-make-item 'belly1', upper => 'vitiligo2';
-make-item 'belly2', upper => 'vitiligo3';
+make-item 'belly1', upper => 'vitiligo3';
+make-item 'belly2', upper => 'vitiligo2';
 make-item 'fins1', upper => 'vitiligo4';
 make-item 'fins2', use => 'vitiligo4';
 make-item 'fins3', use => 'vitiligo4';

rainbow-quox/style.css

@@ -30,30 +30,48 @@
   to   { opacity: 1 }
 }
 
+:root, body {
+  min-height: 100vh;
+  margin: 0;
+}
+
 :root {
   --hue: 300;
   --c-hue: calc(180 + var(--hue));
-  min-height: 100vh;
   align-items: center; justify-content: center;
 
   --font: Muller, sans-serif;
   font-family: var(--font);
 
+  --shadow-color: 6px 6px 2px oklch(0.4 0.2 var(--hue) / 0.45);
+  @media (prefers-color-scheme: dark) {
+    --shadow-color: 6px 6px 2px oklch(0.1 0.15 var(--hue) / 0.45);
+  }
+
   color-scheme: light dark;
-  background: oklch(0.9 0.08 var(--hue));
-  transition: background 0.4s ease;
+  background:
+    url(bright-squares.png),
+    linear-gradient(to bottom in oklch,
+      oklch(0.9 0.08 var(--hue)),
+      oklch(0.7 0.10 var(--hue)));
+  background-blend-mode: screen;
+
+  @media (prefers-color-scheme: dark) {
+    background:
+      url(bright-squares.png),
+      linear-gradient(to bottom in oklch,
+        oklch(0.3 0.08 var(--hue)),
+        oklch(0.2 0.09 var(--hue)));
+  }
 
   width: 100vw;
   overflow-x: hidden;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root { background: oklch(0.3 0.12 var(--hue)); }
-}
-
 body {
   display: flex;
   flex-flow: column;
+  justify-content: space-between;
 }
 
 #pic-holder, #pic, #pic2 {
@@ -69,13 +87,16 @@ body {
 #pic2 {
   opacity: 0;
   pointer-events: none;
+  z-index: 2;
 }
 
 #buttons {
   flex: none;
-  display: flex; gap: 20px;
-  max-width: 40em;
-  margin: 1.5rem auto 2.5rem;
+  display: flex;
+  margin: 0 2rem 2.5rem;
+  align-items: start;
+  z-index: 1;
+  translate: -2em -6em;
 }
 
 button {
@@ -85,26 +106,25 @@ button {
   background: oklch(0.5 0.2 var(--bg));
   color: oklch(0.95 0.075 var(--fg));
   border: 3px solid oklch(0.2 0.05 var(--bg));
-  padding: 0.2em 0.5em;
-  box-shadow: 6px 6px 2px oklch(0.4 0.2 var(--bg) / 0.45);
-  transition:
-    color 0.4s ease,
-    background 0.4s ease,
-    border 0.4s ease,
-    translate 0.015s linear,
-    box-shadow 0.015s linear;
+  padding: 0.2em 4em 0.2em 0.5em;
+  transform-origin: center right;
+  box-shadow: var(--shadow-color);
+  transition: all 0.4s ease;
+
+  [data-ready] & { transform: rotate(-60deg); }
 
   :root:not([data-running]) &:active,
   [data-running=swap]       &#swap,
   [data-running=reroll]     &#reroll {
-    translate: 6px 6px;
-    box-shadow: none;
+    transform: rotate(-60deg) translate(-1em);
   }
+
+  + button { margin-left: -6.5em; }
 }
 
 #back {
   position: absolute;
-  bottom: 15px; left: 22px;
+  top: 22px; left: 22px;
 
   a {
     color: oklch(0.4 0.15 var(--c-hue));