diff options
25 files changed, 466 insertions, 390 deletions
@@ -5,16 +5,7 @@ clean: | |||
5 | @rm -rf output/* | 5 | @rm -rf output/* |
6 | 6 | ||
7 | build_fonts: clean | 7 | build_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 | ||
19 | build_sass: clean | 10 | build_sass: clean |
20 | @scripts/build_sass.sh | 11 | @scripts/build_sass.sh |
@@ -34,7 +25,10 @@ watch_content: build | |||
34 | watch_templates: build | 25 | watch_templates: build |
35 | @scripts/watch_templates.sh | 26 | @scripts/watch_templates.sh |
36 | 27 | ||
37 | watch: watch_sass watch_content watch_templates | 28 | watch_metadata: build |
29 | @scripts/watch_metadata.sh | ||
30 | |||
31 | watch: watch_sass watch_content watch_templates watch_metadata | ||
38 | 32 | ||
39 | serve_only: build | 33 | serve_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 | |||
20 | html, | ||
21 | pre, | ||
22 | code { | ||
23 | font-family: "Iosevka Term SS09", "Lucida Console", "Courier New", Courier, | ||
24 | monospace; | ||
25 | font-feature-settings: "calt" 0, "dlig" 1; | ||
26 | } | ||
27 | |||
28 | html { | ||
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 | |||
35 | body { | ||
36 | margin: 2em; | ||
37 | padding: 0; | ||
38 | |||
39 | @media (max-width: $breakpoint-sm) { | ||
40 | margin: 1em; | ||
41 | } | ||
42 | } | ||
43 | |||
44 | main { | ||
45 | max-width: 70ch; | ||
46 | margin: 0 auto; | ||
47 | } | ||
48 | |||
49 | code { | ||
50 | color: var(--code-fg); | ||
51 | } | ||
52 | |||
53 | pre { | ||
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 | |||
64 | strong { | ||
65 | color: var(--fg-plus); | ||
66 | font-weight: bold; | ||
67 | } | ||
68 | |||
69 | ul, | ||
70 | ol { | ||
71 | margin: ($line-height * 1rem) 0 0; | ||
72 | padding: 0; | ||
73 | list-style: none; | ||
74 | } | ||
75 | |||
76 | li { | ||
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 | |||
89 | ul > li::before { | ||
90 | content: "-"; | ||
91 | } | ||
92 | |||
93 | ol { | ||
94 | counter-reset: cnt; | ||
95 | |||
96 | > li { | ||
97 | counter-increment: cnt; | ||
98 | |||
99 | &::before { | ||
100 | content: counter(cnt) "."; | ||
101 | } | ||
102 | } | ||
103 | } | ||
104 | |||
105 | h1, | ||
106 | h2, | ||
107 | h3 { | ||
108 | margin: ($line-height * 2rem) 0 0; | ||
109 | |||
110 | + h1, | ||
111 | + h2, | ||
112 | + h3 { | ||
113 | margin-top: $line-height * 1rem; | ||
114 | } | ||
115 | } | ||
116 | |||
117 | h1 { | ||
118 | text-transform: uppercase; | ||
119 | font-size: px-to-em($heading-font-size); | ||
120 | color: var(--heading); | ||
121 | } | ||
122 | |||
123 | h2 { | ||
124 | font-size: 1em; | ||
125 | color: var(--heading); | ||
126 | } | ||
127 | |||
128 | h3 { | ||
129 | font-size: 1em; | ||
130 | } | ||
131 | |||
132 | p { | ||
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 | |||
156 | hr { | ||
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 | |||
167 | blockquote { | ||
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 | |||
76 | html, | ||
77 | pre, | ||
78 | code { | ||
79 | font-family: "Iosevka Term SS09", "Lucida Console", "Courier New", Courier, | ||
80 | monospace; | ||
81 | font-feature-settings: "calt" 0, "dlig" 1; | ||
82 | } | ||
83 | |||
84 | html { | ||
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 | |||
91 | body { | ||
92 | margin: 2em; | ||
93 | padding: 0; | ||
94 | |||
95 | @media (max-width: $breakpoint-sm) { | ||
96 | margin: 1em; | ||
97 | } | ||
98 | } | ||
99 | |||
100 | main { | ||
101 | max-width: 70ch; | ||
102 | margin: 0 auto; | ||
103 | } | ||
104 | |||
105 | code { | ||
106 | color: var(--code-fg); | ||
107 | } | ||
108 | |||
109 | pre { | ||
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 | |||
120 | strong { | ||
121 | color: var(--fg-plus); | ||
122 | font-weight: bold; | ||
123 | } | ||
124 | |||
125 | ul, | ||
126 | ol { | ||
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 | |||
145 | ul { | ||
146 | > li::before { | ||
147 | content: "-"; | ||
148 | } | ||
149 | |||
150 | &.refs > li { | ||
151 | padding-left: 0; | ||
152 | |||
153 | &::before { | ||
154 | display: none; | ||
155 | } | ||
156 | } | ||
157 | } | ||
158 | |||
159 | ol { | ||
160 | counter-reset: cnt; | ||
161 | |||
162 | > li { | ||
163 | counter-increment: cnt; | ||
164 | |||
165 | &::before { | ||
166 | content: counter(cnt) "."; | ||
167 | } | ||
168 | } | ||
169 | } | ||
170 | |||
171 | h1, | ||
172 | h2, | ||
173 | h3 { | ||
174 | margin: ($line-height * 2rem) 0 0; | ||
175 | |||
176 | + h1, | ||
177 | + h2, | ||
178 | + h3 { | ||
179 | margin-top: $line-height * 1rem; | ||
180 | } | ||
181 | } | ||
182 | |||
183 | h1 { | ||
184 | text-transform: uppercase; | ||
185 | font-size: px-to-em($heading-font-size); | ||
186 | color: var(--heading); | ||
187 | } | ||
188 | |||
189 | h2 { | ||
190 | font-size: 1em; | ||
191 | color: var(--heading); | ||
192 | } | ||
193 | |||
194 | h3 { | ||
195 | font-size: 1em; | ||
196 | } | ||
197 | |||
198 | p { | ||
199 | margin: ($line-height * 1em) 0 0; | ||
200 | } | ||
201 | |||
202 | a { | ||
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 | |||
220 | hr { | ||
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 | |||
231 | blockquote { | ||
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 | --- | ||
2 | id: "blog" | ||
3 | title: "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 | --- |
2 | title: "Index" | 2 | id: "home" |
3 | title: "Home" | ||
4 | |||
3 | ismain: true | 5 | ismain: true |
4 | --- | 6 | --- |
5 | 7 | ||
@@ -23,7 +25,7 @@ Welcome to my website! I'm Volpeon and here's an [inline link](#). | |||
23 | 1. Lorem ipsum dolor sit amet | 25 | 1. Lorem ipsum dolor sit amet |
24 | 2. Another item | 26 | 2. 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 @@ | |||
1 | module.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 | ||
3 | SITE_TITLE="Volpeon's Den" | ||
4 | |||
5 | target () { | 3 | target () { |
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 | |||
3 | echo "[COMPILE] assets/fonts/iosevka-term-ss09-regular.ttf -> output/iosevka-term-ss09-regular.woff2" | ||
4 | |||
5 | pyftsubset 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 | |||
11 | echo "[COMPILE] assets/fonts/iosevka-term-ss09-bold.ttf -> output/iosevka-term-ss09-bold.woff2" | ||
12 | |||
13 | pyftsubset 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 | ||
3 | echo "[COMPILE] assets/style.scss -> output/style.css" | 3 | echo "[COMPILE] assets/css/style.scss -> output/style.css" |
4 | sassc assets/style.scss | node_modules/.bin/csso > output/style.css | 4 | sassc 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 | |||
3 | inotifywait -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> ' . ' | | | ' .' |