flat mode, a few more buttons, etc

index.html

@@ -8,13 +8,13 @@
 <link rel=me href=https://chitter.xyz/@niss>
 <link rel=me href=https://cohost.org/niss>
 
-<link rel=icon href=media/niss-icon.png>
+<link rel=icon href=media/favicon.png>
 <link rel=stylesheet href=base.css>
-<link rel=stylesheet href=cube.css
-      media='(prefers-reduced-motion: no-preference)'>
-<!--
-<link rel=stylesheet href=flat.css media='(prefers-reduced-motion)'>
--->
+<link rel=stylesheet href=cube.css>
+<link rel=stylesheet href=flat.css>
+<noscript>
+  <link rel=stylesheet href=static.css>
+</noscript>
 
 <meta property=og:type content=article>
 <meta property=og:title content="the gec zone">
@@ -26,8 +26,8 @@
 <meta name=twitter:image content="XXXXXX">
 -->
 
-<script src=cube.js type=module></script>
 <script src=shuffle.js type=module></script>
+<script src=run.js type=module></script>
 
 <nav id=face-menu>
   <menu class='menu hide-boxes'>
@@ -52,6 +52,13 @@
       <h2> hey </h2>
 
       <p> i’m niss. what’s up
+
+      <noscript>
+        <p> this page needs javascript for the full effect, sorry.
+
+        <p> it was hard enough to make it work cross-browser as it is.
+            <small>[grumbles at safari]</small>
+      </noscript>
     </section>
 
     <section id=id>
@@ -169,7 +176,11 @@
 
           <li id=goaty>
             <a href=https://goatygoats.com title=goaty>
-              <img src=media/buttons/goaty.gif alt=goaty>
+              <picture>
+                <source srcset=media/buttons/goaty_still.gif
+                        media='(prefers-reduced-motion: reduce)'>
+                <img src=media/buttons/goaty.gif alt=goaty>
+              </picture>
             </a>
 
           <li id=tenna>
@@ -177,7 +188,11 @@
 
           <li id=gulfie>
             <a href=https://gulfie.online title=gulfie>
-              <img src=media/buttons/gulfie.png alt=gulfie>
+              <picture>
+                <source srcset=media/buttons/gulfie_still.png
+                        media='(prefers-reduced-motion: reduce)'>
+                <img src=media/buttons/gulfie.png alt=gulfie>
+              </picture>
             </a>
 
           <li id=river>
@@ -192,7 +207,11 @@
 
           <li id=myno>
             <a href=https://zatzhing.me title=myno>
-              <img src=media/buttons/myno.gif alt=myno>
+              <picture>
+                <source srcset=media/buttons/myno_still.png
+                        media='(prefers-reduced-motion: reduce)'>
+                <img src=media/buttons/myno.gif alt=myno>
+              </picture>
             </a>
 
           <li id=abyss>
@@ -200,7 +219,11 @@
 
           <li id=cr>
             <a href=https://candiedreptile.club/bloglet/ title=candiedreptile>
-              <img src=media/buttons/candiedreptile.gif alt=candiedreptile>
+              <picture>
+                <source srcset=media/buttons/candiedreptile_still.png
+                        media='(prefers-reduced-motion: reduce)'>
+                <img src=media/buttons/candiedreptile.gif alt=candiedreptile>
+              </picture>
             </a>
 
           <li id=spiral>
@@ -213,12 +236,20 @@
 
           <li id=pebble>
             <a href=https://pebble.pet title=pebble>
-              <img src=media/buttons/pebble.gif alt=pebble>
+              <picture>
+                <source srcset=media/buttons/pebble_still.png
+                        media='(prefers-reduced-motion: reduce)'>
+                <img src=media/buttons/pebble.gif alt=pebble>
+              </picture>
             </a>
 
           <li id=beeps>
             <a href=https://beeps.website title=beeps>
-              <img src=media/buttons/beeps.gif alt=beeps>
+              <picture>
+                <source srcset=media/buttons/beeps_still.png
+                        media='(prefers-reduced-motion: reduce)'>
+                <img src=media/buttons/beeps.gif alt=beeps>
+              </picture>
             </a>
 
           <li id=cobalt>
@@ -233,12 +264,20 @@
 
           <li id=dusty>
             <a href=https://chcl.se title=dusty>
-              <img src=media/buttons/dusty.gif alt=dusty>
+              <picture>
+                <source srcset=media/buttons/dusty_still.png
+                        media='(prefers-reduced-motion: reduce)'>
+                <img src=media/buttons/dusty.gif alt=dusty>
+              </picture>
             </a>
 
           <li id=tsunderdog>
             <a href=https://www.tsunderdog.art title=tsunderdog>
-              <img src=media/buttons/tsunderdog.gif alt=tsunderdog>
+              <picture>
+                <source srcset=media/buttons/tsunderdog_still.png
+                        media='(prefers-reduced-motion: reduce)'>
+                <img src=media/buttons/tsunderdog.gif alt=tsunderdog>
+              </picture>
             </a>
 
           <li id=ionchy>
@@ -251,7 +290,11 @@
 
           <li id=tuxedodragon>
             <a href=https://tuxedodragon.art title=tuxedodragon>
-              <img src=media/buttons/tuxedodragon.gif alt=tuxedodragon>
+              <picture>
+                <source srcset=media/buttons/tuxedodragon_still.gif
+                        media='(prefers-reduced-motion: reduce)'>
+                <img src=media/buttons/tuxedodragon.gif alt=tuxedodragon>
+              </picture>
             </a>
 
           <li id=hthrflwrs>
@@ -261,11 +304,29 @@
 
           <li id=creature0354>
             <a href=https://creature0354.neocities.org title=creature0354>
-              <img src=media/buttons/creature0354.gif alt=creature0354>
+              <picture>
+                <source srcset=media/buttons/creature0354_still.png
+                        media='(prefers-reduced-motion: reduce)'>
+                <img src=media/buttons/creature0354.gif alt=creature0354>
+              </picture>
             </a>
 
           <li id=violet>
             <a href=https://violet.pm title=violet class=txt>violet</a>
+
+          <li id=alloyed>
+            <a href=https://alloyed.me title='Kit!'>
+              <picture>
+                <source srcset=media/buttons/alloyed_still.png
+                        media='(prefers-reduced-motion: reduce)'>
+                <img src=media/buttons/alloyed.gif alt='Kit!'>
+              </picture>
+            </a>
+
+          <li id=renko>
+            <a href=https://https://renkotsuban.com title=renkotsuban>
+              <img src=media/buttons/renkotsuban.gif alt=renkotsuban>
+            </a>
         </ul>
       </section>
 
@@ -275,7 +336,11 @@
         <ul class='zoom shuffle'>
           <li>
             <a href=https://cohost.org id=cohost-button title='i was on cohost'>
-              <img src=media/buttons/cohost.gif alt='i was on cohost'>
+              <picture>
+                <source srcset=media/buttons/cohost_still.gif
+                        media='(prefers-reduced-motion: reduce)'>
+                <img src=media/buttons/cohost.gif alt='i was on cohost'>
+              </picture>
               <!-- button by https://mykocalico.neocities.org/ -->
             </a>
 
@@ -292,7 +357,11 @@
 
           <li>
             <a href=https://corru.observer id=corru title='corru.observer'>
-              <img src=media/buttons/corru.gif alt='corru.observer'>
+              <picture>
+                <source srcset=media/buttons/corru_still.gif
+                        media='(prefers-reduced-motion: reduce)'>
+                <img src=media/buttons/corru.gif alt='corru.observer'>
+              </picture>
             </a>
 
           <li>
@@ -303,7 +372,7 @@
       </section>
 
       <section id=nissbuttons>
-        <p> niss buttons for you → </p>
+        <p>if you wanna link to me:</p>
         <img src=8831.png alt='niss button' title='by me'>
         <img src=8831-quox.png alt='q.t. button' title='by candiedreptile'>
       </section>