diff options
author | Volpeon <git@volpeon.ink> | 2021-03-26 22:48:01 +0100 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2021-03-26 22:48:01 +0100 |
commit | ef58809a37a7ad95c9bdef8e9f465adb3904ffdf (patch) | |
tree | a13c113552197dd3dbbd3c511a3cdef95d9d45b5 | |
parent | WIP: Redesign (diff) | |
download | volpeon.ink-ef58809a37a7ad95c9bdef8e9f465adb3904ffdf.tar.gz volpeon.ink-ef58809a37a7ad95c9bdef8e9f465adb3904ffdf.tar.bz2 volpeon.ink-ef58809a37a7ad95c9bdef8e9f465adb3904ffdf.zip |
WIP: Redesign
-rw-r--r-- | assets/css/_basics.scss | 30 | ||||
-rw-r--r-- | assets/css/_fonts.scss | 27 | ||||
-rw-r--r-- | assets/css/_vars.scss | 21 | ||||
-rw-r--r-- | assets/css/components/_card.scss | 6 | ||||
-rw-r--r-- | assets/css/components/_landing-banner.scss | 2 | ||||
-rw-r--r-- | assets/css/components/_nav.scss | 29 | ||||
-rw-r--r-- | assets/css/components/_section-heading.scss | 8 | ||||
-rw-r--r-- | assets/css/layouts/_container.scss | 6 | ||||
-rw-r--r-- | assets/css/layouts/_landing.scss | 20 | ||||
-rw-r--r-- | assets/css/objects/_button.scss | 23 | ||||
-rw-r--r-- | assets/css/style.scss | 10 | ||||
-rw-r--r-- | assets/fonts/IBMPlexSans-Medium.ttf | bin | 0 -> 182088 bytes | |||
-rw-r--r-- | content/index.md | 31 | ||||
-rw-r--r-- | content/profiles/index.md | 19 | ||||
-rw-r--r-- | templates/base.html | 2 | ||||
-rw-r--r-- | templates/layouts/index.html | 80 |
16 files changed, 163 insertions, 151 deletions
diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss index 64b11cf..d05bc36 100644 --- a/assets/css/_basics.scss +++ b/assets/css/_basics.scss | |||
@@ -1,24 +1,3 @@ | |||
1 | @font-face { | ||
2 | font-family: 'IBM Plex Sans'; | ||
3 | font-style: normal; | ||
4 | font-weight: normal; | ||
5 | src: url('/IBMPlexSans-Regular.woff2') format('woff2'); | ||
6 | } | ||
7 | |||
8 | @font-face { | ||
9 | font-family: 'IBM Plex Sans'; | ||
10 | font-style: normal; | ||
11 | font-weight: bold; | ||
12 | src: url('/IBMPlexSans-Bold.woff2') format('woff2'); | ||
13 | } | ||
14 | |||
15 | @font-face { | ||
16 | font-family: 'Garet Variable'; | ||
17 | font-style: normal; | ||
18 | font-weight: 50 950; | ||
19 | src: url('/GaretVariable.woff2') format('woff2-variations'); | ||
20 | } | ||
21 | |||
22 | ::selection { | 1 | ::selection { |
23 | background-color: var(--select--bg); | 2 | background-color: var(--select--bg); |
24 | color: var(--select--fg); | 3 | color: var(--select--fg); |
@@ -37,20 +16,21 @@ code { | |||
37 | html, | 16 | html, |
38 | body, | 17 | body, |
39 | main { | 18 | main { |
40 | height: 100%; | 19 | box-sizing: border-box; |
20 | height: 100%; | ||
41 | } | 21 | } |
42 | 22 | ||
43 | html { | 23 | html { |
44 | background-color: prop(--colors --bg); | 24 | background-color: prop(--colors --bg); |
45 | color: prop(--colors --fg); | 25 | color: prop(--colors --fg); |
46 | font-family: $font-fam--text; | 26 | font-family: $font-fam--text; |
47 | font-size: px-to-em($font-size, 16px); | 27 | font-size: 1em / 16px * $font-size; |
48 | line-height: $line-height; | 28 | line-height: $line-height; |
49 | } | 29 | } |
50 | 30 | ||
51 | body { | 31 | body { |
52 | margin: 0; | 32 | margin: 0; |
53 | padding: 0; | 33 | padding: prop(--dims --nav --height, $global: true) 0 0; |
54 | } | 34 | } |
55 | 35 | ||
56 | pre, | 36 | pre, |
@@ -180,7 +160,7 @@ h1 { | |||
180 | } | 160 | } |
181 | 161 | ||
182 | p { | 162 | p { |
183 | margin: ($line-height * 1em) 0 0; | 163 | margin: ($line-height * 1rem) 0 0; |
184 | } | 164 | } |
185 | 165 | ||
186 | :link, | 166 | :link, |
diff --git a/assets/css/_fonts.scss b/assets/css/_fonts.scss new file mode 100644 index 0000000..9e57600 --- /dev/null +++ b/assets/css/_fonts.scss | |||
@@ -0,0 +1,27 @@ | |||
1 | @font-face { | ||
2 | font-family: 'IBM Plex Sans'; | ||
3 | font-style: normal; | ||
4 | font-weight: normal; | ||
5 | src: url('/IBMPlexSans-Regular.woff2') format('woff2'); | ||
6 | } | ||
7 | |||
8 | @font-face { | ||
9 | font-family: 'IBM Plex Sans'; | ||
10 | font-style: normal; | ||
11 | font-weight: 500; | ||
12 | src: url('/IBMPlexSans-Medium.woff2') format('woff2'); | ||
13 | } | ||
14 | |||
15 | @font-face { | ||
16 | font-family: 'IBM Plex Sans'; | ||
17 | font-style: normal; | ||
18 | font-weight: bold; | ||
19 | src: url('/IBMPlexSans-Bold.woff2') format('woff2'); | ||
20 | } | ||
21 | |||
22 | @font-face { | ||
23 | font-family: 'Garet'; | ||
24 | font-style: normal; | ||
25 | font-weight: 50 950; | ||
26 | src: url('/GaretVariable.woff2') format('woff2-variations'); | ||
27 | } | ||
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss index 1ef0c8a..18cebc6 100644 --- a/assets/css/_vars.scss +++ b/assets/css/_vars.scss | |||
@@ -1,8 +1,8 @@ | |||
1 | $breakpoints: ( | 1 | $breakpoints: ( |
2 | xs: 320px, | ||
3 | sm: 600px, | ||
4 | md: 900px, | ||
5 | lg: 1500px, | 2 | lg: 1500px, |
3 | md: 900px, | ||
4 | sm: 600px, | ||
5 | xs: 320px, | ||
6 | ); | 6 | ); |
7 | 7 | ||
8 | $unit-intervals: ( | 8 | $unit-intervals: ( |
@@ -13,7 +13,7 @@ $unit-intervals: ( | |||
13 | ); | 13 | ); |
14 | 14 | ||
15 | $font-fam--text: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; | 15 | $font-fam--text: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; |
16 | $font-fam--large: 'Garet Variable', $font-fam--text; | 16 | $font-fam--large: 'Garet', $font-fam--text; |
17 | $font-fam--mono: 'Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; | 17 | $font-fam--mono: 'Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; |
18 | $font-size: 16px; | 18 | $font-size: 16px; |
19 | $line-height: 1.7; | 19 | $line-height: 1.7; |
@@ -29,6 +29,11 @@ $gray5: hsl(220, 0%, 73%); | |||
29 | $gray6: hsl(220, 0%, 100%); | 29 | $gray6: hsl(220, 0%, 100%); |
30 | 30 | ||
31 | @include store(( | 31 | @include store(( |
32 | --dims: ( | ||
33 | --nav: ( | ||
34 | --height: 4.5rem | ||
35 | ) | ||
36 | ), | ||
32 | --colors: ( | 37 | --colors: ( |
33 | --bg-hi: $gray0, // Darker background | 38 | --bg-hi: $gray0, // Darker background |
34 | --bg: $gray1, // Background | 39 | --bg: $gray1, // Background |
@@ -57,6 +62,14 @@ $gray6: hsl(220, 0%, 100%); | |||
57 | } | 62 | } |
58 | } | 63 | } |
59 | 64 | ||
65 | @include store(( | ||
66 | --dims: ( | ||
67 | --nav: ( | ||
68 | --height: 3.5rem | ||
69 | ) | ||
70 | ), | ||
71 | ), 'sm'); | ||
72 | |||
60 | :root { | 73 | :root { |
61 | --heading--fg: var(--colors--fg-lo); | 74 | --heading--fg: var(--colors--fg-lo); |
62 | 75 | ||
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss index 4b3a094..21eeb9f 100644 --- a/assets/css/components/_card.scss +++ b/assets/css/components/_card.scss | |||
@@ -18,6 +18,12 @@ | |||
18 | background-color: prop(--colors --bg); | 18 | background-color: prop(--colors --bg); |
19 | line-height: 1.4; | 19 | line-height: 1.4; |
20 | 20 | ||
21 | &:link, | ||
22 | &:visited { | ||
23 | color: currentColor; | ||
24 | text-decoration: none; | ||
25 | } | ||
26 | |||
21 | &:hover { | 27 | &:hover { |
22 | @include element('content') { | 28 | @include element('content') { |
23 | @include modifier('flip') { | 29 | @include modifier('flip') { |
diff --git a/assets/css/components/_landing-banner.scss b/assets/css/components/_landing-banner.scss index ee5deab..412ca8a 100644 --- a/assets/css/components/_landing-banner.scss +++ b/assets/css/components/_landing-banner.scss | |||
@@ -7,6 +7,8 @@ | |||
7 | )); | 7 | )); |
8 | 8 | ||
9 | @include component(namespace()) { | 9 | @include component(namespace()) { |
10 | font-size: 1 / 16 * 17em; | ||
11 | |||
10 | @include element('title') { | 12 | @include element('title') { |
11 | max-width: 7em; | 13 | max-width: 7em; |
12 | margin-top: 0; | 14 | margin-top: 0; |
diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss index 03118a9..900b4f2 100644 --- a/assets/css/components/_nav.scss +++ b/assets/css/components/_nav.scss | |||
@@ -2,10 +2,10 @@ | |||
2 | @include store(( | 2 | @include store(( |
3 | --dims: ( | 3 | --dims: ( |
4 | --font-size: 15px, | 4 | --font-size: 15px, |
5 | --pad-y: .5rem, | 5 | --height: prop(--dims --nav --height, $global: true), |
6 | --pad-x: 2.5rem, | ||
6 | --item: ( | 7 | --item: ( |
7 | --pad-x: 1rem, | 8 | --pad-x: 1rem, |
8 | --pad-y: 1rem, | ||
9 | ), | 9 | ), |
10 | ), | 10 | ), |
11 | --colors: ( | 11 | --colors: ( |
@@ -34,9 +34,14 @@ | |||
34 | 34 | ||
35 | @include store(( | 35 | @include store(( |
36 | --dims: ( | 36 | --dims: ( |
37 | --pad-x: prop(--container --dims --pad-x, $global: true), | ||
38 | ) | ||
39 | ), 'md'); | ||
40 | |||
41 | @include store(( | ||
42 | --dims: ( | ||
37 | --item: ( | 43 | --item: ( |
38 | --pad-x: .75em, | 44 | --pad-x: .75em, |
39 | --pad-y: .75em, | ||
40 | ), | 45 | ), |
41 | ) | 46 | ) |
42 | ), 'sm'); | 47 | ), 'sm'); |
@@ -47,15 +52,18 @@ | |||
47 | z-index: 10000; | 52 | z-index: 10000; |
48 | top: 0; | 53 | top: 0; |
49 | left: 0; | 54 | left: 0; |
50 | align-items: center; | 55 | height: prop(--dims --height); |
51 | padding: prop(--dims --pad-y) 0; | 56 | padding: 0 prop(--dims --pad-x); |
52 | background-color: prop(--colors --bg); | 57 | background-color: prop(--colors --bg); |
53 | font-size: prop(--dims --font-size); | 58 | font-size: prop(--dims --font-size); |
54 | 59 | ||
60 | @include element('logo', 'item') { | ||
61 | display: flex; | ||
62 | align-items: center; | ||
63 | height: 100%; | ||
64 | } | ||
65 | |||
55 | @include element('logo') { | 66 | @include element('logo') { |
56 | display: inline-block; | ||
57 | margin: 0; | ||
58 | padding: prop(--dims --item --pad-y) 0; | ||
59 | color: prop(--colors --logo --idle --fg); | 67 | color: prop(--colors --logo --idle --fg); |
60 | font-family: $font-fam--mono; | 68 | font-family: $font-fam--mono; |
61 | text-decoration: none; | 69 | text-decoration: none; |
@@ -76,9 +84,8 @@ | |||
76 | } | 84 | } |
77 | 85 | ||
78 | @include element('item') { | 86 | @include element('item') { |
79 | display: inline-block; | ||
80 | margin: 0 calc(-1 * #{prop(--dims --item --pad-x)}) 0 prop(--dims --item --pad-x); | 87 | margin: 0 calc(-1 * #{prop(--dims --item --pad-x)}) 0 prop(--dims --item --pad-x); |
81 | padding: prop(--dims --item --pad-y) prop(--dims --item --pad-x); | 88 | padding: 0 prop(--dims --item --pad-x); |
82 | color: prop(--colors --item --idle --fg); | 89 | color: prop(--colors --item --idle --fg); |
83 | text-decoration: none; | 90 | text-decoration: none; |
84 | text-transform: uppercase; | 91 | text-transform: uppercase; |
@@ -97,7 +104,7 @@ | |||
97 | } | 104 | } |
98 | 105 | ||
99 | @include media('<=md') { | 106 | @include media('<=md') { |
100 | position: static; | 107 | width: 100%; |
101 | } | 108 | } |
102 | } | 109 | } |
103 | } | 110 | } |
diff --git a/assets/css/components/_section-heading.scss b/assets/css/components/_section-heading.scss index db75159..e904943 100644 --- a/assets/css/components/_section-heading.scss +++ b/assets/css/components/_section-heading.scss | |||
@@ -1,7 +1,7 @@ | |||
1 | @include namespace('section-heading') { | 1 | @include namespace('section-heading') { |
2 | @include store(( | 2 | @include store(( |
3 | --dims: ( | 3 | --dims: ( |
4 | --pad-y: $line-height * 2rem | 4 | --pad-y: $line-height * 1rem |
5 | ), | 5 | ), |
6 | --colors: ( | 6 | --colors: ( |
7 | --line: prop(--colors --accent --color, $global: true), | 7 | --line: prop(--colors --accent --color, $global: true), |
@@ -10,8 +10,8 @@ | |||
10 | 10 | ||
11 | @include component(namespace()) { | 11 | @include component(namespace()) { |
12 | margin: 0 0 prop(--dims --pad-y); | 12 | margin: 0 0 prop(--dims --pad-y); |
13 | font-size: .8em; | 13 | font-size: 1 / 16 * 12em; |
14 | font-weight: 400; | 14 | font-weight: 550; |
15 | letter-spacing: .2em; | 15 | letter-spacing: .2em; |
16 | text-transform: uppercase; | 16 | text-transform: uppercase; |
17 | 17 | ||
@@ -19,7 +19,7 @@ | |||
19 | content: ''; | 19 | content: ''; |
20 | display: inline-block; | 20 | display: inline-block; |
21 | width: 3em; | 21 | width: 3em; |
22 | height: 1px; | 22 | height: 2px; |
23 | margin-right: 1.3em; | 23 | margin-right: 1.3em; |
24 | background-color: prop(--colors --line); | 24 | background-color: prop(--colors --line); |
25 | vertical-align: middle; | 25 | vertical-align: middle; |
diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss index 0726950..218841d 100644 --- a/assets/css/layouts/_container.scss +++ b/assets/css/layouts/_container.scss | |||
@@ -2,20 +2,20 @@ | |||
2 | @include store(( | 2 | @include store(( |
3 | --dims: ( | 3 | --dims: ( |
4 | --pad-x: 3rem, | 4 | --pad-x: 3rem, |
5 | --pad-y: $line-height * 3rem | 5 | --pad-y: $line-height * 2rem |
6 | ) | 6 | ) |
7 | )); | 7 | )); |
8 | 8 | ||
9 | @include store(( | 9 | @include store(( |
10 | --dims: ( | 10 | --dims: ( |
11 | --pad-x: 2rem, | 11 | --pad-x: 2rem, |
12 | --pad-y: $line-height * 2rem | 12 | --pad-y: $line-height * 1.5rem |
13 | ) | 13 | ) |
14 | ), 'md'); | 14 | ), 'md'); |
15 | 15 | ||
16 | @include store(( | 16 | @include store(( |
17 | --dims: ( | 17 | --dims: ( |
18 | --pad-x: 1rem, | 18 | --pad-x: 5%, |
19 | --pad-y: $line-height * 1rem | 19 | --pad-y: $line-height * 1rem |
20 | ) | 20 | ) |
21 | ), 'sm'); | 21 | ), 'sm'); |
diff --git a/assets/css/layouts/_landing.scss b/assets/css/layouts/_landing.scss index b824005..7683d44 100644 --- a/assets/css/layouts/_landing.scss +++ b/assets/css/layouts/_landing.scss | |||
@@ -27,18 +27,11 @@ | |||
27 | } | 27 | } |
28 | 28 | ||
29 | @include iro-responsive-env(('md', 'lg')) { | 29 | @include iro-responsive-env(('md', 'lg')) { |
30 | padding-right: iro-responsive-set((0, 6rem)); | ||
31 | padding-left: iro-responsive-set((0, 6rem)); | ||
32 | |||
30 | @include element('banner') { | 33 | @include element('banner') { |
31 | padding: | 34 | padding-right: iro-responsive-set((0, 6rem)); |
32 | iro-responsive-set((2rem, 6rem)) | ||
33 | iro-responsive-set((0, 6rem)); | ||
34 | } | ||
35 | |||
36 | @include element('content') { | ||
37 | padding: | ||
38 | iro-responsive-set((2rem, 6rem)) | ||
39 | iro-responsive-set((0, 6rem)) | ||
40 | iro-responsive-set((2rem, 6rem)) | ||
41 | 0; | ||
42 | } | 35 | } |
43 | } | 36 | } |
44 | 37 | ||
@@ -47,9 +40,8 @@ | |||
47 | height: auto; | 40 | height: auto; |
48 | 41 | ||
49 | @include element('banner', 'content') { | 42 | @include element('banner', 'content') { |
50 | width: auto; | 43 | width: auto; |
51 | padding-right: 0; | 44 | padding: 0; |
52 | padding-left: 0; | ||
53 | } | 45 | } |
54 | 46 | ||
55 | @include element('banner') { | 47 | @include element('banner') { |
diff --git a/assets/css/objects/_button.scss b/assets/css/objects/_button.scss new file mode 100644 index 0000000..d97ca2d --- /dev/null +++ b/assets/css/objects/_button.scss | |||
@@ -0,0 +1,23 @@ | |||
1 | @include namespace('button') { | ||
2 | @include store(( | ||
3 | --dims: ( | ||
4 | --pad-x: 1.4em, | ||
5 | --pad-y: .5em | ||
6 | ), | ||
7 | --colors: ( | ||
8 | --bg: prop(--colors --fg-lo, $global: true), | ||
9 | --fg: prop(--colors --bg, $global: true), | ||
10 | ) | ||
11 | )); | ||
12 | |||
13 | @include object(namespace()) { | ||
14 | display: inline-block; | ||
15 | padding: prop(--dims --pad-y) prop(--dims --pad-x); | ||
16 | border-radius: 10em; | ||
17 | background-color: prop(--colors --bg); | ||
18 | color: prop(--colors --fg); | ||
19 | font-size: 1 / 16 * 14em; | ||
20 | font-weight: 500; | ||
21 | text-decoration: none; | ||
22 | } | ||
23 | } | ||
diff --git a/assets/css/style.scss b/assets/css/style.scss index 90cbe5d..89b7837 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss | |||
@@ -6,9 +6,15 @@ | |||
6 | 6 | ||
7 | @import 'vars'; | 7 | @import 'vars'; |
8 | @import 'functions'; | 8 | @import 'functions'; |
9 | @import 'fonts'; | ||
9 | @import 'basics'; | 10 | @import 'basics'; |
10 | 11 | ||
12 | @import 'layouts/container'; | ||
13 | @import 'layouts/landing'; | ||
14 | @import 'layouts/card-grid'; | ||
15 | |||
11 | @import 'objects/icon'; | 16 | @import 'objects/icon'; |
17 | @import 'objects/button'; | ||
12 | 18 | ||
13 | @import 'components/nav'; | 19 | @import 'components/nav'; |
14 | @import 'components/landing-banner'; | 20 | @import 'components/landing-banner'; |
@@ -16,10 +22,6 @@ | |||
16 | @import 'components/footer'; | 22 | @import 'components/footer'; |
17 | @import 'components/card'; | 23 | @import 'components/card'; |
18 | 24 | ||
19 | @import 'layouts/landing'; | ||
20 | @import 'layouts/container'; | ||
21 | @import 'layouts/card-grid'; | ||
22 | |||
23 | @import 'scopes/body'; | 25 | @import 'scopes/body'; |
24 | 26 | ||
25 | @import 'utils'; | 27 | @import 'utils'; |
diff --git a/assets/fonts/IBMPlexSans-Medium.ttf b/assets/fonts/IBMPlexSans-Medium.ttf new file mode 100644 index 0000000..b278201 --- /dev/null +++ b/assets/fonts/IBMPlexSans-Medium.ttf | |||
Binary files differ | |||
diff --git a/content/index.md b/content/index.md index e0472ad..242fd62 100644 --- a/content/index.md +++ b/content/index.md | |||
@@ -1,19 +1,18 @@ | |||
1 | --- | 1 | --- |
2 | title: Home | 2 | title: Home |
3 | --- | ||
4 | |||
5 | <!-- | ||
6 | - **Bandcamp:** [volpeon](https://bandcamp.com/volpeon) | ||
7 | - **Email:** me@volpeon.ink | ||
8 | - **Fediverse:** @volpeon@fedi.vulpes.one | ||
9 | - **GitHub:** [volpeon](https://github.com/volpeon) | ||
10 | - **IRC:** volpeon on [Furnet](irc://irc.furnet.org), [Freenode](ircs://chat.freenode.net), [irc.vulpes.one](ircs://irc.vulpes.one) | ||
11 | - **PeerTube:** @volpeon@pt.vulpes.one | ||
12 | - **Steam:** [volpeon](https://steamcommunity.com/id/volpeon/) | ||
13 | - **XMPP:** <available> | ||
14 | 3 | ||
15 | ```plain | 4 | profiles: |
16 | CB07051B E223EF70 8EE8F665 BBFCEF00 83415C45 DCA31906 F2362543 F5543449 | 5 | - platform: Bandcamp |
17 | C2C575EE 0236965C 4DBAA7EA 12F9EC90 AFD57B2C F75B3F32 70F3D393 2EDA3A08 | 6 | username: volpeon |
18 | ``` | 7 | url: https://bandcamp.com/volpeon |
19 | --> | 8 | - platform: E-Mail |
9 | username: me@volpeon.ink | ||
10 | - platform: Fediverse | ||
11 | username: "@volpeon@fedi.vulpes.one" | ||
12 | - platform: IRC | ||
13 | username: volpeon | ||
14 | - platform: PeerTube | ||
15 | username: "@volpeon@pt.vulpes.one" | ||
16 | - platform: XMPP | ||
17 | username: "<available>" | ||
18 | --- | ||
diff --git a/content/profiles/index.md b/content/profiles/index.md new file mode 100644 index 0000000..9a9d7fa --- /dev/null +++ b/content/profiles/index.md | |||
@@ -0,0 +1,19 @@ | |||
1 | --- | ||
2 | title: Profiles | ||
3 | --- | ||
4 | |||
5 | - **Bandcamp:** [volpeon](https://bandcamp.com/volpeon) | ||
6 | - **Email:** me@volpeon.ink | ||
7 | - **Fediverse:** @volpeon@fedi.vulpes.one | ||
8 | - **GitHub:** [volpeon](https://github.com/volpeon) | ||
9 | - **IRC:** volpeon on [Furnet](irc://irc.furnet.org), [Freenode](ircs://chat.freenode.net), [irc.vulpes.one](ircs://irc.vulpes.one) | ||
10 | - **PeerTube:** @volpeon@pt.vulpes.one | ||
11 | - **Steam:** [volpeon](https://steamcommunity.com/id/volpeon/) | ||
12 | - **XMPP:** <available> | ||
13 | |||
14 | ## OMEMO Fingerprints | ||
15 | |||
16 | ```plain | ||
17 | CB07051B E223EF70 8EE8F665 BBFCEF00 83415C45 DCA31906 F2362543 F5543449 | ||
18 | C2C575EE 0236965C 4DBAA7EA 12F9EC90 AFD57B2C F75B3F32 70F3D393 2EDA3A08 | ||
19 | ``` | ||
diff --git a/templates/base.html b/templates/base.html index 4fa4ee7..1d0da4d 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 l-container l-container--pad-x"> | 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> |
diff --git a/templates/layouts/index.html b/templates/layouts/index.html index bc1b6d4..b2ccaa6 100644 --- a/templates/layouts/index.html +++ b/templates/layouts/index.html | |||
@@ -1,7 +1,7 @@ | |||
1 | <main> | 1 | <main> |
2 | <section class="l-landing"> | 2 | <section class="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--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"> |
6 | <span class="c-landing-banner__title-inner"> | 6 | <span class="c-landing-banner__title-inner"> |
7 | 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. |
@@ -15,80 +15,22 @@ | |||
15 | </header> | 15 | </header> |
16 | 16 | ||
17 | <section class="l-landing__content"> | 17 | <section class="l-landing__content"> |
18 | <div class="l-container l-container--pad-x l-container--content s-body"> | 18 | <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> | 19 | <h1 class="c-section-heading">My profiles</h1> |
20 | 20 | ||
21 | <div class="l-card-grid"> | 21 | <div class="l-card-grid"> |
22 | <div class="c-card"> | 22 | $for(profiles)$ |
23 | <div class="c-card__content"> | 23 | <div class="c-card"> |
24 | <div> | 24 | <div class="c-card__content"> |
25 | <strong class="u-db">Bandcamp</strong> | 25 | <div> |
26 | <small>volpeon</small> | 26 | <strong class="u-db">$it.platform$</strong> |
27 | <small class="u-db">$it.username$</small> | ||
28 | </div> | ||
27 | </div> | 29 | </div> |
28 | <svg class="c-card__icon o-icon"> | ||
29 | <use href="#icon-link-external"></use> | ||
30 | </svg> | ||
31 | </div> | 30 | </div> |
32 | <div class="c-card__content c-card__content--flip"> | 31 | $endfor$ |
33 | <a href="https://bandcamp.com/volpeon">View profile</a> | ||
34 | </div> | ||
35 | </div> | ||
36 | |||
37 | <div class="c-card"> | ||
38 | <div class="c-card__content"> | ||
39 | <div> | ||
40 | <strong class="u-db">E-Mail</strong> | ||
41 | <small>me@volpeon.ink</small> | ||
42 | </div> | ||
43 | </div> | ||
44 | </div> | ||
45 | |||
46 | <div class="c-card"> | ||
47 | <div class="c-card__content"> | ||
48 | <div> | ||
49 | <strong class="u-db">Fediverse</strong> | ||
50 | <small>@volpeon@fedi.vulpes.one</small> | ||
51 | </div> | ||
52 | </div> | ||
53 | </div> | ||
54 | |||
55 | <div class="c-card"> | ||
56 | <div class="c-card__content"> | ||
57 | <div> | ||
58 | <strong class="u-db">IRC</strong> | ||
59 | <small>volpeon</small> | ||
60 | </div> | ||
61 | <svg class="c-card__icon o-icon"> | ||
62 | <use href="#icon-link-external"></use> | ||
63 | </svg> | ||
64 | </div> | ||
65 | <div class="c-card__content c-card__content--flip"> | ||
66 | <div> | ||
67 | <a href="irc://irc.furnet.org">Furnet</a>, | ||
68 | <a href="ircs://chat.freenode.net">Freenode</a>, | ||
69 | <a href="ircs://irc.vulpes.one">irc.vulpes.one</a> | ||
70 | </div> | ||
71 | </div> | ||
72 | </div> | ||
73 | |||
74 | <div class="c-card"> | ||
75 | <div class="c-card__content"> | ||
76 | <div> | ||
77 | <strong class="u-db">PeerTube</strong> | ||
78 | <small>@volpeon@pt.vulpes.one</small> | ||
79 | </div> | ||
80 | </div> | ||
81 | </div> | ||
82 | |||
83 | <div class="c-card"> | ||
84 | <div class="c-card__content"> | ||
85 | <div> | ||
86 | <strong class="u-db">XMPP</strong> | ||
87 | <small><available></small> | ||
88 | </div> | ||
89 | </div> | ||
90 | </div> | ||
91 | </div> | 32 | </div> |
33 | |||
92 | $body$ | 34 | $body$ |
93 | </div> | 35 | </div> |
94 | </section> | 36 | </section> |