From fca6e17c10a9a737c5fae7417eec89701446875a Mon Sep 17 00:00:00 2001 From: Armand Philippot 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 ++++---- 4 files changed, 7 insertions(+), 15 deletions(-) (limited to 'src/components') 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; } -- cgit v1.2.3