From fca6e17c10a9a737c5fae7417eec89701446875a Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Sun, 9 Jan 2022 16:58:23 +0100
Subject: refactor(styles): use compose to declare grid layouts once

I'm using same grid layouts in multiple places. To avoid maintenance
issue, I think it is better to declare the grid once and to import its
declaration where it is needed. Thanks to CSS modules, I can use
compose to do that.
---
 src/components/Breadcrumb/Breadcrumb.module.scss |  6 +--
 src/components/Header/Header.module.scss         |  2 +-
 src/components/PostHeader/PostHeader.module.scss |  6 +--
 src/components/PostsList/PostsList.module.scss   |  8 ++--
 src/pages/blog/index.tsx                         | 18 ++++----
 src/styles/layout/_grid.scss                     | 27 ++++++++++++
 src/styles/pages/Home.module.scss                |  5 +--
 src/styles/pages/Listing.module.scss             | 19 +++++----
 src/styles/pages/Page.module.scss                | 52 ++----------------------
 9 files changed, 59 insertions(+), 84 deletions(-)
 create mode 100644 src/styles/layout/_grid.scss

(limited to 'src')

diff --git a/src/components/Breadcrumb/Breadcrumb.module.scss b/src/components/Breadcrumb/Breadcrumb.module.scss
index 98a11a4..b8fadf8 100644
--- a/src/components/Breadcrumb/Breadcrumb.module.scss
+++ b/src/components/Breadcrumb/Breadcrumb.module.scss
@@ -3,11 +3,7 @@
 @use "@styles/abstracts/placeholders";
 
 .wrapper {
-  display: grid;
-  grid-template-columns:
-    minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 80ch)
-    minmax(0, 1fr);
-  align-items: center;
+  composes: grid from "@styles/layout/_grid.scss";
   padding: var(--spacing-md) 0;
 }
 
diff --git a/src/components/Header/Header.module.scss b/src/components/Header/Header.module.scss
index 4ad4ae5..96b8642 100644
--- a/src/components/Header/Header.module.scss
+++ b/src/components/Header/Header.module.scss
@@ -3,7 +3,7 @@
 .wrapper {
   display: grid;
   grid-template-columns:
-    minmax(0, 1fr) min(calc(100vw - var(--spacing-md) * 2), 100ch)
+    minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 100ch)
     minmax(0, 1fr);
   align-items: center;
   padding: var(--spacing-sm) 0 var(--spacing-md);
diff --git a/src/components/PostHeader/PostHeader.module.scss b/src/components/PostHeader/PostHeader.module.scss
index 9997ec3..c5a818c 100644
--- a/src/components/PostHeader/PostHeader.module.scss
+++ b/src/components/PostHeader/PostHeader.module.scss
@@ -2,11 +2,7 @@
 @use "@styles/abstracts/mixins" as mix;
 
 .wrapper {
-  display: grid;
-  grid-template-columns:
-    minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 80ch)
-    minmax(0, 1fr);
-  align-items: center;
+  composes: grid from "@styles/layout/_grid.scss";
   max-width: 100%;
   margin-bottom: var(--spacing-md);
   background: var(--color-bg-secondary);
diff --git a/src/components/PostsList/PostsList.module.scss b/src/components/PostsList/PostsList.module.scss
index 8a6c083..d427ce7 100644
--- a/src/components/PostsList/PostsList.module.scss
+++ b/src/components/PostsList/PostsList.module.scss
@@ -2,10 +2,10 @@
 @use "@styles/abstracts/placeholders";
 
 .section {
-  display: grid;
-  grid-template-columns:
-    minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 80ch)
-    minmax(0, 1fr);
+  --column-3: 0;
+  --grid-gap: 0;
+
+  composes: grid from "@styles/layout/_grid.scss";
   align-items: first baseline;
 }
 
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index 855e6ce..db4b7a8 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -51,16 +51,14 @@ const Blog: NextPageWithLayout<BlogPageProps> = ({ fallback }) => {
       </Head>
       <article className={styles.wrapper}>
         <PostHeader title={t`Blog`} />
-        <div className={styles.body}>
-          <PostsList data={data} showYears={true} />
-          {hasNextPage && (
-            <Button
-              isDisabled={isLoadingMore}
-              clickHandler={() => setSize(size + 1)}
-              position="center"
-            >{t`Load more?`}</Button>
-          )}
-        </div>
+        <PostsList data={data} showYears={true} />
+        {hasNextPage && (
+          <Button
+            isDisabled={isLoadingMore}
+            clickHandler={() => setSize(size + 1)}
+            position="center"
+          >{t`Load more?`}</Button>
+        )}
         <aside className={styles.aside}>
           <ThematicsList />
           <TopicsList />
diff --git a/src/styles/layout/_grid.scss b/src/styles/layout/_grid.scss
new file mode 100644
index 0000000..9efea72
--- /dev/null
+++ b/src/styles/layout/_grid.scss
@@ -0,0 +1,27 @@
+@use "@styles/abstracts/mixins" as mix;
+
+.grid {
+  --grid-gap: var(--spacing-md);
+
+  display: grid;
+  align-items: center;
+  grid-template-columns:
+    minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 80ch)
+    var(--column-3, minmax(0, 1fr));
+  column-gap: var(--grid-gap);
+
+  @include mix.media("screen") {
+    @include mix.dimensions("md") {
+      --grid-gap: var(--spacing-lg);
+      grid-template-columns:
+        minmax(0, 1fr) clamp(60ch, 60vw, 80ch)
+        var(--column-3, minmax(0, 3fr));
+    }
+
+    @include mix.dimensions("lg") {
+      grid-template-columns:
+        minmax(0, 1fr) clamp(50ch, 50vw, 80ch)
+        var(--column-3, minmax(0, 1fr));
+    }
+  }
+}
diff --git a/src/styles/pages/Home.module.scss b/src/styles/pages/Home.module.scss
index 4cbc9b1..79ba251 100644
--- a/src/styles/pages/Home.module.scss
+++ b/src/styles/pages/Home.module.scss
@@ -9,10 +9,7 @@
 }
 
 .section {
-  display: grid;
-  grid-template-columns:
-    minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 80ch)
-    minmax(0, 1fr);
+  composes: grid from "@styles/layout/_grid.scss";
   padding: var(--spacing-md) 0;
   background: var(--color-bg-secondary);
 
diff --git a/src/styles/pages/Listing.module.scss b/src/styles/pages/Listing.module.scss
index 3d1ee9c..fdad3f5 100644
--- a/src/styles/pages/Listing.module.scss
+++ b/src/styles/pages/Listing.module.scss
@@ -2,23 +2,28 @@
 @use "@styles/abstracts/placeholders";
 
 .wrapper {
-  display: grid;
-  grid-template-columns:
-    minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 80ch)
-    minmax(0, 1fr);
+  composes: grid from "@styles/layout/_grid.scss";
   align-items: first baseline;
   padding-bottom: var(--spacing-xl);
 
   > header {
     grid-column: 1 / -1;
   }
+
+  > section {
+    grid-column: 1 / 3;
+  }
+
+  > button {
+    grid-column: 2;
+  }
 }
 
 .body {
   grid-column: 2;
 
   @include mix.media("screen") {
-    @include mix.dimensions("lg") {
+    @include mix.dimensions("md") {
       grid-row: 2;
     }
   }
@@ -37,10 +42,10 @@ li.item {
   margin-top: var(--spacing-lg);
 
   @include mix.media("screen") {
-    @include mix.dimensions("lg") {
+    @include mix.dimensions("md") {
       grid-column: 3;
       grid-row: 2;
-      margin-left: var(--spacing-lg);
+      max-height: 100vh;
       position: sticky;
       top: 0;
       overflow-y: auto;
diff --git a/src/styles/pages/Page.module.scss b/src/styles/pages/Page.module.scss
index cbb9ed1..b3615f6 100644
--- a/src/styles/pages/Page.module.scss
+++ b/src/styles/pages/Page.module.scss
@@ -2,29 +2,7 @@
 @use "@styles/abstracts/mixins" as mix;
 
 .article {
-  display: grid;
-  grid-template-columns:
-    minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 80ch)
-    minmax(0, 1fr);
-  align-items: center;
-
-  @include mix.media("screen") {
-    @include mix.dimensions("md") {
-      grid-template-columns:
-        minmax(0, var(--spacing-xl)) min(
-          calc(100vw - calc(var(--spacing-md) * 2)),
-          80ch
-        )
-        minmax(0, 1fr);
-    }
-
-    @include mix.dimensions("lg") {
-      grid-template-columns:
-        minmax(0, 1fr) clamp(50ch, 50vw, 80ch)
-        minmax(0, 1fr);
-      column-gap: var(--spacing-2xl);
-    }
-  }
+  composes: grid from "@styles/layout/_grid.scss";
 
   > header {
     grid-column: 1 / -1;
@@ -49,7 +27,7 @@
       grid-row: 2 / 4;
       align-self: stretch;
       justify-self: end;
-      padding: 0 0 0 var(--spacing-lg);
+      padding: 0 var(--spacing-sm);
 
       ol:first-of-type {
         font-size: var(--font-size-sm);
@@ -68,45 +46,23 @@
       grid-row: 2 / 5;
       align-self: stretch;
       max-width: min-content;
-      margin-left: var(--spacing-2xl);
+      padding: 0 var(--spacing-sm);
     }
 
     @include mix.dimensions("lg") {
       grid-row: 2 / 4;
-      margin-left: 0;
     }
   }
 }
 
 .comments {
   grid-column: 1 / -1;
-  display: grid;
-  grid-template-columns:
-    minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 80ch)
-    minmax(0, 1fr);
-  align-items: center;
+  composes: grid from "@styles/layout/_grid.scss";
   margin: var(--spacing-md) 0 0;
   padding: var(--spacing-md) 0 var(--spacing-lg);
   background: var(--color-bg-secondary);
   border-top: fun.convert-px(3) solid var(--color-border-lighter);
 
-  @include mix.media("screen") {
-    @include mix.dimensions("md") {
-      grid-template-columns:
-        minmax(0, var(--spacing-xl)) min(
-          calc(100vw - calc(var(--spacing-md) * 2)),
-          80ch
-        )
-        minmax(0, 1fr);
-    }
-
-    @include mix.dimensions("lg") {
-      grid-template-columns:
-        minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 80ch)
-        minmax(0, 1fr);
-    }
-  }
-
   > * {
     grid-column: 2;
   }
-- 
cgit v1.2.3