adjust some spacing

index.html

@@ -360,7 +360,9 @@
             <a href=https://brinsolomon.com title=brin class=txt>brin</a>
 
           <li id=clip>
-            <a href=https://lizard.tools title=clip class=txt>clip</a>
+            <a href=https://lizard.tools title=clip>
+              <img src=media/buttons/clip.png alt=clip>
+            </a>
 
           <li id=cervine>
             <a href=https://cervine.online title=cervine.online>
@@ -373,6 +375,60 @@
               <img src=media/buttons/pearshapes.png
                    alt='syndication outreach portal'>
             </a>
+
+          <li id=coda>
+            <a href=https://codarobo.online title=coda>
+              <img src=media/buttons/coda.png alt=coda>
+            </a>
+
+          <li id=lifning>
+            <a href=https://lifning.info title=lifning>
+              <img src=media/buttons/lifning.png alt=lifning>
+            </a>
+
+          <li id=hell-labs>
+            <a href=https://hell-labs.itch.io title='hell labs'>
+              <picture>
+                <source srcset=media/buttons/hell-labs-still.png
+                        media='(prefers-reduced-motion: reduce)'>
+                <img src=media/buttons/hell-labs.gif alt='hell labs'>
+              </picture>
+            </a>
+
+          <li id=gabu>
+            <a href=https://gabu.dog title=gabu>
+              <img src=media/buttons/gabu.png alt=gabu>
+            </a>
+
+          <li id=konsti>
+            <a href=https://konsti.club title=konsti class=txt>konsti</a>
+
+          <li id=katja>
+            <a href=https://rarf.zone title=katja>
+              <img src=media/buttons/katja.png alt=katja>
+            </a>
+
+          <li id=odoben>
+            <a href=https://odoben.space title=odoben>
+              <img src=media/buttons/odoben.png alt=odoben>
+            </a>
+
+          <li id=lena>
+            <a href=https://techromancer.club title=lena class=txt>lena</a>
+
+          <li id=serena>
+            <a href=https://bigbeandotgov.carrd.co title=serena
+               class=txt>serena</a>
+
+          <li id=mathie>
+            <a href=https://mathie.gay title=mathie>
+              <img src=media/buttons/mathie.png alt=mathie>
+            </a>
+
+          <li id=therra>
+            <a href=https://smolderg.xyz title=smolderg.xyz>
+              <img src=media/buttons/therra.png alt=smolderg.xyz>
+            </a>
         </ul>
       </section>
 

script/run.ts

@@ -178,7 +178,7 @@ export function applyConfiguration(): void {
     const place = current[pane];
 
     element.style.setProperty('--base-transform', placeToTransform(place));
-    element.style.pointerEvents = place[0] == 'front' ? 'auto' : 'none';
+    element.inert = place[0] != 'front';
   }
 }
 

style/base.css

@@ -147,10 +147,11 @@ h2 { margin-top: 0; }
 
 h3 {
   text-align: center;
-  margin-top: 0;
   margin-bottom: 0.25em;
 }
 
+h2 + section h3 { margin-top: 0; }
+
 strong { font-weight: 700; }
 
 #cube section ::selection {
@@ -474,7 +475,6 @@ strong { font-weight: 700; }
 #friends a:hover { text-decoration: none; }
 
 #friends #khr    a { background: #ffab71; color: #71153e; }
-#friends #dusty  a { background: #fbd265; color: #805c2d; }
 #friends #ionchy a { background: #feca2f; color: #1b1505; }
 #friends #tenna  a { background: #6095da; color: #243224; }
 #friends #river  a { background: #98d8e7; color: #d67d28; }
@@ -482,7 +482,9 @@ strong { font-weight: 700; }
 #friends #codl   a { background: #87261f; color: #edb970; }
 #friends #violet a { background: #8c2bd8; color: #dddddd; }
 #friends #brin   a { background: #1e1e1e; color: #ff4400; }
-#friends #clip   a { background: #2f2a2b; color: #e8d057; }
+#friends #konsti a { background: #060038; color: #ffcccc; }
+#friends #lena   a { background: #e3ccf7; color: #000000; }
+#friends #serena a { background: #e787ad; color: #204; }
 
 #nissbuttons {
   margin: 2em auto 0;