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.

4 files changed, 44 insertions, 59 deletions

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;
   }