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

@@ -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));
+  }
 }

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%);">
+<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"
-  <div class="flex flex-wrap pl-8 pr-8">
+    style="left: calc(max(-50vw,-800px) + 50%);">
   {{ else }}
-    <section class="w-full">
+<section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3">
-      <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>
-    </section>
+{{ else }}
-    {{ else }}
+<section class="space-y-10 w-full">
-    <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>
-    {{ end }}
+{{ end }}
-    {{ if .Site.Params.homepage.showMoreLink | default false }}
+
-    {{ if index .Site.Params.homepage "showRecentItems" }}
+{{ if .Site.Params.homepage.showMoreLink | default false }}
-    {{ $showMoreLinkDest = .Site.Params.homepage.showMoreLinkDest }}
+{{ if index .Site.Params.homepage "showRecentItems" }}
-    {{ end }}
+{{ $showMoreLinkDest = .Site.Params.homepage.showMoreLinkDest }}
-    <div class="mt-10 flex justify-center">
+{{ 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>
+</div>
-    {{ end }}
+{{ end }}
-    {{ end }}
+{{ end }}