From 312015e8f74ca1738e7160e5d66cad9dcb07c6fd Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 29 Dec 2021 15:51:49 +0100 Subject: Initial gallery macro --- assets/css/components/_gallery.scss | 25 +++++++++++++++++++++++++ assets/css/components/_header.scss | 9 +++++++++ assets/css/objects/_icon.scss | 2 +- assets/css/style.scss | 1 + 4 files changed, 36 insertions(+), 1 deletion(-) create mode 100644 assets/css/components/_gallery.scss (limited to 'assets/css') diff --git a/assets/css/components/_gallery.scss b/assets/css/components/_gallery.scss new file mode 100644 index 0000000..651d873 --- /dev/null +++ b/assets/css/components/_gallery.scss @@ -0,0 +1,25 @@ +@include namespace('gallery') { + @include store(( + --dims: ( + --col-width: 17em + ) + )); + + @include component(namespace()) { + margin-top: $line-height * 1rem; + + @include element('items') { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr)); + gap: 20px; + } + + @include element('item') { + display: block; + } + + @include element('img') { + display: block; + } + } +} diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss index 56d09cd..60f4e05 100644 --- a/assets/css/components/_header.scss +++ b/assets/css/components/_header.scss @@ -70,10 +70,19 @@ height: prop(--dims --icon); } + @include modifier('fixed') { + position: fixed; + } + @include media('>=lg') { position: sticky; + z-index: 100; top: 0; margin-bottom: calc(-.75 * #{prop(--dims --height)}); + + @include modifier('fixed') { + position: fixed; + } } @media print { diff --git a/assets/css/objects/_icon.scss b/assets/css/objects/_icon.scss index f80f422..53f6f78 100644 --- a/assets/css/objects/_icon.scss +++ b/assets/css/objects/_icon.scss @@ -20,7 +20,7 @@ @include modifier('snow') { position: fixed; - z-index: 9999; + z-index: 1000; top: -1.2em; width: 1em; height: 1em; diff --git a/assets/css/style.scss b/assets/css/style.scss index db2d4cb..45b733d 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -17,6 +17,7 @@ @import 'components/footer'; @import 'components/card'; @import 'components/note'; +@import 'components/gallery'; @import 'layouts/card-list'; -- cgit v1.2.3-70-g09d2