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.

1 files changed, 4 insertions, 48 deletions

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