From 01119534ff0d3c4128dc2a5847697bc4710e6971 Mon Sep 17 00:00:00 2001
From: Alex Scerba <alex@scerba.org>
Date: Thu, 18 Sep 2025 10:46:41 -0500
Subject: Add masonry styling for homepage.

---
 static/style.css | 37 +++++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/static/style.css b/static/style.css
index 4cfdf6b..1f608ee 100644
--- a/static/style.css
+++ b/static/style.css
@@ -84,6 +84,43 @@ article, .main-bg, .entries {
   box-shadow: 0 0 1em 0.4em rgb(224, 224, 224);
 }
 
+/* START experimental masonry. CREDIT: https://piccalil.li/blog/a-simple-masonry-like-composable-layout/ */
+.masonry {
+  --gutter: 2rem;
+  --flow-space: var(--gutter);
+  --switcher-target-container-width: 40rem;
+}
+
+.masonry img {
+  width: 100%;
+}
+
+.switcher {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gutter, 1em);
+  align-items: var(--switcher-vertical-alignment, flex-start);
+}
+
+.switcher > * {
+  flex-grow: 1;
+  flex-basis: calc(
+    (var(--switcher-target-container-width, 40rem) - 100%) * 999
+  );
+}
+
+.flow > * + * {
+  margin-block-start: var(--flow-space, 1em);
+}
+
+.wrapper {
+  max-width: 80rem;
+  margin-inline: auto;
+  margin-top: 2rem;
+}
+
+/* END experimental masonry */
+
 article {
   word-wrap: break-word;
 }
-- 
cgit v1.2.3