summaryrefslogtreecommitdiffstats
path: root/assets/css/components
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css/components')
-rw-r--r--assets/css/components/_gallery.scss25
-rw-r--r--assets/css/components/_header.scss9
2 files changed, 34 insertions, 0 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 {