From 269433c6f84ce631d38fd7ffaed04ed3f7c2bf4f Mon Sep 17 00:00:00 2001 From: Volpeon Date: Tue, 20 Apr 2021 21:45:36 +0200 Subject: Support project previews --- assets/css/layouts/_card-grid.scss | 8 ++++++-- assets/css/layouts/_project-grid.scss | 17 +++++++++++++++++ assets/css/layouts/_section.scss | 7 ------- 3 files changed, 23 insertions(+), 9 deletions(-) create mode 100644 assets/css/layouts/_project-grid.scss (limited to 'assets/css/layouts') diff --git a/assets/css/layouts/_card-grid.scss b/assets/css/layouts/_card-grid.scss index cbc4388..7c8ad8c 100644 --- a/assets/css/layouts/_card-grid.scss +++ b/assets/css/layouts/_card-grid.scss @@ -1,13 +1,17 @@ @include namespace('card-grid') { @include store(( --dims: ( - --card-width: 17em + --col-width: 17em ) )); @include layout(namespace()) { display: grid; - grid-template-columns: repeat(auto-fit, minmax(#{prop(--dims --card-width)}, 1fr)); + grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr)); gap: .6rem; + + @include media('<=sm') { + grid-template-columns: 1fr; + } } } diff --git a/assets/css/layouts/_project-grid.scss b/assets/css/layouts/_project-grid.scss new file mode 100644 index 0000000..df2952b --- /dev/null +++ b/assets/css/layouts/_project-grid.scss @@ -0,0 +1,17 @@ +@include namespace('project-grid') { + @include store(( + --dims: ( + --col-width: 26em + ) + )); + + @include layout(namespace()) { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr)); + gap: 1rem; + + @include media('<=sm') { + grid-template-columns: 1fr; + } + } +} diff --git a/assets/css/layouts/_section.scss b/assets/css/layouts/_section.scss index 70ace4c..51e3dc8 100644 --- a/assets/css/layouts/_section.scss +++ b/assets/css/layouts/_section.scss @@ -25,7 +25,6 @@ left: 0; flex-direction: row; justify-self: flex-start; - padding-right: prop(--dims --outer, $global: true); font-size: 1 / 16 * 15em; &::after { @@ -38,11 +37,5 @@ border-top: 1px solid prop(--colors --border); } } - - @include media('<=sm') { - @include element('head') { - padding-right: 0; - } - } } } -- cgit v1.2.3-54-g00ecf