summaryrefslogtreecommitdiffstats
path: root/assets
diff options
context:
space:
mode:
Diffstat (limited to 'assets')
-rw-r--r--assets/css/_basics.scss172
-rw-r--r--assets/css/_functions.scss12
-rw-r--r--assets/css/_utils.scss15
-rw-r--r--assets/css/_vars.scss43
-rw-r--r--assets/css/components/_nav.scss14
-rw-r--r--assets/css/components/_page-header.scss17
-rw-r--r--assets/css/components/_refs.scss7
-rw-r--r--assets/css/scopes/_page.scss93
-rw-r--r--assets/css/style.scss11
-rw-r--r--assets/fonts/glyphs.txt (renamed from assets/glyphs.txt)0
-rw-r--r--assets/fonts/iosevka-term-ss09-bold.ttf (renamed from assets/iosevka-term-ss09-bold.ttf)bin1557444 -> 1557444 bytes
-rw-r--r--assets/fonts/iosevka-term-ss09-regular.ttf (renamed from assets/iosevka-term-ss09-regular.ttf)bin1541132 -> 1541132 bytes
-rw-r--r--assets/style.scss352
13 files changed, 384 insertions, 352 deletions
diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
new file mode 100644
index 0000000..3adf64c
--- /dev/null
+++ b/assets/css/_basics.scss
@@ -0,0 +1,172 @@
1@font-face {
2 font-family: "Iosevka Term SS09";
3 font-style: normal;
4 font-weight: normal;
5 src: url("/iosevka-term-ss09-regular.woff2") format("woff2");
6}
7
8@font-face {
9 font-family: "Iosevka Term SS09";
10 font-style: normal;
11 font-weight: bold;
12 src: url("/iosevka-term-ss09-bold.woff2") format("woff2");
13}
14
15::selection {
16 color: var(--select-fg);
17 background-color: var(--select-bg);
18}
19
20html,
21pre,
22code {
23 font-family: "Iosevka Term SS09", "Lucida Console", "Courier New", Courier,
24 monospace;
25 font-feature-settings: "calt" 0, "dlig" 1;
26}
27
28html {
29 font-size: px-to-em($font-size, 16px);
30 line-height: $line-height;
31 background-color: var(--bg);
32 color: var(--fg);
33}
34
35body {
36 margin: 2em;
37 padding: 0;
38
39 @media (max-width: $breakpoint-sm) {
40 margin: 1em;
41 }
42}
43
44main {
45 max-width: 70ch;
46 margin: 0 auto;
47}
48
49code {
50 color: var(--code-fg);
51}
52
53pre {
54 margin: 0;
55 color: var(--code-block-fg);
56 font-size: $code-block-font-size;
57 line-height: $code-block-line-height;
58
59 strong {
60 font-weight: normal;
61 }
62}
63
64strong {
65 color: var(--fg-plus);
66 font-weight: bold;
67}
68
69ul,
70ol {
71 margin: ($line-height * 1rem) 0 0;
72 padding: 0;
73 list-style: none;
74}
75
76li {
77 position: relative;
78 padding-left: $subcontent-indent;
79
80 &::before {
81 position: absolute;
82 display: inline-block;
83 width: $subcontent-indent;
84 margin-left: -1 * $subcontent-indent;
85 color: var(--fg-minus);
86 }
87}
88
89ul > li::before {
90 content: "-";
91}
92
93ol {
94 counter-reset: cnt;
95
96 > li {
97 counter-increment: cnt;
98
99 &::before {
100 content: counter(cnt) ".";
101 }
102 }
103}
104
105h1,
106h2,
107h3 {
108 margin: ($line-height * 2rem) 0 0;
109
110 + h1,
111 + h2,
112 + h3 {
113 margin-top: $line-height * 1rem;
114 }
115}
116
117h1 {
118 text-transform: uppercase;
119 font-size: px-to-em($heading-font-size);
120 color: var(--heading);
121}
122
123h2 {
124 font-size: 1em;
125 color: var(--heading);
126}
127
128h3 {
129 font-size: 1em;
130}
131
132p {
133 margin: ($line-height * 1em) 0 0;
134 hyphens: auto;
135}
136
137:link,
138:visited {
139 position: relative;
140 z-index: 1000;
141 padding: 0.1em 0.3em;
142 margin: 0 -0.3em;
143 color: var(--link-idle-fg);
144
145 &:hover {
146 background-color: var(--link-hover-bg);
147 color: var(--link-hover-fg);
148 text-decoration: none;
149 }
150}
151
152:visited {
153 color: var(--link-visited-fg);
154}
155
156hr {
157 height: 1px;
158 margin: ($line-height * 2rem) 0 ($line-height * 2rem);
159 background-color: var(--bg-plus);
160 border: 0;
161
162 @media (max-width: $breakpoint-sm) {
163 margin-left: 0;
164 }
165}
166
167blockquote {
168 position: relative;
169 margin: ($line-height * 1rem) 0 0;
170 padding-left: calc(#{$subcontent-indent} - 2px);
171 border-left: 2px solid var(--bg-plus);
172}
diff --git a/assets/css/_functions.scss b/assets/css/_functions.scss
new file mode 100644
index 0000000..cd8947e
--- /dev/null
+++ b/assets/css/_functions.scss
@@ -0,0 +1,12 @@
1@function px-to-em($s, $b: $font-size) {
2 @return 1 / ($b / 1px) * ($s / 1px) * 1em;
3}
4
5@function str-repeat($s, $n) {
6 $r: "";
7 @while $n > 0 {
8 $r: $r + $s;
9 $n: $n - 1;
10 }
11 @return $r;
12}
diff --git a/assets/css/_utils.scss b/assets/css/_utils.scss
new file mode 100644
index 0000000..bf7e213
--- /dev/null
+++ b/assets/css/_utils.scss
@@ -0,0 +1,15 @@
1.u-hidden {
2 display: none;
3
4 &\@sm-down {
5 @media (max-width: $breakpoint-sm) {
6 display: none;
7 }
8 }
9
10 &\@sm-up {
11 @media (min-width: $breakpoint-sm + 1) {
12 display: none;
13 }
14 }
15}
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
new file mode 100644
index 0000000..a29ad6d
--- /dev/null
+++ b/assets/css/_vars.scss
@@ -0,0 +1,43 @@
1$font-size: 17px;
2$heading-font-size: $font-size + 1;
3$code-block-font-size: $font-size;
4$line-height: 1.5;
5$code-block-line-height: 1.4;
6
7$page-item-prefix-max-chars: 3ch;
8$page-item-prefix-pad: 2ch;
9$page-item-prefix-width: $page-item-prefix-max-chars + $page-item-prefix-pad;
10
11$subcontent-indent: 4ch;
12
13$breakpoint-sm: 700px;
14
15:root {
16 --gray1: hsl(270, 0%, 9.7%);
17 --gray2: hsl(270, 1%, 29%);
18 --gray3: hsl(270, 2%, 54%);
19 --gray4: hsl(270, 2%, 73%);
20 --gray5: hsl(270, 2%, 83%);
21 --gray6: hsl(270, 2%, 100%);
22
23 --bg: var(--gray1);
24 --bg-plus: var(--gray2);
25 --fg-minus: var(--gray3);
26 --fg: var(--gray4);
27 --fg-plus: var(--gray6);
28
29 --select-bg: hsla(270, 2%, 100%, 0.996);
30 --select-fg: var(--gray1);
31
32 --code-fg: var(--fg-minus);
33 --code-block-fg: var(--fg-minus);
34
35 --page-item-prefix-fg: var(--fg-minus);
36
37 --link-idle-fg: var(--gray6); //#90acf2; //var(--gray6);
38 --link-visited-fg: var(--gray5); //#bc9df2; //var(--gray5);
39 --link-hover-bg: var(--gray6);
40 --link-hover-fg: var(--gray1);
41
42 --heading: var(--fg-plus);
43}
diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss
new file mode 100644
index 0000000..1fc24f9
--- /dev/null
+++ b/assets/css/components/_nav.scss
@@ -0,0 +1,14 @@
1.c-nav {
2 margin-bottom: $line-height * 2rem;
3
4 &::before {
5 content: "//\\";
6 color: var(--page-item-prefix-fg);
7 }
8
9 &__item {
10 margin-left: 2ch;
11 color: var(--fg);
12 text-decoration: none;
13 }
14}
diff --git a/assets/css/components/_page-header.scss b/assets/css/components/_page-header.scss
new file mode 100644
index 0000000..29eef00
--- /dev/null
+++ b/assets/css/components/_page-header.scss
@@ -0,0 +1,17 @@
1.c-page-header {
2 margin-bottom: $line-height * 2rem;
3 overflow: hidden;
4
5 &::after {
6 position: relative;
7 z-index: -10;
8 content: str-repeat("░", 120);
9 display: block;
10 height: $line-height;
11 margin-top: px-to-em(2px);
12 padding-top: px-to-em(2px);
13 color: var(--fg-minus);
14 border-top: 1px solid var(--fg-minus);
15 line-height: $code-block-line-height;
16 }
17}
diff --git a/assets/css/components/_refs.scss b/assets/css/components/_refs.scss
new file mode 100644
index 0000000..b90252d
--- /dev/null
+++ b/assets/css/components/_refs.scss
@@ -0,0 +1,7 @@
1.c-refs__item {
2 padding-left: 0;
3
4 &::before {
5 display: none;
6 }
7}
diff --git a/assets/css/scopes/_page.scss b/assets/css/scopes/_page.scss
new file mode 100644
index 0000000..cf7673c
--- /dev/null
+++ b/assets/css/scopes/_page.scss
@@ -0,0 +1,93 @@
1.s-page {
2 padding-left: $page-item-prefix-width;
3
4 h1,
5 h2,
6 h3,
7 .c-refs__item,
8 pre {
9 position: relative;
10 margin-left: -1 * $page-item-prefix-width;
11 padding-left: $page-item-prefix-width;
12
13 &::before {
14 position: absolute;
15 box-sizing: border-box;
16 display: inline-block;
17 margin-left: -1 * $page-item-prefix-width;
18 padding-right: $page-item-prefix-pad;
19 width: $page-item-prefix-width;
20 color: var(--page-item-prefix-fg);
21 font-size: 1rem;
22 font-weight: normal;
23 text-align: right;
24 }
25
26 @media (max-width: $breakpoint-sm) {
27 margin-left: 0;
28 padding-left: 0;
29
30 &::before {
31 display: none;
32 }
33 }
34 }
35
36 h1::before {
37 content: "#";
38 }
39
40 h2::before {
41 content: "##";
42 }
43
44 h3::before {
45 content: "###";
46 }
47
48 .c-refs__item::before {
49 content: "|>";
50 }
51
52 pre::before {
53 content: str-repeat("``\A", 40);
54 height: 100%;
55 color: var(--page-item-prefix-fg);
56 overflow: hidden;
57 line-height: $code-block-line-height * ($code-block-font-size / $font-size);
58 }
59
60 hr {
61 margin-left: -1 * $page-item-prefix-width;
62 }
63
64 .c-page-header {
65 margin-left: -1 * $page-item-prefix-width;
66 padding-left: $page-item-prefix-width;
67
68 &::after {
69 margin-left: -1 * $page-item-prefix-width;
70 }
71
72 @media (max-width: $breakpoint-sm) {
73 margin-left: 0;
74 padding-left: 0;
75
76 &::after {
77 margin-left: 0;
78 }
79 }
80 }
81
82 .c-nav {
83 margin-left: -1 * $page-item-prefix-width;
84
85 @media (max-width: $breakpoint-sm) {
86 margin-left: 0;
87 }
88 }
89
90 @media (max-width: $breakpoint-sm) {
91 padding-left: 0;
92 }
93}
diff --git a/assets/css/style.scss b/assets/css/style.scss
new file mode 100644
index 0000000..7383ac4
--- /dev/null
+++ b/assets/css/style.scss
@@ -0,0 +1,11 @@
1@import "vars";
2@import "functions";
3@import "basics";
4
5@import "components/refs";
6@import "components/nav";
7@import "components/page-header";
8
9@import "scopes/page";
10
11@import "utils";
diff --git a/assets/glyphs.txt b/assets/fonts/glyphs.txt
index ac0461a..ac0461a 100644
--- a/assets/glyphs.txt
+++ b/assets/fonts/glyphs.txt
diff --git a/assets/iosevka-term-ss09-bold.ttf b/assets/fonts/iosevka-term-ss09-bold.ttf
index 85915cf..85915cf 100644
--- a/assets/iosevka-term-ss09-bold.ttf
+++ b/assets/fonts/iosevka-term-ss09-bold.ttf
Binary files differ
diff --git a/assets/iosevka-term-ss09-regular.ttf b/assets/fonts/iosevka-term-ss09-regular.ttf
index 83ddee6..83ddee6 100644
--- a/assets/iosevka-term-ss09-regular.ttf
+++ b/assets/fonts/iosevka-term-ss09-regular.ttf
Binary files differ
diff --git a/assets/style.scss b/assets/style.scss
deleted file mode 100644
index 40b18f5..0000000
--- a/assets/style.scss
+++ /dev/null
@@ -1,352 +0,0 @@
1$font-size: 18px;
2$heading-font-size: $font-size + 1;
3$code-block-font-size: $font-size - 1;
4$line-height: 1.5;
5
6$page-item-prefix-max-chars: 3ch;
7$page-item-prefix-pad: 2ch;
8$page-item-prefix-width: $page-item-prefix-max-chars + $page-item-prefix-pad;
9
10$subcontent-indent: 4ch;
11
12$breakpoint-sm: 700px;
13
14@function px-to-em($s, $b: $font-size) {
15 @return 1 / ($b / 1px) * ($s / 1px) * 1em;
16}
17
18@function str-repeat($s, $n) {
19 $r: "";
20 @while $n > 0 {
21 $r: $r + $s;
22 $n: $n - 1;
23 }
24 @return $r;
25}
26
27@font-face {
28 font-family: "Iosevka Term SS09";
29 font-style: normal;
30 font-weight: normal;
31 src: url("/iosevka-term-ss09-regular.woff2") format("woff2");
32}
33
34@font-face {
35 font-family: "Iosevka Term SS09";
36 font-style: normal;
37 font-weight: bold;
38 src: url("/iosevka-term-ss09-bold.woff2") format("woff2");
39}
40
41:root {
42 --gray1: hsl(270, 0%, 9.7%);
43 --gray2: hsl(270, 1%, 29%);
44 --gray3: hsl(270, 2%, 54%);
45 --gray4: hsl(270, 2%, 73%);
46 --gray5: hsl(270, 2%, 83%);
47 --gray6: hsl(270, 2%, 100%);
48
49 --bg: var(--gray1);
50 --bg-plus: var(--gray2);
51 --fg-minus: var(--gray3);
52 --fg: var(--gray4);
53 --fg-plus: var(--gray6);
54
55 --select-bg: hsla(270, 2%, 100%, 0.996);
56 --select-fg: var(--gray1);
57
58 --code-fg: var(--fg-minus);
59 --code-block-fg: var(--fg-minus);
60
61 --page-item-prefix-fg: var(--fg-minus);
62
63 --link-idle-fg: var(--gray6); //#90acf2; //var(--gray6);
64 --link-visited-fg: var(--gray5); //#bc9df2; //var(--gray5);
65 --link-hover-bg: var(--gray6);
66 --link-hover-fg: var(--gray1);
67
68 --heading: var(--fg-plus);
69}
70
71::selection {
72 color: var(--select-fg);
73 background-color: var(--select-bg);
74}
75
76html,
77pre,
78code {
79 font-family: "Iosevka Term SS09", "Lucida Console", "Courier New", Courier,
80 monospace;
81 font-feature-settings: "calt" 0, "dlig" 1;
82}
83
84html {
85 font-size: px-to-em($font-size, 16px);
86 line-height: $line-height;
87 background-color: var(--bg);
88 color: var(--fg);
89}
90
91body {
92 margin: 2em;
93 padding: 0;
94
95 @media (max-width: $breakpoint-sm) {
96 margin: 1em;
97 }
98}
99
100main {
101 max-width: 70ch;
102 margin: 0 auto;
103}
104
105code {
106 color: var(--code-fg);
107}
108
109pre {
110 margin: 0;
111 color: var(--code-block-fg);
112 font-size: $code-block-font-size;
113 line-height: 1.4;
114
115 strong {
116 font-weight: normal;
117 }
118}
119
120strong {
121 color: var(--fg-plus);
122 font-weight: bold;
123}
124
125ul,
126ol {
127 margin: ($line-height * 1rem) 0 0;
128 padding: 0;
129 list-style: none;
130
131 > li {
132 position: relative;
133 padding-left: $subcontent-indent;
134
135 &::before {
136 position: absolute;
137 display: inline-block;
138 width: $subcontent-indent;
139 margin-left: -1 * $subcontent-indent;
140 color: var(--fg-minus);
141 }
142 }
143}
144
145ul {
146 > li::before {
147 content: "-";
148 }
149
150 &.refs > li {
151 padding-left: 0;
152
153 &::before {
154 display: none;
155 }
156 }
157}
158
159ol {
160 counter-reset: cnt;
161
162 > li {
163 counter-increment: cnt;
164
165 &::before {
166 content: counter(cnt) ".";
167 }
168 }
169}
170
171h1,
172h2,
173h3 {
174 margin: ($line-height * 2rem) 0 0;
175
176 + h1,
177 + h2,
178 + h3 {
179 margin-top: $line-height * 1rem;
180 }
181}
182
183h1 {
184 text-transform: uppercase;
185 font-size: px-to-em($heading-font-size);
186 color: var(--heading);
187}
188
189h2 {
190 font-size: 1em;
191 color: var(--heading);
192}
193
194h3 {
195 font-size: 1em;
196}
197
198p {
199 margin: ($line-height * 1em) 0 0;
200}
201
202a {
203 position: relative;
204 z-index: 1000;
205 padding: 0.1em 0.3em;
206 margin: 0 -0.3em;
207 color: var(--link-idle-fg);
208
209 &:visited {
210 color: var(--link-visited-fg);
211 }
212
213 &:hover {
214 background-color: var(--link-hover-bg);
215 color: var(--link-hover-fg);
216 text-decoration: none;
217 }
218}
219
220hr {
221 height: 1px;
222 margin: ($line-height * 2rem) 0 ($line-height * 2rem);
223 background-color: var(--bg-plus);
224 border: 0;
225
226 @media (max-width: $breakpoint-sm) {
227 margin-left: 0;
228 }
229}
230
231blockquote {
232 position: relative;
233 margin: ($line-height * 1rem) 0 0;
234 padding-left: calc(#{$subcontent-indent} - 2px);
235 border-left: 2px solid var(--bg-plus);
236}
237
238.c-page-header {
239 margin-bottom: $line-height * 2rem;
240 overflow: hidden;
241
242 &::after {
243 position: relative;
244 z-index: -10;
245 content: str-repeat("░", 120);
246 display: block;
247 height: $line-height;
248 margin-top: px-to-em(2px);
249 padding-top: px-to-em(2px);
250 color: var(--fg-minus);
251 border-top: 1px solid var(--fg-minus);
252 }
253
254 &--sm {
255 display: none;
256 }
257
258 @media (max-width: $breakpoint-sm) {
259 display: none;
260
261 &--sm,
262 &--nohide {
263 display: block;
264 }
265 }
266}
267
268.s-page {
269 padding-left: $page-item-prefix-width;
270
271 h1,
272 h2,
273 h3,
274 ul.refs > li,
275 pre {
276 position: relative;
277 margin-left: -1 * $page-item-prefix-width;
278 padding-left: $page-item-prefix-width;
279
280 &::before {
281 position: absolute;
282 box-sizing: border-box;
283 display: inline-block;
284 margin-left: -1 * $page-item-prefix-width;
285 padding-right: $page-item-prefix-pad;
286 width: $page-item-prefix-width;
287 color: var(--page-item-prefix-fg);
288 font-size: 1rem;
289 font-weight: normal;
290 text-align: right;
291 }
292
293 @media (max-width: $breakpoint-sm) {
294 margin-left: 0;
295 padding-left: 0;
296
297 &::before {
298 display: none;
299 }
300 }
301 }
302
303 h1::before {
304 content: "#";
305 }
306
307 h2::before {
308 content: "##";
309 }
310
311 h3::before {
312 content: "###";
313 }
314
315 ul.refs > li::before {
316 content: "|>";
317 }
318
319 pre::before {
320 content: str-repeat("``\A", 40);
321 height: 100%;
322 color: var(--page-item-prefix-fg);
323 overflow: hidden;
324 line-height: 1.4 * ($code-block-font-size / $font-size)
325 }
326
327 hr {
328 margin-left: -1 * $page-item-prefix-width;
329 }
330
331 .c-page-header {
332 margin-left: -1 * $page-item-prefix-width;
333 padding-left: $page-item-prefix-width;
334
335 &::after {
336 margin-left: -1 * $page-item-prefix-width;
337 }
338
339 @media (max-width: $breakpoint-sm) {
340 margin-left: 0;
341 padding-left: 0;
342
343 &::after {
344 margin-left: 0;
345 }
346 }
347 }
348
349 @media (max-width: $breakpoint-sm) {
350 padding-left: 0;
351 }
352}
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-12-25 17:43:41 +0000