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/styles/layout/_grid.scss | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)
 create mode 100644 src/styles/layout/_grid.scss

(limited to 'src/styles/layout/_grid.scss')

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));
+    }
+  }
+}
-- 
cgit v1.2.3