summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2021-12-30 09:45:40 +0100
committerVolpeon <git@volpeon.ink>2021-12-30 09:45:40 +0100
commitfc78b8c5e852327660a2d7616d765393ff407d1f (patch)
tree5e1957e70278a0359bf5fe6a38a3181cadbe54c3
parentFixed lightbox in light mode (diff)
downloadvolpeon.ink-fc78b8c5e852327660a2d7616d765393ff407d1f.tar.gz
volpeon.ink-fc78b8c5e852327660a2d7616d765393ff407d1f.tar.bz2
volpeon.ink-fc78b8c5e852327660a2d7616d765393ff407d1f.zip
Improved lightbox
-rw-r--r--assets/css/_basics.scss8
-rw-r--r--assets/css/components/_lightbox.scss2
-rw-r--r--assets/css/objects/_badge.scss25
-rw-r--r--assets/css/scopes/_body.scss19
-rw-r--r--assets/css/style.scss1
-rw-r--r--templates/base.html4
-rw-r--r--templates/layouts/page.html2
7 files changed, 32 insertions, 29 deletions
diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index 393aae3..7689379 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -170,12 +170,8 @@ p {
170} 170}
171 171
172figure { 172figure {
173 display: flex; 173 margin: ($line-height * 1rem) 0 0;
174 flex-direction: column; 174 padding: 0;
175 align-items: center;
176 margin: ($line-height * 1rem) 0 0;
177 padding: 0;
178 background-color: prop(--colors --bg-hi);
179 175
180 img { 176 img {
181 display: block; 177 display: block;
diff --git a/assets/css/components/_lightbox.scss b/assets/css/components/_lightbox.scss
index 01c1219..165e21c 100644
--- a/assets/css/components/_lightbox.scss
+++ b/assets/css/components/_lightbox.scss
@@ -36,7 +36,7 @@
36 left: 0; 36 left: 0;
37 width: 100%; 37 width: 100%;
38 height: 100%; 38 height: 100%;
39 opacity: .95; 39 opacity: .85;
40 background-color: prop(--colors --bg); 40 background-color: prop(--colors --bg);
41 } 41 }
42 42
diff --git a/assets/css/objects/_badge.scss b/assets/css/objects/_badge.scss
new file mode 100644
index 0000000..216bb89
--- /dev/null
+++ b/assets/css/objects/_badge.scss
@@ -0,0 +1,25 @@
1@include namespace('badge') {
2 @include store((
3 --colors: (
4 --fg: prop(--colors --bg-hi, $global: true),
5 --bg: prop(--colors --fg-lo, $global: true),
6 ),
7 --dims: (
8 --pad-x: .6em,
9 --pad-y: .2em
10 )
11 ));
12
13 @include object(namespace()) {
14 display: inline-block;
15 padding: prop(--dims --pad-y) prop(--dims --pad-x);
16 background-color: prop(--colors --bg);
17 color: prop(--colors --fg);
18 font-size: iro-px-to-rem(14px);
19
20 &::selection {
21 background-color: prop(--colors --select --inverted --bg, $global: true);
22 color: prop(--colors --select --inverted --fg, $global: true);
23 }
24 }
25}
diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss
index 96e1f04..1fc8166 100644
--- a/assets/css/scopes/_body.scss
+++ b/assets/css/scopes/_body.scss
@@ -1,10 +1,6 @@
1@include namespace('body') { 1@include namespace('body') {
2 @include store(( 2 @include store((
3 --colors: ( 3 --colors: (
4 --meta: (
5 --fg: prop(--colors --bg-hi, $global: true),
6 --bg: prop(--colors --fg-lo, $global: true),
7 ),
8 --code: ( 4 --code: (
9 --fg: prop(--colors --accent --strong, $global: true), 5 --fg: prop(--colors --accent --strong, $global: true),
10 --bg: prop(--colors --bg-hi, $global: true), 6 --bg: prop(--colors --bg-hi, $global: true),
@@ -18,10 +14,6 @@
18 ) 14 )
19 ), 15 ),
20 --dims: ( 16 --dims: (
21 --meta: (
22 --pad-x: .6em,
23 --pad-y: .2em
24 ),
25 --code: ( 17 --code: (
26 --pad-x: .3em, 18 --pad-x: .3em,
27 --pad-y: .1em 19 --pad-y: .1em
@@ -46,17 +38,6 @@
46 38
47 @include scope(namespace()) { 39 @include scope(namespace()) {
48 @include element('meta') { 40 @include element('meta') {
49 display: inline-block;
50 padding: prop(--dims --meta --pad-y) prop(--dims --meta --pad-x);
51 background-color: prop(--colors --meta --bg);
52 color: prop(--colors --meta --fg);
53 font-size: iro-px-to-rem(14px);
54
55 &::selection {
56 background-color: prop(--colors --select --inverted --bg, $global: true);
57 color: prop(--colors --select --inverted --fg, $global: true);
58 }
59
60 + h1 { 41 + h1 {
61 margin-top: $line-height * .5rem; 42 margin-top: $line-height * .5rem;
62 } 43 }
diff --git a/assets/css/style.scss b/assets/css/style.scss
index bbdf2af..535bc72 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -12,6 +12,7 @@
12@import 'layouts/container'; 12@import 'layouts/container';
13 13
14@import 'objects/icon'; 14@import 'objects/icon';
15@import 'objects/badge';
15 16
16@import 'components/header'; 17@import 'components/header';
17@import 'components/footer'; 18@import 'components/footer';
diff --git a/templates/base.html b/templates/base.html
index 6da1065..68c70dd 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -85,8 +85,8 @@ ${layouts/page()}
85 <div class="c-lightbox__bg"></div> 85 <div class="c-lightbox__bg"></div>
86 86
87 <div class="c-lightbox__infobar"> 87 <div class="c-lightbox__infobar">
88 <span class="c-lightbox__count"></span> 88 <div class="o-badge c-lightbox__count"></div>
89 89
90 <button class="c-lightbox__close"> 90 <button class="c-lightbox__close">
91 <svg class="c-card__block o-icon" width="1em" height="1em" aria-hidden="true"> 91 <svg class="c-card__block o-icon" width="1em" height="1em" aria-hidden="true">
92 <use href="/symbols.svg#icon-x"></use> 92 <use href="/symbols.svg#icon-x"></use>
diff --git a/templates/layouts/page.html b/templates/layouts/page.html
index e4078cc..ee7437d 100644
--- a/templates/layouts/page.html
+++ b/templates/layouts/page.html
@@ -1,6 +1,6 @@
1<article class="l-container l-container--pad-x l-container--pad-y l-container--content s-body s-colored-links s-headlines $if(intro)$s-intro$endif$"> 1<article class="l-container l-container--pad-x l-container--pad-y l-container--content s-body s-colored-links s-headlines $if(intro)$s-intro$endif$">
2 $if(date)$ 2 $if(date)$
3 <div class="s-body__meta"> 3 <div class="o-badge s-body__meta">
4 $date.long$ 4 $date.long$
5 </div> 5 </div>
6 $endif$ 6 $endif$