diff options
Diffstat (limited to 'assets/css')
| -rw-r--r-- | assets/css/components/_header.scss | 6 | ||||
| -rw-r--r-- | assets/css/scopes/_body.scss | 43 |
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 | } |
