summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2020-12-24 15:05:32 +0100
committerVolpeon <git@volpeon.ink>2020-12-24 15:05:32 +0100
commit714d8f7ff8425e4177ff6bde4d214ef75be6b1ab (patch)
treebc343dd424b14bcadef61a80bfe7d423c139445c
parentImproved typography (diff)
downloadvolpeon.ink-714d8f7ff8425e4177ff6bde4d214ef75be6b1ab.tar.gz
volpeon.ink-714d8f7ff8425e4177ff6bde4d214ef75be6b1ab.tar.bz2
volpeon.ink-714d8f7ff8425e4177ff6bde4d214ef75be6b1ab.zip
Added header, improved SCSS structure, use metadata file instead of param, improved folder structure
Diffstat
-rw-r--r--Makefile16
-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
-rw-r--r--content/blog/index.md6
-rw-r--r--content/index.md10
-rw-r--r--metadata/metadata.json17
-rw-r--r--postcss.config.js7
-rwxr-xr-xscripts/build_content.sh4
-rwxr-xr-xscripts/build_fonts.sh17
-rwxr-xr-xscripts/build_sass.sh4
-rwxr-xr-xscripts/watch_metadata.sh7
-rw-r--r--templates/base.html28
-rw-r--r--templates/pageHeader.html2
-rw-r--r--templates/pageHeaderSm.html2
25 files changed, 466 insertions, 390 deletions
diff --git a/Makefile b/Makefile
index c9d0cf8..5a00cdc 100644
--- a/Makefile
+++ b/Makefile
@@ -5,16 +5,7 @@ clean:
5 @rm -rf output/* 5 @rm -rf output/*
6 6
7build_fonts: clean 7build_fonts: clean
8 @pyftsubset assets/iosevka-term-ss09-regular.ttf \ 8 @scripts/build_fonts.sh
9 --text-file='assets/glyphs.txt' \
10 --layout-features+=ss09,dlig \
11 --flavor='woff2' \
12 --output-file='output/iosevka-term-ss09-regular.woff2'
13 @pyftsubset assets/iosevka-term-ss09-bold.ttf \
14 --text-file='assets/glyphs.txt' \
15 --layout-features+=ss09,dlig \
16 --flavor='woff2' \
17 --output-file='output/iosevka-term-ss09-bold.woff2'
18 9
19build_sass: clean 10build_sass: clean
20 @scripts/build_sass.sh 11 @scripts/build_sass.sh
@@ -34,7 +25,10 @@ watch_content: build
34watch_templates: build 25watch_templates: build
35 @scripts/watch_templates.sh 26 @scripts/watch_templates.sh
36 27
37watch: watch_sass watch_content watch_templates 28watch_metadata: build
29 @scripts/watch_metadata.sh
30
31watch: watch_sass watch_content watch_templates watch_metadata
38 32
39serve_only: build 33serve_only: build
40 @python -m http.server --bind 127.0.0.1 --directory output 34 @python -m http.server --bind 127.0.0.1 --directory output
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}
diff --git a/content/blog/index.md b/content/blog/index.md
new file mode 100644
index 0000000..486c57b
--- /dev/null
+++ b/content/blog/index.md
@@ -0,0 +1,6 @@
1---
2id: "blog"
3title: "Blog"
4---
5
6# Blog
diff --git a/content/index.md b/content/index.md
index f595457..64c3e77 100644
--- a/content/index.md
+++ b/content/index.md
@@ -1,5 +1,7 @@
1--- 1---
2title: "Index" 2id: "home"
3title: "Home"
4
3ismain: true 5ismain: true
4--- 6---
5 7
@@ -23,7 +25,7 @@ Welcome to my website! I'm Volpeon and here's an [inline link](#).
231. Lorem ipsum dolor sit amet 251. Lorem ipsum dolor sit amet
242. Another item 262. Another item
25 27
26<ul class="refs"> 28<ul>
27 <li><a href="#">Lorem ipsum dolor sit amet</a></li> 29 <li class="c-refs__item"><a href="#">Lorem ipsum dolor sit amet</a></li>
28 <li><a href="#">Another item</a></li> 30 <li class="c-refs__item"><a href="#">Another item</a></li>
29</ul> 31</ul>
diff --git a/metadata/metadata.json b/metadata/metadata.json
new file mode 100644
index 0000000..dce6192
--- /dev/null
+++ b/metadata/metadata.json
@@ -0,0 +1,17 @@
1{
2 "sitetitle": "Volpeon's Den",
3 "menus": {
4 "main": [
5 {
6 "id": "home",
7 "label": "Home",
8 "url": "/"
9 },
10 {
11 "id": "blog",
12 "label": "Blog",
13 "url": "/blog"
14 }
15 ]
16 }
17}
diff --git a/postcss.config.js b/postcss.config.js
deleted file mode 100644
index 97f9abb..0000000
--- a/postcss.config.js
+++ /dev/null
@@ -1,7 +0,0 @@
1module.exports = {
2 plugins: [
3 require("cssnano")({
4 preset: "default",
5 }),
6 ],
7};
diff --git a/scripts/build_content.sh b/scripts/build_content.sh
index 0698ee0..ca75120 100755
--- a/scripts/build_content.sh
+++ b/scripts/build_content.sh
@@ -1,7 +1,5 @@
1#!/bin/bash 1#!/bin/bash
2 2
3SITE_TITLE="Volpeon's Den"
4
5target () { 3target () {
6 if [ "${1#*.}" = "md" ]; then 4 if [ "${1#*.}" = "md" ]; then
7 echo "output/$(echo "${1%.md}.html" | cut -sd / -f 2-)" 5 echo "output/$(echo "${1%.md}.html" | cut -sd / -f 2-)"
@@ -22,7 +20,7 @@ handle () {
22 -t html5 \ 20 -t html5 \
23 --template templates/base.html \ 21 --template templates/base.html \
24 -o "$TARGET" \ 22 -o "$TARGET" \
25 --metadata sitetitle="$SITE_TITLE" 23 --metadata-file metadata/metadata.json
26 else 24 else
27 echo "[COPY ] $1 -> $TARGET" 25 echo "[COPY ] $1 -> $TARGET"
28 26
diff --git a/scripts/build_fonts.sh b/scripts/build_fonts.sh
new file mode 100755
index 0000000..8c795ec
--- /dev/null
+++ b/scripts/build_fonts.sh
@@ -0,0 +1,17 @@
1#!/bin/bash
2
3echo "[COMPILE] assets/fonts/iosevka-term-ss09-regular.ttf -> output/iosevka-term-ss09-regular.woff2"
4
5pyftsubset assets/fonts/iosevka-term-ss09-regular.ttf \
6 --text-file='assets/fonts/glyphs.txt' \
7 --layout-features+=ss09,dlig \
8 --flavor='woff2' \
9 --output-file='output/iosevka-term-ss09-regular.woff2'
10
11echo "[COMPILE] assets/fonts/iosevka-term-ss09-bold.ttf -> output/iosevka-term-ss09-bold.woff2"
12
13pyftsubset assets/fonts/iosevka-term-ss09-bold.ttf \
14 --text-file='assets/fonts/glyphs.txt' \
15 --layout-features+=ss09,dlig \
16 --flavor='woff2' \
17 --output-file='output/iosevka-term-ss09-bold.woff2'
diff --git a/scripts/build_sass.sh b/scripts/build_sass.sh
index a6d9c93..2e25f10 100755
--- a/scripts/build_sass.sh
+++ b/scripts/build_sass.sh
@@ -1,4 +1,4 @@
1#!/bin/bash 1#!/bin/bash
2 2
3echo "[COMPILE] assets/style.scss -> output/style.css" 3echo "[COMPILE] assets/css/style.scss -> output/style.css"
4sassc assets/style.scss | node_modules/.bin/csso > output/style.css 4sassc assets/css/style.scss | node_modules/.bin/csso > output/style.css
diff --git a/scripts/watch_metadata.sh b/scripts/watch_metadata.sh
new file mode 100755
index 0000000..af2e6a7
--- /dev/null
+++ b/scripts/watch_metadata.sh
@@ -0,0 +1,7 @@
1#!/bin/bash
2
3inotifywait -qrme close_write,delete,move --format "%w%f" metadata \
4 | while read FILENAME
5 do
6 scripts/build_content.sh
7 done
diff --git a/templates/base.html b/templates/base.html
index 25232dc..cc05840 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -1,5 +1,5 @@
1<!DOCTYPE html> 1<!DOCTYPE html>
2<html> 2<html lang="en">
3 3
4<head> 4<head>
5 <meta charset="utf-8" /> 5 <meta charset="utf-8" />
@@ -17,28 +17,38 @@
17 $endif$ 17 $endif$
18 <title>$if(ismain)$$else$$title$ – $endif$$sitetitle$</title> 18 <title>$if(ismain)$$else$$title$ – $endif$$sitetitle$</title>
19 <link rel="stylesheet" href="/style.css" /> 19 <link rel="stylesheet" href="/style.css" />
20 $if(id)$
21 <style>
22 .c-nav__item--$id$ {
23 font-weight: bold;
24 color: var(--fg-plus);
25 }
26 </style>
27 $endif$
20</head> 28</head>
21 29
22<body> 30<body>
23 <main class="s-page"> 31 <main class="s-page">
24 $if(ismain)$ 32 <nav class="c-nav">
33 $for(menus.main)$
34 <a class="c-nav__item c-nav__item--$it.id$" href="$it.url$">$it.label$</a>
35 $endfor$
36 </nav>
37
25 <header class="c-page-header" role="presentation"> 38 <header class="c-page-header" role="presentation">
39 $if(ismain)$
26${pageHeader()} 40${pageHeader()}
27 </header> 41 $else$
28 $else$
29 <header class="c-page-header c-page-header--nohide" role="presentation">
30${pageHeaderSm()} 42${pageHeaderSm()}
43 $endif$
31 </header> 44 </header>
32 $endif$
33 45
34 $body$ 46 $body$
35 </main> 47 </main>
36 48
37 $if(ismain)$ 49 $if(ismain)$
38 <template id="header-sm"> 50 <template id="header-sm">
39 <header class="c-page-header c-page-header--sm" role="presentation">
40${pageHeaderSm()} 51${pageHeaderSm()}
41 </header>
42 </template> 52 </template>
43 53
44 <script> 54 <script>
@@ -46,7 +56,7 @@ ${pageHeaderSm()}
46 var headerTemplateEl = document.getElementById("header-sm"); 56 var headerTemplateEl = document.getElementById("header-sm");
47 var headerSmEl = headerTemplateEl.content.cloneNode("true"); 57 var headerSmEl = headerTemplateEl.content.cloneNode("true");
48 58
49 headerEl.parentElement.insertBefore(headerSmEl, headerEl.nextElementSibling); 59 headerEl.appendChild(headerSmEl);
50 </script> 60 </script>
51 $endif$ 61 $endif$
52</body> 62</body>
diff --git a/templates/pageHeader.html b/templates/pageHeader.html
index 93cab59..9fe1867 100644
--- a/templates/pageHeader.html
+++ b/templates/pageHeader.html
@@ -8,7 +8,7 @@
8___\___.___:____(:/\_-,______\:.\_-,____.__\_.\______.__:___\__.___)_.___,/____ 8___\___.___:____(:/\_-,______\:.\_-,____.__\_.\______.__:___\__.___)_.___,/____
9░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ 9░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
10--> 10-->
11<pre> 11<pre class="u-hidden@sm-down">
12' | ' ' ' ' ' | | | ' ' 12' | ' ' ' ' ' | | | ' '
13 | ' ' ' <strong>//\_</strong> ' | ' . | ' ' 13 | ' ' ' <strong>//\_</strong> ' | ' . | ' '
14 .| ' <strong>____,...,______..,_~`` -`..,</strong> ' | ' | ' ' 14 .| ' <strong>____,...,______..,_~`` -`..,</strong> ' | ' | ' '
diff --git a/templates/pageHeaderSm.html b/templates/pageHeaderSm.html
index 16a029d..9386b8c 100644
--- a/templates/pageHeaderSm.html
+++ b/templates/pageHeaderSm.html
@@ -4,7 +4,7 @@
4 '| .´ ,~'\ ).,__,)/,," ' . ' | | | ' .' 4 '| .´ ,~'\ ).,__,)/,," ' . ' | | | ' .'
5 |_ `~´ (/\\, (/\\, _' '_ _| ' |_ _' '_ 5 |_ `~´ (/\\, (/\\, _' '_ _| ' |_ _' '_
6--> 6-->
7<pre> 7<pre class="$if(ismain)$u-hidden@sm-up$endif$">
8 .| <strong> //\__</strong> ' .' | . | ' . ' 8 .| <strong> //\__</strong> ' .' | . | ' . '
9 | <strong> _.~-"""-----~`` ,-´</strong> ' ' |' | ' ' 9 | <strong> _.~-"""-----~`` ,-´</strong> ' ' |' | ' '
10 '| <strong>.´ ,~'\ ).,__,)/,," </strong> ' . ' | | | ' .' 10 '| <strong>.´ ,~'\ ).,__,)/,," </strong> ' . ' | | | ' .'
generated by cgit v1.2.3-54-g00ecf (git 2.45.2) at 2024-07-03 12:56:47 +0000