From 14d9e0d018f96efc246e141b66e012a7d89509d4 Mon Sep 17 00:00:00 2001
From: Nat Lasseter <user@4574.co.uk>
Date: Sat, 4 Oct 2025 21:06:49 +0100
Subject: try flex

---
 cgi/whisky-shelf.cgi | 7 +++----
 static/styles.css    | 9 +++++++--
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/cgi/whisky-shelf.cgi b/cgi/whisky-shelf.cgi
index bae8acf..149dd70 100644
--- a/cgi/whisky-shelf.cgi
+++ b/cgi/whisky-shelf.cgi
@@ -2,10 +2,9 @@ require "json"
 
 def shelf_contents(data)
   data.map { |bottle|
-    $cgi.div(class: "bottle") { 
+    $cgi.div { 
       $cgi.h3 { bottle["name"] } +
-      $cgi.img(width: "300px",
-               height: "500px",
+      $cgi.img(class: "bottle",
                src: "shelf/#{bottle["image"]}")
     }
   }.join
@@ -16,7 +15,7 @@ data = JSON.parse(File.read("../inc/shelf.json"))
 $page =
   $cgi.div {
     $cgi.h2 { "What's on my shelf?" } +
-    $cgi.div { shelf_contents(data) }
+    $cgi.div(class: "shelf") { shelf_contents(data) }
   }
 
 # vim: set filetype=ruby:
diff --git a/static/styles.css b/static/styles.css
index 91be7ce..b4e5f7c 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -30,8 +30,13 @@ div {
   padding: 1em;
 }
 
-div.bottle {
-  float: left;
+div#shelf {
+  display: flex;
+}
+
+img.bottle {
+  max-width: 250px;
+  max-height: 400px;
 }
 
 ul.toplinks {
-- 
cgit v1.2.3