summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/glyphs.txt1
-rw-r--r--src/iosevka-term-ss09-bold.ttfbin0 -> 1557444 bytes
-rw-r--r--src/iosevka-term-ss09-regular.ttfbin0 -> 1541132 bytes
-rw-r--r--src/style.scss301
4 files changed, 302 insertions, 0 deletions
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
84html {
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
93body {
94 margin: 2em 2em 2em 1em;
95 padding: 0;
96
97 @media (max-width: 700px) {
98 margin: 1em;
99 }
100}
101
102main {
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
112header {
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
141pre,
142code {
143 font-family: "Iosevka Term SS09";
144 //font-feature-settings: "calt" 0, "PURS" 0;
145}
146
147pre {
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
165strong {
166 color: var(--gray5);
167 font-weight: bold;
168}
169
170ul,
171ol {
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
185ul {
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
198ol {
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
211h1,
212h2,
213h3 {
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
225h1 {
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
235h2 {
236 font-size: 1em;
237 color: var(--heading);
238
239 &::before {
240 content: "##";
241 }
242}
243
244h3 {
245 font-size: 1em;
246
247 &::before {
248 content: "###";
249 }
250}
251
252p {
253 margin: ($line-height * 1em) 0 0;
254}
255
256a {
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
274hr {
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
286blockquote {
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}