Use masonry instead of hard rows

themes/maik-blog/assets/js/list_columns.js

@@ -0,0 +1,23 @@
+function resizeItem(masonry, item){
+  let rowHeight = parseInt(window.getComputedStyle(masonry).getPropertyValue('grid-auto-rows'));
+  let rowGap = parseInt(window.getComputedStyle(masonry).getPropertyValue('grid-row-gap'));
+  let rowSpan = Math.ceil((item.querySelector('.masonry-item-content').getBoundingClientRect().height+rowGap)/(rowHeight+rowGap));
+  item.style.gridRowEnd = "span "+rowSpan;
+}
+
+function resizeAll(){
+  let masonry = document.getElementsByClassName("masonry")[0];
+  masonry.style.gridAutoRows = "20px"
+  masonry.style.marginBottom = "80px"
+  let allItems = document.getElementsByClassName("masonry-item");
+
+  for (const item of allItems) {
+    resizeItem(masonry, item)
+  }
+}
+
+window.addEventListener("load", () => {
+  resizeAll()
+
+  window.addEventListener("resize", resizeAll);
+})

themes/maik-blog/assets/scss/_masonry.scss

@@ -0,0 +1,11 @@
+.masonry {
+  display: grid;
+  grid-gap: 20px 90px;
+  grid-template-columns: repeat(2, minmax(250px, 1fr));
+  // grid-auto-rows: 20px; // Set by JavaScript
+  // margin-bottom: calc(4 * 20px); // Set by JavaScript
+
+  @media #{$media-size-medium} {
+    grid-template-columns: 1fr;
+  }
+}

themes/maik-blog/assets/scss/_posts.scss

@@ -36,39 +36,21 @@
     margin: 0;
     padding: 0;
     list-style: none;
-
-    &-columns {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: space-between;
-
-      @media #{$media-size-medium} {
-        justify-content: center;
-      }
-
-      .post {
-        width: 430px;
-        min-width: 45%;
-        margin: 0px;
-
-        @media #{$media-size-medium} {
-          width: 90%;
-        }
-
-        &-cover {
-          width: 115%;
-          margin: 40px -30px;
-
-          img {
-            max-height: 20rem;
-            margin: 0 auto;
-          }
-        }
-      }
-    }
   }
 
   .post {
+    &.masonry-item {
+      .post-cover {
+        width: 115%;
+        margin: 40px -30px;
+
+        img {
+          max-height: 20rem;
+          margin: 0 auto;
+        }
+      }
+    }
+
     &-title {
       font-size: 1.9rem;
       margin: 5px 0 5px 0;

themes/maik-blog/assets/scss/main.scss

@@ -17,3 +17,4 @@
 @import "footer";
 @import "sharing-buttons";
 @import "code";
+@import "masonry";

themes/maik-blog/layouts/partials/javascript.html

@@ -2,7 +2,8 @@
 {{- $menu := resources.Get "js/menu.js" }}
 {{- $theme := resources.Get "js/theme.js" }}
 {{- $nav := resources.Get "js/nav.js" }}
-{{- $secureJS := slice $main $menu $theme $nav | resources.Concat "bundle.js" | resources.Minify | resources.Fingerprint "sha512" }}
+{{- $list_columns := resources.Get "js/list_columns.js" }}
+{{- $secureJS := slice $main $menu $theme $nav $list_columns | resources.Concat "bundle.js" | resources.Minify | resources.Fingerprint "sha512" }}
 <script type="text/javascript" src="{{ $secureJS.RelPermalink }}" integrity="{{ $secureJS.Data.Integrity }}"></script>
 
 {{- if .Site.GoogleAnalytics }}

themes/maik-blog/layouts/writeups/list.html

@@ -12,67 +12,71 @@
     {{ partial "pagination.html" . }}
     {{- end }}
 
-    <div class="posts-list posts-list-columns">
+    <div class="posts-list masonry">
         {{ range $paginator.Pages }}
-        <div class="post">
-            <h2 class="post-title"><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h2>
-            {{- with .Params.Subtitle }}
-            <p class="post-subtitle">{{ . | markdownify }}</p>
-            {{- end }}
-            <div class="post-meta">
-                {{- if .Date }}
-                <span class="post-date">
-                    {{ .Date.Format ($.Site.Params.DateFormatList | default "2006-01-02") }}
+        <div class="post masonry-item">
+            <div class="masonry-item-content">
+                <h2 class="post-title"><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h2>
+                {{- with .Params.Subtitle }}
+                <p class="post-subtitle">{{ . | markdownify }}</p>
+                {{- end }}
+                <div class="post-meta">
+                    {{- if .Date }}
+                    <span class="post-date">
+                        {{ .Date.Format ($.Site.Params.DateFormatList | default "2006-01-02") }}
+                    </span>
+                    {{- end }}
+                    {{- with .Params.Author }}
+                    <span class="post-author">{{ $.Site.Params.WrittenBy | default "Written by" }} {{ . }}</span>
+                    {{- end }}
+                    {{- if $.Site.Params.ShowReadingTimeInList }}
+                    <span class="post-read-time">— {{ .ReadingTime }}
+                        {{ $.Site.Params.MinuteReadingTime | default "min read" }}</span>
+                    {{- end }}
+                </div>
+
+                {{- if .Params.tags }}
+                <span class="post-tags">
+                    {{- range .Params.tags }}
+                    #<a href="{{ (urlize (printf "tags/%s" . )) | absURL }}/">{{ . }}</a>&nbsp;
+                    {{- end }}
                 </span>
                 {{- end }}
-                {{- with .Params.Author }}
-                <span class="post-author">{{ $.Site.Params.WrittenBy | default "Written by" }} {{ . }}</span>
+
+                {{- if .Params.Cover }}
+                <figure class="post-cover">
+                    {{- $img := imageConfig (printf "static/%s" .Params.Cover) }}
+
+                    {{- if .Params.UseRelativeCover }}
+                    <img src="{{ (printf "%s%s" .Permalink .Params.Cover ) }}"
+                        alt="{{ .Title | plainify | default " " }}" width="{{ $img.Width }}"
+                        height="{{ $img.Height }}" />
+                    {{- else }}
+                    <img src="{{ .Params.Cover | absURL }}" alt="{{ .Title | plainify | default " " }}"
+                        width="{{ $img.Width }}" height="{{ $img.Height }}" />
+                    {{- end }}
+
+                    {{- if .Params.CoverCaption }}
+                    <figcaption class="center">{{ .Params.CoverCaption | markdownify }}</figcaption>
+                    {{- end }}
+                </figure>
                 {{- end }}
-                {{- if $.Site.Params.ShowReadingTimeInList }}
-                <span class="post-read-time">— {{ .ReadingTime }}
-                    {{ $.Site.Params.MinuteReadingTime | default "min read" }}</span>
+
+                <div class="post-content">
+                    {{- with .Description }}
+                    {{ . | markdownify }}
+                    {{- else }}
+                    {{- if .Truncated }}
+                    {{ .Summary | markdownify }}
+                    {{- end }}
+                    {{- end }}
+                </div>
+                {{- if not .Params.hideReadMore }}
+                <div><a class="read-more button"
+                        href="{{.RelPermalink}}">{{ $.Site.Params.ReadMore | default "Read more" }}
+                        →</a></div>
                 {{- end }}
             </div>
-
-            {{- if .Params.tags }}
-            <span class="post-tags">
-                {{- range .Params.tags }}
-                #<a href="{{ (urlize (printf "tags/%s" . )) | absURL }}/">{{ . }}</a>&nbsp;
-                {{- end }}
-            </span>
-            {{- end }}
-
-            {{- if .Params.Cover }}
-            <figure class="post-cover">
-                {{- $img := imageConfig (printf "static/%s" .Params.Cover) }}
-
-                {{- if .Params.UseRelativeCover }}
-                <img src="{{ (printf "%s%s" .Permalink .Params.Cover ) }}" alt="{{ .Title | plainify | default " " }}"
-                    width="{{ $img.Width }}" height="{{ $img.Height }}" />
-                {{- else }}
-                <img src="{{ .Params.Cover | absURL }}" alt="{{ .Title | plainify | default " " }}"
-                    width="{{ $img.Width }}" height="{{ $img.Height }}" />
-                {{- end }}
-
-                {{- if .Params.CoverCaption }}
-                <figcaption class="center">{{ .Params.CoverCaption | markdownify }}</figcaption>
-                {{- end }}
-            </figure>
-            {{- end }}
-
-            <div class="post-content">
-                {{- with .Description }}
-                {{ . | markdownify }}
-                {{- else }}
-                {{- if .Truncated }}
-                {{ .Summary | markdownify }}
-                {{- end }}
-                {{- end }}
-            </div>
-            {{- if not .Params.hideReadMore }}
-            <div><a class="read-more button" href="{{.RelPermalink}}">{{ $.Site.Params.ReadMore | default "Read more" }}
-                    →</a></div>
-            {{- end }}
         </div>
         {{- end }}
     </div>