summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2021-11-10 21:20:58 +0100
committerVolpeon <git@volpeon.ink>2021-11-10 21:20:58 +0100
commit8177471f70a517e78b4470cd01c375ed30121102 (patch)
tree9a3373040e70d71463ea87796578489d6aabc8d8
parentUpdate vlpn (diff)
downloadvolpeon.ink-8177471f70a517e78b4470cd01c375ed30121102.tar.gz
volpeon.ink-8177471f70a517e78b4470cd01c375ed30121102.tar.bz2
volpeon.ink-8177471f70a517e78b4470cd01c375ed30121102.zip
Simplified home page
Diffstat
-rw-r--r--assets/css/_basics.scss11
-rw-r--r--assets/css/_vars.scss2
-rw-r--r--assets/css/components/_header.scss48
-rw-r--r--assets/css/components/_landing-banner.scss49
-rw-r--r--assets/css/components/_outer-button.scss89
-rw-r--r--assets/css/components/_post-list.scss17
-rw-r--r--assets/css/components/_project.scss68
-rw-r--r--assets/css/layouts/_card-grid.scss22
-rw-r--r--assets/css/layouts/_landing.scss54
-rw-r--r--assets/css/layouts/_project-grid.scss22
-rw-r--r--assets/css/layouts/_section.scss74
-rw-r--r--assets/css/style.scss8
-rw-r--r--content/index.md5
-rw-r--r--content/symbols.svg51
-rw-r--r--templates/base.html24
-rw-r--r--templates/layouts/categorized_list.html84
-rw-r--r--templates/layouts/index.html88
-rw-r--r--templates/layouts/list.html68
-rw-r--r--templates/layouts/page.html16
19 files changed, 164 insertions, 636 deletions
diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index 4fe73a2..71beceb 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -32,12 +32,6 @@ body {
32 padding: 0; 32 padding: 0;
33} 33}
34 34
35main {
36 display: flex;
37 flex-direction: column;
38 min-height: 100vh;
39}
40
41pre, 35pre,
42code { 36code {
43 font-family: $font-fam--mono; 37 font-family: $font-fam--mono;
@@ -156,6 +150,11 @@ h6 {
156 & + & { 150 & + & {
157 margin-top: $line-height * 1rem; 151 margin-top: $line-height * 1rem;
158 } 152 }
153
154 strong {
155 color: prop(--colors --accent --color, $global: true);
156 font-weight: 550;
157 }
159} 158}
160 159
161p { 160p {
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 4b60518..ebbefad 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -22,7 +22,7 @@ $font-fam--large: 'Garet', $font-fam--text;
22$font-fam--mono: 'Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; 22$font-fam--mono: 'Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;
23$font-size: 16px; 23$font-size: 16px;
24$line-height: 1.7; 24$line-height: 1.7;
25$content--width: 42rem; 25$content--width: 46rem;
26 26
27@include iro-execute { 27@include iro-execute {
28 $gray0: hsl(220, 5%, 7%); 28 $gray0: hsl(220, 5%, 7%);
diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss
index e74780b..81e4d4f 100644
--- a/assets/css/components/_header.scss
+++ b/assets/css/components/_header.scss
@@ -1,23 +1,53 @@
1@include namespace('header') { 1@include namespace('header') {
2 @include store(( 2 @include store((
3 --colors: ( 3 --colors: (
4 --fg: prop(--colors --fg-lo, $global: true), 4 --fg: prop(--colors --fg-hi, $global: true),
5 --bg: prop(--colors --bg-hi, $global: true),
6 --hover: ( 5 --hover: (
7 --fg: prop(--colors --bg-hi, $global: true), 6 --fg: prop(--colors --fg-lo, $global: true),
8 --bg: prop(--colors --accent --color, $global: true), 7 ),
8 --active: (
9 --fg: prop(--colors --fg-lo, $global: true),
9 ) 10 )
11 ),
12 --dims: (
13 --height: 4rem,
14 --pad-x: .6rem,
10 ) 15 )
11 )); 16 ));
12 17
13 @include component(namespace()) { 18 @include component(namespace()) {
14 display: flex; 19 display: flex;
15 position: fixed;
16 z-index: 10000;
17 top: 0;
18 left: 0;
19 flex-direction: row; 20 flex-direction: row;
20 justify-content: flex-start; 21 justify-content: flex-start;
21 box-shadow: prop(--dims --obj-shadow, $global: true) prop(--colors --obj-shadow, $global: true); 22 height: prop(--dims --height);
23
24 @include element('item') {
25 padding: 0 prop(--dims --pad-x);
26 line-height: prop(--dims --height);
27 color: prop(--colors --fg);
28 text-decoration: none;
29
30 &:hover {
31 color: prop(--colors --hover --fg);
32 }
33
34 @include modifier('icon') {
35 display: flex;
36 align-items: center;
37 justify-content: center;
38 padding: 0;
39 width: prop(--dims --height);
40 }
41
42 @include modifier('active') {
43 font-weight: bold;
44 color: prop(--colors --active --fg);
45 }
46 }
47
48 @include element('icon') {
49 width: 1.5em;
50 height: 1.5em;
51 }
22 } 52 }
23} 53}
diff --git a/assets/css/components/_landing-banner.scss b/assets/css/components/_landing-banner.scss
deleted file mode 100644
index f1b8595..0000000
--- a/assets/css/components/_landing-banner.scss
+++ /dev/null
@@ -1,49 +0,0 @@
1@include namespace('landing-banner') {
2 @include store((
3 --colors: (
4 --emph: (
5 --fg: prop(--colors --accent --color, $global: true),
6 --bg: prop(--colors --bg-hi, $global: true)
7 )
8 )
9 ));
10
11 @include component(namespace()) {
12 @include element('title') {
13 max-width: 7em;
14 margin-top: 0;
15 transform: translateX(-.06em);
16 font-family: $font-fam--large;
17 font-weight: 350;
18 line-height: 1.2;
19 text-transform: none;
20 }
21
22 @include element('title-inner') {
23 background-image: linear-gradient(
24 to top,
25 transparent .15em,
26 #{prop(--colors --emph --bg)} .15em,
27 #{prop(--colors --emph --bg)} .6em,
28 transparent .6em
29 );
30 }
31
32 @include element('emph') {
33 color: prop(--colors --emph --fg);
34 font-weight: 550;
35 }
36
37 @include media('<=md') {
38 @include element('title') {
39 max-width: none;
40 }
41 }
42
43 @include iro-responsive-env(('md', 'lg')) {
44 @include element('title') {
45 font-size: iro-responsive-set((2.6rem, 3.4rem));
46 }
47 }
48 }
49}
diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss
deleted file mode 100644
index fb3a51e..0000000
--- a/assets/css/components/_outer-button.scss
+++ /dev/null
@@ -1,89 +0,0 @@
1@include namespace('outer-button') {
2 @include store((
3 --colors: (
4 --fg: prop(--colors --bg-hi, $global: true),
5 --bg: prop(--colors --fg-lo, $global: true),
6 --border: prop(--colors --fg, $global: true),
7 --hover: (
8 --bg: prop(--colors --accent --color, $global: true),
9 --fg: prop(--colors --bg-hi, $global: true),
10 ),
11 --inverted: (
12 --fg: prop(--colors --fg-lo, $global: true),
13 --bg: prop(--colors --bg-hi, $global: true),
14 )
15 ),
16 --dims: (
17 --pad-x: 1.7rem,
18 )
19 ));
20
21 @include component(namespace()) {
22 display: flex;
23 height: prop(--dims --outer, $global: true);
24 transition: background-color .2s, color .2s;
25 background-color: prop(--colors --bg);
26 color: prop(--colors --fg);
27 font-size: 1rem;
28 font-weight: 700;
29 letter-spacing: .5px;
30 text-decoration: none;
31 text-transform: uppercase;
32
33 @include modifier('inverted') {
34 background-color: prop(--colors --inverted --bg);
35 color: prop(--colors --inverted --fg);
36 }
37
38 @include modifier('scroll-top') {
39 position: absolute;
40 right: 0;
41 bottom: 0;
42 }
43
44 @include element('icon') {
45 display: flex;
46 position: relative;
47 flex: 0 0 auto;
48 align-items: center;
49 justify-content: center;
50 width: prop(--dims --outer, $global: true);
51 height: 100%;
52
53 @include next-element('content') {
54 margin-left: -1px;
55 border-left: 1px solid prop(--colors --border);
56 }
57 }
58
59 @include element('icon-symbol') {
60 display: block;
61 width: 1.5em;
62 height: 1.5em;
63 }
64
65 @include element('content') {
66 height: 100%;
67 padding-right: prop(--dims --pad-x);
68 padding-left: prop(--dims --pad-x);
69 transition: border-left-color .2s;
70 font-size: 1 / 16 * 14em;
71 line-height: prop(--dims --outer, $global: true);
72 white-space: nowrap;
73 }
74
75 &:link,
76 &:visited {
77 &:hover {
78 background-color: prop(--colors --hover --bg);
79 color: prop(--colors --hover --fg);
80
81 @include element('icon') {
82 @include next-element('content') {
83 border-left-color: transparent;
84 }
85 }
86 }
87 }
88 }
89}
diff --git a/assets/css/components/_post-list.scss b/assets/css/components/_post-list.scss
index 7a3b8a0..5126589 100644
--- a/assets/css/components/_post-list.scss
+++ b/assets/css/components/_post-list.scss
@@ -7,6 +7,9 @@
7 --meta: ( 7 --meta: (
8 --fg: prop(--colors --fg-hi, $global: true), 8 --fg: prop(--colors --fg-hi, $global: true),
9 ) 9 )
10 ),
11 --dims: (
12 --col-width: 17em
10 ) 13 )
11 )); 14 ));
12 15
@@ -39,5 +42,19 @@
39 margin-top: 1px; 42 margin-top: 1px;
40 } 43 }
41 } 44 }
45
46 @include modifier('grid') {
47 @include element('category-content') {
48 display: grid;
49 grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr));
50 gap: $line-height * .5rem;
51 }
52
53 @include element('post') {
54 @include next-twin-element {
55 margin-top: 0;
56 }
57 }
58 }
42 } 59 }
43} 60}
diff --git a/assets/css/components/_project.scss b/assets/css/components/_project.scss
deleted file mode 100644
index 5248e32..0000000
--- a/assets/css/components/_project.scss
+++ /dev/null
@@ -1,68 +0,0 @@
1@include namespace('project') {
2 @include store((
3 --colors: (
4 --bg: prop(--colors --bg-hi, $global: true),
5 )
6 ));
7
8 @include component(namespace()) {
9 position: relative;
10 overflow: hidden;
11 box-shadow: prop(--dims --obj-shadow, $global: true) prop(--colors --obj-shadow, $global: true);
12
13 &::before {
14 content: '';
15 display: block;
16 padding-top: 12em;
17 padding-bottom: 5vw;
18 background-color: prop(--colors --bg);
19 }
20
21 &:link,
22 &:visited {
23 color: currentColor;
24 text-decoration: none;
25
26 &:hover,
27 &:focus {
28 @include element('picture') {
29 opacity: .75;
30 filter: blur(0);
31 }
32
33 @include element('card') {
34 transform: translateY(#{prop(--card --dims --hover-offset, $global: true)});
35 background-color: prop(--card --colors --hover --bg, $global: true);
36 color: prop(--card --colors --hover --fg, $global: true);
37
38 * {
39 color: currentColor;
40 }
41 }
42 }
43 }
44
45 @include element('picture') {
46 display: block;
47 position: absolute;
48 z-index: 10;
49 top: 0;
50 left: 0;
51 width: 100%;
52 height: 100%;
53 object-fit: cover;
54 object-position: center center;
55 transition: opacity .2s;
56 mask-image: iro-easing-gradient(linear, 340deg, rgba(#000, .75) 7em, ease, #000 26em);
57 }
58
59 @include element('card') {
60 position: absolute;
61 z-index: 20;
62 right: 1em;
63 bottom: 1em;
64 min-width: 15em;
65 max-width: calc(100% - 2em);
66 }
67 }
68}
diff --git a/assets/css/layouts/_card-grid.scss b/assets/css/layouts/_card-grid.scss
deleted file mode 100644
index c9d927a..0000000
--- a/assets/css/layouts/_card-grid.scss
+++ /dev/null
@@ -1,22 +0,0 @@
1@include namespace('card-grid') {
2 @include store((
3 --dims: (
4 --col-width: 17em
5 )
6 ));
7
8 @include layout(namespace()) {
9 display: grid;
10 grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr));
11 gap: .6rem;
12 filter: drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)});
13
14 @include element('card') {
15 box-shadow: none;
16 }
17
18 @include media('<=sm') {
19 grid-template-columns: 1fr;
20 }
21 }
22}
diff --git a/assets/css/layouts/_landing.scss b/assets/css/layouts/_landing.scss
deleted file mode 100644
index a81b105..0000000
--- a/assets/css/layouts/_landing.scss
+++ /dev/null
@@ -1,54 +0,0 @@
1@include namespace('landing') {
2 @include store((
3 --dims: (
4 --banner-width: 30rem,
5 ),
6 --colors: (
7 --banner-bg: prop(--colors --bg, $global: true)
8 )
9 ));
10
11 @include layout(namespace()) {
12 display: flex;
13 flex-direction: row;
14 align-items: center;
15 margin-top: auto;
16 margin-bottom: auto;
17
18 @include element('banner') {
19 width: 70%;
20 max-width: prop(--dims --banner-width);
21 background-color: prop(--colors --banner-bg);
22 }
23
24 @include element('content') {
25 width: 100%;
26 }
27
28 @include iro-responsive-env(('md', 'lg')) {
29 padding-right: iro-responsive-set((0, 3rem));
30 padding-left: iro-responsive-set((0, 6rem));
31 }
32
33 @include media('<=md') {
34 display: block;
35
36 @include element('side') {
37 display: none;
38
39 @include sibling-element('side') {
40 display: block;
41 }
42 }
43
44 @include element('banner', 'content') {
45 width: auto;
46 padding: 0;
47 }
48
49 @include element('banner') {
50 max-width: none;
51 }
52 }
53 }
54}
diff --git a/assets/css/layouts/_project-grid.scss b/assets/css/layouts/_project-grid.scss
deleted file mode 100644
index 5ed983c..0000000
--- a/assets/css/layouts/_project-grid.scss
+++ /dev/null
@@ -1,22 +0,0 @@
1@include namespace('project-grid') {
2 @include store((
3 --dims: (
4 --col-width: 20em
5 )
6 ));
7
8 @include layout(namespace()) {
9 display: grid;
10 grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr));
11 gap: 2rem;
12 filter: drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)});
13
14 @include element('project') {
15 box-shadow: none;
16 }
17
18 @include media('<=sm') {
19 grid-template-columns: 1fr;
20 }
21 }
22}
diff --git a/assets/css/layouts/_section.scss b/assets/css/layouts/_section.scss
deleted file mode 100644
index 80b8ca9..0000000
--- a/assets/css/layouts/_section.scss
+++ /dev/null
@@ -1,74 +0,0 @@
1@include namespace('section') {
2 @include store((
3 --colors: (
4 --border: prop(--colors --obj-hi, $global: true),
5 --body-bg: transparent,
6 )
7 ));
8
9 @include store((
10 --colors: (
11 --body-bg: prop(--colors --bg-hi, $global: true),
12 )
13 ), 'light');
14
15 @include layout(namespace()) {
16 position: relative;
17
18 @include modifier('flex') {
19 display: flex;
20 flex-direction: column;
21 align-items: stretch;
22 justify-content: flex-start;
23 }
24
25 @include modifier('fullscreen') {
26 box-sizing: border-box;
27 min-height: 100vh;
28 margin-bottom: calc(-1 * #{prop(--dims --outer, $global: true)});
29 padding-bottom: prop(--dims --outer, $global: true);
30 }
31
32 @include modifier('body') {
33 background-color: prop(--colors --body-bg);
34 }
35
36 @include modifier('no-header') {
37 padding-top: prop(--dims --outer, $global: true);
38 }
39
40 @include element('header') {
41 display: flex;
42 flex-direction: row;
43 align-items: center;
44 height: prop(--dims --outer, $global: true);
45 font-size: 1 / 16 * 15em;
46
47 @include modifier('sticky') {
48 position: sticky;
49 z-index: 9000;
50 top: 0;
51 left: 0;
52 }
53 }
54
55 /*@include element('footer') {
56 position: absolute;
57 z-index: 10000;
58 right: 0;
59 bottom: 0;
60 height: prop(--dims --outer, $global: true);
61 font-size: 1 / 16 * 15em;
62 }*/
63
64 @include element('header-separator') {
65 flex: 1 1 auto;
66 width: 100%;
67 height: 100%;
68 margin-top: -1px;
69 margin-right: prop(--container --dims --pad-x, $global: true);
70 margin-left: prop(--container --dims --pad-x, $global: true);
71 border-top: 1px solid prop(--colors --border);
72 }
73 }
74}
diff --git a/assets/css/style.scss b/assets/css/style.scss
index cd27f35..99d52c1 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -10,22 +10,14 @@
10@import 'basics'; 10@import 'basics';
11 11
12@import 'layouts/container'; 12@import 'layouts/container';
13@import 'layouts/section';
14@import 'layouts/landing';
15 13
16@import 'objects/icon'; 14@import 'objects/icon';
17 15
18@import 'components/outer-button';
19@import 'components/header'; 16@import 'components/header';
20@import 'components/landing-banner';
21@import 'components/footer'; 17@import 'components/footer';
22@import 'components/card'; 18@import 'components/card';
23@import 'components/project';
24@import 'components/post-list'; 19@import 'components/post-list';
25 20
26@import 'layouts/card-grid';
27@import 'layouts/project-grid';
28
29@import 'scopes/colored-links'; 21@import 'scopes/colored-links';
30@import 'scopes/headlines'; 22@import 'scopes/headlines';
31@import 'scopes/body'; 23@import 'scopes/body';
diff --git a/content/index.md b/content/index.md
index e144d39..c9ce120 100644
--- a/content/index.md
+++ b/content/index.md
@@ -1,3 +1,8 @@
1--- 1---
2title: Home 2title: Home
3--- 3---
4
5# I'm a **red fox** in disguise. {.u-mt0}
6
7Hi, I'm Volpeon. I enjoy programming, creating vector art and designing user interfaces.
8You can find me on the [Fediverse](https://mk.vulpes.one/@volpeon).
diff --git a/content/symbols.svg b/content/symbols.svg
index 6964327..f633664 100644
--- a/content/symbols.svg
+++ b/content/symbols.svg
@@ -6,61 +6,10 @@
6 <path fill="currentColor" stroke="none" d="M 9.915975,13 H 12.08401 L 15.584018,3 h -2.168036 z" /> 6 <path fill="currentColor" stroke="none" d="M 9.915975,13 H 12.08401 L 15.584018,3 h -2.168036 z" />
7 </symbol> 7 </symbol>
8 8
9 <symbol id="icon-arrow-down-right" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
10 <path d="m5.25 11.75h6.5v-6.5m0 6.5-7.5-7.5" fill="none" stroke="currentColor" />
11 </symbol>
12
13 <symbol id="icon-arrow-up" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
14 <path d="m12.25 7.25-4.5-4.5-4.5 4.5m4.5-4.5v10.5" fill="none" stroke="currentColor" />
15 </symbol>
16
17 <symbol id="icon-arrow-right" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> 9 <symbol id="icon-arrow-right" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
18 <path d="m8.75 3.75 4.5 4.5-4.5 4.5m-6-4.5h10.5" fill="none" stroke="currentColor" /> 10 <path d="m8.75 3.75 4.5 4.5-4.5 4.5m-6-4.5h10.5" fill="none" stroke="currentColor" />
19 </symbol> 11 </symbol>
20 12
21 <symbol id="icon-envelope" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
22 <path
23 d="m1.25 3.5c0-0.4155 0.3345-0.75 0.75-0.75h12c0.4155 0 0.75 0.3345 0.75 0.75v8.5c0 0.4155-0.3345 0.75-0.75 0.75h-12c-0.4155 0-0.75-0.3345-0.75-0.75zm0 0.25 5.2845 4.3681c1.0065 0.83198 1.9181 0.82912 2.9676-0.03704l5.2479-4.3311"
24 fill="none" stroke="currentColor" />
25 </symbol>
26
27 <symbol id="icon-hash" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
28 <path d="m4.7501 14.25 0.99984-12m4 12 1.0002-12m-8.5001 3.5h11m-11 5h11" fill="none" stroke="currentColor" />
29 </symbol>
30
31 <symbol id="icon-messages" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
32 <path
33 d="m1.5 1.25h9c0.4155 0 0.75 0.3345 0.75 0.75v6.9999c0 0.4155-0.3345 0.75-0.75 0.75h-7.25l-2.5 2.5001v-10.25c0-0.4155 0.3345-0.75 0.75-0.75z"
34 fill="none" stroke="currentColor" />
35 <path d="m5.25 12.75h7.5l2.5 2.5001v-10.25c0-0.4155-0.3345-0.75-0.75-0.75h-0.25" fill="none"
36 stroke="currentColor" />
37 </symbol>
38
39 <symbol id="icon-arrow-up-right" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
40 <path d="m5.25 4.25h6.5v6.5m0-6.5-7.5 7.5" fill="none" stroke="currentColor" />
41 </symbol>
42
43 <symbol id="icon-parallelogram" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
44 <path d="m15.25 4.25-5 7.5h-9.5l5-7.5z" fill="none" stroke="currentColor" />
45 </symbol>
46
47 <symbol id="icon-video" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
48 <path d="m6.75 6.25 2.5 2-2.5 2z" fill="currentColor" stroke="currentColor" />
49 <rect x=".75" y="2.25" width="14.5" height="12" ry=".75" fill="none" stroke="currentColor" />
50 </symbol>
51
52 <symbol id="icon-graph" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
53 <path
54 d="m7.25 12.5c0 0.9665-0.7835 1.75-1.75 1.75s-1.75-0.7835-1.75-1.75 0.7835-1.75 1.75-1.75 1.75 0.7835 1.75 1.75zm8-3c0 0.9665-0.7835 1.75-1.75 1.75s-1.75-0.7835-1.75-1.75c0-0.9665 0.7835-1.75 1.75-1.75s1.75 0.7835 1.75 1.75zm-6-6.5c0 0.9665-0.7835 1.75-1.75 1.75s-1.75-0.7835-1.75-1.75 0.7835-1.75 1.75-1.75 1.75 0.7835 1.75 1.75zm2 12.25 1.6219-4.1121m-8.331-0.13789-3.7909-5.25m6.4058 6.1626 4.6868-1.8235m-3.163-5.7868 3.5859 3.9307m-5.0863-3.5029-1.3496 6.043"
55 fill="none" stroke="currentColor" />
56 </symbol>
57
58 <symbol id="icon-git-branch" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
59 <path
60 d="m12.25 5.75c0 3.5899-2.9101 6.5-6.5 6.5m3e-7 0c0 1.1046-0.89543 2-2 2s-2-0.89543-2-2 0.89543-2 2-2 2 0.89543 2 2zm8.5-8.5c0 1.1046-0.89543 2-2 2s-2-0.89543-2-2 0.89543-2 2-2 2 0.89543 2 2zm-10.5 6.4998v-7.9998"
61 fill="none" stroke="currentColor" />
62 </symbol>
63
64 <symbol id="icon-smile" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> 13 <symbol id="icon-smile" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
65 <path d="m11.309 9.7658c-0.63143 1.1808-1.8764 1.9842-3.3091 1.9842-1.4381 0-2.6872-0.80955-3.3163-1.9978" 14 <path d="m11.309 9.7658c-0.63143 1.1808-1.8764 1.9842-3.3091 1.9842-1.4381 0-2.6872-0.80955-3.3163-1.9978"
66 fill="none" stroke="currentColor" /> 15 fill="none" stroke="currentColor" />
diff --git a/templates/base.html b/templates/base.html
index 5542401..554651d 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -45,21 +45,17 @@
45 45
46<body> 46<body>
47 <nav class="c-header"> 47 <nav class="c-header">
48 <a class="c-outer-button c-outer-button--inverted" href="/" title="$site.title$"> 48 <a class="c-header__item c-header__item--icon" href="/" title="$site.title$">
49 <span class="c-outer-button__icon"> 49 <svg class="c-header__icon">
50 <svg class="c-outer-button__icon-symbol"> 50 <use href="/symbols.svg#logo"></use>
51 <use href="/symbols.svg#logo"></use> 51 </svg>
52 </svg>
53 </span>
54 </a> 52 </a>
55 $if(namespace.root.is_index)$ 53 $if(namespace.root.is_index)$
56 $else$ 54 $else$
57 $for(menus.main.items)$ 55 $for(menus.main.items)$
58 $if(it.active)$ 56 $if(it.active)$
59 <a class="c-outer-button" href="$it.url$"> 57 <a class="c-header__item" href="$it.url$">
60 <span class="c-outer-button__content"> 58 $it.label$
61 $it.label$
62 </span>
63 </a> 59 </a>
64 $endif$ 60 $endif$
65 $endfor$ 61 $endfor$
@@ -82,14 +78,6 @@ ${layouts/page()}
82 <pre class="c-footer__ascii u-dn@sm-lo">${layouts/ascii_fox()}</pre> 78 <pre class="c-footer__ascii u-dn@sm-lo">${layouts/ascii_fox()}</pre>
83 <pre class="c-footer__ascii u-dn@sm-hi">${layouts/ascii_fox_small()}</pre> 79 <pre class="c-footer__ascii u-dn@sm-hi">${layouts/ascii_fox_small()}</pre>
84 </div> 80 </div>
85
86 <a class="c-outer-button c-outer-button--scroll-top" href="#" title="To the top">
87 <span class="c-outer-button__icon">
88 <svg class="c-outer-button__icon-symbol o-icon">
89 <use href="/symbols.svg#icon-arrow-up"></use>
90 </svg>
91 </span>
92 </a>
93 </footer> 81 </footer>
94 </main> 82 </main>
95</body> 83</body>
diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html
index f841fff..d5dafaf 100644
--- a/templates/layouts/categorized_list.html
+++ b/templates/layouts/categorized_list.html
@@ -1,49 +1,47 @@
1<section class="l-section l-section--no-header"> 1<section class="l-container l-container--pad-x l-container--pad-y l-container--content">
2 <div class="l-container l-container--pad-x l-container--pad-y l-container--content"> 2 <div class="s-headlines s-body s-colored-links">
3 <div class="s-headlines s-colored-links"> 3 <h1 class="u-mt0"><span class="s-headlines__title-inner">$title$</span></h1>
4 <h1 class="u-mt0"><span class="s-headlines__title-inner">$title$</span></h1>
5 4
6$body$ 5$body$
7 </div> 6 </div>
8 7
9 <div class="c-post-list"> 8 <div class="c-post-list">
10 $for(pages.asc_title)$ 9 $for(pages.asc_title)$
11 $if(it.pages)$ 10 $if(it.pages)$
12 <h2 class="c-post-list__category-header"> 11 <h2 class="c-post-list__category-header">
13 <a href="$it.url.rel$">$it.title$</a> 12 <a href="$it.url.rel$">$it.title$</a>
14 </h2> 13 </h2>
15 <div class="c-post-list__category-content"> 14 <div class="c-post-list__category-content">
16 $if(pages.asc_title.show_dates)$ 15 $if(pages.asc_title.show_dates)$
17 $for(it.pages.desc_date)$ 16 $for(it.pages.desc_date)$
18 <a href="$it.url.rel$" class="c-post-list__post c-card"> 17 <a href="$it.url.rel$" class="c-post-list__post c-card">
19 <div class="c-card__block c-card__block--indicator"></div> 18 <div class="c-card__block c-card__block--indicator"></div>
20 <div class="c-card__block c-card__block--main"> 19 <div class="c-card__block c-card__block--main">
21 $it.title$ 20 $it.title$
22 </div> 21 </div>
23 <time datetime="$it.date.yyyy_mm_dd$" class="c-card__block u-fs0"> 22 <time datetime="$it.date.yyyy_mm_dd$" class="c-card__block u-fs0">
24 <small class="u-dn@sm-hi"> 23 <small class="u-dn@sm-hi">
25 $it.date.short$ 24 $it.date.short$
26 </small> 25 </small>
27 <small class="u-dn@sm-lo"> 26 <small class="u-dn@sm-lo">
28 $it.date.long$ 27 $it.date.long$
29 </small> 28 </small>
30 </time> 29 </time>
31 </a> 30 </a>
32 $endfor$ 31 $endfor$
33 $else$ 32 $else$
34 $for(it.pages.asc_title)$ 33 $for(it.pages.asc_title)$
35 <a href="$it.url.rel$" class="c-post-list__post c-card"> 34 <a href="$it.url.rel$" class="c-post-list__post c-card">
36 <div class="c-card__block c-card__block--indicator"></div> 35 <div class="c-card__block c-card__block--indicator"></div>
37 <div class="c-card__block c-card__block--main"> 36 <div class="c-card__block c-card__block--main">
38 $it.title$ 37 $it.title$
39 </div> 38 </div>
40 </a> 39 </a>
41 $endfor$ 40 $endfor$
42 $endif$ 41 $endif$
43 </div> 42 </div>
44 $endif$ 43 $endif$
45 $endfor$ 44 $endfor$
46 </div>
47 </div> 45 </div>
48</section> 46</section>
49 47
diff --git a/templates/layouts/index.html b/templates/layouts/index.html
index 1f1a092..b76c606 100644
--- a/templates/layouts/index.html
+++ b/templates/layouts/index.html
@@ -1,81 +1,13 @@
1<section class="l-section l-section--fullscreen l-section--no-header l-section--flex"> 1<section class="l-container l-container--pad-x l-container--pad-y l-container--content">
2 <div class="l-landing"> 2 <div class="s-headlines s-body">
3 <header class="l-landing__banner">
4 <div class="c-landing-banner l-container l-container--pad-x l-container--pad-y l-container--content">
5 <h1 class="c-landing-banner__title">
6 <span class="c-landing-banner__title-inner">
7 I'm a <strong class="c-landing-banner__emph">red fox</strong> in disguise.
8 </span>
9 </h1>
10 <p class="c-landing-banner__text s-body">
11 Hi, I'm Volpeon. I enjoy programming, creating vector art and designing user interfaces.
12 </p>
13 </div>
14 </header>
15
16 <section class="l-landing__content">
17 <div class="l-container l-container--pad-x l-container--pad-y l-container--content u-pt0@md-lo">
18 <div class="l-card-grid">
19 $for(profiles)$
20 $if(it.featured)$
21 $if(it.url)$
22 <a class="l-card-grid__card c-card" href="$it.url$">
23 $else$
24 <div class="l-card-grid__card c-card">
25 $endif$
26 $if(it.icon)$
27 <svg class="c-card__block o-icon">
28 <use href="/symbols.svg#icon-$it.icon$"></use>
29 </svg>
30 $endif$
31 <div class="c-card__block c-card__block--main">
32 <strong class="u-db">$it.platform$</strong>
33 <small class="u-db">$it.username$</small>
34 </div>
35 $if(it.url)$
36 <svg class="c-card__block o-icon">
37 <use href="/symbols.svg#icon-arrow-up-right"></use>
38 </svg>
39 $endif$
40 $if(it.url)$
41 </a>
42 $else$
43 </div>
44 $endif$
45 $endif$
46 $endfor$
47 </div>
48
49$body$ 3$body$
50 </div>
51 </section>
52 </div> 4 </div>
53</section>
54
55<section class="l-section" id="projects">
56 <header class="l-section__header l-section__header--sticky">
57 <a class="c-outer-button" href="#projects">
58 <span class="c-outer-button__icon">
59 <svg class="c-outer-button__icon-symbol o-icon">
60 <use href="/symbols.svg#icon-arrow-down-right"></use>
61 </svg>
62 </span>
63 <span class="c-outer-button__content">
64 $pages.by_id.projects.title$
65 </span>
66 </a>
67
68 <div class="l-section__header-separator"></div>
69 </header>
70 5
71 <div class="l-container l-container--pad-x l-container--pad-y l-project-grid"> 6 <div id="projects" class="c-post-list c-post-list--grid">
72 $for(pages.by_id.projects.pages.all)$ 7 <div class="c-post-list__category-content">
73 $for(it.pages.all)$ 8 $for(pages.by_id.projects.pages.all)$
74 <a class="l-project-grid__project c-project" href="$it.url.rel$"> 9 $for(it.pages.all)$
75 $if(it.preview)$ 10 <a href="$it.url.rel$" class="c-post-list__post c-card">
76 <img class="c-project__picture" src="$it.preview.rel$" />
77 $endif$
78 <div class="c-project__card c-card">
79 $if(pages.by_id.projects.pages.all.icon)$ 11 $if(pages.by_id.projects.pages.all.icon)$
80 <svg class="c-card__block o-icon"> 12 <svg class="c-card__block o-icon">
81 <use href="/symbols.svg#icon-$pages.by_id.projects.pages.all.icon$"></use> 13 <use href="/symbols.svg#icon-$pages.by_id.projects.pages.all.icon$"></use>
@@ -88,9 +20,9 @@ $body$
88 <svg class="c-card__block o-icon"> 20 <svg class="c-card__block o-icon">
89 <use href="/symbols.svg#icon-arrow-right"></use> 21 <use href="/symbols.svg#icon-arrow-right"></use>
90 </svg> 22 </svg>
91 </div> 23 </a>
92 </a> 24 $endfor$
93 $endfor$ 25 $endfor$
94 $endfor$ 26 </div>
95 </div> 27 </div>
96</section> 28</section>
diff --git a/templates/layouts/list.html b/templates/layouts/list.html
index f269d10..4831228 100644
--- a/templates/layouts/list.html
+++ b/templates/layouts/list.html
@@ -1,41 +1,39 @@
1<section class="l-section l-section--no-header"> 1<section class="l-container l-container--pad-x l-container--pad-y l-container--content">
2 <div class="l-container l-container--pad-x l-container--pad-y l-container--content"> 2 <div class="s-headlines s-colored-links">
3 <div class="s-headlines s-colored-links"> 3 <h1 class="u-mt0"><span class="s-headlines__title-inner">$title$</span></h1>
4 <h1 class="u-mt0"><span class="s-headlines__title-inner">$title$</span></h1>
5 4
6$body$ 5$body$
7 </div> 6 </div>
8 7
9 <div class="c-post-list"> 8 <div class="c-post-list">
10 <div class="c-post-list__category-content"> 9 <div class="c-post-list__category-content">
11 $if(show_dates)$ 10 $if(show_dates)$
12 $for(pages.desc_date)$ 11 $for(pages.desc_date)$
13 <a href="$it.url.rel$" class="c-post-list__post c-card"> 12 <a href="$it.url.rel$" class="c-post-list__post c-card">
14 <div class="c-card__block c-card__block--indicator"></div> 13 <div class="c-card__block c-card__block--indicator"></div>
15 <div class="c-card__block c-card__block--main"> 14 <div class="c-card__block c-card__block--main">
16 $it.title$ 15 $it.title$
17 </div> 16 </div>
18 <time datetime="$it.date.yyyy_mm_dd$" class="c-card__block u-fs0"> 17 <time datetime="$it.date.yyyy_mm_dd$" class="c-card__block u-fs0">
19 <small class="u-dn@sm-hi"> 18 <small class="u-dn@sm-hi">
20 $it.date.short$ 19 $it.date.short$
21 </small> 20 </small>
22 <small class="u-dn@sm-lo"> 21 <small class="u-dn@sm-lo">
23 $it.date.long$ 22 $it.date.long$
24 </small> 23 </small>
25 </time> 24 </time>
26 </a> 25 </a>
27 $endfor$ 26 $endfor$
28 $else$ 27 $else$
29 $for(pages.asc_title)$ 28 $for(pages.asc_title)$
30 <a href="$it.url.rel$" class="c-post-list__post c-card"> 29 <a href="$it.url.rel$" class="c-post-list__post c-card">
31 <div class="c-card__block c-card__block--indicator"></div> 30 <div class="c-card__block c-card__block--indicator"></div>
32 <div class="c-card__block c-card__block--main"> 31 <div class="c-card__block c-card__block--main">
33 $it.title$ 32 $it.title$
34 </div> 33 </div>
35 </a> 34 </a>
36 $endfor$ 35 $endfor$
37 $endif$ 36 $endif$
38 </div>
39 </div> 37 </div>
40 </div> 38 </div>
41</section> 39</section>
diff --git a/templates/layouts/page.html b/templates/layouts/page.html
index 70f645b..978f7f6 100644
--- a/templates/layouts/page.html
+++ b/templates/layouts/page.html
@@ -1,13 +1,11 @@
1<section class="l-section l-section--no-header l-section--body"> 1<section class="l-container l-container--pad-x l-container--pad-y l-container--content s-colored-links s-headlines s-headlines--body s-body">
2 <div class="l-container l-container--pad-x l-container--pad-y l-container--content s-colored-links s-headlines s-headlines--body s-body"> 2 $if(show_date)$
3 $if(show_date)$ 3 <div class="s-body__meta">
4 <div class="s-body__meta"> 4 $date.long$
5 $date.long$ 5 </div>
6 </div> 6 $endif$
7 $endif$
8 7
9 <h1 class="u-mt0"><span class="s-headlines__title-inner">$title$</span></h1> 8 <h1 class="u-mt0"><span class="s-headlines__title-inner">$title$</span></h1>
10 9
11$body$ 10$body$
12 </div>
13</section> 11</section>
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-12-25 16:30:01 +0000