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