descriptions next to buttons

content/index.md

@@ -28,11 +28,50 @@ Sticker by [djuan](https://linktr.ee/mkiiisystem)!
 
 ## cool people buttons go here
 
-{% webButton '/a/button-sofia.png', 'sofia-drawsmore', 'https://sofiadrawsmore.neocities.org/' %}
-{% webButton '/a/button-pebble.gif', 'pebble', 'https://pebble.pet/' %}
-{% webButton '/a/button-quwyou.gif', 'quwyou', 'https://quwyou.com/' %}
+{% css %}
+.button-gallery {
+  list-style: none;
+  padding-left: 0;
+  display: flex;
+  flex-wrap: wrap;
+}
+.button-card {
+  width: 20rem;
+  flex-grow: 1;
+  margin-bottom: 0.5rem;
+}
+.button-card img {
+  float: left;
+  margin-right: 0.5rem;
+}
+.button-misc {
+  width: 100%;
+}
+{% endcss %}
+
+<div class='button-gallery'>
+<div class='button-card'>
+  {% webButton '/a/button-sofia.png', 'sofia-drawsmore', 'https://sofiadrawsmore.neocities.org/' %}
+  A real cool artist bird! Also writes <a href="https://questden.org/kusaba/questarch/res/1002454.html">Slime Quest</a>!
+</div>
+<div class='button-card'>
+  {% webButton '/a/button-pebble.gif', 'pebble', 'https://pebble.pet/' %}
+  A Cohost alum who also runs <a href="https://critter.cafe">Critter Cafe</a>!
+</div>
+<div class='button-card'>
+  {% webButton '/a/button-quwyou.gif', 'quwyou', 'https://quwyou.com/' %}
+  Real actual rivulet rainworld :3
+</div>
+<div class='button-card'>
+  {% webButton '/a/button-nickyflowers.gif', 'nicky flowers', 'https://nickyflowers.com/' %}
+  One of the bloggers of all time. Also writes <a href="https://verylittlenews.org/">Very Little News</a>.
+</div>
+<div class='button-misc'>
 {% webButton '/a/button-alterae.webp', 'alterae', 'https://alterae.online/' %}
+{% webButton '/a/button-made-with-11ty.png', 'made with 11ty', 'https://www.11ty.dev/' %}
 {% webButton '/a/button-88by31.gif', '88 by 31', 'https://cyber.dabamos.de/88x31/' %}
+</div>
+</div>
 
 ## my stuff