separate 88x31 buttons

_data/88x31.toml

@@ -1,4 +1,12 @@
-buttons = [
-  { image = "https://vanityruins.neocities.org/8831/8831.gif", name = "vanityruins", link = "https://vanityruins.neocities.org" },
-  { image = "soniweb", name = "soniweb", link = "https://soniweb.org/" }
+[buttons]
+people = [
+    { image = "soniweb", name = "soniweb", link = "https://soniweb.org/" },
+    { image = "https://vanityruins.neocities.org/8831/8831.gif", name = "vanityruins", link = "https://vanityruins.neocities.org" },
+    { image = "https://saint-images.neocities.org/images/buttons/me-zanarkand.png", name = "saint-images", link = "https://saint-images.neocities.org"},
+    { image = "cidoku", name = "Cidoku", link = "https://cidoku.net" }
 ]
+
+misc = [
+    { image = "parentaladvisory", alt = "sorry..." }
+]
+

_layouts/home.njk

@@ -2,10 +2,10 @@
 layout: base
 ---
 <div class="welcome-aside-left">
-    <div class="buttons box">
-        <h3><i>please visit...</i></h3>
-        <div>
-            {% for button in 88x31.buttons %}
+    <div class="buttons-wrapper box">
+        <h2><i>please visit...</i></h3>
+        <div class="buttons">
+            {% for button in 88x31.buttons.people.slice(0, 5) %}
             <a href="{{ button.link }}" title="{{ button.name }}">
             {% if button.image.startsWith("http") %}
                 <img src="{{ button.image }}" alt="{{ button.name }}">