summaryrefslogtreecommitdiffstats
path: root/assets
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2021-11-15 08:43:04 +0100
committerVolpeon <git@volpeon.ink>2021-11-15 08:43:04 +0100
commit147b96cccc7033d336ca9f39fb2b6635ec61ab12 (patch)
treed7be82c7f0af6adffdaba304efe555a7a26a4af8 /assets
parentUpdated Iosevka (diff)
downloadvolpeon.ink-147b96cccc7033d336ca9f39fb2b6635ec61ab12.tar.gz
volpeon.ink-147b96cccc7033d336ca9f39fb2b6635ec61ab12.tar.bz2
volpeon.ink-147b96cccc7033d336ca9f39fb2b6635ec61ab12.zip
Better code block design, make header smaller on mobile
Diffstat (limited to 'assets')
-rw-r--r--assets/css/components/_header.scss6
-rw-r--r--assets/css/scopes/_body.scss43
2 files changed, 39 insertions, 10 deletions
diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss
index a84c4fa..1df7c5b 100644
--- a/assets/css/components/_header.scss
+++ b/assets/css/components/_header.scss
@@ -24,6 +24,12 @@
24 ) 24 )
25 ), 'light'); 25 ), 'light');
26 26
27 @include store((
28 --dims: (
29 --height: 3.4rem,
30 )
31 ), 'sm');
32
27 @include component(namespace()) { 33 @include component(namespace()) {
28 display: flex; 34 display: flex;
29 height: prop(--dims --height); 35 height: prop(--dims --height);
diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss
index 1de4dc5..a21c0a1 100644
--- a/assets/css/scopes/_body.scss
+++ b/assets/css/scopes/_body.scss
@@ -9,12 +9,26 @@
9 --fg: prop(--colors --accent --strong, $global: true), 9 --fg: prop(--colors --accent --strong, $global: true),
10 --bg: prop(--colors --bg-hi, $global: true), 10 --bg: prop(--colors --bg-hi, $global: true),
11 ), 11 ),
12 --obj-border: prop(--colors --obj-hi, $global: true), 12 --code-block: (
13 --fg: prop(--colors --fg, $global: true),
14 --bg: prop(--colors --bg-lo, $global: true),
15 ),
16 --blockquote: (
17 --border: prop(--colors --obj-hi, $global: true),
18 )
13 ), 19 ),
14 --dims: ( 20 --dims: (
15 --meta: ( 21 --meta: (
16 --pad-x: .6em, 22 --pad-x: .6em,
17 --pad-y: .2em 23 --pad-y: .2em
24 ),
25 --code: (
26 --pad-x: .3em,
27 --pad-y: .1em
28 ),
29 --code-block: (
30 --pad-x: 1em,
31 --pad-y: .7em
18 ) 32 )
19 ) 33 )
20 )); 34 ));
@@ -27,6 +41,9 @@
27 --code: ( 41 --code: (
28 --bg: prop(--colors --accent --faint, $global: true), 42 --bg: prop(--colors --accent --faint, $global: true),
29 ), 43 ),
44 --code-block: (
45 --bg: prop(--colors --bg-hi, $global: true),
46 ),
30 ) 47 )
31 ), 'light'); 48 ), 'light');
32 49
@@ -48,24 +65,30 @@
48 } 65 }
49 66
50 code { 67 code {
51 padding: .1em .3em; 68 padding: prop(--dims --code --pad-y) prop(--dims --code --pad-x);
52 border-radius: 3px; 69 border-radius: 3px;
53 background-color: prop(--colors --code --bg); 70 background-color: prop(--colors --code --bg);
54 color: prop(--colors --code --fg); 71 color: prop(--colors --code --fg);
55 } 72 }
56 73
57 blockquote, 74 blockquote {
58 pre {
59 margin: ($line-height * 1rem) 0 0 1px; 75 margin: ($line-height * 1rem) 0 0 1px;
60 padding-left: calc(#{prop(--dims --indent, $global: true)} - 3px); 76 padding-left: calc(#{prop(--dims --indent, $global: true)} - 3px);
61 border-left: 3px solid prop(--colors --obj-border); 77 border-left: 3px solid prop(--colors --blockquote --border);
62 } 78 }
63 79
64 pre code { 80 pre {
65 padding: 0; 81 margin: ($line-height * 1rem) 0 0 0;
66 border-radius: 0; 82 padding: prop(--dims --code-block --pad-y) prop(--dims --code-block --pad-x);
67 background-color: transparent; 83 background-color: prop(--colors --code-block --bg);
68 color: currentColor; 84 color: prop(--colors --code-block --fg);
85
86 code {
87 padding: 0;
88 border-radius: 0;
89 background-color: transparent;
90 color: currentColor;
91 }
69 } 92 }
70 } 93 }
71} 94}