summaryrefslogtreecommitdiffstats
path: root/assets/css
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css')
-rw-r--r--assets/css/_basics.scss16
-rw-r--r--assets/css/components/_gallery.scss25
-rw-r--r--assets/css/components/_lightbox.scss93
-rw-r--r--assets/css/objects/_icon.scss4
-rw-r--r--assets/css/style.scss2
5 files changed, 112 insertions, 28 deletions
diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index 9619862..393aae3 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -169,6 +169,22 @@ p {
169 margin: ($line-height * 1rem) 0 0; 169 margin: ($line-height * 1rem) 0 0;
170} 170}
171 171
172figure {
173 display: flex;
174 flex-direction: column;
175 align-items: center;
176 margin: ($line-height * 1rem) 0 0;
177 padding: 0;
178 background-color: prop(--colors --bg-hi);
179
180 img {
181 display: block;
182 max-width: 100%;
183 max-height: 70vh;
184 object-fit: contain;
185 }
186}
187
172:link, 188:link,
173:visited { 189:visited {
174 color: prop(--colors --link --default); 190 color: prop(--colors --link --default);
diff --git a/assets/css/components/_gallery.scss b/assets/css/components/_gallery.scss
deleted file mode 100644
index 651d873..0000000
--- a/assets/css/components/_gallery.scss
+++ /dev/null
@@ -1,25 +0,0 @@
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/_lightbox.scss b/assets/css/components/_lightbox.scss
new file mode 100644
index 0000000..ece2b4b
--- /dev/null
+++ b/assets/css/components/_lightbox.scss
@@ -0,0 +1,93 @@
1@include namespace('lightbox') {
2 @include store((
3 --colors: (
4 --bg: prop(--colors --bg-hi, $global: true),
5 --button: (
6 --idle: prop(--colors --fg-hi, $global: true),
7 --hover: prop(--colors --fg-lo, $global: true),
8 )
9 ),
10 --dims: (
11 --col-width: 17em
12 )
13 ));
14
15 @include component(namespace()) {
16 display: flex;
17 visibility: hidden;
18 position: fixed;
19 z-index: 5000;
20 top: 0;
21 left: 0;
22 box-sizing: border-box;
23 align-items: center;
24 justify-content: center;
25 width: 100%;
26 height: 100%;
27 padding: 2em calc(3em + 1rem);
28 transition: opacity .2s, visibility .2s;
29 opacity: 0;
30
31 @include element('bg') {
32 position: absolute;
33 z-index: -10;
34 top: 0;
35 left: 0;
36 width: 100%;
37 height: 100%;
38 opacity: .95;
39 background-color: prop(--colors --bg);
40 }
41
42 @include is('shown') {
43 visibility: visible;
44 transition: opacity .2s, visibility 0 .2s;
45 opacity: 1;
46 }
47
48 @include element('img') {
49 max-width: 100%;
50 max-height: 100%;
51 }
52
53 @include element('close', 'prev', 'next') {
54 margin: 0;
55 transition: color .2s;
56 border: 0;
57 background-color: transparent;
58 color: currentColor;
59
60 &:hover {
61 color: prop(--colors --button --hover);
62 }
63 }
64
65 @include element('close') {
66 position: absolute;
67 top: 0;
68 right: 0;
69 padding: 1rem;
70 font-size: 1.5em;
71 }
72
73 @include element('prev', 'next') {
74 position: absolute;
75 top: 50%;
76 padding: .5rem;
77 transform: translate(0, -50%);
78 font-size: 3em;
79
80 > * {
81 stroke-width: .75px;
82 }
83 }
84
85 @include element('prev') {
86 left: 0;
87 }
88
89 @include element('next') {
90 right: 0;
91 }
92 }
93}
diff --git a/assets/css/objects/_icon.scss b/assets/css/objects/_icon.scss
index 53f6f78..7c5d03a 100644
--- a/assets/css/objects/_icon.scss
+++ b/assets/css/objects/_icon.scss
@@ -7,8 +7,8 @@
7 7
8 @include object(namespace()) { 8 @include object(namespace()) {
9 display: block; 9 display: block;
10 width: iro-px-to-rem(16px); 10 width: 1em;
11 height: iro-px-to-rem(16px); 11 height: 1em;
12 stroke-width: 1.5px; 12 stroke-width: 1.5px;
13 stroke-linecap: round; 13 stroke-linecap: round;
14 stroke-linejoin: round; 14 stroke-linejoin: round;
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 45b733d..bbdf2af 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -17,7 +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@import 'components/lightbox';
21 21
22@import 'layouts/card-list'; 22@import 'layouts/card-list';
23 23