summaryrefslogtreecommitdiffstats
path: root/assets/css
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css')
-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
5 files changed, 29 insertions, 26 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';