diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-05-23 23:08:33 +0200 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2022-05-23 23:08:33 +0200 |
| commit | 525ea4c39c4965d9f6f7941cf203e56190d0ec1c (patch) | |
| tree | 625af4a8988d4f23512b437f064174f55a9e617e /src | |
| parent | c51b5d9a5f217f8aa59c4bdcb04eb3c87f5129b3 (diff) | |
chore: adjust cards list spacing
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/molecules/layout/card.tsx | 2 | ||||
| -rw-r--r-- | src/components/organisms/layout/cards-list.module.scss | 7 | ||||
| -rw-r--r-- | src/styles/pages/projects.module.scss | 4 |
3 files changed, 11 insertions, 2 deletions
diff --git a/src/components/molecules/layout/card.tsx b/src/components/molecules/layout/card.tsx index 68e364a..7bbd040 100644 --- a/src/components/molecules/layout/card.tsx +++ b/src/components/molecules/layout/card.tsx @@ -77,7 +77,7 @@ const Card: FC<CardProps> = ({ {title} </Heading> </header> - {tagline && <div className={styles.tagline}>{tagline}</div>} + <div className={styles.tagline}>{tagline}</div> {meta && ( <footer className={styles.footer}> <Meta diff --git a/src/components/organisms/layout/cards-list.module.scss b/src/components/organisms/layout/cards-list.module.scss index 2763585..6274b93 100644 --- a/src/components/organisms/layout/cards-list.module.scss +++ b/src/components/organisms/layout/cards-list.module.scss @@ -1,3 +1,4 @@ +@use "@styles/abstracts/mixins" as mix; @use "@styles/abstracts/placeholders"; .wrapper { @@ -11,6 +12,12 @@ align-items: stretch; justify-items: stretch; + @include mix.media("screen") { + @include mix.dimensions(null, "sm") { + gap: var(--spacing-lg); + } + } + &--ordered { @extend %reset-ordered-list; } diff --git a/src/styles/pages/projects.module.scss b/src/styles/pages/projects.module.scss index 735a683..fde1f31 100644 --- a/src/styles/pages/projects.module.scss +++ b/src/styles/pages/projects.module.scss @@ -1,9 +1,11 @@ @use "@styles/abstracts/mixins" as mix; .list { + margin-top: var(--spacing-sm); + @include mix.media("screen") { @include mix.dimensions("md") { - margin: 0 calc(var(--spacing-3xl) * -1) var(--spacing-md); + margin: var(--spacing-md) calc(var(--spacing-3xl) * -1) var(--spacing-md); } } } |