summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2021-03-21 12:52:39 +0100
committerVolpeon <git@volpeon.ink>2021-03-21 12:52:39 +0100
commit8e1e42fcb54c33816d00b26a949753e6c3c9a904 (patch)
tree934f5193c9b6b956a9f982c8b9956a4e8c2c7270
parentWIP: Redesign (diff)
downloadvolpeon.ink-8e1e42fcb54c33816d00b26a949753e6c3c9a904.tar.gz
volpeon.ink-8e1e42fcb54c33816d00b26a949753e6c3c9a904.tar.bz2
volpeon.ink-8e1e42fcb54c33816d00b26a949753e6c3c9a904.zip
WIP: Redesign
Diffstat
-rw-r--r--.gitignore2
-rw-r--r--assets/css/_basics.scss85
-rw-r--r--assets/css/_vars.scss20
-rw-r--r--assets/css/components/_footer.scss6
-rw-r--r--assets/css/components/_hero.scss45
-rw-r--r--assets/css/components/_nav.scss71
-rw-r--r--assets/css/components/_page.scss3
-rw-r--r--assets/css/layouts/_container.scss29
-rw-r--r--assets/css/layouts/_site.scss46
-rw-r--r--assets/css/scopes/_code.scss27
-rw-r--r--assets/css/scopes/_page.scss25
-rw-r--r--assets/css/style.scss11
-rw-r--r--assets/favicon/favicon.svg75
-rw-r--r--content/favicon.icobin7406 -> 15086 bytes
-rw-r--r--templates/layouts/index.html22
-rw-r--r--templates/layouts/page.html11
16 files changed, 267 insertions, 211 deletions
diff --git a/.gitignore b/.gitignore
index 1406277..dea1d0a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,4 @@
1assets/favicon/*.png
2assets/favicon/*.ico
1node_modules 3node_modules
2output 4output
diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index 1cd5547..740b293 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -1,28 +1,27 @@
1@font-face { 1@font-face {
2 font-family: 'IBM Plex Sans'; 2 font-family: 'IBM Plex Sans';
3 font-style: normal; 3 font-style: normal;
4 font-weight: normal; 4 font-weight: normal;
5 src: //local('IBM Plex Sans'), 5 src: url('/IBMPlexSans-Regular.woff2') format('woff2');
6 url('/IBMPlexSans-Regular.woff2') format('woff2');
7} 6}
8 7
9@font-face { 8@font-face {
10 font-family: 'IBM Plex Sans'; 9 font-family: 'IBM Plex Sans';
11 font-style: normal; 10 font-style: normal;
12 font-weight: bold; 11 font-weight: bold;
13 src: url('/IBMPlexSans-Bold.woff2') format('woff2'); 12 src: url('/IBMPlexSans-Bold.woff2') format('woff2');
14} 13}
15 14
16@font-face { 15@font-face {
17 font-family: 'Garet Variable'; 16 font-family: 'Garet Variable';
18 font-style: normal; 17 font-style: normal;
19 font-weight: 50 950; 18 font-weight: 50 950;
20 src: url('/GaretVariable.woff2') format('woff2-variations'); 19 src: url('/GaretVariable.woff2') format('woff2-variations');
21} 20}
22 21
23::selection { 22::selection {
24 background-color: var(--select--bg); 23 background-color: var(--select--bg);
25 color: var(--select--fg); 24 color: var(--select--fg);
26} 25}
27 26
28img::selection { 27img::selection {
@@ -37,14 +36,14 @@ code {
37 36
38html { 37html {
39 background-color: prop(--colors --bg); 38 background-color: prop(--colors --bg);
40 color: prop(--colors --fg); 39 color: prop(--colors --fg);
41 font-family: $font-fam--text; 40 font-family: $font-fam--text;
42 font-size: px-to-em($font-size, 16px); 41 font-size: px-to-em($font-size, 16px);
43 line-height: $line-height; 42 line-height: $line-height;
44} 43}
45 44
46body { 45body {
47 margin: 0; 46 margin: 0;
48 padding: 0; 47 padding: 0;
49} 48}
50 49
@@ -58,7 +57,7 @@ code {
58} 57}
59 58
60pre { 59pre {
61 margin: ($line-height * 1em) 0 0; 60 margin: ($line-height * 1em) 0 0;
62 overflow-x: auto; 61 overflow-x: auto;
63 62
64 code { 63 code {
@@ -67,27 +66,27 @@ pre {
67} 66}
68 67
69strong { 68strong {
70 color: prop(--colors --fg-lo); 69 color: prop(--colors --fg-lo);
71 font-weight: bold; 70 font-weight: bold;
72} 71}
73 72
74ul, 73ul,
75ol { 74ol {
76 margin: ($line-height * 1em) 0 0; 75 margin: ($line-height * 1em) 0 0;
77 padding: 0; 76 padding: 0;
78 list-style: none; 77 list-style: none;
79} 78}
80 79
81li { 80li {
82 position: relative; 81 position: relative;
83 padding-left: $subcontent--indent; 82 padding-left: $subcontent--indent;
84 83
85 &::before { 84 &::before {
86 display: inline-block; 85 display: inline-block;
87 position: absolute; 86 position: absolute;
88 width: $subcontent--indent; 87 width: $subcontent--indent;
89 margin-left: -1 * $subcontent--indent; 88 margin-left: -1 * $subcontent--indent;
90 color: prop(--colors --fg-hi); 89 color: prop(--colors --fg-hi);
91 font-family: $font-fam--mono; 90 font-family: $font-fam--mono;
92 } 91 }
93} 92}
@@ -113,7 +112,7 @@ ul ul {
113} 112}
114 113
115dl { 114dl {
116 margin: ($line-height * 1em) 0 0; 115 margin: ($line-height * 1em) 0 0;
117 padding: 0; 116 padding: 0;
118} 117}
119 118
@@ -123,12 +122,12 @@ dd {
123} 122}
124 123
125dt { 124dt {
126 color: prop(--colors --fg-lo); 125 color: prop(--colors --fg-lo);
127 font-weight: bold; 126 font-weight: bold;
128 127
129 &::after { 128 &::after {
130 content: ':'; 129 content: ':';
131 color: prop(--colors --fg); 130 color: prop(--colors --fg);
132 font-weight: normal; 131 font-weight: normal;
133 } 132 }
134} 133}
@@ -143,11 +142,11 @@ h3,
143h4, 142h4,
144h5, 143h5,
145h6 { 144h6 {
146 margin: ($line-height * 2em) 0 0; 145 margin: ($line-height * 2em) 0 0;
147 font-family: $font-fam--large; 146 font-family: $font-fam--large;
148 font-size: 1em; 147 font-size: 1em;
149 font-weight: 600; 148 font-weight: 600;
150 line-height: 1.2; 149 line-height: 1.2;
151 font-feature-settings: 'ss02' 1; 150 font-feature-settings: 'ss02' 1;
152 151
153 + h1, 152 + h1,
@@ -170,22 +169,22 @@ h1 {
170} 169}
171 170
172p { 171p {
173 margin: ($line-height * 1em) 0 0; 172 margin: ($line-height * 1em) 0 0;
174 hyphens: auto; 173 hyphens: auto;
175} 174}
176 175
177:link, 176:link,
178:visited { 177:visited {
179 position: relative; 178 position: relative;
180 z-index: 1; 179 z-index: 1;
181 margin: 0 -.3em; 180 margin: 0 -.3em;
182 padding: .2em .3em; 181 padding: .2em .3em;
183 color: var(--link--idle--fg); 182 color: var(--link--idle--fg);
184 183
185 &:hover { 184 &:hover {
186 background-color: var(--link--hover--bg); 185 background-color: var(--link--hover--bg);
187 color: var(--link--hover--fg); 186 color: var(--link--hover--fg);
188 text-decoration: none; 187 text-decoration: none;
189 } 188 }
190 189
191 strong { 190 strong {
@@ -194,15 +193,15 @@ p {
194} 193}
195 194
196hr { 195hr {
197 height: 1px; 196 height: 1px;
198 margin: ($line-height * 1em) 0; 197 margin: ($line-height * 1em) 0;
199 border: 0; 198 border: 0;
200 background-color: prop(--colors --obj); 199 background-color: prop(--colors --obj);
201} 200}
202 201
203blockquote, 202blockquote,
204pre { 203pre {
205 margin: ($line-height * 1em) 0 0 1px; 204 margin: ($line-height * 1em) 0 0 1px;
206 padding-left: calc(#{$subcontent--indent} - 3px); 205 padding-left: calc(#{$subcontent--indent} - 3px);
207 border-left: 2px solid prop(--colors --obj); 206 border-left: 2px solid prop(--colors --obj);
208} 207}
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index ae8a7a8..3461b81 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -13,12 +13,12 @@ $unit-intervals: (
13 '': 0 13 '': 0
14); 14);
15 15
16$font-fam--text: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; 16$font-fam--text: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
17$font-fam--large: 'Garet Variable', $font-fam--text; 17$font-fam--large: 'Garet Variable', $font-fam--text;
18$font-fam--mono: 'Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; 18$font-fam--mono: 'Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;
19$font-size: 16px; 19$font-size: 16px;
20$line-height: 1.7; 20$line-height: 1.7;
21$content--width: 56rem; 21$content--width: 56rem;
22$subcontent--indent: 2em; 22$subcontent--indent: 2em;
23 23
24$gray0: hsl(220, 0%, 7%); 24$gray0: hsl(220, 0%, 7%);
@@ -43,6 +43,14 @@ $gray5: hsl(220, 0%, 100%);
43 ) 43 )
44)); 44));
45 45
46@each $breakpoint in map-keys($breakpoints) {
47 @include media('<=#{$breakpoint}') {
48 @include store((
49 --colors: ()
50 ), $breakpoint);
51 }
52}
53
46:root { 54:root {
47 --heading--fg: var(--colors--fg-lo); 55 --heading--fg: var(--colors--fg-lo);
48 56
diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss
index 8fcbc98..db30fcd 100644
--- a/assets/css/components/_footer.scss
+++ b/assets/css/components/_footer.scss
@@ -9,9 +9,9 @@
9 )); 9 ));
10 10
11 @include component(namespace()) { 11 @include component(namespace()) {
12 padding-top: prop(--dims --pad-y); 12 padding-top: prop(--dims --pad-y);
13 padding-bottom: prop(--dims --pad-y); 13 padding-bottom: prop(--dims --pad-y);
14 color: prop(--colors --fg); 14 color: prop(--colors --fg);
15 text-align: right; 15 text-align: right;
16 } 16 }
17} 17}
diff --git a/assets/css/components/_hero.scss b/assets/css/components/_hero.scss
index 6c497a1..3d8890e 100644
--- a/assets/css/components/_hero.scss
+++ b/assets/css/components/_hero.scss
@@ -1,6 +1,7 @@
1@include namespace('hero') { 1@include namespace('hero') {
2 @include store(( 2 @include store((
3 --colors: ( 3 --colors: (
4 --emph-fg: prop(--colors --accent, $global: true),
4 --back-fg: prop(--colors --bg-hi, $global: true) 5 --back-fg: prop(--colors --bg-hi, $global: true)
5 ) 6 )
6 )); 7 ));
@@ -8,42 +9,44 @@
8 @include component(namespace()) { 9 @include component(namespace()) {
9 display: flex; 10 display: flex;
10 position: relative; 11 position: relative;
11 flex-direction: column;
12 align-items: center; 12 align-items: center;
13 justify-content: center; 13 justify-content: center;
14 text-align: center; 14 text-align: center;
15 15
16 @include element('title', 'backtitle') { 16 @include element('title') {
17 margin: 0 auto; 17 margin-top: 0;
18 font-family: $font-fam--large; 18 font-family: $font-fam--large;
19 text-transform: none; 19 text-transform: none;
20 }
21 20
22 @include element('emph') { 21 @include modifier('front') {
23 color: prop(--colors --accent, $global: true); 22 max-width: 7em;
24 font-weight: 500; 23 font-size: 2.5rem;
25 } 24 font-weight: 200;
25 }
26 26
27 @include element('title') { 27 @include modifier('back') {
28 max-width: 11em; 28 position: absolute;
29 font-weight: 200; 29 z-index: -10;
30 transform: translateY(-.08em);
31 color: prop(--colors --back-fg);
32 }
30 } 33 }
31 34
32 @include element('backtitle') { 35 @include element('emph') {
33 position: absolute; 36 color: prop(--colors --emph-fg);
34 z-index: -10; 37 font-weight: 500;
35 transform: translateY(-.08em);
36 color: prop(--colors --back-fg);
37 } 38 }
38 39
39 @include iro-responsive-env(('xs', 'sm', 'md')) { 40 @include iro-responsive-env(('xs', 'sm', 'md')) {
40 @include element('title') { 41 @include element('title') {
41 padding: iro-responsive-set((7rem, 7rem, 10rem)) 0; 42 @include modifier('front') {
42 font-size: iro-responsive-set((1.8rem, 2.8rem, 3.3rem)); 43 padding: iro-responsive-set((7rem, 7rem, 10rem)) 0;
43 } 44 font-size: iro-responsive-set((2.2rem, 3rem, 3.5rem));
45 }
44 46
45 @include element('backtitle') { 47 @include modifier('back') {
46 font-size: iro-responsive-set((12rem, 14rem, 16rem)); 48 font-size: iro-responsive-set((12rem, 14rem, 16rem));
49 }
47 } 50 }
48 } 51 }
49 } 52 }
diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss
index 2472706..8fc4564 100644
--- a/assets/css/components/_nav.scss
+++ b/assets/css/components/_nav.scss
@@ -2,13 +2,10 @@
2 @include store(( 2 @include store((
3 --dims: ( 3 --dims: (
4 --font-size: 15px, 4 --font-size: 15px,
5 --pad-y: 1em, 5 --pad-y: 1em,
6 --pad-y-sm: .5em,
7 --item: ( 6 --item: (
8 --pad-x: 1em, 7 --pad-x: 1em,
9 --pad-x-sm: .75em,
10 --pad-y: 1em, 8 --pad-y: 1em,
11 --pad-y-sm: .75em,
12 ), 9 ),
13 ), 10 ),
14 --colors: ( 11 --colors: (
@@ -34,69 +31,63 @@
34 ) 31 )
35 )); 32 ));
36 33
34 @include store((
35 --dims: (
36 --pad-y: .5em,
37 --item: (
38 --pad-x: .75em,
39 --pad-y: .75em,
40 ),
41 )
42 ), 'sm');
43
37 @include component(namespace()) { 44 @include component(namespace()) {
38 display: flex; 45 display: flex;
39 align-items: center; 46 align-items: center;
40 padding: prop(--dims --pad-y) 0; 47 padding: prop(--dims --pad-y) 0;
41 font-size: prop(--dims --font-size); 48 font-size: prop(--dims --font-size);
42 49
43 @include element('logo') { 50 @include element('logo') {
44 display: inline-block; 51 display: inline-block;
45 margin: 0; 52 margin: 0;
46 padding: prop(--dims --item --pad-y) 0; 53 padding: prop(--dims --item --pad-y) 0;
47 color: prop(--colors --logo --idle --fg); 54 color: prop(--colors --logo --idle --fg);
48 font-family: $font-fam--mono; 55 font-family: $font-fam--mono;
49 text-decoration: none; 56 text-decoration: none;
50 57
51 &:link, 58 &:link,
52 &:visited { 59 &:visited {
53 &:hover { 60 &:hover {
54 background-color: transparent; 61 background-color: transparent;
55 color: prop(--colors --logo --hover --fg); 62 color: prop(--colors --logo --hover --fg);
56 } 63 }
57 } 64 }
58 } 65 }
59 66
60 @include element('logo-symbol') { 67 @include element('logo-symbol') {
61 display: block; 68 display: block;
62 width: $line-height * .9em; 69 width: $line-height * .9em;
63 height: $line-height * 1em; 70 height: $line-height * 1em;
64 } 71 }
65 72
66 @include element('item') { 73 @include element('item') {
67 display: inline-block; 74 display: inline-block;
68 margin: 0 calc(-1 * #{prop(--dims --item --pad-x)}) 0 prop(--dims --item --pad-x); 75 margin: 0 calc(-1 * #{prop(--dims --item --pad-x)}) 0 prop(--dims --item --pad-x);
69 padding: prop(--dims --item --pad-y) prop(--dims --item --pad-x); 76 padding: prop(--dims --item --pad-y) prop(--dims --item --pad-x);
70 color: prop(--colors --item --idle --fg); 77 color: prop(--colors --item --idle --fg);
71 text-decoration: none; 78 text-decoration: none;
72 text-transform: uppercase; 79 text-transform: uppercase;
73 80
74 &:hover { 81 &:hover {
75 background-color: transparent; 82 background-color: transparent;
76 color: prop(--colors --item --hover --fg); 83 color: prop(--colors --item --hover --fg);
77 text-decoration: underline; 84 text-decoration: underline;
78 } 85 }
79 86
80 @include modifier('active') { 87 @include modifier('active') {
81 border-color: prop(--colors --item --active --fg); 88 border-color: prop(--colors --item --active --fg);
82 color: prop(--colors --item --active --fg); 89 color: prop(--colors --item --active --fg);
83 font-weight: bold; 90 font-weight: bold;
84 }
85 }
86
87 @include media('<=sm') {
88 padding: prop(--dims --pad-y-sm) 0;
89
90 @include element('logo', 'item') {
91 padding-top: prop(--dims --item --pad-y-sm);
92 padding-bottom: prop(--dims --item --pad-y-sm);
93 }
94
95 @include element('item') {
96 margin-right: calc(-1 * #{prop(--dims --item --pad-x-sm)});
97 margin-left: prop(--dims --item --pad-x-sm);
98 padding-right: prop(--dims --item --pad-x-sm);
99 padding-left: prop(--dims --item --pad-x-sm);
100 } 91 }
101 } 92 }
102 } 93 }
diff --git a/assets/css/components/_page.scss b/assets/css/components/_page.scss
deleted file mode 100644
index ef39061..0000000
--- a/assets/css/components/_page.scss
+++ /dev/null
@@ -1,3 +0,0 @@
1@include component('page') {
2 //
3}
diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss
index 2bb4d80..2e102ee 100644
--- a/assets/css/layouts/_container.scss
+++ b/assets/css/layouts/_container.scss
@@ -2,35 +2,30 @@
2 @include store(( 2 @include store((
3 --dims: ( 3 --dims: (
4 --pad-x: 2rem, 4 --pad-x: 2rem,
5 --pad-x-sm: 1rem, 5 --pad-y: $line-height * 2rem
6 --pad-y: $line-height * 2rem,
7 --pad-y-sm: $line-height * 1rem
8 ) 6 )
9 )); 7 ));
10 8
9 @include store((
10 --dims: (
11 --pad-x: 1rem,
12 --pad-y: $line-height * 1rem
13 )
14 ), 'sm');
15
11 @include layout(namespace()) { 16 @include layout(namespace()) {
12 padding-right: prop(--dims --pad-x); 17 padding-right: prop(--dims --pad-x);
13 padding-left: prop(--dims --pad-x); 18 padding-left: prop(--dims --pad-x);
14 19
15 @include modifier('content') { 20 @include modifier('content') {
16 max-width: $content--width; 21 max-width: $content--width;
17 margin-right: auto; 22 margin-right: auto;
18 margin-left: auto; 23 margin-left: auto;
19 } 24 }
20 25
21 @include modifier('pad-v') { 26 @include modifier('pad-v') {
22 padding-top: prop(--dims --pad-y); 27 padding-top: prop(--dims --pad-y);
23 padding-bottom: prop(--dims --pad-y); 28 padding-bottom: prop(--dims --pad-y);
24 } 29 }
25
26 @include media('<=sm') {
27 padding-right: prop(--dims --pad-x-sm);
28 padding-left: prop(--dims --pad-x-sm);
29
30 @include modifier('pad-v') {
31 padding-top: prop(--dims --pad-y-sm);
32 padding-bottom: prop(--dims --pad-y-sm);
33 }
34 }
35 } 30 }
36} 31}
diff --git a/assets/css/layouts/_site.scss b/assets/css/layouts/_site.scss
new file mode 100644
index 0000000..2c06606
--- /dev/null
+++ b/assets/css/layouts/_site.scss
@@ -0,0 +1,46 @@
1@include namespace('site') {
2 @include store((
3 --dims: (
4 --outer-pad-x: 6rem,
5 --inner-pad-x: 2rem,
6 --pad-y: 6rem,
7 )
8 ));
9
10 @include layout(namespace()) {
11 display: flex;
12 flex-direction: row;
13 justify-content: space-around;
14
15 @include element('col') {
16 box-sizing: border-box;
17 flex: 0 0 auto;
18 width: 100%;
19 min-width: 0;
20 max-width: 35rem;
21 height: 100%;
22 padding: prop(--dims --pad-y) prop(--dims --inner-pad-x) prop(--dims --pad-y) prop(--dims --outer-pad-x);
23
24 @include next-twin-element {
25 flex: 1 1 auto;
26 max-width: 45rem;
27 height: auto;
28 padding-right: prop(--dims --outer-pad-x);
29 padding-left: prop(--dims --inner-pad-x);
30 }
31 }
32
33 @include media('<=sm') {
34 display: block;
35
36 @include element('col') {
37 width: auto;
38 height: auto;
39
40 @include next-twin-element {
41 width: auto;
42 }
43 }
44 }
45 }
46}
diff --git a/assets/css/scopes/_code.scss b/assets/css/scopes/_code.scss
deleted file mode 100644
index 3f50ce3..0000000
--- a/assets/css/scopes/_code.scss
+++ /dev/null
@@ -1,27 +0,0 @@
1@include scope('code') {
2 @include modifier('highlight') {
3 pre {
4 color: var(--fg-lo);
5 }
6 }
7
8 pre {
9 font-size: 1em;
10 line-height: $line-height;
11 }
12
13 /* stylelint-disable selector-class-pattern */
14
15 .c {
16 color: var(--fg-hi);
17 }
18
19 .kt,
20 .k,
21 .kr,
22 .o,
23 .si,
24 .p {
25 color: var(--fg);
26 }
27}
diff --git a/assets/css/scopes/_page.scss b/assets/css/scopes/_page.scss
deleted file mode 100644
index 70489fb..0000000
--- a/assets/css/scopes/_page.scss
+++ /dev/null
@@ -1,25 +0,0 @@
1@include scope('page-content') {
2 :link {
3 color: var(--page--link--idle--fg);
4 }
5
6 :visited {
7 color: var(--page--link--visited--fg);
8 }
9
10 :link,
11 :visited {
12 &:hover {
13 background-color: var(--page--link--hover--bg);
14 color: var(--page--link--hover--fg);
15 }
16 }
17
18 img {
19 max-width: 100%;
20 }
21
22 > :first-child {
23 margin-top: 0;
24 }
25}
diff --git a/assets/css/style.scss b/assets/css/style.scss
index dad774a..c8fd0c1 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -9,17 +9,20 @@
9@import 'basics'; 9@import 'basics';
10 10
11@import 'components/nav'; 11@import 'components/nav';
12@import 'components/page';
13@import 'components/hero'; 12@import 'components/hero';
14@import 'components/footer'; 13@import 'components/footer';
15 14
15@import 'layouts/site';
16@import 'layouts/container'; 16@import 'layouts/container';
17 17
18@import 'scopes/code';
19@import 'scopes/page';
20
21@import 'utils'; 18@import 'utils';
22 19
23:root { 20:root {
24 @include assign; 21 @include assign;
22
23 @each $breakpoint in map-keys($breakpoints) {
24 @include media('<=#{$breakpoint}') {
25 @include assign($breakpoint);
26 }
27 }
25} 28}
diff --git a/assets/favicon/favicon.svg b/assets/favicon/favicon.svg
new file mode 100644
index 0000000..31f9007
--- /dev/null
+++ b/assets/favicon/favicon.svg
@@ -0,0 +1,75 @@
1<?xml version="1.0" encoding="UTF-8" standalone="no"?>
2<svg
3 xmlns:dc="http://purl.org/dc/elements/1.1/"
4 xmlns:cc="http://creativecommons.org/ns#"
5 xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
6 xmlns:svg="http://www.w3.org/2000/svg"
7 xmlns="http://www.w3.org/2000/svg"
8 xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
9 xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
10 aria-hidden="true"
11 version="1.1"
12 id="svg8"
13 sodipodi:docname="favicon.svg"
14 width="16"
15 height="16"
16 inkscape:version="1.0.2 (e86c870879, 2021-01-15)"
17 inkscape:export-filename="/mnt/EvoData/Projects/WebStd/volpeon.ink/assets/favicon/favicon.png"
18 inkscape:export-xdpi="96"
19 inkscape:export-ydpi="96">
20 <metadata
21 id="metadata14">
22 <rdf:RDF>
23 <cc:Work
24 rdf:about="">
25 <dc:format>image/svg+xml</dc:format>
26 <dc:type
27 rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
28 <dc:title />
29 </cc:Work>
30 </rdf:RDF>
31 </metadata>
32 <defs
33 id="defs12" />
34 <sodipodi:namedview
35 pagecolor="#ffffff"
36 bordercolor="#666666"
37 borderopacity="1"
38 objecttolerance="10"
39 gridtolerance="10"
40 guidetolerance="10"
41 inkscape:pageopacity="0"
42 inkscape:pageshadow="2"
43 inkscape:window-width="1920"
44 inkscape:window-height="992"
45 id="namedview10"
46 showgrid="false"
47 fit-margin-top="0"
48 fit-margin-left="0"
49 fit-margin-right="0"
50 fit-margin-bottom="0"
51 inkscape:zoom="22.627417"
52 inkscape:cx="5.9845144"
53 inkscape:cy="5.0936969"
54 inkscape:window-x="1536"
55 inkscape:window-y="0"
56 inkscape:window-maximized="1"
57 inkscape:current-layer="svg8"
58 inkscape:document-rotation="0"
59 showguides="false" />
60 <path
61 d="M 3.879982,13 H 6.0160181 L 2.6160361,3 H 0.48 Z"
62 style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:8px;line-height:1.25;font-family:'Iosevka SS09';-inkscape-font-specification:'Iosevka SS09 Heavy';font-variant-ligatures:discretionary-ligatures;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;letter-spacing:0px;word-spacing:0px;fill:#ed2c3f;fill-opacity:1;stroke:none"
63 id="path884"
64 sodipodi:nodetypes="ccccc" />
65 <path
66 d="m 9.91599,13 h 2.168035 L 8.584018,3 H 6.4159819 Z"
67 style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:8px;line-height:1.25;font-family:'Iosevka SS09';-inkscape-font-specification:'Iosevka SS09 Heavy';font-variant-ligatures:discretionary-ligatures;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;letter-spacing:0px;word-spacing:0px;fill:#ed2c3f;fill-opacity:1;stroke:none"
68 id="path886"
69 sodipodi:nodetypes="ccccc" />
70 <path
71 d="M 9.915975,13 H 12.08401 L 15.584018,3 h -2.168036 z"
72 style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:8px;line-height:1.25;font-family:'Iosevka SS09';-inkscape-font-specification:'Iosevka SS09 Heavy';font-variant-ligatures:discretionary-ligatures;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;letter-spacing:0px;word-spacing:0px;fill:#ed2c3f;fill-opacity:1;stroke:none"
73 id="path888"
74 sodipodi:nodetypes="ccccc" />
75</svg>
diff --git a/content/favicon.ico b/content/favicon.ico
index b1b98ec..3c399ff 100644
--- a/content/favicon.ico
+++ b/content/favicon.ico
Binary files differ
diff --git a/templates/layouts/index.html b/templates/layouts/index.html
index 3105472..aaac808 100644
--- a/templates/layouts/index.html
+++ b/templates/layouts/index.html
@@ -1,14 +1,14 @@
1<div class="c-hero l-container"> 1<main>
2 <h1 class="c-hero__backtitle">Volpeon</h1> 2 <header class="c-hero">
3 <h2 class="c-hero__title">I'm a <strong class="c-hero__emph">red fox</strong> doing human things</h2> 3 <h1 class="c-hero__title c-hero__title--front">I'm a <strong class="c-hero__emph">red fox</strong> in disguise</h1>
4</div> 4 <h2 class="c-hero__title c-hero__title--back">Volpeon</h2>
5 </header>
5 6
6<main class="c-page l-container l-container--content l-container--pad-v l-container--pad-v--first"> 7 <section class="l-container l-container--content">
7 <div class="c-page__content s-page-content">
8$body$ 8$body$
9 </div> 9 </section>
10</main>
11 10
12<footer class="c-footer l-container"> 11 $-- <footer class="c-footer l-container">
13 9thPK7O3xn 12 $-- 9thPK7O3xn
14</footer> 13 $-- </footer>
14</main>
diff --git a/templates/layouts/page.html b/templates/layouts/page.html
index 994d013..fca4b9f 100644
--- a/templates/layouts/page.html
+++ b/templates/layouts/page.html
@@ -1,17 +1,6 @@
1<main class="c-page l-container l-container--content l-container--pad-v"> 1<main class="c-page l-container l-container--content l-container--pad-v">
2 <div class="c-page__content s-page-content"> 2 <div class="c-page__content s-page-content">
3 <header class="c-page__header"> 3 <header class="c-page__header">
4 $if(menus.main.active)$
5 <div class="c-page__prefixed c-page__prefixed--backref c-page__header__backlink">
6 <a class="c-page__header__backlink__link" href="$menus.main.active.url$">
7 $if(menus.main.active.label_long)$
8 $menus.main.active.label_long$
9 $else$
10 $menus.main.active.label$
11 $endif$
12 </a>
13 </div>
14 $endif$
15 <h1 class="c-page__prefixed c-page__prefixed--h1 c-page__header__title">$title$</h1> 4 <h1 class="c-page__prefixed c-page__prefixed--h1 c-page__header__title">$title$</h1>
16 $if(category)$ 5 $if(category)$
17 <h2 class="c-page__header__meta">in $category.name$</h2> 6 <h2 class="c-page__header__meta">in $category.name$</h2>
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-12-25 16:28:04 +0000