diff options
Diffstat (limited to 'assets/css/scopes')
-rw-r--r-- | assets/css/scopes/_body.scss | 43 |
1 files changed, 33 insertions, 10 deletions
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 | } |