Make writeup list have two columns

config.toml

@@ -4,7 +4,7 @@ title = "Maik de Kruif"
 languageCode = "en-us"
 theme = "maik-blog"
 
-paginate  = 6
+paginate  = 12
 rssLimit  = 10
 
 copyright = "© Maik de Kruif (maik_dev). All rights reserved."

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

@@ -36,6 +36,36 @@
     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 {

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

@@ -0,0 +1,82 @@
+{{ define "main" }}
+{{ $paginator := .Paginate .Data.Pages }}
+
+<main class="posts posts">
+    <h1>{{ .Title }}</h1>
+
+    {{- if .Content }}
+    <div class="content">{{ .Content }}</div>
+    {{- end }}
+
+    {{- if .Paginator.HasPrev }}
+    {{ partial "pagination.html" . }}
+    {{- end }}
+
+    <div class="posts-list posts-list-columns">
+        {{ 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") }}
+                </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 }}
+
+            {{- 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>
+
+    {{ partial "pagination.html" . }}
+</main>
+{{ end }}