rainbow quox

rainbow-quox/style/defs.scss

@@ -0,0 +1,71 @@
+$box-texture: url(3px-tile.png);
+$box-bg: oklch(0.3 0.2 var(--hue));
+$box-fg: oklch(0.95 0.075 var(--c-hue));
+
+$button-bg: oklch(0.5 0.25 var(--hue));
+$button-fg: oklch(0.98 0.1 var(--c-hue));
+
+
+// https://oakreef.ie/transy :)
+$transition-duration: 250ms;
+$transition-curve: cubic-bezier(.47,.74,.61,1.2);
+
+@mixin transy($prop: transform, $duration: $transition-duration) {
+  transition: $prop $duration $transition-curve;
+}
+
+@mixin shadow {
+  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.125 var(--hue) / 0.45));
+  }
+}
+
+
+@mixin box-base {
+  @include shadow;
+  // respecify font family for <button>
+  font:       700 20pt var(--font);
+  padding:    0.2rem 0.5rem;
+  background-blend-mode: hard-light;
+  border: 3px solid oklch(0.2 0.05 var(--hue));
+}
+
+@mixin button {
+  @include box-base;
+  background: $box-texture, $button-bg;
+  color:      $button-fg;
+}
+
+@mixin box {
+  @include box-base;
+  background: $box-texture, $box-bg;
+  color:      $box-fg;
+}
+
+@mixin image-button {
+  @include button;
+  padding: 5px;
+  > * { display: block; }
+}
+
+@mixin nested-image-button {
+  @include image-button;
+  border: 2px solid $button-fg;
+}
+
+$arrowhead:
+  conic-gradient(from -124deg at 100% 50%,
+                 currentcolor, currentcolor 68deg, transparent 68deg);
+
+@mixin arrow-button {
+  @include button;
+
+  &::before {
+    content: '';
+    display: inline-block;
+    height: 1.25ex; aspect-ratio: 2/3;
+    background: $arrowhead;
+    margin-right: 0.5ex;
+  }
+}