diff options
Diffstat (limited to 'assets')
-rw-r--r-- | assets/glyphs.txt | 1 | ||||
-rw-r--r-- | assets/iosevka-term-ss09-bold.ttf | bin | 0 -> 1557444 bytes | |||
-rw-r--r-- | assets/iosevka-term-ss09-regular.ttf | bin | 0 -> 1541132 bytes | |||
-rw-r--r-- | assets/style.scss | 331 |
4 files changed, 332 insertions, 0 deletions
diff --git a/assets/glyphs.txt b/assets/glyphs.txt new file mode 100644 index 0000000..0755cf9 --- /dev/null +++ b/assets/glyphs.txt | |||
@@ -0,0 +1 @@ | |||
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`´abcdefghijklmnopqrstuvwxyz{|}~äöüÄÖÜßẞ↓↙←↖↑↗→↘€»«„“”·…°’‾█▓▒░ ▀▄‐╭╮─│╰╯┌┐└┘├╱╲╳ʻ‘⋀ | |||
diff --git a/assets/iosevka-term-ss09-bold.ttf b/assets/iosevka-term-ss09-bold.ttf new file mode 100644 index 0000000..85915cf --- /dev/null +++ b/assets/iosevka-term-ss09-bold.ttf | |||
Binary files differ | |||
diff --git a/assets/iosevka-term-ss09-regular.ttf b/assets/iosevka-term-ss09-regular.ttf new file mode 100644 index 0000000..83ddee6 --- /dev/null +++ b/assets/iosevka-term-ss09-regular.ttf | |||
Binary files differ | |||
diff --git a/assets/style.scss b/assets/style.scss new file mode 100644 index 0000000..6889798 --- /dev/null +++ b/assets/style.scss | |||
@@ -0,0 +1,331 @@ | |||
1 | $font-size: 17px; | ||
2 | $heading-font-size: 18px; | ||
3 | $line-height: 1.4; | ||
4 | |||
5 | $page-item-prefix-max-chars: 3ch; | ||
6 | $page-item-prefix-pad: 2ch; | ||
7 | $page-item-prefix-width: $page-item-prefix-max-chars + $page-item-prefix-pad; | ||
8 | |||
9 | $subcontent-indent: 4ch; | ||
10 | |||
11 | @function px-to-em($s, $b: $font-size) { | ||
12 | @return 1 / ($b / 1px) * ($s / 1px) * 1em; | ||
13 | } | ||
14 | |||
15 | @function str-repeat($s, $n) { | ||
16 | $r: ""; | ||
17 | @while $n > 0 { | ||
18 | $r: $r + $s; | ||
19 | $n: $n - 1; | ||
20 | } | ||
21 | @return $r; | ||
22 | } | ||
23 | |||
24 | :root { | ||
25 | --gray1: hsl(270, 0%, 9.7%); | ||
26 | --gray2: hsl(270, 1%, 29%); | ||
27 | --gray3: hsl(270, 2%, 54%); | ||
28 | --gray4: hsl(270, 2%, 73%); | ||
29 | --gray5: hsl(270, 2%, 83%); | ||
30 | --gray6: hsl(270, 2%, 100%); | ||
31 | |||
32 | --bg: var(--gray1); | ||
33 | --bg-plus: var(--gray2); | ||
34 | --fg-minus: var(--gray3); | ||
35 | --fg: var(--gray4); | ||
36 | --fg-plus: var(--gray6); | ||
37 | |||
38 | --select-bg: hsla(270, 2%, 100%, 0.996); | ||
39 | --select-fg: var(--gray1); | ||
40 | |||
41 | --code-fg: var(--fg-minus); | ||
42 | --code-block-fg: var(--fg-minus); | ||
43 | |||
44 | --page-item-prefix-fg: var(--fg-minus); | ||
45 | |||
46 | --link-idle-fg: var(--gray6); | ||
47 | --link-visited-fg: var(--gray5); | ||
48 | --link-hover-bg: var(--gray6); | ||
49 | --link-hover-fg: var(--gray1); | ||
50 | |||
51 | --heading: var(--fg-plus); | ||
52 | } | ||
53 | |||
54 | ::selection { | ||
55 | color: var(--select-fg); | ||
56 | background-color: var(--select-bg); | ||
57 | } | ||
58 | |||
59 | html, | ||
60 | pre, | ||
61 | code { | ||
62 | font-family: "Iosevka Term SS09"; | ||
63 | font-feature-settings: "calt" 0, "dlig" 1; | ||
64 | } | ||
65 | |||
66 | html { | ||
67 | font-size: px-to-em($font-size, 16px); | ||
68 | line-height: $line-height; | ||
69 | background-color: var(--bg); | ||
70 | color: var(--fg); | ||
71 | } | ||
72 | |||
73 | body { | ||
74 | margin: 2em; | ||
75 | padding: 0; | ||
76 | |||
77 | @media (max-width: 700px) { | ||
78 | margin: 1em; | ||
79 | } | ||
80 | } | ||
81 | |||
82 | main { | ||
83 | max-width: 80ch; | ||
84 | margin: 0 auto; | ||
85 | } | ||
86 | |||
87 | .c-page-header { | ||
88 | margin-bottom: $line-height * 2rem; | ||
89 | overflow: hidden; | ||
90 | |||
91 | &::after { | ||
92 | position: relative; | ||
93 | z-index: -10; | ||
94 | content: str-repeat("░", 120); | ||
95 | display: block; | ||
96 | height: $line-height; | ||
97 | margin-top: px-to-em(2px); | ||
98 | padding-top: px-to-em(2px); | ||
99 | color: var(--fg-minus); | ||
100 | border-top: 1px solid var(--fg-minus); | ||
101 | } | ||
102 | |||
103 | &--sm { | ||
104 | display: none; | ||
105 | } | ||
106 | |||
107 | @media (max-width: 700px) { | ||
108 | display: none; | ||
109 | |||
110 | &--sm, | ||
111 | &--nohide { | ||
112 | display: block; | ||
113 | } | ||
114 | } | ||
115 | } | ||
116 | |||
117 | code { | ||
118 | color: var(--code-fg); | ||
119 | } | ||
120 | |||
121 | pre { | ||
122 | margin: 0; | ||
123 | color: var(--code-block-fg); | ||
124 | |||
125 | strong { | ||
126 | font-weight: normal; | ||
127 | } | ||
128 | } | ||
129 | |||
130 | strong { | ||
131 | color: var(--fg-plus); | ||
132 | font-weight: bold; | ||
133 | } | ||
134 | |||
135 | ul, | ||
136 | ol { | ||
137 | margin: ($line-height * 1rem) 0 0; | ||
138 | padding: 0; | ||
139 | list-style: none; | ||
140 | |||
141 | > li { | ||
142 | position: relative; | ||
143 | padding-left: $subcontent-indent; | ||
144 | |||
145 | &::before { | ||
146 | position: absolute; | ||
147 | display: inline-block; | ||
148 | width: $subcontent-indent; | ||
149 | margin-left: -1 * $subcontent-indent; | ||
150 | color: var(--fg-minus); | ||
151 | } | ||
152 | } | ||
153 | } | ||
154 | |||
155 | ul { | ||
156 | > li::before { | ||
157 | content: "-"; | ||
158 | } | ||
159 | |||
160 | &.refs > li { | ||
161 | padding-left: 0; | ||
162 | |||
163 | &::before { | ||
164 | display: none; | ||
165 | } | ||
166 | } | ||
167 | } | ||
168 | |||
169 | ol { | ||
170 | counter-reset: cnt; | ||
171 | |||
172 | > li { | ||
173 | counter-increment: cnt; | ||
174 | |||
175 | &::before { | ||
176 | content: counter(cnt) "."; | ||
177 | } | ||
178 | } | ||
179 | } | ||
180 | |||
181 | h1, | ||
182 | h2, | ||
183 | h3 { | ||
184 | margin: ($line-height * 2rem) 0 0; | ||
185 | |||
186 | + h1, | ||
187 | + h2, | ||
188 | + h3 { | ||
189 | margin-top: $line-height * 1rem; | ||
190 | } | ||
191 | } | ||
192 | |||
193 | h1 { | ||
194 | text-transform: uppercase; | ||
195 | font-size: px-to-em($heading-font-size); | ||
196 | color: var(--heading); | ||
197 | } | ||
198 | |||
199 | h2 { | ||
200 | font-size: 1em; | ||
201 | color: var(--heading); | ||
202 | } | ||
203 | |||
204 | h3 { | ||
205 | font-size: 1em; | ||
206 | } | ||
207 | |||
208 | p { | ||
209 | margin: ($line-height * 1em) 0 0; | ||
210 | } | ||
211 | |||
212 | a { | ||
213 | position: relative; | ||
214 | z-index: 1000; | ||
215 | padding: 0.1em 0.3em; | ||
216 | margin: 0 -0.3em; | ||
217 | color: var(--link-idle-fg); | ||
218 | |||
219 | &:visited { | ||
220 | color: var(--link-visited-fg); | ||
221 | } | ||
222 | |||
223 | &:hover { | ||
224 | background-color: var(--link-hover-bg); | ||
225 | color: var(--link-hover-fg); | ||
226 | text-decoration: none; | ||
227 | } | ||
228 | } | ||
229 | |||
230 | hr { | ||
231 | height: 1px; | ||
232 | margin: ($line-height * 2rem) 0 ($line-height * 2rem); | ||
233 | background-color: var(--bg-plus); | ||
234 | border: 0; | ||
235 | |||
236 | @media (max-width: 700px) { | ||
237 | margin-left: 0; | ||
238 | } | ||
239 | } | ||
240 | |||
241 | blockquote { | ||
242 | position: relative; | ||
243 | margin: ($line-height * 1rem) 0 0; | ||
244 | padding-left: calc(#{$subcontent-indent} - 2px); | ||
245 | border-left: 2px solid var(--bg-plus); | ||
246 | } | ||
247 | |||
248 | .s-page { | ||
249 | padding-left: $page-item-prefix-width; | ||
250 | |||
251 | h1, | ||
252 | h2, | ||
253 | h3, | ||
254 | ul.refs > li, | ||
255 | pre { | ||
256 | position: relative; | ||
257 | margin-left: -1 * $page-item-prefix-width; | ||
258 | padding-left: $page-item-prefix-width; | ||
259 | |||
260 | &::before { | ||
261 | position: absolute; | ||
262 | box-sizing: border-box; | ||
263 | display: inline-block; | ||
264 | font-size: 1rem; | ||
265 | margin-left: -1 * $page-item-prefix-width; | ||
266 | padding-right: $page-item-prefix-pad; | ||
267 | width: $page-item-prefix-width; | ||
268 | color: var(--page-item-prefix-fg); | ||
269 | font-weight: normal; | ||
270 | text-align: right; | ||
271 | } | ||
272 | |||
273 | @media (max-width: 700px) { | ||
274 | margin-left: 0; | ||
275 | padding-left: 0; | ||
276 | |||
277 | &::before { | ||
278 | display: none; | ||
279 | } | ||
280 | } | ||
281 | } | ||
282 | |||
283 | h1::before { | ||
284 | content: "#"; | ||
285 | } | ||
286 | |||
287 | h2::before { | ||
288 | content: "##"; | ||
289 | } | ||
290 | |||
291 | h3::before { | ||
292 | content: "###"; | ||
293 | } | ||
294 | |||
295 | ul.refs > li::before { | ||
296 | content: "|>"; | ||
297 | } | ||
298 | |||
299 | pre::before { | ||
300 | content: str-repeat("``\A", 40); | ||
301 | height: 100%; | ||
302 | color: var(--page-item-prefix-fg); | ||
303 | overflow: hidden; | ||
304 | } | ||
305 | |||
306 | hr { | ||
307 | margin-left: -1 * $page-item-prefix-width; | ||
308 | } | ||
309 | |||
310 | .c-page-header { | ||
311 | margin-left: -1 * $page-item-prefix-width; | ||
312 | padding-left: $page-item-prefix-width; | ||
313 | |||
314 | &::after { | ||
315 | margin-left: -1 * $page-item-prefix-width; | ||
316 | } | ||
317 | |||
318 | @media (max-width: 700px) { | ||
319 | margin-left: 0; | ||
320 | padding-left: 0; | ||
321 | |||
322 | &::after { | ||
323 | margin-left: 0; | ||
324 | } | ||
325 | } | ||
326 | } | ||
327 | |||
328 | @media (max-width: 700px) { | ||
329 | padding-left: 0; | ||
330 | } | ||
331 | } | ||