rainbow-quox download button

.gitignore

@@ -12,3 +12,4 @@ _build
 _tmp
 .directory
 *~
+dist-newstyle

Makefile

@@ -1,12 +1,14 @@
-CSS   = $(wildcard style/*.css) $(shell find fonts -type f) \
-        rainbow-quox/style.css
 PAGES = index.html pubkey.txt rainbow-quox/index.html
 MEDIA = \
   $(wildcard media/*.png) $(wildcard media/*.gif) $(wildcard media/*.webp) \
   $(wildcard media/flags/*) $(wildcard media/buttons/*) \
   $(wildcard media/icons/*) $(wildcard media/bg/*) 8831.png 8831-quox.png \
-  $(wildcard rainbow-quox/front/*.png) $(wildcard rainbow-quox/back/*.png)
-SCRIPTS = $(patsubst %.ts,%.js,$(wildcard script/*.ts rainbow-quox/*.ts))
+  $(wildcard rainbow-quox/front/*) $(wildcard rainbow-quox/back/*) \
+  $(wildcard rainbow-quox/*.svg) rainbow-quox/palette.svg
+CSS   = $(shell find fonts -type f) \
+        $(patsubst %.scss,%.css, \
+          $(wildcard rainbow-quox/style/*) $(wildcard style/*))
+SCRIPTS = $(patsubst %.ts,%.js,$(wildcard script/*.ts rainbow-quox/script/*.ts))
 MISC  = $(shell find .well-known -type f)
 ALL   = $(CSS) $(PAGES) $(MEDIA) $(SCRIPTS) $(MISC)
 
@@ -29,38 +31,31 @@ upload: build
 	       $(BUILDDIR)/ $(HOST):$(REMOTE_DIR)/
 
 $(BUILDDIR)/%: %
-	@echo $*
-	@mkdir -p $(dir $@)
-	@cp $< $@
-
-$(BUILDDIR)/%.gif: %_bg.gif
-	@echo $(notdir $@)
-	@mkdir -p $(dir $(BUILDDIR)/$* $(TMPDIR)/$*)
-	@gifsicle -U $*_bg.gif -o $(TMPDIR)/$*_bg_u.gif
-	@convert -transparent '#ff9bc7' $(TMPDIR)/$*_bg_u.gif $(TMPDIR)/$*_t.gif
-	@gifsicle --disposal=previous $(TMPDIR)/$*_t.gif -o $(BUILDDIR)/$*.gif
-
-$(BUILDDIR)/%_small.png: %.svg
-	@echo $(notdir $@)
-	@mkdir -p $(dir $@)
-	@inkscape -e $@ -h 16 $< >/dev/null
-
-$(BUILDDIR)/%_large.png: %.svg
-	@echo $(notdir $@)
-	@mkdir -p $(dir $@)
-	@inkscape -e $@ -h 30 $< >/dev/null
-
-$(BUILDDIR)/%_dim.png: %.png
-	@echo $(notdir $@)
-	@convert -channel A -evaluate Multiply 0.75 $< $@
+	@echo '[copy] ' $<
+	mkdir -p $(dir $@)
+	cp $< $@
 
 $(BUILDDIR)/%.js: %.ts
+	@echo '[tsc] ' $<
 	tsc --strict --noUncheckedIndexedAccess --noEmitOnError \
-	    --lib dom,es2023 --target es2015 \
+	    --lib dom,es2023 --target es2022 \
 	    --outDir $(dir $@) $^
 
+$(BUILDDIR)/rainbow-quox/palette.svg: rainbow-quox/make-palette/*
+	@echo '[make-palette] rainbow-quox/palette.svg'
+	cd rainbow-quox/make-palette; \
+	  cabal run -v0 -- make-palette $(abspath $@)
+
+$(BUILDDIR)/%.css: %.scss $(wildcard $(dir %)/lib/*.scss)
+	@echo '[sass] ' $<
+	mkdir -p $(dir $@)
+	sass --no-source-map -I style $< $@ \
+	  --silence-deprecation mixed-decls
 
 clean:
+	@echo '[clean]'
 	$(RM) -r $(TMPDIR) $(BUILDDIR)
 
 .PHONY: clean all build upload
+
+.SILENT:

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');
+}

index.html

@@ -8,7 +8,7 @@
 <link rel=me href=https://chitter.xyz/@niss>
 <link rel=me href=https://cohost.org/niss>
 
-<link rel=icon href=media/favicon.png>
+<link rel=icon href=media/favicon.webp>
 <link rel=stylesheet href=style/base.css>
 <link rel=stylesheet href=style/cube.css>
 <link rel=stylesheet href=style/flat.css>
@@ -20,14 +20,14 @@
 <meta property=og:title content="the gec zone">
 <meta property=og:description content="lair of the creature known as “niss”">
 <meta property=og:url content="https://yummy.cricket">
-<meta property=og:image        content=media/opengraph.png>
+<meta property=og:image        content=media/opengraph.webp>
 <meta property=og:image:width  content=400>
 <meta property=og:image:height content=400>
-<meta property=og:image        content=media/twittercard.png>
+<meta property=og:image        content=media/twittercard.webp>
 <meta property=og:image:width  content=800>
 <meta property=og:image:height content=418>
 <meta name=twitter:card  content=summary_large_image>
-<meta name=twitter:image content=media/twittercard.png>
+<meta name=twitter:image content=media/twittercard.webp>
 
 <script src=script/shuffle.js type=module></script>
 <script src=script/run.js type=module></script>
@@ -96,11 +96,11 @@
       </dl>
 
       <div id=flags>
-        <img src=media/flags/nb.png alt=non-binary title=non-binary>
-        <img src=media/flags/gf.png alt=genderfluid title=genderfluid>
-        <img src=media/flags/pan.png alt=pansexual title=pansexual>
-        <img src=media/flags/quoi.png alt=quoiromantic title=quoiromantic>
-        <img src=media/flags/polyam.png alt=polyamorous title=polyamorous>
+        <img src=media/flags/nb.svg alt=non-binary title=non-binary>
+        <img src=media/flags/gf.svg alt=genderfluid title=genderfluid>
+        <img src=media/flags/pan.svg alt=pansexual title=pansexual>
+        <img src=media/flags/quoi.svg alt=quoiromantic title=quoiromantic>
+        <img src=media/flags/polyam.svg alt=polyamorous title=polyamorous>
       </div>
     </section>
 
@@ -345,10 +345,8 @@
               <picture>
                 <source srcset=media/buttons/FaeAlchemist_still.png
                         media='(prefers-reduced-motion: reduce)'>
-                <img src=https://faealchemist.neocities.org/FaeAlchemist%2088x31.gif
-                     alt=faealchemist>
+                <img src=media/buttons/FaeAlchemist.png alt=faealchemist>
               </picture>
-              <!-- hotlinked to keep it up to date -->
             </a>
 
           <li id=suricrasia>
@@ -434,6 +432,15 @@
             <a href=https://blaurascon.nfshost.com title="blau's blog">
               <img src=media/buttons/blau.png alt="blau's blog">
             </a>
+
+          <li id=deneb>
+            <a href=https://www.netdeneb.com title=deneb>
+              <picture>
+                <source srcset=media/buttons/deneb_still.webp
+                        media='(prefers-reduced-motion: reduce)'>
+                <img src=media/buttons/deneb.gif alt=deneb>
+              </picture>
+            </a>
         </ul>
       </section>
 

media/flags/gf.svg

@@ -0,0 +1,7 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120'>
+<rect width='200' height='24' fill='#ff74a2'/>
+<rect width='200' height='24' y='24' fill='#fcfcfc'/>
+<rect width='200' height='24' y='48' fill='#bd17d5'/>
+<rect width='200' height='24' y='72' fill='#2b2b2b'/>
+<rect width='200' height='24' y='96' fill='#333ebc'/>
+</svg>

media/flags/nb.svg

@@ -0,0 +1,6 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120'>
+<rect width='200' height='30' fill='#fcf434'/>
+<rect width='200' height='30' y='30' fill='#fcfcfc'/>
+<rect width='200' height='30' y='60' fill='#9b5bd3'/>
+<rect width='200' height='30' y='90' fill='#2b2b2b'/>
+</svg>

media/flags/pan.svg

@@ -0,0 +1,5 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120'>
+<rect width='200' height='40' fill='#ff208b'/>
+<rect width='200' height='40' y='40' fill='#ffd700'/>
+<rect width='200' height='40' y='80' fill='#20b0ff'/>
+</svg>

media/flags/polyam.svg

@@ -0,0 +1,11 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120'>
+<rect width='200' height='43' fill='#36e'/>
+<rect width='200' height='34' y='43' fill='#e34'/>
+<rect width='200' height='43' y='77' fill='#123'/>
+<path stroke='#fe7' stroke-width='5' fill='none' d='
+  M126,64 l-26,26 -26,-26
+  c-26,-26 0,-56 26,-22  26,-34 52,-4 26,22 z
+  M55,60
+  c0,-20 20,-28 45,0     25,28 45,20 45,0
+   0,-20 -20,-28 -45,0  -25,28 -45,20 -45,0 z' />
+</svg>

media/flags/quoi.svg

@@ -0,0 +1,6 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120'>
+<rect width='200' height='30' fill='#2b2b2b'/>
+<rect width='200' height='30' y='30' fill='#8bd655'/>
+<rect width='200' height='30' y='60' fill='#69d0d5'/>
+<rect width='200' height='30' y='90' fill='#d1d1d1'/>
+</svg>

rainbow-quox/back.svg

@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="65" height="65" viewBox="-5 -2.5 65 65"
+     stroke="#123" stroke-width="2">
+  <title>go back</title>
+  <desc>back to the cube.</desc>
+
+  <defs>
+    <linearGradient id="g-arrow-mask">
+      <stop offset="65%" stop-color="white" />
+      <stop offset="90%" stop-color="black" />
+    </linearGradient>
+    <linearGradient id="g-arrow">
+      <stop offset="25%" stop-color="hsl(60 90% 95%)" />
+      <stop offset="75%" stop-color="hsl(60 80% 90%)" />
+    </linearGradient>
+    <linearGradient id="g-hello" x1="25%" y1="25%" x2="75%" y2="75%">
+      <stop offset="0%" stop-color="hsl(310 86% 92%)" />
+      <stop offset="100%" stop-color="hsl(310 90% 80%)" />
+    </linearGradient>
+    <linearGradient id="g-id" x1="0" y1="0" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="hsl(10 87% 92%)" />
+      <stop offset="100%" stop-color="hsl(10 87% 86%)" />
+    </linearGradient>
+    <linearGradient id="g-friends" x1="25%" y1="0" x2="75%" y2="100%">
+      <stop offset="0%" stop-color="hsl(190 87% 92%)" />
+      <stop offset="100%" stop-color="hsl(190 77% 78%)" />
+    </linearGradient>
+
+    <mask id="arrow-mask">
+      <rect height="100%" width="100%" stroke="none" fill="url(#g-arrow-mask)" />
+    </mask>
+  </defs>
+
+  <path id="arrow" fill="url(#g-arrow)" mask="url(#arrow-mask)"
+    d="M30,5 l-30,25 30,25 7.07,-7.07 -17.93,-12.93 40,0 0,-10 -40,0 17.93,-12.93 z" />
+    <!-- (7.07 ≈ 10/√2)-->
+
+  <g id="cube" transform="translate(47 5)">
+    <g stroke="none">
+      <!-- top -->
+      <path id="hello" fill="url(#g-hello)" d="M0,0 l-12,5 l12,5 l12,-5 z" />
+      <!-- left -->
+      <path id="id" fill="url(#g-id)" d="M-12,5 v15 l12,5 v-15 z" />
+      <!-- right -->
+      <path id="friends" fill="url(#g-friends)" d="M12,5 v15 l-12,5 v-15 z" />
+    </g>
+
+    <!-- outline -->
+    <path id="cube-outline" fill="none"
+          d="M0,0 l-12,5 v15 l12,5 12,-5 v-15 z
+             m-12,5 l12,5 12,-5 m-12,5 v15" />
+  </g>
+</svg>