summaryrefslogtreecommitdiffstats
path: root/assets
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2020-12-21 19:57:20 +0100
committerVolpeon <git@volpeon.ink>2020-12-21 19:57:20 +0100
commitc348cc8cc76306c3d3e533888b3d30ea7566e075 (patch)
tree943f0894ea82ad7543cb3aa7cabafb0235ba6486 /assets
parentAdded HTML (diff)
downloadvolpeon.ink-c348cc8cc76306c3d3e533888b3d30ea7566e075.tar.gz
volpeon.ink-c348cc8cc76306c3d3e533888b3d30ea7566e075.tar.bz2
volpeon.ink-c348cc8cc76306c3d3e533888b3d30ea7566e075.zip
Use Pandoc to write content in Markdown
Diffstat (limited to 'assets')
-rw-r--r--assets/glyphs.txt1
-rw-r--r--assets/iosevka-term-ss09-bold.ttfbin0 -> 1557444 bytes
-rw-r--r--assets/iosevka-term-ss09-regular.ttfbin0 -> 1541132 bytes
-rw-r--r--assets/style.scss331
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
59html,
60pre,
61code {
62 font-family: "Iosevka Term SS09";
63 font-feature-settings: "calt" 0, "dlig" 1;
64}
65
66html {
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
73body {
74 margin: 2em;
75 padding: 0;
76
77 @media (max-width: 700px) {
78 margin: 1em;
79 }
80}
81
82main {
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
117code {
118 color: var(--code-fg);
119}
120
121pre {
122 margin: 0;
123 color: var(--code-block-fg);
124
125 strong {
126 font-weight: normal;
127 }
128}
129
130strong {
131 color: var(--fg-plus);
132 font-weight: bold;
133}
134
135ul,
136ol {
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
155ul {
156 > li::before {
157 content: "-";
158 }
159
160 &.refs > li {
161 padding-left: 0;
162
163 &::before {
164 display: none;
165 }
166 }
167}
168
169ol {
170 counter-reset: cnt;
171
172 > li {
173 counter-increment: cnt;
174
175 &::before {
176 content: counter(cnt) ".";
177 }
178 }
179}
180
181h1,
182h2,
183h3 {
184 margin: ($line-height * 2rem) 0 0;
185
186 + h1,
187 + h2,
188 + h3 {
189 margin-top: $line-height * 1rem;
190 }
191}
192
193h1 {
194 text-transform: uppercase;
195 font-size: px-to-em($heading-font-size);
196 color: var(--heading);
197}
198
199h2 {
200 font-size: 1em;
201 color: var(--heading);
202}
203
204h3 {
205 font-size: 1em;
206}
207
208p {
209 margin: ($line-height * 1em) 0 0;
210}
211
212a {
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
230hr {
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
241blockquote {
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}