summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--assets/css/_basics.scss30
-rw-r--r--assets/css/_fonts.scss27
-rw-r--r--assets/css/_vars.scss21
-rw-r--r--assets/css/components/_card.scss6
-rw-r--r--assets/css/components/_landing-banner.scss2
-rw-r--r--assets/css/components/_nav.scss29
-rw-r--r--assets/css/components/_section-heading.scss8
-rw-r--r--assets/css/layouts/_container.scss6
-rw-r--r--assets/css/layouts/_landing.scss20
-rw-r--r--assets/css/objects/_button.scss23
-rw-r--r--assets/css/style.scss10
-rw-r--r--assets/fonts/IBMPlexSans-Medium.ttfbin0 -> 182088 bytes
-rw-r--r--content/index.md31
-rw-r--r--content/profiles/index.md19
-rw-r--r--templates/base.html2
-rw-r--r--templates/layouts/index.html80
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 {
37html, 16html,
38body, 17body,
39main { 18main {
40 height: 100%; 19 box-sizing: border-box;
20 height: 100%;
41} 21}
42 22
43html { 23html {
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
51body { 31body {
52 margin: 0; 32 margin: 0;
53 padding: 0; 33 padding: prop(--dims --nav --height, $global: true) 0 0;
54} 34}
55 35
56pre, 36pre,
@@ -180,7 +160,7 @@ h1 {
180} 160}
181 161
182p { 162p {
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---
2title: Home 2title: 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:** &lt;available&gt;
14 3
15```plain 4profiles:
16CB07051B E223EF70 8EE8F665 BBFCEF00 83415C45 DCA31906 F2362543 F5543449 5 - platform: Bandcamp
17C2C575EE 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: "&lt;available&gt;"
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---
2title: 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:** &lt;available&gt;
13
14## OMEMO Fingerprints
15
16```plain
17CB07051B E223EF70 8EE8F665 BBFCEF00 83415C45 DCA31906 F2362543 F5543449
18C2C575EE 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>&lt;available&gt;</small>
88 </div>
89 </div>
90 </div>
91 </div> 32 </div>
33
92$body$ 34$body$
93 </div> 35 </div>
94 </section> 36 </section>
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-12-26 07:25:23 +0000