tweak links face

index.html

@@ -121,40 +121,21 @@
     <section id=links>
       <h2> where else do you exist </h2>
 
-      <section id=gecsites>
-        <h3> gec sites </h3>
-
       <ul class='zoom boxy'>
         <li id=gallery> <a href=https://gallery.niss.website>gallery</a>
         <li id=code> <a href=https://git.rhiannon.website>code</a>
         <li id=blog> <a href=https://blog.niss.website>blog</a>
-        </ul>
+        <li id=chitter> <a href=https://chitter.xyz/@niss>fediverse</a>
-      </section>
+        <li id=bluesky> <a href=https://niss.yummy.cricket>bluesky</a>
-
+        <!-- <li id=artfight> <a href=https://artfight.net/~nissss>art fight</a> -->
-      <section id=galleries>
-        <h3> gallery sites </h3>
-
-        <ul class='zoom boxy'>
         <li id=itaku> <a href=https://itaku.ee/profile/niss>itaku</a>
         <li id=weasyl> <a href=https://www.weasyl.com/~niss>weasyl</a>
         <li id=fa> <a href=https://furaffinity.net/user/niss>furaffinity</a>
         <li id=da> <a href=https://www.deviantart.com/2gecs>deviantart</a>
         <li id=kofi> <a href=https://ko-fi.com/nissss>ko-fi</a>
-          <!-- <li id=artfight> <a href=https://artfight.net/~nissss>art fight</a> -->
       </ul>
     </section>
 
-      <section id=creaturefeature>
-        <h3> other stuff </h3>
-
-        <ul class='zoom boxy'>
-          <li id=chitter> <a href=https://chitter.xyz/@niss>fediverse</a>
-          <!-- <li id=cohost> <a href=https://cohost.org/niss>cohost</a> -->
-          <li id=bluesky> <a href=https://niss.yummy.cricket>bluesky</a>
-        </ul>
-      </section>
-    </section>
-
     <section id=friends>
       <h2> more websites please </h2>
 

style/base.css

@@ -309,16 +309,16 @@ actually exists
     --bg-angle: 210deg;
 
     ul {
+      font-size: 125%;
       padding: 0;
       width: 100%;
       display: flex;
       flex-wrap: wrap;
-      gap: 4px;
+      gap: 0.5ex;
     }
     li {
-      flex: 1 0 10em;
+      flex: 1 0 40%;
       list-style: none;
-      --icon-bg: var(--fg);
     }
 
     a {
@@ -330,7 +330,7 @@ actually exists
       border: 2px solid black;
       background:
         linear-gradient(to right, transparent 3em, var(--bg) 3em),
-        var(--icon) calc(1.5em - 16px) center / 32px auto no-repeat,
+        var(--icon) 0.5em center / 2em auto no-repeat,
         var(--icon-bg);
 
       color: var(--fg);
@@ -339,6 +339,9 @@ actually exists
     }
   }
 
+  /* (overridable default) */
+  @layer { #links li { --icon-bg: var(--fg); } }
+
   #gallery {
     --icon: url(../media/favicon.webp);
     --fg:   hsl(280deg 38% 43%);
@@ -357,7 +360,7 @@ actually exists
     --icon: url(../media/icons/blog.webp);
     --fg: #ffeebb;
     --bg: #332255;
-    /* image-rendering: pixelated; */
+    image-rendering: pixelated;
     a {
       background-position: center, left calc(1.5em - 51px) center, center;
       background-size: contain;