diff options
Diffstat (limited to 'css')
-rw-r--r-- | css/main.scss | 58 |
1 files changed, 46 insertions, 12 deletions
diff --git a/css/main.scss b/css/main.scss index d0646d7..0d5a5d9 100644 --- a/css/main.scss +++ b/css/main.scss | |||
@@ -10,6 +10,12 @@ $border: mix(hsl(210, 100%, 95%), $background, 16%); | |||
10 | $sel-background: rgba($accent, .996); | 10 | $sel-background: rgba($accent, .996); |
11 | $sel-text: #000; | 11 | $sel-text: #000; |
12 | 12 | ||
13 | @mixin monospace-font { | ||
14 | font-family: 'Iosevka Term SS03', 'IBM Plex Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', 'Droid Sans Mono', Monaco, Consolas, Courier, monospace; | ||
15 | font-size: 1 / 16 * 17em; | ||
16 | line-height: 1.5; | ||
17 | } | ||
18 | |||
13 | @font-face { | 19 | @font-face { |
14 | font-family: 'Iosevka Term SS03'; | 20 | font-family: 'Iosevka Term SS03'; |
15 | font-style: normal; | 21 | font-style: normal; |
@@ -31,6 +37,35 @@ body { | |||
31 | color: $text; | 37 | color: $text; |
32 | } | 38 | } |
33 | 39 | ||
40 | button { | ||
41 | @include monospace-font; | ||
42 | |||
43 | background: none; | ||
44 | border: 0; | ||
45 | padding: 0; | ||
46 | color: $text-plus; | ||
47 | } | ||
48 | |||
49 | img { | ||
50 | display: inline-block; | ||
51 | vertical-align: top; | ||
52 | max-width: 8em; | ||
53 | margin: .1em 0; | ||
54 | |||
55 | &::selection { | ||
56 | background-color: rgba($sel-background, .35); | ||
57 | } | ||
58 | |||
59 | &.expanded { | ||
60 | max-width: 40em; | ||
61 | max-width: 80ch; | ||
62 | } | ||
63 | |||
64 | &.faded { | ||
65 | opacity: .5; | ||
66 | } | ||
67 | } | ||
68 | |||
34 | ::selection { | 69 | ::selection { |
35 | color: $sel-text; | 70 | color: $sel-text; |
36 | background-color: $sel-background; | 71 | background-color: $sel-background; |
@@ -51,10 +86,10 @@ body { | |||
51 | // } | 86 | // } |
52 | 87 | ||
53 | .header { | 88 | .header { |
89 | @include monospace-font; | ||
90 | |||
54 | padding: .9em 1em; | 91 | padding: .9em 1em; |
55 | border-bottom: 1px solid $border; | 92 | border-bottom: 1px solid $border; |
56 | font-family: 'Iosevka Term SS03', 'IBM Plex Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', 'Droid Sans Mono', Monaco, Consolas, Courier, monospace; | ||
57 | font-size: 1 / 16 * 17em; | ||
58 | line-height: 1.3; | 93 | line-height: 1.3; |
59 | color: $text-faint; | 94 | color: $text-faint; |
60 | } | 95 | } |
@@ -72,17 +107,16 @@ body { | |||
72 | } | 107 | } |
73 | 108 | ||
74 | .content { | 109 | .content { |
75 | display: inline-block; | 110 | @include monospace-font; |
76 | min-width: 50em; | 111 | |
77 | min-width: 5ch + 80; | 112 | display: inline-block; |
78 | margin: 0; | 113 | min-width: 50em; |
79 | padding: 2em 1em; | 114 | min-width: 5ch + 80; |
80 | text-align: left; | 115 | margin: 0; |
81 | font-family: 'Iosevka Term SS03', 'IBM Plex Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', 'Droid Sans Mono', Monaco, Consolas, Courier, monospace; | 116 | padding: 2em 1em; |
82 | font-size: 1 / 16 * 17em; | 117 | text-align: left; |
83 | line-height: 1.5; | ||
84 | } | 118 | } |
85 | 119 | ||
86 | .link-type { | 120 | .type-annotation { |
87 | color: $text-minus; | 121 | color: $text-minus; |
88 | } | 122 | } |