From 8c939bf37284fe869422284389b20402f20628d2 Mon Sep 17 00:00:00 2001
From: Chris Banes <chris@banes.me>
Date: Sat, 17 Dec 2022 15:58:50 +0000
Subject: [PATCH] Use grid rather than flexbox for recent articles

Currently the items include some inner padding, which means
that the items have some leading spacing on the left/right
which don't align with the keyline.

This PR updates this to use a grid, with a fixed number of
columns depending on the screen size.
---
 assets/css/compiled/main.css          | 37 ++++++++++----
 layouts/partials/recent-articles.html | 74 ++++++++++++---------------
 2 files changed, 60 insertions(+), 51 deletions(-)

diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index 50e7f026..71150562 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -1446,6 +1446,10 @@ select {
   display: flex;
 }
 
+.grid {
+  display: grid;
+}
+
 .hidden {
   display: none;
 }
@@ -1526,10 +1530,6 @@ select {
   width: 100%;
 }
 
-.w-36 {
-  width: 9rem;
-}
-
 .w-24 {
   width: 6rem;
 }
@@ -1542,6 +1542,10 @@ select {
   width: 1.5rem;
 }
 
+.w-36 {
+  width: 9rem;
+}
+
 .min-w-0 {
   min-width: 0px;
 }
@@ -1653,6 +1657,10 @@ select {
   justify-content: space-between;
 }
 
+.gap-4 {
+  gap: 1rem;
+}
+
 .space-y-10 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1749,11 +1757,6 @@ select {
   border-color: rgba(var(--color-neutral-300), var(--tw-border-opacity));
 }
 
-.border-neutral-400 {
-  --tw-border-opacity: 1;
-  border-color: rgba(var(--color-neutral-400), var(--tw-border-opacity));
-}
-
 .border-neutral-200 {
   --tw-border-opacity: 1;
   border-color: rgba(var(--color-neutral-200), var(--tw-border-opacity));
@@ -3440,6 +3443,10 @@ body:has(#menu-controller:checked) {
     max-width: 65ch;
   }
 
+  .sm\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .sm\:flex-row {
     flex-direction: row;
   }
@@ -3543,6 +3550,10 @@ body:has(#menu-controller:checked) {
     width: auto;
   }
 
+  .md\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
   .md\:justify-start {
     justify-content: flex-start;
   }
@@ -3706,10 +3717,18 @@ body:has(#menu-controller:checked) {
   .xl\:w-1\/4 {
     width: 25%;
   }
+
+  .xl\:grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
 }
 
 @media (min-width: 1536px) {
   .\32xl\:w-1\/5 {
     width: 20%;
   }
+
+  .\32xl\:grid-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
 }
\ No newline at end of file
diff --git a/layouts/partials/recent-articles.html b/layouts/partials/recent-articles.html
index 44364c07..72eace39 100644
--- a/layouts/partials/recent-articles.html
+++ b/layouts/partials/recent-articles.html
@@ -8,46 +8,36 @@
 
 {{ if .Site.Params.homepage.cardView | default false }}
 {{ if .Site.Params.homepage.cardViewScreenWidth | default false }}
-<section class="relative w-screen max-w-[1600px]" style="left: calc(max(-50vw,-800px) + 50%);">
-  <div class="flex flex-wrap pl-8 pr-8">
-    {{ else }}
-    <section class="w-full">
-      <div class="flex flex-wrap">
-        {{ end }}
-
-        {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in"
-        .Site.Params.mainSections)).Pages }}
-
-        {{ if .Site.Params.homepage.cardViewScreenWidth | default false }}
-        <div class="flex flex-wrap w-full p-4 sm:w-1/2 md:w-1/3 xl:w-1/4 2xl:w-1/5">
-          {{ else }}
-          <div class="flex flex-wrap w-full p-4 sm:w-1/2 md:w-1/3">
-            {{ end }}
-
-            {{ partial "article-link-card.html" . }}
-          </div>
-          {{ end }}
-        </div>
-    </section>
-    {{ else }}
-    <section class="space-y-10 w-full">
-      {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in" .Site.Params.mainSections)).Pages
-      }}
-      {{ partial "article-link.html" . }}
-      {{ end }}
-    </section>
+<section class="relative w-screen max-w-[1600px] grid gap-4 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"
+    style="left: calc(max(-50vw,-800px) + 50%);">
+  {{ else }}
+<section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3">
+  {{ end }}
+    {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in"
+    .Site.Params.mainSections)).Pages }}
+      {{ partial "article-link-card.html" . }}
     {{ end }}
-    {{ if .Site.Params.homepage.showMoreLink | default false }}
-    {{ if index .Site.Params.homepage "showRecentItems" }}
-    {{ $showMoreLinkDest = .Site.Params.homepage.showMoreLinkDest }}
-    {{ end }}
-    <div class="mt-10 flex justify-center">
-      <a href="{{ $showMoreLinkDest }}">
-        <button
-          class="bg-transparent hover:text-primary-500 prose dark:prose-invert font-semibold hover:text-white py-2 px-4 border border-primary-500 hover:border-transparent rounded">
-          {{ i18n "recent.show_more" | markdownify | emojify }}
-        </button>
-      </a>
-    </div>
-    {{ end }}
-    {{ end }}
\ No newline at end of file
+</section>
+{{ else }}
+<section class="space-y-10 w-full">
+  {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in" .Site.Params.mainSections)).Pages
+  }}
+  {{ partial "article-link.html" . }}
+  {{ end }}
+</section>
+{{ end }}
+
+{{ if .Site.Params.homepage.showMoreLink | default false }}
+{{ if index .Site.Params.homepage "showRecentItems" }}
+{{ $showMoreLinkDest = .Site.Params.homepage.showMoreLinkDest }}
+{{ end }}
+<div class="mt-10 flex justify-center">
+  <a href="{{ $showMoreLinkDest }}">
+    <button
+      class="bg-transparent hover:text-primary-500 prose dark:prose-invert font-semibold hover:text-white py-2 px-4 border border-primary-500 hover:border-transparent rounded">
+      {{ i18n "recent.show_more" | markdownify | emojify }}
+    </button>
+  </a>
+</div>
+{{ end }}
+{{ end }}
\ No newline at end of file