summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--assets/css/_utils.scss2
-rw-r--r--assets/css/_vars.scss28
-rw-r--r--assets/css/components/_card.scss2
-rw-r--r--assets/css/components/_footer.scss4
-rw-r--r--assets/css/components/_header.scss (renamed from assets/css/components/_logo.scss)13
-rw-r--r--assets/css/components/_landing-banner.scss2
-rw-r--r--assets/css/components/_outer-button.scss31
-rw-r--r--assets/css/components/_section-heading.scss29
-rw-r--r--assets/css/layouts/_landing.scss4
-rw-r--r--assets/css/layouts/_section.scss28
-rw-r--r--assets/css/scopes/_body.scss26
-rw-r--r--assets/css/style.scss3
-rw-r--r--content/index.js2
-rw-r--r--content/notebook/index.md5
-rw-r--r--content/projects/blobfox-emojis/index.md2
-rw-r--r--content/projects/bunhd-emojis/index.md2
-rw-r--r--metadata/metadata.yaml10
-rwxr-xr-xscripts/build_content.sh8
-rw-r--r--templates/base.html61
-rw-r--r--templates/layouts/categorized_list.html37
-rw-r--r--templates/layouts/index.html165
-rw-r--r--templates/layouts/page.html18
-rw-r--r--templates/symbols.svg6
23 files changed, 252 insertions, 236 deletions
diff --git a/assets/css/_utils.scss b/assets/css/_utils.scss
index 8f8170c..e8e98d2 100644
--- a/assets/css/_utils.scss
+++ b/assets/css/_utils.scss
@@ -1,4 +1,4 @@
1@include utility('hidden') { 1@include utility('dn') {
2 display: none; 2 display: none;
3 3
4 @each $breakpoint in map-keys($breakpoints) { 4 @each $breakpoint in map-keys($breakpoints) {
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 9b5fe86..71dc5d2 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -23,27 +23,29 @@ $subcontent--indent: 2em;
23$gray0: hsl(220, 0%, 6%); 23$gray0: hsl(220, 0%, 6%);
24$gray1: hsl(220, 0%, 9%); 24$gray1: hsl(220, 0%, 9%);
25$gray2: hsl(220, 0%, 15%); 25$gray2: hsl(220, 0%, 15%);
26$gray3: hsl(220, 0%, 29%); 26$gray3: hsl(220, 0%, 20%);
27$gray4: hsl(220, 0%, 54%); 27$gray4: hsl(220, 0%, 33%);
28$gray5: hsl(220, 0%, 73%); 28$gray5: hsl(220, 0%, 54%);
29$gray6: hsl(220, 0%, 100%); 29$gray6: hsl(220, 0%, 73%);
30$gray7: hsl(220, 0%, 100%);
30 31
31@include store(( 32@include store((
32 --dims: ( 33 --dims: (
33 --outer: 4rem, 34 --outer: 4rem,
34 --outer-spacing: 2rem, 35 --outer-spacing: 1.7rem,
35 --spacing-y: 3rem, 36 --spacing-y: 4rem,
36 ), 37 ),
37 --colors: ( 38 --colors: (
38 --bg-hi: $gray0, // Darker background 39 --bg-hi: $gray0, // Darker background
39 --bg: $gray1, // Background 40 --bg: $gray1, // Background
40 --bg-lo: $gray2, // Lighter background 41 --bg-lo: $gray2, // Lighter background
41 42
42 --obj: $gray3, 43 --obj-hi: $gray3,
44 --obj: $gray4,
43 45
44 --fg-hi: $gray4, // Faint text 46 --fg-hi: $gray5, // Faint text
45 --fg: $gray5, // Text 47 --fg: $gray6, // Text
46 --fg-lo: $gray6, // Strong text 48 --fg-lo: $gray7, // Strong text
47 49
48 --accent: ( 50 --accent: (
49 --h: 354, 51 --h: 354,
@@ -68,11 +70,11 @@ $gray6: hsl(220, 0%, 100%);
68 } 70 }
69} 71}
70 72
71@include store(( 73/* @include store((
72 --dims: ( 74 --dims: (
73 --outer: 4rem, 75 --outer: 3.5rem,
74 ), 76 ),
75), 'sm'); 77), 'sm'); */
76 78
77:root { 79:root {
78 --heading--fg: var(--colors--fg-lo); 80 --heading--fg: var(--colors--fg-lo);
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index 09b03b0..cb18810 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -15,7 +15,7 @@
15 @include store(( 15 @include store((
16 --dims: ( 16 --dims: (
17 --pad-x: 1em, 17 --pad-x: 1em,
18 --pad-y: .6em 18 --pad-y: .7em
19 ) 19 )
20 ), 'md'); 20 ), 'md');
21 21
diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss
index c20bc22..c127d02 100644
--- a/assets/css/components/_footer.scss
+++ b/assets/css/components/_footer.scss
@@ -2,7 +2,7 @@
2 @include store(( 2 @include store((
3 --colors: ( 3 --colors: (
4 --fg: prop(--colors --obj, $global: true), 4 --fg: prop(--colors --obj, $global: true),
5 --border: prop(--colors --bg-lo, $global: true), 5 --border: prop(--colors --obj-hi, $global: true),
6 ) 6 )
7 )); 7 ));
8 8
@@ -11,6 +11,8 @@
11 align-items: center; 11 align-items: center;
12 justify-content: space-between; 12 justify-content: space-between;
13 height: prop(--dims --outer, $global: true); 13 height: prop(--dims --outer, $global: true);
14 padding-right: prop(--dims --outer, $global: true);
15 font-size: 1 / 16 * 15em;
14 16
15 @include element('content') { 17 @include element('content') {
16 width: 100%; 18 width: 100%;
diff --git a/assets/css/components/_logo.scss b/assets/css/components/_header.scss
index 13587c8..61f6f4a 100644
--- a/assets/css/components/_logo.scss
+++ b/assets/css/components/_header.scss
@@ -1,4 +1,4 @@
1@include namespace('logo') { 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-lo, $global: true),
@@ -11,9 +11,12 @@
11 )); 11 ));
12 12
13 @include component(namespace()) { 13 @include component(namespace()) {
14 position: fixed; 14 display: flex;
15 z-index: 10000; 15 position: fixed;
16 top: 0; 16 z-index: 10000;
17 left: 0; 17 top: 0;
18 left: 0;
19 flex-direction: row;
20 justify-content: flex-start;
18 } 21 }
19} 22}
diff --git a/assets/css/components/_landing-banner.scss b/assets/css/components/_landing-banner.scss
index f6016c4..58d64d7 100644
--- a/assets/css/components/_landing-banner.scss
+++ b/assets/css/components/_landing-banner.scss
@@ -10,7 +10,7 @@
10 @include element('title') { 10 @include element('title') {
11 max-width: 7em; 11 max-width: 7em;
12 margin-top: 0; 12 margin-top: 0;
13 transform: translateX(-.05em); 13 transform: translateX(-.06em);
14 font-family: $font-fam--large; 14 font-family: $font-fam--large;
15 font-weight: 350; 15 font-weight: 350;
16 text-transform: none; 16 text-transform: none;
diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss
index b92dd9e..774281d 100644
--- a/assets/css/components/_outer-button.scss
+++ b/assets/css/components/_outer-button.scss
@@ -7,13 +7,9 @@
7 --bg: prop(--colors --accent --color, $global: true), 7 --bg: prop(--colors --accent --color, $global: true),
8 --fg: prop(--colors --bg-hi, $global: true), 8 --fg: prop(--colors --bg-hi, $global: true),
9 ), 9 ),
10 --icon: ( 10 --inverted: (
11 --fg: prop(--colors --fg-lo, $global: true), 11 --fg: prop(--colors --fg-lo, $global: true),
12 --bg: prop(--colors --bg-hi, $global: true), 12 --bg: prop(--colors --bg-hi, $global: true),
13 --hover: (
14 --fg: prop(--colors --bg-hi, $global: true),
15 --bg: prop(--colors --accent --color, $global: true),
16 )
17 ) 13 )
18 ) 14 )
19 )); 15 ));
@@ -24,9 +20,17 @@
24 transition: background-color .2s, color .2s; 20 transition: background-color .2s, color .2s;
25 background-color: prop(--colors --bg); 21 background-color: prop(--colors --bg);
26 color: prop(--colors --fg); 22 color: prop(--colors --fg);
23 font-size: 1rem;
27 font-weight: 450; 24 font-weight: 450;
28 text-decoration: none; 25 text-decoration: none;
29 26
27 @include modifier('scroll-top') {
28 position: fixed;
29 z-index: 9000;
30 right: 0;
31 bottom: 0;
32 }
33
30 @include element('icon') { 34 @include element('icon') {
31 display: flex; 35 display: flex;
32 position: relative; 36 position: relative;
@@ -36,19 +40,16 @@
36 width: prop(--dims --outer, $global: true); 40 width: prop(--dims --outer, $global: true);
37 height: 100%; 41 height: 100%;
38 transition: background-color .2s, color .2s; 42 transition: background-color .2s, color .2s;
39 background-color: prop(--colors --icon --bg);
40 color: prop(--colors --icon --fg);
41 } 43 }
42 44
43 @include modifier('icon-only') { 45 @include modifier('inverted') {
44 @include element('icon') { 46 background-color: prop(--colors --inverted --bg);
45 background-color: prop(--colors --bg); 47 color: prop(--colors --inverted --fg);
46 color: prop(--colors --fg);
47 }
48 } 48 }
49 49
50 &:hover { 50 &:link,
51 @include multi('&', 'element' 'icon') { 51 &:visited {
52 &:hover {
52 background-color: prop(--colors --hover --bg); 53 background-color: prop(--colors --hover --bg);
53 color: prop(--colors --hover --fg); 54 color: prop(--colors --hover --fg);
54 } 55 }
diff --git a/assets/css/components/_section-heading.scss b/assets/css/components/_section-heading.scss
deleted file mode 100644
index 717442b..0000000
--- a/assets/css/components/_section-heading.scss
+++ /dev/null
@@ -1,29 +0,0 @@
1@include namespace('section-heading') {
2 @include store((
3 --dims: (
4 --pad-y: $line-height * 1rem
5 ),
6 --colors: (
7 --line: prop(--colors --accent --color, $global: true),
8 )
9 ));
10
11 @include component(namespace()) {
12 margin: 0 0 prop(--dims --pad-y);
13 font-family: $font-fam--text;
14 font-size: 1 / 16 * 13em;
15 font-weight: bold;
16 letter-spacing: .2em;
17 text-transform: uppercase;
18
19 &::before {
20 content: '';
21 display: inline-block;
22 width: 3em;
23 height: 2px;
24 margin-right: 1.3em;
25 background-color: prop(--colors --line);
26 vertical-align: middle;
27 }
28 }
29}
diff --git a/assets/css/layouts/_landing.scss b/assets/css/layouts/_landing.scss
index 500849e..d1169dd 100644
--- a/assets/css/layouts/_landing.scss
+++ b/assets/css/layouts/_landing.scss
@@ -10,8 +10,12 @@
10 10
11 @include layout(namespace()) { 11 @include layout(namespace()) {
12 display: flex; 12 display: flex;
13 box-sizing: border-box;
13 flex-direction: row; 14 flex-direction: row;
14 align-items: center; 15 align-items: center;
16 min-height: 100%;
17 margin-bottom: calc(-1 * #{prop(--dims --outer, $global: true)});
18 padding-bottom: prop(--dims --outer, $global: true);
15 19
16 @include element('banner') { 20 @include element('banner') {
17 width: 70%; 21 width: 70%;
diff --git a/assets/css/layouts/_section.scss b/assets/css/layouts/_section.scss
index a005ece..0ad9a61 100644
--- a/assets/css/layouts/_section.scss
+++ b/assets/css/layouts/_section.scss
@@ -1,10 +1,11 @@
1@include namespace('section') { 1@include namespace('section') {
2 @include layout(namespace()) { 2 @include store((
3 box-sizing: border-box; 3 --colors: (
4 min-height: 100%; 4 --border: prop(--colors --obj-hi, $global: true),
5 margin-bottom: calc(-1 * #{prop(--dims --outer, $global: true)}); 5 )
6 padding-bottom: prop(--dims --outer, $global: true); 6 ));
7 7
8 @include layout(namespace()) {
8 @include modifier('no-head') { 9 @include modifier('no-head') {
9 padding-top: prop(--dims --outer, $global: true); 10 padding-top: prop(--dims --outer, $global: true);
10 } 11 }
@@ -17,6 +18,23 @@
17 left: 0; 18 left: 0;
18 flex-direction: row; 19 flex-direction: row;
19 justify-self: flex-start; 20 justify-self: flex-start;
21 padding-right: prop(--dims --outer, $global: true);
22 font-size: 1 / 16 * 15em;
23
24 &::after {
25 content: '';
26 width: 100%;
27 height: 100%;
28 margin-right: prop(--dims --outer-spacing, $global: true);
29 margin-left: prop(--dims --outer-spacing, $global: true);
30 border-top: 1px solid prop(--colors --border);
31 }
32 }
33
34 @include media('<=sm') {
35 @include element('head') {
36 padding-right: 0;
37 }
20 } 38 }
21 } 39 }
22} 40}
diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss
index 6fbacff..9b3a862 100644
--- a/assets/css/scopes/_body.scss
+++ b/assets/css/scopes/_body.scss
@@ -5,3 +5,29 @@
5 } 5 }
6 } 6 }
7} 7}
8@include namespace('body') {
9 @include scope(namespace()) {
10 font-size: 1 / 16 * 18em;
11
12 > :first-child {
13 margin-top: 0;
14 }
15
16 h1 {
17 transform: translateX(-.06em);
18 font-family: $font-fam--large;
19 font-weight: 550;
20 text-transform: none;
21 }
22
23 img {
24 max-width: 100%;
25 }
26
27 @include iro-responsive-env(('xs', 'md')) {
28 h1 {
29 font-size: iro-responsive-set((1.8rem, 3rem));
30 }
31 }
32 }
33}
diff --git a/assets/css/style.scss b/assets/css/style.scss
index d095dec..1d19aae 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -18,9 +18,8 @@
18@import 'objects/button'; 18@import 'objects/button';
19 19
20@import 'components/outer-button'; 20@import 'components/outer-button';
21@import 'components/logo'; 21@import 'components/header';
22@import 'components/landing-banner'; 22@import 'components/landing-banner';
23@import 'components/section-heading';
24@import 'components/footer'; 23@import 'components/footer';
25@import 'components/card'; 24@import 'components/card';
26 25
diff --git a/content/index.js b/content/index.js
index 8a24e3a..e03dec1 100644
--- a/content/index.js
+++ b/content/index.js
@@ -2,5 +2,5 @@ var headerEl = document.querySelector(".c-hero");
2var headerTemplateEl = document.getElementById("header-sm"); 2var headerTemplateEl = document.getElementById("header-sm");
3var headerSmEl = headerTemplateEl.content.cloneNode("true"); 3var headerSmEl = headerTemplateEl.content.cloneNode("true");
4 4
5headerEl.classList.remove("u-hidden@sm-down"); 5headerEl.classList.remove("u-dn@sm-down");
6headerEl.appendChild(headerSmEl); 6headerEl.appendChild(headerSmEl);
diff --git a/content/notebook/index.md b/content/notebook/index.md
deleted file mode 100644
index 1175625..0000000
--- a/content/notebook/index.md
+++ /dev/null
@@ -1,5 +0,0 @@
1---
2title: Notebook
3layout: categorized_list
4create_feed: true
5---
diff --git a/content/projects/blobfox-emojis/index.md b/content/projects/blobfox-emojis/index.md
index 97a186e..92c26d4 100644
--- a/content/projects/blobfox-emojis/index.md
+++ b/content/projects/blobfox-emojis/index.md
@@ -1,5 +1,5 @@
1--- 1---
2title: Blobfox Emojis 2title: Blobfox
3category: emj 3category: emj
4--- 4---
5 5
diff --git a/content/projects/bunhd-emojis/index.md b/content/projects/bunhd-emojis/index.md
index bd89b1d..361b15d 100644
--- a/content/projects/bunhd-emojis/index.md
+++ b/content/projects/bunhd-emojis/index.md
@@ -1,5 +1,5 @@
1--- 1---
2title: BunHD Emojis 2title: BunHD
3category: emj 3category: emj
4--- 4---
5 5
diff --git a/metadata/metadata.yaml b/metadata/metadata.yaml
index 6980efb..8716b43 100644
--- a/metadata/metadata.yaml
+++ b/metadata/metadata.yaml
@@ -7,16 +7,9 @@ author:
7 7
8menus: 8menus:
9 main: 9 main:
10 - id: index
11 label: Home
12 url: /
13 - id: projects 10 - id: projects
14 label: Projects 11 label: Projects
15 url: /projects/ 12 url: /#projects
16 - id: notebook
17 label: Notebook
18 url: /notebook/
19 hidden: true
20 - id: personal 13 - id: personal
21 label: Personal 14 label: Personal
22 label_long: Personal Notebook 15 label_long: Personal Notebook
@@ -49,6 +42,7 @@ profiles:
49 icon: envelope 42 icon: envelope
50 username: me@volpeon.ink 43 username: me@volpeon.ink
51 featured: true 44 featured: true
45 url: "mailto:me@volpeon.ink"
52 46
53 - platform: Fediverse 47 - platform: Fediverse
54 icon: graph 48 icon: graph
diff --git a/scripts/build_content.sh b/scripts/build_content.sh
index c20eca8..83b6908 100755
--- a/scripts/build_content.sh
+++ b/scripts/build_content.sh
@@ -69,10 +69,10 @@ get_subpages_metadata() {
69 fi 69 fi
70 70
71 local pages="[]" 71 local pages="[]"
72 local sections="{}" 72 local subsections="{}"
73 73
74 for file_in in "${child_pages[@]}"; do 74 for file_in in "${child_pages[@]}"; do
75 local section=$(basename "${file_in%/index.md}") 75 local subsection=$(basename "${file_in%/index.md}")
76 local content=$(get_content "$file_in" | sed -z 's/\\/\\\\/g;s/\n/\\n/g;s/"/\\"/g') 76 local content=$(get_content "$file_in" | sed -z 's/\\/\\\\/g;s/\n/\\n/g;s/"/\\"/g')
77 local metadata=$(get_metadata "$file_in" | jq "{ \ 77 local metadata=$(get_metadata "$file_in" | jq "{ \
78 file_out: .file_out, \ 78 file_out: .file_out, \
@@ -92,10 +92,10 @@ get_subpages_metadata() {
92 fi 92 fi
93 93
94 pages=$(echo "$pages" | jq ". += [ $metadata ]") 94 pages=$(echo "$pages" | jq ". += [ $metadata ]")
95 sections=$(echo "$sections" | jq ". += { \"$section\": { title: $title, pages: $subpages } }") 95 subsections=$(echo "$subsections" | jq ". += { \"$subsection\": { title: $title, pages: $subpages } }")
96 done 96 done
97 97
98 echo "{ \"pages\": $pages, \"sections\": $sections }" 98 echo "{ \"pages\": $pages, \"subsections\": $subsections }"
99} 99}
100 100
101handle () { 101handle () {
diff --git a/templates/base.html b/templates/base.html
index c7f641c..625b025 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -32,32 +32,51 @@
32</head> 32</head>
33 33
34<body> 34<body>
35 <!--<nav class="c-nav"> 35 <nav class="c-header">
36 <a class="c-nav__logo" href="/" title="$site.title$"> 36 <a class="c-outer-button c-outer-button--inverted" href="/" title="$site.title$">
37 <svg class="c-nav__logo-symbol"> 37 <span class="c-outer-button__icon">
38 <use href="#logo"></use> 38 <svg class="c-outer-button__icon-symbol">
39 </svg> 39 <use href="#logo"></use>
40 </svg>
41 </span>
40 </a> 42 </a>
41 $for(menus.main.items)$ 43 $if(section.is_index)$
42 <a class="c-nav__item $if(it.active)$c-nav__item--active$endif$" href="$it.url$">$it.label$</a> 44 $else$
43 $endfor$ 45 $for(menus.main.items)$
44 </nav>--> 46 $if(it.active)$
45 47 <a class="c-outer-button" href="$it.url$">
46 <a class="c-outer-button c-outer-button--logo c-logo" href="/" title="$site.title$"> 48 <span class="c-outer-button__content">
47 <span class="c-outer-button__icon"> 49 $it.label$
48 <svg class="c-outer-button__icon-symbol"> 50 </span>
49 <use href="#logo"></use> 51 </a>
50 </svg> 52 $endif$
51 </span> 53 $endfor$
52 </a> 54 $endif$
55 </nav>
53 56
54 $if(section.is_index)$ 57 <main>
58 $if(section.is_index)$
55${layouts/index()} 59${layouts/index()}
56 $elseif(layout.is_categorized_list)$ 60 $elseif(layout.is_categorized_list)$
57${layouts/categorized_list()} 61${layouts/categorized_list()}
58 $else$ 62 $else$
59${layouts/page()} 63${layouts/page()}
60 $endif$ 64 $endif$
65
66 <a class="c-outer-button c-outer-button--scroll-top" href="#" title="To the top">
67 <span class="c-outer-button__icon">
68 <svg class="c-outer-button__icon-symbol o-icon">
69 <use href="#icon-arrow-up"></use>
70 </svg>
71 </span>
72 </a>
73
74 <footer class="c-footer">
75 <div class="c-footer__content">
76 9thPK7O3xn
77 </div>
78 </footer>
79 </main>
61 80
62 ${symbols.svg()} 81 ${symbols.svg()}
63</body> 82</body>
diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html
index 8c25ec0..0e9142f 100644
--- a/templates/layouts/categorized_list.html
+++ b/templates/layouts/categorized_list.html
@@ -1,23 +1,22 @@
1<main> 1<section class="l-section l-section--no-head">
2 <div class="c-page s-page l-container l-container--content l-container--pad-x l-container--pad-y"> 2 <div class="l-container l-container--pad-x l-container--pad-y l-container--content">
3 <div class="c-page__content s-page-content">
4$body$ 3$body$
5 4
6 $for(pages.by_category)$ 5 $for(pages.by_category)$
7 <h2 class="c-page__prefixed c-page__prefixed--h2"> 6 <h2>
8 $for(it.value/first)$ 7 $for(it.value/first)$
9 $it.category.name$ 8 $it.category.name$
10 $endfor$ 9 $endfor$
11 </h2> 10 </h2>
12 <ul> 11 <ul>
13 $for(it.value)$ 12 $for(it.value)$
14 <li class="c-page__prefixed c-page__prefixed--ref"> 13 <li>
15 <a href="$it.url.rel$">$it.title$</a> 14 <a href="$it.url.rel$">$it.title$</a>
16 </li> 15 </li>
17 $endfor$ 16 $endfor$
18 </ul> 17 </ul>
19 $endfor$ 18 $endfor$
20 </div>
21 </div> 19 </div>
22</main> 20</section>
21
23 22
diff --git a/templates/layouts/index.html b/templates/layouts/index.html
index 4163093..327f9f5 100644
--- a/templates/layouts/index.html
+++ b/templates/layouts/index.html
@@ -1,95 +1,80 @@
1<main> 1<section class="l-section l-section--no-head l-landing">
2 <section class="l-section l-section--no-head l-landing"> 2 <header class="l-landing__banner">
3 <header class="l-landing__banner"> 3 <div class="c-landing-banner l-container l-container--pad-x l-container--pad-y l-container--content">
4 <div class="c-landing-banner l-container l-container--pad-x l-container--pad-y l-container--content"> 4 <h1 class="c-landing-banner__title">
5 <h1 class="c-landing-banner__title"> 5 <span class="c-landing-banner__title-inner">
6 <span class="c-landing-banner__title-inner"> 6 I'm a <strong class="c-landing-banner__emph">red fox</strong> in disguise.
7 I'm a <strong class="c-landing-banner__emph">red fox</strong> in disguise. 7 </span>
8 </span> 8 </h1>
9 </h1> 9 <p class="c-landing-banner__text">
10 <p class="c-landing-banner__text"> 10 Hi, I'm Volpeon. I enjoy programming, creating vector art and designing user interfaces.
11 Hi, I'm Volpeon. I enjoy programming, creating vector art and designing user interfaces. 11 </p>
12 </p> 12 </div>
13 </div> 13 </header>
14 </header>
15 14
16 <section class="l-landing__content"> 15 <section class="l-landing__content">
17 <div class="l-container l-container--pad-x l-container--pad-y l-container--content s-body u-pt0@md-lo"> 16 <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"> 17 <div class="l-card-grid">
19 $for(profiles)$ 18 $for(profiles)$
20 $if(it.featured)$ 19 $if(it.featured)$
21 $if(it.url)$ 20 $if(it.url)$
22 <a class="l-card-grid__card c-card" href="$it.url$"> 21 <a class="l-card-grid__card c-card" href="$it.url$">
23 $else$ 22 $else$
24 <div class="l-card-grid__card c-card"> 23 <div class="l-card-grid__card c-card">
25 $endif$ 24 $endif$
26 $if(it.icon)$ 25 $if(it.icon)$
27 <svg class="c-card__icon o-icon"> 26 <svg class="c-card__icon o-icon">
28 <use href="#icon-$it.icon$"></use> 27 <use href="#icon-$it.icon$"></use>
29 </svg> 28 </svg>
30 $endif$ 29 $endif$
31 <div class="c-card__content"> 30 <div class="c-card__content">
32 <strong class="u-db">$it.platform$</strong> 31 <strong class="u-db">$it.platform$</strong>
33 <small class="u-db">$it.username$</small> 32 <small class="u-db">$it.username$</small>
34 </div> 33 </div>
35 $if(it.url)$ 34 $if(it.url)$
36 <svg class="c-card__icon o-icon"> 35 <svg class="c-card__icon o-icon">
37 <use href="#icon-arrow-up-right"></use> 36 <use href="#icon-arrow-up-right"></use>
38 </svg> 37 </svg>
39 $endif$ 38 $endif$
40 $if(it.url)$ 39 $if(it.url)$
41 </a> 40 </a>
42 $else$ 41 $else$
43 </div> 42 </div>
44 $endif$ 43 $endif$
45 $endif$ 44 $endif$
46 $endfor$ 45 $endfor$
47 </div> 46 </div>
48 47
49$body$ 48$body$
50 </div> 49 </div>
51 </section> 50 </section>
52 </section> 51</section>
53 52
54 <section class="l-section"> 53<section class="l-section">
55 <header class="l-section__head"> 54 <header class="l-section__head">
56 <a class="c-outer-button" href="#projects" id="projects"> 55 <a class="c-outer-button" href="#projects" id="projects">
57 <span class="c-outer-button__icon"> 56 <span class="c-outer-button__icon">
58 <svg class="c-outer-button__icon-symbol o-icon"> 57 <svg class="c-outer-button__icon-symbol o-icon">
59 <use href="#icon-arrow-down-right"></use> 58 <use href="#icon-arrow-down-right"></use>
60 </svg> 59 </svg>
61 </span> 60 </span>
62 <span class="c-outer-button__content"> 61 <span class="c-outer-button__content">
63 $sections.projects.title$ 62 $subsections.projects.title$
64 </span> 63 </span>
65 </a> 64 </a>
66 </header> 65 </header>
67 66
68 <div class="l-container l-container--pad-x l-container--pad-y l-container--content l-card-grid"> 67 <div class="l-container l-container--pad-x l-container--pad-y l-container--content l-card-grid">
69 $for(sections.projects.pages)$ 68 $for(subsections.projects.pages)$
70 <a class="l-card-grid__card c-card" href="$it.url.rel$"> 69 <a class="l-card-grid__card c-card" href="$it.url.rel$">
71 <div class="c-card__content"> 70 <div class="c-card__content">
72 <small class="u-db">$it.category.name$</small> 71 <small class="u-db">$it.category.name$</small>
73 <strong class="u-db">$it.title$</strong> 72 <strong class="u-db">$it.title$</strong>
74 </div> 73 </div>
75 <svg class="c-card__icon o-icon"> 74 <svg class="c-card__icon o-icon">
76 <use href="#icon-arrow-right"></use> 75 <use href="#icon-arrow-right"></use>
77 </svg> 76 </svg>
78 </a> 77 </a>
79 $endfor$ 78 $endfor$
80 </div> 79 </div>
81 </section> 80</section>
82
83 <footer class="c-footer">
84 <a class="c-outer-button c-outer-button--icon-only" href="#" title="To the top">
85 <span class="c-outer-button__icon">
86 <svg class="c-outer-button__icon-symbol o-icon">
87 <use href="#icon-arrow-up"></use>
88 </svg>
89 </span>
90 </a>
91 <div class="c-footer__content u-ar">
92 9thPK7O3xn
93 </div>
94 </footer>
95</main>
diff --git a/templates/layouts/page.html b/templates/layouts/page.html
index 9e7d85a..e006ddc 100644
--- a/templates/layouts/page.html
+++ b/templates/layouts/page.html
@@ -1,15 +1,7 @@
1<main> 1<section class="l-section l-section--no-head">
2 <div class="c-page l-container l-container--content l-container--pad-x l-container--pad-y"> 2 <div class="l-container l-container--pad-x l-container--pad-y l-container--content s-body">
3 <div class="c-page__content s-page-content"> 3 <h1>$title$</h1>
4 <header class="c-page__header">
5 <h1 class="c-page__prefixed c-page__prefixed--h1 c-page__header__title">$title$</h1>
6 $if(category)$
7 <h2 class="c-page__header__meta">in $category.name$</h2>
8 $endif$
9 </header>
10 4
11$body$ 5 $body$
12 </div>
13 </div> 6 </div>
14</main> 7</section>
15
diff --git a/templates/symbols.svg b/templates/symbols.svg
index d884bc0..958e271 100644
--- a/templates/symbols.svg
+++ b/templates/symbols.svg
@@ -55,5 +55,11 @@
55 d="m15.25 10.5a2.25 2.25 0 0 1-2.25 2.25 2.25 2.25 0 0 1-2.25-2.25 2.25 2.25 0 0 1 2.25-2.25 2.25 2.25 0 0 1 2.25 2.25zm-10 2.5a2.25 2.25 0 0 1-2.25 2.25 2.25 2.25 0 0 1-2.25-2.25 2.25 2.25 0 0 1 2.25-2.25 2.25 2.25 0 0 1 2.25 2.25zm2.5-10a2.25 2.25 0 0 1-2.25 2.25 2.25 2.25 0 0 1-2.25-2.25 2.25 2.25 0 0 1 2.25-2.25 2.25 2.25 0 0 1 2.25 2.25zm-2.5378 9.4469 5.5686-1.3921m0.61265-2.1613-4.2845-4.2845m-2.1627 0.6058-1.4004 5.6015" 55 d="m15.25 10.5a2.25 2.25 0 0 1-2.25 2.25 2.25 2.25 0 0 1-2.25-2.25 2.25 2.25 0 0 1 2.25-2.25 2.25 2.25 0 0 1 2.25 2.25zm-10 2.5a2.25 2.25 0 0 1-2.25 2.25 2.25 2.25 0 0 1-2.25-2.25 2.25 2.25 0 0 1 2.25-2.25 2.25 2.25 0 0 1 2.25 2.25zm2.5-10a2.25 2.25 0 0 1-2.25 2.25 2.25 2.25 0 0 1-2.25-2.25 2.25 2.25 0 0 1 2.25-2.25 2.25 2.25 0 0 1 2.25 2.25zm-2.5378 9.4469 5.5686-1.3921m0.61265-2.1613-4.2845-4.2845m-2.1627 0.6058-1.4004 5.6015"
56 fill="none" stroke="currentColor" /> 56 fill="none" stroke="currentColor" />
57 </symbol> 57 </symbol>
58
59 <symbol id="icon-git-branch" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
60 <path
61 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"
62 fill="none" stroke="currentColor" />
63 </symbol>
58 </defs> 64 </defs>
59</svg> 65</svg>
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-11-03 12:29:33 +0000