summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--assets/css/_basics.scss7
-rw-r--r--assets/css/_vars.scss37
-rw-r--r--assets/css/components/_card.scss15
-rw-r--r--assets/css/components/_footer.scss24
-rw-r--r--assets/css/components/_landing-banner.scss16
-rw-r--r--assets/css/components/_logo.scss19
-rw-r--r--assets/css/components/_nav.scss109
-rw-r--r--assets/css/components/_outer-button.scss67
-rw-r--r--assets/css/layouts/_card-grid.scss10
-rw-r--r--assets/css/layouts/_landing.scss20
-rw-r--r--assets/css/layouts/_section.scss17
-rw-r--r--assets/css/scopes/_body.scss2
-rw-r--r--assets/css/style.scss4
-rw-r--r--content/index.md21
-rw-r--r--metadata/metadata.yaml40
-rw-r--r--templates/base.html12
-rw-r--r--templates/layouts/index.html79
-rw-r--r--templates/symbols.svg41
18 files changed, 315 insertions, 225 deletions
diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index 3e67b76..b739d2a 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -1,10 +1,10 @@
1::selection { 1::selection {
2 background-color: var(--select--bg); 2 background-color: prop(--colors --select --bg);
3 color: var(--select--fg); 3 color: prop(--colors --select --fg);
4} 4}
5 5
6img::selection { 6img::selection {
7 background-color: var(--select--img-bg); 7 background-color: prop(--colors --select --img-bg);
8} 8}
9 9
10html, 10html,
@@ -26,6 +26,7 @@ html {
26 font-family: $font-fam--text; 26 font-family: $font-fam--text;
27 font-size: 1em / 16px * $font-size; 27 font-size: 1em / 16px * $font-size;
28 line-height: $line-height; 28 line-height: $line-height;
29 scroll-behavior: smooth;
29} 30}
30 31
31body { 32body {
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 1063dc8..b19ebee 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -30,7 +30,8 @@ $gray6: hsl(220, 0%, 100%);
30 30
31@include store(( 31@include store((
32 --dims: ( 32 --dims: (
33 --outer: 4.5rem, 33 --outer: 4rem,
34 --outer-spacing: 2rem,
34 ), 35 ),
35 --colors: ( 36 --colors: (
36 --bg-hi: $gray0, // Darker background 37 --bg-hi: $gray0, // Darker background
@@ -44,11 +45,17 @@ $gray6: hsl(220, 0%, 100%);
44 --fg-lo: $gray6, // Strong text 45 --fg-lo: $gray6, // Strong text
45 46
46 --accent: ( 47 --accent: (
47 --h: 354, 48 --h: 354,
48 --s: 84%, 49 --s: 84%,
49 --l: 55%, 50 --l: 55%,
50 --color: hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)), 51 --color: hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)),
51 ) 52 ),
53
54 --select: (
55 --bg: hsla(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l), .996),
56 --img-bg: hsla(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l), .5),
57 --fg: var(--colors--bg-hi),
58 ),
52 ) 59 )
53)); 60));
54 61
@@ -69,30 +76,26 @@ $gray6: hsl(220, 0%, 100%);
69:root { 76:root {
70 --heading--fg: var(--colors--fg-lo); 77 --heading--fg: var(--colors--fg-lo);
71 78
72 --select--bg: hsla(270, 2%, 100%, .996);
73 --select--img-bg: hsla(270, 2%, 100%, .5);
74 --select--fg: var(--colors--bg-hi);
75
76 --code--fg: var(--colors--fg-hi); 79 --code--fg: var(--colors--fg-hi);
77 80
78 --code-block--fg: var(--colors--fg-hi); 81 --code-block--fg: var(--colors--fg-hi);
79 82
80 --link--idle--fg: var(--colors--fg-lo); 83 --link--idle--fg: var(--colors--fg-lo);
81 --link--hover--bg: var(--link--idle--fg); 84 --link--hover--bg: var(--link--idle--fg);
82 --link--hover--fg: #000; 85 --link--hover--fg: #000;
83 86
84 --hero--back-fg: var(--colors--bg-hi); 87 --hero--back-fg: var(--colors--bg-hi);
85 88
86 --nav--bg: var(--colors--bg); 89 --nav--bg: var(--colors--bg);
87 --nav--logo--fg: var(--colors--fg-hi); 90 --nav--logo--fg: var(--colors--fg-hi);
88 --nav--item--idle--fg: var(--colors--fg); 91 --nav--item--idle--fg: var(--colors--fg);
89 --nav--item--hover--fg: var(--colors--fg-lo); 92 --nav--item--hover--fg: var(--colors--fg-lo);
90 --nav--item--active--fg: var(--colors--fg-lo); 93 --nav--item--active--fg: var(--colors--fg-lo);
91 94
92 --footer--bg: var(--colors--bg); 95 --footer--bg: var(--colors--bg);
93 96
94 --page--link--idle--fg: var(--link--idle--fg); // hsl(45, 100%, 70%); // hsl(215, 100%, 80%); // var(--link--idle--fg); // #ffd866; 97 --page--link--idle--fg: var(--link--idle--fg); // hsl(45, 100%, 70%); // hsl(215, 100%, 80%); // var(--link--idle--fg); // #ffd866;
95 --page--link--visited--fg: var(--colors--fg); // hsl(23, 89%, 65%); // hsl(260, 58%, 78%); // var(--fg-lo); // #f59458; 98 --page--link--visited--fg: var(--colors--fg); // hsl(23, 89%, 65%); // hsl(260, 58%, 78%); // var(--fg-lo); // #f59458;
96 --page--link--hover--bg: var(--page--link--idle--fg); 99 --page--link--hover--bg: var(--page--link--idle--fg);
97 --page--link--hover--fg: #000; 100 --page--link--hover--fg: #000;
98} 101}
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index 6260518..bb8b4d2 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -12,6 +12,13 @@
12 ) 12 )
13 )); 13 ));
14 14
15 @include store((
16 --dims: (
17 --pad-x: .9em,
18 --pad-y: .6em
19 )
20 ), 'md');
21
15 @include component(namespace()) { 22 @include component(namespace()) {
16 display: flex; 23 display: flex;
17 position: relative; 24 position: relative;
@@ -29,9 +36,7 @@
29 @include element('content') { 36 @include element('content') {
30 @include modifier('flip') { 37 @include modifier('flip') {
31 visibility: visible; 38 visibility: visible;
32 transition: 39 transition: visibility 0s, opacity .2s;
33 visibility 0s,
34 opacity .2s;
35 opacity: 1; 40 opacity: 1;
36 } 41 }
37 } 42 }
@@ -48,9 +53,7 @@
48 top: 0; 53 top: 0;
49 left: 0; 54 left: 0;
50 height: 100%; 55 height: 100%;
51 transition: 56 transition: visibility 0s linear .2s, opacity .2s;
52 visibility 0s linear .2s,
53 opacity .2s;
54 opacity: 0; 57 opacity: 0;
55 background-color: prop(--colors --flip --bg); 58 background-color: prop(--colors --flip --bg);
56 } 59 }
diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss
index db30fcd..c20bc22 100644
--- a/assets/css/components/_footer.scss
+++ b/assets/css/components/_footer.scss
@@ -1,17 +1,25 @@
1@include namespace('footer') { 1@include namespace('footer') {
2 @include store(( 2 @include store((
3 --dims: (
4 --pad-y: .8em
5 ),
6 --colors: ( 3 --colors: (
7 --fg: prop(--colors --obj, $global: true) 4 --fg: prop(--colors --obj, $global: true),
5 --border: prop(--colors --bg-lo, $global: true),
8 ) 6 )
9 )); 7 ));
10 8
11 @include component(namespace()) { 9 @include component(namespace()) {
12 padding-top: prop(--dims --pad-y); 10 display: flex;
13 padding-bottom: prop(--dims --pad-y); 11 align-items: center;
14 color: prop(--colors --fg); 12 justify-content: space-between;
15 text-align: right; 13 height: prop(--dims --outer, $global: true);
14
15 @include element('content') {
16 width: 100%;
17 height: 100%;
18 margin-right: prop(--dims --outer-spacing, $global: true);
19 margin-left: prop(--dims --outer-spacing, $global: true);
20 border-top: 1px solid prop(--colors --border);
21 color: prop(--colors --fg);
22 line-height: prop(--dims --outer, $global: true);
23 }
16 } 24 }
17} 25}
diff --git a/assets/css/components/_landing-banner.scss b/assets/css/components/_landing-banner.scss
index 412ca8a..8f07c37 100644
--- a/assets/css/components/_landing-banner.scss
+++ b/assets/css/components/_landing-banner.scss
@@ -7,17 +7,19 @@
7 )); 7 ));
8 8
9 @include component(namespace()) { 9 @include component(namespace()) {
10 font-size: 1 / 16 * 17em;
11
12 @include element('title') { 10 @include element('title') {
13 max-width: 7em; 11 max-width: 7em;
14 margin-top: 0; 12 margin-top: 0;
15 transform: translateX(-.04em); 13 transform: translateX(-.05em);
16 font-family: $font-fam--large; 14 font-family: $font-fam--large;
17 font-weight: 350; 15 font-weight: 350;
18 text-transform: none; 16 text-transform: none;
19 } 17 }
20 18
19 @include element('text') {
20 font-size: 1 / 16 * 17em;
21 }
22
21 @include element('title-inner') { 23 @include element('title-inner') {
22 background-image: linear-gradient( 24 background-image: linear-gradient(
23 to top, 25 to top,
@@ -33,9 +35,15 @@
33 font-weight: 550; 35 font-weight: 550;
34 } 36 }
35 37
38 @include media('<=md') {
39 @include element('title') {
40 max-width: none;
41 }
42 }
43
36 @include iro-responsive-env(('md', 'lg')) { 44 @include iro-responsive-env(('md', 'lg')) {
37 @include element('title') { 45 @include element('title') {
38 font-size: iro-responsive-set((2.6rem, 3rem)); 46 font-size: iro-responsive-set((2.6rem, 3.4rem));
39 } 47 }
40 } 48 }
41 } 49 }
diff --git a/assets/css/components/_logo.scss b/assets/css/components/_logo.scss
new file mode 100644
index 0000000..13587c8
--- /dev/null
+++ b/assets/css/components/_logo.scss
@@ -0,0 +1,19 @@
1@include namespace('logo') {
2 @include store((
3 --colors: (
4 --fg: prop(--colors --fg-lo, $global: true),
5 --bg: prop(--colors --bg-hi, $global: true),
6 --hover: (
7 --fg: prop(--colors --bg-hi, $global: true),
8 --bg: prop(--colors --accent --color, $global: true),
9 )
10 )
11 ));
12
13 @include component(namespace()) {
14 position: fixed;
15 z-index: 10000;
16 top: 0;
17 left: 0;
18 }
19}
diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss
deleted file mode 100644
index d0a255e..0000000
--- a/assets/css/components/_nav.scss
+++ /dev/null
@@ -1,109 +0,0 @@
1@include namespace('nav') {
2 @include store((
3 --dims: (
4 --font-size: 15px,
5 --pad-x: 2.5rem,
6 --item: (
7 --pad-x: 1rem,
8 ),
9 ),
10 --colors: (
11 --bg: prop(--colors --bg-hi, $global: true),
12 --logo: (
13 --idle: (
14 --fg: prop(--colors --accent --color, $global: true),
15 ),
16 --hover: (
17 --fg: prop(--colors --fg-lo, $global: true),
18 )
19 ),
20 --item: (
21 --idle: (
22 --fg: prop(--colors --fg, $global: true),
23 ),
24 --hover: (
25 --fg: prop(--colors --fg-lo, $global: true),
26 ),
27 --active: (
28 --fg: prop(--colors --fg-lo, $global: true),
29 )
30 )
31 )
32 ));
33
34 @include store((
35 --dims: (
36 --pad-x: prop(--container --dims --pad-x, $global: true),
37 )
38 ), 'md');
39
40 @include store((
41 --dims: (
42 --item: (
43 --pad-x: .75em,
44 ),
45 )
46 ), 'sm');
47
48 @include component(namespace()) {
49 display: flex;
50 position: fixed;
51 z-index: 10000;
52 top: 0;
53 left: 0;
54 height: prop(--dims --outer, $global: true);
55 padding: 0 prop(--dims --pad-x);
56 background-color: prop(--colors --bg);
57 font-size: prop(--dims --font-size);
58
59 @include element('logo', 'item') {
60 display: flex;
61 align-items: center;
62 height: 100%;
63 }
64
65 @include element('logo') {
66 color: prop(--colors --logo --idle --fg);
67 font-family: $font-fam--mono;
68 text-decoration: none;
69
70 &:link,
71 &:visited {
72 &:hover {
73 background-color: transparent;
74 color: prop(--colors --logo --hover --fg);
75 }
76 }
77 }
78
79 @include element('logo-symbol') {
80 display: block;
81 width: $line-height * .9em;
82 height: $line-height * 1em;
83 }
84
85 @include element('item') {
86 margin: 0 calc(-1 * #{prop(--dims --item --pad-x)}) 0 prop(--dims --item --pad-x);
87 padding: 0 prop(--dims --item --pad-x);
88 color: prop(--colors --item --idle --fg);
89 text-decoration: none;
90 text-transform: uppercase;
91
92 &:hover {
93 background-color: transparent;
94 color: prop(--colors --item --hover --fg);
95 text-decoration: underline;
96 }
97
98 @include modifier('active') {
99 border-color: prop(--colors --item --active --fg);
100 color: prop(--colors --item --active --fg);
101 font-weight: bold;
102 }
103 }
104
105 @include media('<=md') {
106 width: 100%;
107 }
108 }
109}
diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss
new file mode 100644
index 0000000..13614bb
--- /dev/null
+++ b/assets/css/components/_outer-button.scss
@@ -0,0 +1,67 @@
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 --hover: (
7 --bg: prop(--colors --accent --color, $global: true),
8 --fg: prop(--colors --bg-hi, $global: true),
9 ),
10 --logo: (
11 --fg: prop(--colors --fg-lo, $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 )
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-weight: 500;
28 text-decoration: none;
29
30 &:hover {
31 background-color: prop(--colors --hover --bg);
32 color: prop(--colors --hover --fg);
33 }
34
35 @include modifier('logo') {
36 background-color: prop(--colors --logo --bg);
37 color: prop(--colors --logo --fg);
38
39 &:hover {
40 background-color: prop(--colors --logo --hover --bg);
41 color: prop(--colors --logo --hover --fg);
42 }
43 }
44
45 @include element('icon') {
46 display: flex;
47 position: relative;
48 align-items: center;
49 justify-content: center;
50 width: prop(--dims --outer, $global: true);
51 height: 100%;
52 }
53
54 @include element('icon-symbol') {
55 display: block;
56 width: 1.5em;
57 height: 1.5em;
58 }
59
60 @include element('content') {
61 height: 100%;
62 padding-right: prop(--dims --outer-spacing, $global: true);
63 padding-left: prop(--dims --outer-spacing, $global: true);
64 line-height: prop(--dims --outer, $global: true);
65 }
66 }
67}
diff --git a/assets/css/layouts/_card-grid.scss b/assets/css/layouts/_card-grid.scss
index 8e9091a..cbc4388 100644
--- a/assets/css/layouts/_card-grid.scss
+++ b/assets/css/layouts/_card-grid.scss
@@ -1,7 +1,13 @@
1@include namespace('card-grid') { 1@include namespace('card-grid') {
2 @include store((
3 --dims: (
4 --card-width: 17em
5 )
6 ));
7
2 @include layout(namespace()) { 8 @include layout(namespace()) {
3 display: grid; 9 display: grid;
4 grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); 10 grid-template-columns: repeat(auto-fit, minmax(#{prop(--dims --card-width)}, 1fr));
5 gap: .7rem; 11 gap: .6rem;
6 } 12 }
7} 13}
diff --git a/assets/css/layouts/_landing.scss b/assets/css/layouts/_landing.scss
index 03af39f..a332528 100644
--- a/assets/css/layouts/_landing.scss
+++ b/assets/css/layouts/_landing.scss
@@ -13,19 +13,15 @@
13 box-sizing: border-box; 13 box-sizing: border-box;
14 flex-direction: row; 14 flex-direction: row;
15 align-items: center; 15 align-items: center;
16 min-height: 100%;
17 padding-bottom: prop(--dims --outer, $global: true);
18 16
19 @include element('banner') { 17 @include element('banner') {
20 flex-shrink: 1.2; 18 width: 70%;
21 width: 100%;
22 max-width: prop(--dims --banner-width); 19 max-width: prop(--dims --banner-width);
23 background-color: prop(--colors --banner-bg); 20 background-color: prop(--colors --banner-bg);
24 } 21 }
25 22
26 @include element('content') { 23 @include element('content') {
27 width: 100%; 24 width: 100%;
28 min-width: 0;
29 } 25 }
30 26
31 @include iro-responsive-env(('md', 'lg')) { 27 @include iro-responsive-env(('md', 'lg')) {
@@ -38,9 +34,15 @@
38 } 34 }
39 35
40 @include media('<=md') { 36 @include media('<=md') {
41 display: block; 37 display: block;
42 height: auto; 38
43 padding-bottom: 0; 39 @include element('side') {
40 display: none;
41
42 @include sibling-element('side') {
43 display: block;
44 }
45 }
44 46
45 @include element('banner', 'content') { 47 @include element('banner', 'content') {
46 width: auto; 48 width: auto;
diff --git a/assets/css/layouts/_section.scss b/assets/css/layouts/_section.scss
new file mode 100644
index 0000000..94a145b
--- /dev/null
+++ b/assets/css/layouts/_section.scss
@@ -0,0 +1,17 @@
1@include namespace('section') {
2 @include layout(namespace()) {
3 display: flex;
4 flex-direction: column;
5 align-items: flex-start;
6 min-height: 100%;
7 margin-bottom: calc(-1 * #{prop(--dims --outer, $global: true)});
8 padding-bottom: prop(--dims --outer, $global: true);
9
10 @include element('heading') {
11 position: sticky;
12 z-index: 9000;
13 top: 0;
14 left: 0;
15 }
16 }
17}
diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss
index 7adda03..6fbacff 100644
--- a/assets/css/scopes/_body.scss
+++ b/assets/css/scopes/_body.scss
@@ -1,7 +1,7 @@
1@include namespace('body') { 1@include namespace('body') {
2 @include scope(namespace()) { 2 @include scope(namespace()) {
3 > :first-child { 3 > :first-child {
4 margin-top: 0; 4 //margin-top: 0;
5 } 5 }
6 } 6 }
7} 7}
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 89b7837..d095dec 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -10,13 +10,15 @@
10@import 'basics'; 10@import 'basics';
11 11
12@import 'layouts/container'; 12@import 'layouts/container';
13@import 'layouts/section';
13@import 'layouts/landing'; 14@import 'layouts/landing';
14@import 'layouts/card-grid'; 15@import 'layouts/card-grid';
15 16
16@import 'objects/icon'; 17@import 'objects/icon';
17@import 'objects/button'; 18@import 'objects/button';
18 19
19@import 'components/nav'; 20@import 'components/outer-button';
21@import 'components/logo';
20@import 'components/landing-banner'; 22@import 'components/landing-banner';
21@import 'components/section-heading'; 23@import 'components/section-heading';
22@import 'components/footer'; 24@import 'components/footer';
diff --git a/content/index.md b/content/index.md
index 85ef328..e144d39 100644
--- a/content/index.md
+++ b/content/index.md
@@ -1,24 +1,3 @@
1--- 1---
2title: Home 2title: Home
3
4profiles:
5 - platform: Bandcamp
6 icon: bandcamp
7 username: volpeon
8 url: https://bandcamp.com/volpeon
9 - platform: E-Mail
10 icon: envelope
11 username: me@volpeon.ink
12 - platform: Fediverse
13 icon: share
14 username: "@volpeon@fedi.vulpes.one"
15 - platform: IRC
16 icon: hash
17 username: volpeon
18 - platform: PeerTube
19 icon: play
20 username: "@volpeon@pt.vulpes.one"
21 - platform: XMPP
22 icon: messages
23 username: "&lt;available&gt;"
24--- 3---
diff --git a/metadata/metadata.yaml b/metadata/metadata.yaml
index eeb6f62..972de8d 100644
--- a/metadata/metadata.yaml
+++ b/metadata/metadata.yaml
@@ -37,3 +37,43 @@ rewrites:
37 path: 37 path:
38 - from: ^/personal 38 - from: ^/personal
39 to: /9thPK7O3xn 39 to: /9thPK7O3xn
40
41profiles:
42 - platform: Bandcamp
43 icon: parallelogram
44 username: volpeon
45 url: https://bandcamp.com/volpeon
46 featured: true
47
48 - platform: E-Mail
49 icon: envelope
50 username: me@volpeon.ink
51 featured: true
52
53 - platform: Fediverse
54 icon: graph
55 username: "@volpeon@fedi.vulpes.one"
56 featured: true
57
58 - platform: GitHub
59 username: volpeon
60 url: "https://github.com/volpeon"
61
62 - platform: IRC
63 icon: hash
64 username: volpeon
65 featured: true
66
67 - platform: PeerTube
68 icon: video
69 username: "@volpeon@pt.vulpes.one"
70 featured: true
71
72 - platform: Steam
73 username: volpeon
74 url: https://steamcommunity.com/id/volpeon/
75
76 - platform: XMPP
77 icon: messages
78 username: "&lt;available&gt;"
79 featured: true
diff --git a/templates/base.html b/templates/base.html
index 1d0da4d..c7f641c 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -32,7 +32,7 @@
32</head> 32</head>
33 33
34<body> 34<body>
35 <nav class="c-nav"> 35 <!--<nav class="c-nav">
36 <a class="c-nav__logo" href="/" title="$site.title$"> 36 <a class="c-nav__logo" href="/" title="$site.title$">
37 <svg class="c-nav__logo-symbol"> 37 <svg class="c-nav__logo-symbol">
38 <use href="#logo"></use> 38 <use href="#logo"></use>
@@ -41,7 +41,15 @@
41 $for(menus.main.items)$ 41 $for(menus.main.items)$
42 <a class="c-nav__item $if(it.active)$c-nav__item--active$endif$" href="$it.url$">$it.label$</a> 42 <a class="c-nav__item $if(it.active)$c-nav__item--active$endif$" href="$it.url$">$it.label$</a>
43 $endfor$ 43 $endfor$
44 </nav> 44 </nav>-->
45
46 <a class="c-outer-button c-outer-button--logo c-logo" href="/" title="$site.title$">
47 <span class="c-outer-button__icon">
48 <svg class="c-outer-button__icon-symbol">
49 <use href="#logo"></use>
50 </svg>
51 </span>
52 </a>
45 53
46 $if(section.is_index)$ 54 $if(section.is_index)$
47${layouts/index()} 55${layouts/index()}
diff --git a/templates/layouts/index.html b/templates/layouts/index.html
index d819455..3145b69 100644
--- a/templates/layouts/index.html
+++ b/templates/layouts/index.html
@@ -1,5 +1,5 @@
1<main> 1<main>
2 <section class="l-landing"> 2 <section class="l-section l-landing">
3 <header class="l-landing__banner"> 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"> 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"> 5 <h1 class="c-landing-banner__title">
@@ -8,41 +8,40 @@
8 </span> 8 </span>
9 </h1> 9 </h1>
10 <p class="c-landing-banner__text"> 10 <p class="c-landing-banner__text">
11 Welcome to my website! I'm Volpeon, a red fox disguised as a human. 11 Hi, I'm Volpeon. I enjoy programming, creating vector art and designing user interfaces.
12 I enjoy programming, creating vector art and designing user interfaces.
13 </p> 12 </p>
14 </div> 13 </div>
15 </header> 14 </header>
16 15
17 <section class="l-landing__content"> 16 <section class="l-landing__content">
18 <div class="l-container l-container--pad-x l-container--pad-y l-container--content s-body"> 17 <div class="l-container l-container--pad-x l-container--pad-y l-container--content s-body">
19 <h1 class="c-section-heading">My profiles</h1>
20
21 <div class="l-card-grid"> 18 <div class="l-card-grid">
22 $for(profiles)$ 19 $for(profiles)$
23 $if(it.url)$ 20 $if(it.featured)$
24 <a class="c-card" href="$it.url$"> 21 $if(it.url)$
25 $else$ 22 <a class="l-card-grid__card c-card" href="$it.url$">
26 <div class="c-card"> 23 $else$
27 $endif$ 24 <div class="l-card-grid__card c-card">
28 $if(it.icon)$
29 <svg class="c-card__icon o-icon">
30 <use href="#icon-$it.icon$"></use>
31 </svg>
32 $endif$ 25 $endif$
33 <div class="c-card__content"> 26 $if(it.icon)$
34 <strong class="u-db">$it.platform$</strong> 27 <svg class="c-card__icon o-icon">
35 <small class="u-db">$it.username$</small> 28 <use href="#icon-$it.icon$"></use>
36 </div> 29 </svg>
30 $endif$
31 <div class="c-card__content">
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__icon o-icon">
37 <use href="#icon-link-external"></use>
38 </svg>
39 $endif$
37 $if(it.url)$ 40 $if(it.url)$
38 <svg class="c-card__icon o-icon"> 41 </a>
39 <use href="#icon-link-external"></use> 42 $else$
40 </svg> 43 </div>
41 $endif$ 44 $endif$
42 $if(it.url)$
43 </a>
44 $else$
45 </div>
46 $endif$ 45 $endif$
47 $endfor$ 46 $endfor$
48 </div> 47 </div>
@@ -52,7 +51,31 @@ $body$
52 </section> 51 </section>
53 </section> 52 </section>
54 53
55 $-- <footer class="c-footer l-container"> 54 <section class="l-section">
56 $-- 9thPK7O3xn 55 <header class="l-section__heading">
57 $-- </footer> 56 <a class="c-outer-button" href="#projects" id="projects">
57 <span class="c-outer-button__icon">
58 <svg class="c-outer-button__icon-symbol o-icon">
59 <use href="#icon-arrow-down-right"></use>
60 </svg>
61 </span>
62 <span class="c-outer-button__content">
63 Projects
64 </span>
65 </a>
66 </header>
67 </section>
68
69 <footer class="c-footer">
70 <div class="c-footer__content">
71 9thPK7O3xn
72 </div>
73 <a class="c-outer-button" href="#">
74 <span class="c-outer-button__icon">
75 <svg class="c-outer-button__icon-symbol o-icon">
76 <use href="#icon-arrow-up"></use>
77 </svg>
78 </span>
79 </a>
80 </footer>
58</main> 81</main>
diff --git a/templates/symbols.svg b/templates/symbols.svg
index 7972457..902cc35 100644
--- a/templates/symbols.svg
+++ b/templates/symbols.svg
@@ -7,36 +7,49 @@
7 <path fill="currentColor" stroke="none" d="M 9.915975,13 H 12.08401 L 15.584018,3 h -2.168036 z" /> 7 <path fill="currentColor" stroke="none" d="M 9.915975,13 H 12.08401 L 15.584018,3 h -2.168036 z" />
8 </symbol> 8 </symbol>
9 9
10 <symbol id="icon-arrow-down-right" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
11 <path d="m5.25 11.75h6.5v-6.5m0 6.5-7.5-7.5" fill="none" stroke="currentColor" />
12 </symbol>
13
14 <symbol id="icon-arrow-up" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
15 <path d="m12.25 7.25-4.5-4.5-4.5 4.5m4.5-4.5v10.5" fill="none" stroke="currentColor" />
16 </symbol>
17
10 <symbol id="icon-envelope" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> 18 <symbol id="icon-envelope" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
11 <path fill="none" stroke="currentColor" 19 <path
12 d="m1.25 4.9995 6.75 4.25 6.75-4.25m-12.75-2.125h12c0.4155 0 0.75 0.3345 0.75 0.75v8.8755c0 0.4155-0.3345 0.75-0.75 0.75h-12c-0.4155 0-0.75-0.3345-0.75-0.75v-8.8755c0-0.4155 0.3345-0.75 0.75-0.75z" /> 20 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"
21 fill="none" stroke="currentColor" />
13 </symbol> 22 </symbol>
14 23
15 <symbol id="icon-hash" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> 24 <symbol id="icon-hash" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
16 <path fill="none" stroke="currentColor" d="m5.2497 13.75 1.0003-11m2.9997 11 1.0003-11m-7.5 3.5h10m-10 4h10" /> 25 <path d="m4.7501 14.25 0.99984-12m4 12 1.0002-12m-8.5001 3.5h11m-11 5h11" fill="none" stroke="currentColor" />
17 </symbol> 26 </symbol>
18 27
19 <symbol id="icon-messages" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> 28 <symbol id="icon-messages" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
20 <path fill="none" stroke="currentColor" 29 <path
21 d="m 2.5,1.75 h 8 c 0.4155,0 0.75,0.3345 0.75,0.75 v 5.499875 c 0,0.4155 -0.3345,0.75 -0.75,0.75 H 4.75 l -3,3.00025 V 2.5 C 1.75,2.0845 2.0845,1.75 2.5,1.75 Z" /> 30 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"
22 <path fill="none" stroke="currentColor" d="m 6.75,11.750125 h 4.5 l 3,3 V 6.25" /> 31 fill="none" stroke="currentColor" />
32 <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"
33 stroke="currentColor" />
23 </symbol> 34 </symbol>
24 35
25 <symbol id="icon-link-external" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> 36 <symbol id="icon-link-external" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
26 <path fill="none" stroke="currentColor" d="m 5.25,4.25 h 6.5 v 6.5 m 0,-6.5 -7.5,7.5" /> 37 <path d="m5.25 4.25h6.5v6.5m0-6.5-7.5 7.5" fill="none" stroke="currentColor" />
27 </symbol> 38 </symbol>
28 39
29 <symbol id="icon-bandcamp" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> 40 <symbol id="icon-parallelogram" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
30 <path fill="none" stroke="currentColor" d="m 15.25,4.25 -5,7.5 h -9.5 l 5,-7.5 z" /> 41 <path d="m15.25 4.25-5 7.5h-9.5l5-7.5z" fill="none" stroke="currentColor" />
31 </symbol> 42 </symbol>
32 43
33 <symbol id="icon-play" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> 44 <symbol id="icon-video" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
34 <path fill="none" stroke="currentColor" d="M 4.25,3.25 11.75,8 4.25,12.75 Z" /> 45 <path d="m6.75 6.25 2.5 2-2.5 2z" fill="currentColor" stroke="currentColor" />
46 <rect x=".75" y="2.25" width="14.5" height="12" ry=".75" fill="none" stroke="currentColor" />
35 </symbol> 47 </symbol>
36 48
37 <symbol id="icon-share" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> 49 <symbol id="icon-graph" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
38 <path fill="none" stroke="currentColor" 50 <path
39 d="M 5.75,8 A 1.75,1.75 0 0 1 4,9.75 1.75,1.75 0 0 1 2.25,8 1.75,1.75 0 0 1 4,6.25 1.75,1.75 0 0 1 5.75,8 Z m 7.5,-4 A 1.75,1.75 0 0 1 11.5,5.75 1.75,1.75 0 0 1 9.75,4 1.75,1.75 0 0 1 11.5,2.25 1.75,1.75 0 0 1 13.25,4 Z m 0,8 A 1.75,1.75 0 0 1 11.5,13.75 1.75,1.75 0 0 1 9.75,12 1.75,1.75 0 0 1 11.5,10.25 1.75,1.75 0 0 1 13.25,12 Z M 5.5273914,7.1280734 9.9,4.75 M 5.5098034,8.8930085 9.9,11.25" /> 51 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"
52 fill="none" stroke="currentColor" />
40 </symbol> 53 </symbol>
41 </defs> 54 </defs>
42</svg> 55</svg>
generated by cgit v1.2.3-54-g00ecf (git 2.45.2) at 2024-07-03 12:49:09 +0000