more buttons, opengraph stuff, background stickers, etc

index.html

@@ -20,11 +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="XXXXXX">
+<meta property=og:image        content=media/opengraph.png>
+<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:width  content=800>
+<meta property=og:image:height content=418>
 <meta name=twitter:card  content=summary_large_image>
-<meta name=twitter:image content="XXXXXX">
--->
+<meta name=twitter:image content=media/twittercard.png>
 
 <script src=script/shuffle.js type=module></script>
 <script src=script/run.js type=module></script>
@@ -215,7 +218,13 @@
             </a>
 
           <li id=abyss>
-            <a href=https://kobold60.com title=abyss class=txt>abyss</a>
+            <a href=https://kobold60.com title=abyss>
+              <picture>
+                <source srcset=media/buttons/abyss_still.png
+                        media='(prefers-reduced-motion: reduce)'>
+                <img src=media/buttons/abyss.gif alt=abyss>
+              </picture>
+            </a>
 
           <li id=cr>
             <a href=https://candiedreptile.club/bloglet/ title=candiedreptile>
@@ -252,11 +261,6 @@
               </picture>
             </a>
 
-          <li id=cobalt>
-            <a href=https://cobaltblue.neocities.org title=cobalt>
-              <img src=media/buttons/cobalt.png alt=cobalt>
-            </a>
-
           <li id=grace>
             <a href=https://princess.software title=grace>
               <img src=media/buttons/grace.png alt=grace>
@@ -327,6 +331,28 @@
             <a href=https://https://renkotsuban.com title=renkotsuban>
               <img src=media/buttons/renkotsuban.gif alt=renkotsuban>
             </a>
+
+          <li id=craw>
+            <a href=https://craw.com title=craw>
+              <img src=media/buttons/craw.png alt=craw>
+            </a>
+
+          <li id=FaeAlchemist>
+            <a href=https://faealchemist.neocities.org title=faealchemist>
+              <picture>
+                <source srcset=media/buttons/FaeAlchemist_still.png
+                        media='(prefers-reduced-motion: reduce)'>
+                <img src=media/buttons/FaeAlchemist.gif alt=faealchemist>
+              </picture>
+            </a>
+
+          <li id=suricrasia>
+            <a href=https://suricrasia.online title=suricrasia>
+              <img src=media/buttons/suricrasia.gif alt=suricrasia>
+            </a>
+
+          <li id=brin>
+            <a href=https://brinsolomon.com title=brin class=txt>brin</a>
         </ul>
       </section>
 
@@ -365,8 +391,19 @@
             </a>
 
           <li>
-            <a href=https://krita.org id=krita title='krita'>
-              <img src='media/buttons/krita.png' alt=krita>
+            <a href=https://krita.org id=krita title=krita>
+              <img src=media/buttons/krita.png alt=krita>
+            </a>
+
+          <li>
+            <a href=http://crouton.net id=crouton title=crouton>
+              <img src=media/buttons/crouton.png alt=crouton>
+            </a>
+
+          <li>
+            <a href=https://www.runawaytothestars.com id=rtts
+               title='runaway to the stars'>
+              <img src=media/buttons/rtts.png alt='runaway to the stars'>
             </a>
         </ul>
       </section>
@@ -383,6 +420,9 @@
       <h2> a sixth thing </h2>
 
       <p> <a href=http://crouton.net>wow</a>
+
+      <p class=artcredit>
+        art by <a href=https://wutizit45.bsky.social>gray</a>
     </section>
   </div>
 </div>

style/base.css

@@ -16,12 +16,15 @@ html {
   font-family: Muller, sans-serif;
   font-weight: 500;
 
-  background: var(--gradient) fixed;
   color: black;
 
   --gradient:
     linear-gradient(120deg, #fae58f, #fab6ba, #d1aeff, #89d6ff, #43f3ae);
   --shadow-hsl: 330deg 40% 40%;
+  --base-background: var(--gradient) fixed;
+  background: var(--base-background);
+
+  --menu-bg-hsl: 60deg 100% 96%;
 }
 
 @media (prefers-reduced-data: reduce) {
@@ -42,6 +45,7 @@ html, body { margin: 0; }
         hsl(150deg 30% 20%),
         hsl(30deg  30% 20%),
         hsl(350deg 30% 20%));
+    --menu-bg-hsl: 260deg 100% 8%;
     color: #ffd;
   }
 }
@@ -70,15 +74,13 @@ html, body { margin: 0; }
 
   font-size:   125%;
 
-  background: hsl(var(--menu-bg-hsl) / 50%);
+  background: hsl(var(--menu-bg-hsl) / 65%);
   border:     2px solid hsl(var(--menu-bg-hsl));
   box-shadow: 0 0 10px 5px hsl(var(--menu-bg-hsl) / 30%);
-
-  --menu-bg-hsl: 60deg 100% 96%;
 }
 
-@media (prefers-color-scheme: dark) {
-  .menu { --menu-bg-hsl: 260deg 100% 8%; }
+@media (prefers-reduced-transparency: reduce) {
+  background: hsl(var(--menu-bg-hsl));
 }
 
 .hide-boxes input {
@@ -145,6 +147,7 @@ h2 { margin-top: 0; }
 
 h3 {
   text-align: center;
+  margin-top: 0;
   margin-bottom: 0.25em;
 }
 
@@ -478,7 +481,7 @@ strong { font-weight: 700; }
 #friends #spiral a { background: #ef4d5a; color: #1f1f1f; }
 #friends #codl   a { background: #87261f; color: #edb970; }
 #friends #violet a { background: #8c2bd8; color: #dddddd; }
-#friends #abyss  a { background: #1e2e5f; color: #f8e1c2; }
+#friends #brin   a { background: #1e1e1e; color: #ff4400; }
 
 #nissbuttons {
   margin: 2em auto 0;
@@ -507,6 +510,16 @@ strong { font-weight: 700; }
     var(--base-background);
 }
 
+.artcredit {
+  position: absolute;
+  bottom: 0;
+  left: 1em;
+  font-size: smaller;
+  font-style: italic;
+  background: hsl(var(--menu-bg-hsl) / 75%);
+  padding: .1em .5em;
+}
+
 @media (prefers-color-scheme: dark) {
   #cube #six { --bg-image: url(../media/kesi-neon.png); }
 }

style/cube.css

@@ -1,6 +1,79 @@
 @media (prefers-reduced-motion: no-preference) and
        (min-height: 650px) and (min-width: 650px) {
 
+/* BACKGROUND STUFF */
+
+html {
+  --bg-60309: url(../media/bg/60309.png);
+  --bg-kesi: url(../media/bg/kesi.png);
+  --bg-korai: url(../media/bg/korai.png);
+  --bg-mirai: url(../media/bg/mirai.png);
+  --bg-niss: url(../media/bg/niss.png);
+  --bg-niss2: url(../media/bg/niss2.png);
+  --bg-nisse: url(../media/bg/nisse.png);
+  --bg-prickly: url(../media/bg/prickly.png);
+  --bg-qt: url(../media/bg/qt.png);
+  --bg-qt2: url(../media/bg/qt2.png);
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    --bg-60309: url(../media/bg/60309_neon.png);
+    --bg-kesi: url(../media/bg/kesi_neon.png);
+    --bg-korai: url(../media/bg/korai_neon.png);
+    --bg-mirai: url(../media/bg/mirai_neon.png);
+    --bg-niss: url(../media/bg/niss_neon.png);
+    --bg-niss2: url(../media/bg/niss2_neon.png);
+    --bg-nisse: url(../media/bg/nisse_neon.png);
+    --bg-prickly: url(../media/bg/prickly_neon.png);
+    --bg-qt: url(../media/bg/qt_neon.png);
+    --bg-qt2: url(../media/bg/qt2_neon.png);
+  }
+}
+
+html {
+  background:
+  /*
+    url(../media/bg/kesi_sprite_front.png) top 100px right no-repeat,
+    url(../media/bg/kesi_sprite_mid.png) top 150px center repeat-x,
+    url(../media/bg/kesi_sprite_back.png) top 200px left no-repeat,
+  */
+    var(--bg-60309) bottom 29% right calc(44% - var(--half))
+      / auto 17% no-repeat,
+    var(--bg-kesi) bottom 23% left calc(44% - var(--half))
+      / auto 20% no-repeat,
+    var(--bg-korai) bottom left 7% / auto 19% no-repeat,
+    var(--bg-mirai) top calc(5em + 3%) right 6% / 20% auto no-repeat,
+    var(--bg-niss) top 30% left calc(31% - var(--half))
+      / auto 20% no-repeat,
+    var(--bg-niss2) top 51% right calc(33% - var(--half))
+      / auto 20% no-repeat,
+    var(--bg-nisse) top 29% right calc(36% - var(--half))
+      / auto 15% no-repeat,
+    var(--bg-qt) bottom 41% left calc(24% - var(--half))
+      / auto 18% no-repeat,
+    var(--bg-qt2) top 10% left calc(46% - var(--half))
+      / auto 16% no-repeat,
+    var(--bg-prickly) bottom 9% right calc(28% - var(--half))
+      / auto 15% no-repeat,
+    var(--base-background);
+  background-blend-mode: overlay;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    background-blend-mode: soft-light;
+  }
+}
+
+@media (prefers-reduced-data: reduce) {
+  html {
+    background: var(--base-background);
+    background-blend-mode: unset;
+  }
+}
+
+
 /* LAYOUT BASICS */
 
 body {
@@ -37,14 +110,6 @@ html {
   --breathe: calc(var(--side) * .1);
 }
 
-/* cube shadow */
-html {
-  background:
-    radial-gradient(circle, hsl(var(--shadow-hsl) / 70%), transparent 58%),
-    var(--gradient);
-  background-blend-mode: multiply;
-}
-
 #outer {
   --transform-origin: 50% 50% calc(var(--nhalf) - min(6vh, 6vw));
 }
@@ -74,10 +139,10 @@ html {
   #cube:not([data-moving]) > section {
     animation: breathe 9s infinite ease-in-out;
   }
-}
 
-@keyframes breathe {
-  35% { transform: translateZ(var(--breathe)) var(--base-transform); }
+  @keyframes breathe {
+    35% { transform: translateZ(var(--breathe)) var(--base-transform); }
+  }
 }
 
 @media (prefers-reduced-motion: no-preference) {

style/flat.css

@@ -1,6 +1,12 @@
 @media (prefers-reduced-motion: reduce),
        (max-height: 649px), (max-width: 649px) {
 
+html {
+  --side: 0px;
+  --half: 0px;
+  --nhalf: 0px;
+}
+
 /* LAYOUT */
 
 body {