diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-05-02 18:57:29 +0200 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2022-05-03 15:22:24 +0200 |
| commit | 732d0943f8041d76262222a092b014f2557085ef (patch) | |
| tree | 16f6f76648b479a9591400ab15bb3e9c914f2226 /src/styles | |
| parent | ca921d7536cfe950b5a7d442977bbf900b48faf4 (diff) | |
chore: add homepage
Diffstat (limited to 'src/styles')
| -rw-r--r-- | src/styles/pages/Home.module.scss | 49 | ||||
| -rw-r--r-- | src/styles/pages/home.module.scss | 36 |
2 files changed, 36 insertions, 49 deletions
diff --git a/src/styles/pages/Home.module.scss b/src/styles/pages/Home.module.scss deleted file mode 100644 index 8225a57..0000000 --- a/src/styles/pages/Home.module.scss +++ /dev/null @@ -1,49 +0,0 @@ -@use "@styles/abstracts/functions" as fun; -@use "@styles/abstracts/placeholders"; - -.links-list { - @extend %flex-list; - - gap: var(--spacing-md); - margin: 0 0 var(--spacing-md); -} - -.icon--feed { - width: fun.convert-px(20); -} - -:global { - [data-theme="dark"] { - :local { - .icon--feed { - filter: brightness(0.8) contrast(1.1); - } - } - } -} - -.section { - --icon-size: #{fun.convert-px(20)}; - - composes: grid from "@styles/layout/_grid.scss"; - padding: var(--spacing-md) 0; - background: var(--color-bg-secondary); - - &:not(:last-child) { - border-bottom: fun.convert-px(1) solid var(--color-border); - } - - &:nth-child(2n) { - background: var(--color-bg); - } - - > * { - grid-column: 2; - } - - :global { - .wp-block-columns { - margin: 0 0 var(--spacing-md); - } - } -} diff --git a/src/styles/pages/home.module.scss b/src/styles/pages/home.module.scss new file mode 100644 index 0000000..873a5a9 --- /dev/null +++ b/src/styles/pages/home.module.scss @@ -0,0 +1,36 @@ +@use "@styles/abstracts/functions" as fun; +@use "@styles/abstracts/mixins" as mix; + +.section { + --card-width: 25ch; + + &:last-of-type { + border-bottom: none; + } +} + +.columns { + margin: 0 0 var(--spacing-sm); +} + +.list { + margin: 0 0 var(--spacing-sm); + + &--cards { + @include mix.media("screen") { + @include mix.dimensions("md") { + margin: 0 calc(var(--spacing-sm) * -1) var(--spacing-sm); + } + } + } +} + +.icon { + --icon-size: #{fun.convert-px(20)}; + + margin-right: var(--spacing-2xs); + + &--feed { + width: var(--icon-size); + } +} |
