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> |
