1 files changed, 37 insertions, 0 deletions
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;
 }