diff options
Diffstat (limited to 'css')
-rw-r--r-- | css/main.scss | 86 |
1 files changed, 65 insertions, 21 deletions
diff --git a/css/main.scss b/css/main.scss index 42b0b28..27a62ec 100644 --- a/css/main.scss +++ b/css/main.scss | |||
@@ -11,7 +11,7 @@ $sel-background: rgba($accent, .996); | |||
11 | $sel-text: #000; | 11 | $sel-text: #000; |
12 | 12 | ||
13 | $font-monospace: 'Iosevka Term SS03', 'IBM Plex Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', 'Droid Sans Mono', Monaco, Consolas, Courier, monospace; | 13 | $font-monospace: 'Iosevka Term SS03', 'IBM Plex Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', 'Droid Sans Mono', Monaco, Consolas, Courier, monospace; |
14 | $font-proportional: 'Iosevka Aile', 'Fira Sans', 'Roboto', 'Droid Sans', sans-serif; | 14 | $font-proportional: 'Open Sans', 'Fira Sans', 'Roboto', 'Droid Sans', sans-serif; |
15 | 15 | ||
16 | // | 16 | // |
17 | // Basic element styles | 17 | // Basic element styles |
@@ -28,16 +28,48 @@ body { | |||
28 | // ); | 28 | // ); |
29 | color: $text; | 29 | color: $text; |
30 | font-family: $font-monospace; | 30 | font-family: $font-monospace; |
31 | font-size: 1 / 16 * 17em; | 31 | font-size: 1em; //1 / 16 * 17em; |
32 | line-height: 1.5; | 32 | line-height: 1.5; |
33 | } | 33 | } |
34 | 34 | ||
35 | pre { | ||
36 | margin: 0; | ||
37 | font: inherit; | ||
38 | font-family: $font-monospace; | ||
39 | white-space: pre-wrap; | ||
40 | } | ||
41 | |||
35 | h1, h2, h3, h4, h5, h6 { | 42 | h1, h2, h3, h4, h5, h6 { |
36 | font: inherit; | 43 | font: inherit; |
44 | font-weight: bold; | ||
37 | color: $text-plus; | 45 | color: $text-plus; |
38 | margin: 0; | 46 | margin: 0; |
39 | } | 47 | } |
40 | 48 | ||
49 | p { | ||
50 | margin: 0; | ||
51 | } | ||
52 | |||
53 | ul, ol { | ||
54 | margin: 0; | ||
55 | padding: 0; | ||
56 | list-style-type: none; | ||
57 | } | ||
58 | |||
59 | ul { | ||
60 | li { | ||
61 | padding-left: 4ch; | ||
62 | |||
63 | &::before { | ||
64 | display: inline-block; | ||
65 | width: 2ch; | ||
66 | padding-left: 2ch; | ||
67 | margin-left: -4ch; | ||
68 | content: '–'; | ||
69 | } | ||
70 | } | ||
71 | } | ||
72 | |||
41 | button { | 73 | button { |
42 | background: none; | 74 | background: none; |
43 | border: 0; | 75 | border: 0; |
@@ -191,14 +223,9 @@ strong { | |||
191 | text-align: center; | 223 | text-align: center; |
192 | 224 | ||
193 | &--word-wrap { | 225 | &--word-wrap { |
194 | max-width: 50em; | 226 | max-width: 45em; |
195 | max-width: 100ch; | 227 | max-width: 90ch; |
196 | margin: 0 auto; | 228 | margin: 0 auto; |
197 | |||
198 | .content { | ||
199 | white-space: pre-wrap; | ||
200 | word-wrap: break-word; | ||
201 | } | ||
202 | } | 229 | } |
203 | } | 230 | } |
204 | 231 | ||
@@ -213,22 +240,39 @@ strong { | |||
213 | font: inherit; | 240 | font: inherit; |
214 | font-family: $font-proportional; | 241 | font-family: $font-proportional; |
215 | 242 | ||
216 | &--has-type-annotations { | 243 | &--monospace, |
217 | padding-left: 3em; | 244 | &--prefer-monospace { |
218 | padding-left: 5ch; | ||
219 | } | ||
220 | |||
221 | &--has-monospace-font { | ||
222 | font-family: $font-monospace; | 245 | font-family: $font-monospace; |
223 | } | 246 | } |
224 | } | 247 | } |
225 | 248 | ||
226 | .type-annotation { | 249 | .section { |
227 | margin-left: -3em; | 250 | display: flex; |
228 | margin-left: -5ch; | 251 | align-items: baseline; |
229 | color: $text-minus; | 252 | flex-direction: row; |
230 | white-space: pre; | 253 | justify-content: flex-start; |
231 | font-family: $font-monospace; | 254 | min-height: 1em * 1.5; |
255 | padding-left: 3em; | ||
256 | padding-left: 5ch; | ||
257 | |||
258 | &__type { | ||
259 | flex: 0 0 auto; | ||
260 | margin-left: -3em; | ||
261 | margin-left: -5ch; | ||
262 | padding-right: 1.25em; | ||
263 | padding-right: 2ch; | ||
264 | width: 1.75em; | ||
265 | width: 3ch; | ||
266 | color: $text-minus; | ||
267 | font-family: $font-monospace; | ||
268 | text-align: right; | ||
269 | user-select: none; | ||
270 | } | ||
271 | |||
272 | &__content { | ||
273 | min-width: 0; | ||
274 | word-wrap: break-word; | ||
275 | } | ||
232 | } | 276 | } |
233 | 277 | ||
234 | // | 278 | // |