From 7cea6e5da2d50a60556a61e84e9505aa18dce9d8 Mon Sep 17 00:00:00 2001
From: xdavidwu <xdavidwuph@gmail.com>
Date: Wed, 26 May 2021 22:35:31 +0800
Subject: [PATCH] grid: remake with css grid

---
 _sass/minimal-mistakes/_archive.scss | 64 +++++-----------------------
 1 file changed, 10 insertions(+), 54 deletions(-)

diff --git a/_sass/minimal-mistakes/_archive.scss b/_sass/minimal-mistakes/_archive.scss
index 271087e..298d8c1 100644
--- a/_sass/minimal-mistakes/_archive.scss
+++ b/_sass/minimal-mistakes/_archive.scss
@@ -130,69 +130,25 @@
 /*
    Grid view
    ========================================================================== */
+.grid__wrapper {
+  display: grid;
+  grid-template-columns: 1fr;
 
-.archive {
-  .grid__wrapper {
-    /* extend grid elements to the right */
-
-    @include breakpoint($large) {
-      margin-right: -1 * $right-sidebar-width-narrow;
-    }
+  @include breakpoint($small) {
+    grid-template-columns: 1fr 1fr;
+  }
 
-    @include breakpoint($x-large) {
-      margin-right: -1 * $right-sidebar-width;
-    }
+  @include breakpoint($medium) {
+    grid-template-columns: repeat(4, 1fr);
   }
+
+  gap: 8px;
 }
 
 .grid__item {
   margin-bottom: 2em;
   overflow: hidden;
 
-  @include breakpoint($small) {
-    float: left;
-    width: span(5 of 10);
-
-    &:nth-child(2n + 1) {
-      clear: both;
-      margin-left: 0;
-    }
-
-    &:nth-child(2n + 2) {
-      clear: none;
-      margin-left: gutter(of 10);
-    }
-  }
-
-  @include breakpoint($medium) {
-    margin-left: 0; /* override margin*/
-    margin-right: 0; /* override margin*/
-    width: span(3 of 12);
-
-    &:nth-child(2n + 1) {
-      clear: none;
-    }
-
-    &:nth-child(4n + 1) {
-      clear: both;
-    }
-
-    &:nth-child(4n + 2) {
-      clear: none;
-      margin-left: gutter(1 of 12);
-    }
-
-    &:nth-child(4n + 3) {
-      clear: none;
-      margin-left: gutter(1 of 12);
-    }
-
-    &:nth-child(4n + 4) {
-      clear: none;
-      margin-left: gutter(1 of 12);
-    }
-  }
-
   .page__meta {
     margin: 0 0 4px;
     font-size: 0.6em;
-- 
2.43.0