From 8a6f09b564d5d2f02d0a2605f6b52070a910aaa3 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Mon, 25 Apr 2022 12:57:12 +0200 Subject: chore: add a PageLayout component --- src/components/organisms/layout/posts-list.module.scss | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) (limited to 'src/components/organisms/layout/posts-list.module.scss') diff --git a/src/components/organisms/layout/posts-list.module.scss b/src/components/organisms/layout/posts-list.module.scss index 4d80442..f072082 100644 --- a/src/components/organisms/layout/posts-list.module.scss +++ b/src/components/organisms/layout/posts-list.module.scss @@ -1,3 +1,4 @@ +@use "@styles/abstracts/functions" as fun; @use "@styles/abstracts/mixins" as mix; @use "@styles/abstracts/placeholders"; @@ -5,8 +6,9 @@ @include mix.media("screen") { @include mix.dimensions("md") { display: grid; - grid-template-columns: max-content minmax(0, 1fr); + grid-template-columns: fun.convert-px(150) minmax(0, 1fr); align-items: first baseline; + margin-left: fun.convert-px(-150); } } } @@ -16,6 +18,7 @@ .item { margin-bottom: var(--spacing-md); + border-bottom: fun.convert-px(1) solid var(--color-border); } } @@ -24,9 +27,13 @@ @include mix.dimensions("md") { grid-column: 1; justify-self: end; - margin-right: var(--spacing-lg); + padding-right: var(--spacing-lg); position: sticky; top: var(--spacing-xs); } + + @include mix.dimensions("lg") { + padding-right: var(--spacing-xl); + } } } -- cgit v1.2.3