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 | } |