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,26 +36,11 @@
     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 {
+    &.masonry-item {
+      .post-cover {
         width: 115%;
         margin: 40px -30px;
 
@@ -65,10 +50,7 @@
         }
       }
     }
-    }
-  }
 
-  .post {
     &-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,9 +12,10 @@
     {{ partial "pagination.html" . }}
     {{- end }}
 
-    <div class="posts-list posts-list-columns">
+    <div class="posts-list masonry">
         {{ range $paginator.Pages }}
-        <div class="post">
+        <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>
@@ -47,8 +48,9 @@
                     {{- $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 }}" />
+                    <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 }}" />
@@ -70,10 +72,12 @@
                     {{- end }}
                 </div>
                 {{- if not .Params.hideReadMore }}
-            <div><a class="read-more button" href="{{.RelPermalink}}">{{ $.Site.Params.ReadMore | default "Read more" }}
+                <div><a class="read-more button"
+                        href="{{.RelPermalink}}">{{ $.Site.Params.ReadMore | default "Read more" }}
                         →</a></div>
                 {{- end }}
             </div>
+        </div>
         {{- end }}
     </div>