diff options
Diffstat (limited to 'src/_base.scss')
| -rw-r--r-- | src/_base.scss | 38 |
1 files changed, 13 insertions, 25 deletions
diff --git a/src/_base.scss b/src/_base.scss index 740fe3f..b4ce1ae 100644 --- a/src/_base.scss +++ b/src/_base.scss | |||
| @@ -5,7 +5,7 @@ | |||
| 5 | @use 'config'; | 5 | @use 'config'; |
| 6 | 6 | ||
| 7 | html { | 7 | html { |
| 8 | scrollbar-color: fn.color(--fg-hi3) fn.color(--bg); | 8 | scrollbar-color: fn.color(--text-disabled) transparent; |
| 9 | } | 9 | } |
| 10 | 10 | ||
| 11 | html, | 11 | html, |
| @@ -18,8 +18,8 @@ body { | |||
| 18 | 18 | ||
| 19 | margin: 0; | 19 | margin: 0; |
| 20 | padding: 0; | 20 | padding: 0; |
| 21 | background-color: fn.color(--bg); | 21 | background-color: fn.color(--bg-base); |
| 22 | color: fn.color(--fg); | 22 | color: fn.color(--text); |
| 23 | } | 23 | } |
| 24 | 24 | ||
| 25 | pre, | 25 | pre, |
| @@ -48,21 +48,20 @@ h3, | |||
| 48 | h4, | 48 | h4, |
| 49 | h5, | 49 | h5, |
| 50 | h6 { | 50 | h6 { |
| 51 | margin: fn.dim(--heading --margin-top) 0 0; | 51 | margin-block: fn.dim(--heading --margin-bs) 0; |
| 52 | color: fn.color(--fg-lo); | 52 | color: fn.color(--heading); |
| 53 | font-size: fn.dim(--font-size --75); | 53 | font-size: fn.dim(--font-size --75); |
| 54 | font-weight: bold; | 54 | font-weight: bold; |
| 55 | letter-spacing: 1px; | 55 | letter-spacing: 1px; |
| 56 | text-transform: uppercase; | 56 | text-transform: uppercase; |
| 57 | 57 | ||
| 58 | & + & { | 58 | & + & { |
| 59 | margin-top: fn.dim(--heading --margin-top-sibling); | 59 | margin-block-start: fn.dim(--heading --margin-bs-sibling); |
| 60 | } | 60 | } |
| 61 | } | 61 | } |
| 62 | 62 | ||
| 63 | p { | 63 | p { |
| 64 | margin-top: fn.dim(--paragraph --margin-top); | 64 | margin-block: fn.dim(--paragraph --margin-bs) 0; |
| 65 | margin-bottom: 0; | ||
| 66 | 65 | ||
| 67 | &:empty { | 66 | &:empty { |
| 68 | display: none; | 67 | display: none; |
| @@ -70,12 +69,12 @@ p { | |||
| 70 | } | 69 | } |
| 71 | 70 | ||
| 72 | strong { | 71 | strong { |
| 73 | color: fn.color(--fg-lo); | 72 | color: fn.color(--heading); |
| 74 | font-weight: bold; | 73 | font-weight: bold; |
| 75 | } | 74 | } |
| 76 | 75 | ||
| 77 | small { | 76 | small { |
| 78 | color: fn.color(--fg-hi); | 77 | color: fn.color(--text-mute); |
| 79 | font-size: fn.dim(--font-size --75); | 78 | font-size: fn.dim(--font-size --75); |
| 80 | } | 79 | } |
| 81 | 80 | ||
| @@ -129,11 +128,11 @@ input, | |||
| 129 | textarea { | 128 | textarea { |
| 130 | &::placeholder { | 129 | &::placeholder { |
| 131 | opacity: 1; | 130 | opacity: 1; |
| 132 | color: fn.color(--obj); | 131 | color: fn.color(--text-mute); |
| 133 | } | 132 | } |
| 134 | 133 | ||
| 135 | &:disabled { | 134 | &:disabled { |
| 136 | color: fn.color(--fg-hi); | 135 | color: fn.color(--text-disabled); |
| 137 | } | 136 | } |
| 138 | } | 137 | } |
| 139 | 138 | ||
| @@ -141,20 +140,9 @@ textarea { | |||
| 141 | height: calc(1em * fn.dim(--font --standard --line-height)); | 140 | height: calc(1em * fn.dim(--font --standard --line-height)); |
| 142 | } | 141 | } |
| 143 | 142 | ||
| 144 | ::selection { | ||
| 145 | background: fn.color(--selection --bg); | ||
| 146 | color: fn.color(--selection --fg); | ||
| 147 | } | ||
| 148 | |||
| 149 | img { | ||
| 150 | &::selection { | ||
| 151 | background: fn.color(--selection --bg-img); | ||
| 152 | } | ||
| 153 | } | ||
| 154 | |||
| 155 | hr { | 143 | hr { |
| 156 | height: fn.dim(--border --thin); | 144 | height: fn.dim(--border --thin); |
| 157 | margin: calc(.5 * (fn.dim(--heading --margin-top) + fn.dim(--paragraph --margin-top))) 0; | 145 | margin-block: calc(.5 * (fn.dim(--heading --margin-bs) + fn.dim(--paragraph --margin-bs))) 0; |
| 158 | border: 0; | 146 | border: 0; |
| 159 | background-color: fn.color(--obj); | 147 | background-color: fn.color(--border); |
| 160 | } | 148 | } |
