diff options
| author | Alex Scerba <alex@scerba.org> | 2025-09-18 10:46:41 -0500 |
|---|---|---|
| committer | Alex Scerba <alex@scerba.org> | 2025-09-18 10:46:41 -0500 |
| commit | 01119534ff0d3c4128dc2a5847697bc4710e6971 (patch) | |
| tree | 920bce650a755f851cca8b5dda6c2081a42db3c4 | |
| parent | 47e0e869942c224c1d96d8c42730511ae0649870 (diff) | |
Add masonry styling for homepage.
| -rw-r--r-- | static/style.css | 37 |
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;
}
|