summaryrefslogtreecommitdiffstats
path: root/assets/css
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2021-12-29 15:51:49 +0100
committerVolpeon <git@volpeon.ink>2021-12-29 15:51:49 +0100
commit312015e8f74ca1738e7160e5d66cad9dcb07c6fd (patch)
tree0fa7922b190e22bfd82627d4b65552a981cd0340 /assets/css
parentSupport for more complex layouts (diff)
downloadvolpeon.ink-312015e8f74ca1738e7160e5d66cad9dcb07c6fd.tar.gz
volpeon.ink-312015e8f74ca1738e7160e5d66cad9dcb07c6fd.tar.bz2
volpeon.ink-312015e8f74ca1738e7160e5d66cad9dcb07c6fd.zip
Initial gallery macro
Diffstat (limited to 'assets/css')
-rw-r--r--assets/css/components/_gallery.scss25
-rw-r--r--assets/css/components/_header.scss9
-rw-r--r--assets/css/objects/_icon.scss2
-rw-r--r--assets/css/style.scss1
4 files changed, 36 insertions, 1 deletions
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 @@
1@include namespace('gallery') {
2 @include store((
3 --dims: (
4 --col-width: 17em
5 )
6 ));
7
8 @include component(namespace()) {
9 margin-top: $line-height * 1rem;
10
11 @include element('items') {
12 display: grid;
13 grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr));
14 gap: 20px;
15 }
16
17 @include element('item') {
18 display: block;
19 }
20
21 @include element('img') {
22 display: block;
23 }
24 }
25}
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 @@
70 height: prop(--dims --icon); 70 height: prop(--dims --icon);
71 } 71 }
72 72
73 @include modifier('fixed') {
74 position: fixed;
75 }
76
73 @include media('>=lg') { 77 @include media('>=lg') {
74 position: sticky; 78 position: sticky;
79 z-index: 100;
75 top: 0; 80 top: 0;
76 margin-bottom: calc(-.75 * #{prop(--dims --height)}); 81 margin-bottom: calc(-.75 * #{prop(--dims --height)});
82
83 @include modifier('fixed') {
84 position: fixed;
85 }
77 } 86 }
78 87
79 @media print { 88 @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 @@
20 20
21 @include modifier('snow') { 21 @include modifier('snow') {
22 position: fixed; 22 position: fixed;
23 z-index: 9999; 23 z-index: 1000;
24 top: -1.2em; 24 top: -1.2em;
25 width: 1em; 25 width: 1em;
26 height: 1em; 26 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 @@
17@import 'components/footer'; 17@import 'components/footer';
18@import 'components/card'; 18@import 'components/card';
19@import 'components/note'; 19@import 'components/note';
20@import 'components/gallery';
20 21
21@import 'layouts/card-list'; 22@import 'layouts/card-list';
22 23