diff options
Diffstat (limited to 'assets/css/_basics.scss')
-rw-r--r-- | assets/css/_basics.scss | 64 |
1 files changed, 28 insertions, 36 deletions
diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss index 1536605..1cd5547 100644 --- a/assets/css/_basics.scss +++ b/assets/css/_basics.scss | |||
@@ -1,41 +1,23 @@ | |||
1 | @font-face { | 1 | @font-face { |
2 | font-family: 'Iosevka Term SS09'; | 2 | font-family: 'IBM Plex Sans'; |
3 | font-style: normal; | ||
4 | font-weight: normal; | ||
5 | src: //local('Iosevka SS09'), | ||
6 | url('/iosevka-term-ss09-regular.woff2') format('woff2'); | ||
7 | } | ||
8 | |||
9 | @font-face { | ||
10 | font-family: 'Iosevka Term SS09'; | ||
11 | font-style: normal; | ||
12 | font-weight: bold; | ||
13 | src: //local('Iosevka SS09 Bold'), | ||
14 | url('/iosevka-term-ss09-bold.woff2') format('woff2'); | ||
15 | } | ||
16 | |||
17 | @font-face { | ||
18 | font-family: 'Iosevka Aile'; | ||
19 | font-style: normal; | 3 | font-style: normal; |
20 | font-weight: normal; | 4 | font-weight: normal; |
21 | src: //local('Iosevka Aile'), | 5 | src: //local('IBM Plex Sans'), |
22 | url('/iosevka-aile-regular.woff2') format('woff2'); | 6 | url('/IBMPlexSans-Regular.woff2') format('woff2'); |
23 | } | 7 | } |
24 | 8 | ||
25 | @font-face { | 9 | @font-face { |
26 | font-family: 'Iosevka Aile'; | 10 | font-family: 'IBM Plex Sans'; |
27 | font-style: normal; | 11 | font-style: normal; |
28 | font-weight: bold; | 12 | font-weight: bold; |
29 | src: //local('Iosevka Aile Bold'), | 13 | src: url('/IBMPlexSans-Bold.woff2') format('woff2'); |
30 | url('/iosevka-aile-bold.woff2') format('woff2'); | ||
31 | } | 14 | } |
32 | 15 | ||
33 | @font-face { | 16 | @font-face { |
34 | font-family: 'IBM Plex Sans'; | 17 | font-family: 'Garet Variable'; |
35 | font-style: normal; | 18 | font-style: normal; |
36 | font-weight: normal; | 19 | font-weight: 50 950; |
37 | src: //local('IBM Plex Sans'), | 20 | src: url('/GaretVariable.woff2') format('woff2-variations'); |
38 | url('/IBMPlexSans-Regular.woff2') format('woff2'); | ||
39 | } | 21 | } |
40 | 22 | ||
41 | ::selection { | 23 | ::selection { |
@@ -54,8 +36,8 @@ code { | |||
54 | } | 36 | } |
55 | 37 | ||
56 | html { | 38 | html { |
57 | background-color: var(--bg); | 39 | background-color: prop(--colors --bg); |
58 | color: var(--fg); | 40 | color: prop(--colors --fg); |
59 | font-family: $font-fam--text; | 41 | font-family: $font-fam--text; |
60 | font-size: px-to-em($font-size, 16px); | 42 | font-size: px-to-em($font-size, 16px); |
61 | line-height: $line-height; | 43 | line-height: $line-height; |
@@ -85,7 +67,7 @@ pre { | |||
85 | } | 67 | } |
86 | 68 | ||
87 | strong { | 69 | strong { |
88 | color: var(--fg-lo); | 70 | color: prop(--colors --fg-lo); |
89 | font-weight: bold; | 71 | font-weight: bold; |
90 | } | 72 | } |
91 | 73 | ||
@@ -105,7 +87,7 @@ li { | |||
105 | position: absolute; | 87 | position: absolute; |
106 | width: $subcontent--indent; | 88 | width: $subcontent--indent; |
107 | margin-left: -1 * $subcontent--indent; | 89 | margin-left: -1 * $subcontent--indent; |
108 | color: var(--fg-hi); | 90 | color: prop(--colors --fg-hi); |
109 | font-family: $font-fam--mono; | 91 | font-family: $font-fam--mono; |
110 | } | 92 | } |
111 | } | 93 | } |
@@ -141,12 +123,12 @@ dd { | |||
141 | } | 123 | } |
142 | 124 | ||
143 | dt { | 125 | dt { |
144 | color: var(--fg-lo); | 126 | color: prop(--colors --fg-lo); |
145 | font-weight: bold; | 127 | font-weight: bold; |
146 | 128 | ||
147 | &::after { | 129 | &::after { |
148 | content: ':'; | 130 | content: ':'; |
149 | color: var(--fg); | 131 | color: prop(--colors --fg); |
150 | font-weight: normal; | 132 | font-weight: normal; |
151 | } | 133 | } |
152 | } | 134 | } |
@@ -157,13 +139,23 @@ dd { | |||
157 | 139 | ||
158 | h1, | 140 | h1, |
159 | h2, | 141 | h2, |
160 | h3 { | 142 | h3, |
143 | h4, | ||
144 | h5, | ||
145 | h6 { | ||
161 | margin: ($line-height * 2em) 0 0; | 146 | margin: ($line-height * 2em) 0 0; |
147 | font-family: $font-fam--large; | ||
162 | font-size: 1em; | 148 | font-size: 1em; |
149 | font-weight: 600; | ||
150 | line-height: 1.2; | ||
151 | font-feature-settings: 'ss02' 1; | ||
163 | 152 | ||
164 | + h1, | 153 | + h1, |
165 | + h2, | 154 | + h2, |
166 | + h3 { | 155 | + h3, |
156 | + h4, | ||
157 | + h5, | ||
158 | + h6 { | ||
167 | margin-top: $line-height * 1em; | 159 | margin-top: $line-height * 1em; |
168 | } | 160 | } |
169 | } | 161 | } |
@@ -205,12 +197,12 @@ hr { | |||
205 | height: 1px; | 197 | height: 1px; |
206 | margin: ($line-height * 1em) 0; | 198 | margin: ($line-height * 1em) 0; |
207 | border: 0; | 199 | border: 0; |
208 | background-color: var(--obj); | 200 | background-color: prop(--colors --obj); |
209 | } | 201 | } |
210 | 202 | ||
211 | blockquote, | 203 | blockquote, |
212 | pre { | 204 | pre { |
213 | margin: ($line-height * 1em) 0 0 1px; | 205 | margin: ($line-height * 1em) 0 0 1px; |
214 | padding-left: calc(#{$subcontent--indent} - 3px); | 206 | padding-left: calc(#{$subcontent--indent} - 3px); |
215 | border-left: 2px solid var(--obj); | 207 | border-left: 2px solid prop(--colors --obj); |
216 | } | 208 | } |