summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--assets/css/_utils.scss4
-rw-r--r--assets/css/components/_card.scss25
-rw-r--r--assets/css/components/_section-heading.scss5
-rw-r--r--assets/css/layouts/_card-grid.scss2
-rw-r--r--assets/css/layouts/_container.scss2
-rw-r--r--assets/css/objects/_icon.scss2
-rw-r--r--content/index.md6
-rw-r--r--templates/layouts/index.html27
-rw-r--r--templates/symbols.svg28
9 files changed, 73 insertions, 28 deletions
diff --git a/assets/css/_utils.scss b/assets/css/_utils.scss
index 3eff6fc..5e07d6f 100644
--- a/assets/css/_utils.scss
+++ b/assets/css/_utils.scss
@@ -20,6 +20,10 @@
20 margin-top: 0; 20 margin-top: 0;
21} 21}
22 22
23@include utility('ml') {
24 margin-left: auto;
25}
26
23@include utility('db') { 27@include utility('db') {
24 display: block; 28 display: block;
25} 29}
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index 21eeb9f..6260518 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -1,8 +1,8 @@
1@include namespace('card') { 1@include namespace('card') {
2 @include store(( 2 @include store((
3 --dims: ( 3 --dims: (
4 --pad-x: 1.3em, 4 --pad-x: 1.1em,
5 --pad-y: 1em 5 --pad-y: .8em
6 ), 6 ),
7 --colors: ( 7 --colors: (
8 --bg: prop(--colors --bg-lo, $global: true), 8 --bg: prop(--colors --bg-lo, $global: true),
@@ -13,8 +13,9 @@
13 )); 13 ));
14 14
15 @include component(namespace()) { 15 @include component(namespace()) {
16 display: block; 16 display: flex;
17 position: relative; 17 position: relative;
18 align-items: center;
18 background-color: prop(--colors --bg); 19 background-color: prop(--colors --bg);
19 line-height: 1.4; 20 line-height: 1.4;
20 21
@@ -37,18 +38,15 @@
37 } 38 }
38 39
39 @include element('content') { 40 @include element('content') {
40 display: flex; 41 box-sizing: border-box;
41 box-sizing: border-box; 42 width: 100%;
42 flex-direction: row; 43 padding: prop(--dims --pad-y) prop(--dims --pad-x);
43 align-items: center;
44 padding: prop(--dims --pad-y) prop(--dims --pad-x);
45 44
46 @include modifier('flip') { 45 @include modifier('flip') {
47 visibility: hidden; 46 visibility: hidden;
48 position: absolute; 47 position: absolute;
49 top: 0; 48 top: 0;
50 left: 0; 49 left: 0;
51 width: 100%;
52 height: 100%; 50 height: 100%;
53 transition: 51 transition:
54 visibility 0s linear .2s, 52 visibility 0s linear .2s,
@@ -56,10 +54,17 @@
56 opacity: 0; 54 opacity: 0;
57 background-color: prop(--colors --flip --bg); 55 background-color: prop(--colors --flip --bg);
58 } 56 }
57
58 @include sibling-element('icon') {
59 padding-right: prop(--dims --pad-x);
60 padding-left: 0;
61 }
59 } 62 }
60 63
61 @include element('icon') { 64 @include element('icon') {
62 margin-left: auto; 65 display: block;
66 flex: 0 0 auto;
67 padding: prop(--dims --pad-y) 0 prop(--dims --pad-y) prop(--dims --pad-x);
63 } 68 }
64 } 69 }
65} 70}
diff --git a/assets/css/components/_section-heading.scss b/assets/css/components/_section-heading.scss
index e904943..717442b 100644
--- a/assets/css/components/_section-heading.scss
+++ b/assets/css/components/_section-heading.scss
@@ -10,8 +10,9 @@
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: 1 / 16 * 12em; 13 font-family: $font-fam--text;
14 font-weight: 550; 14 font-size: 1 / 16 * 13em;
15 font-weight: bold;
15 letter-spacing: .2em; 16 letter-spacing: .2em;
16 text-transform: uppercase; 17 text-transform: uppercase;
17 18
diff --git a/assets/css/layouts/_card-grid.scss b/assets/css/layouts/_card-grid.scss
index 7998952..8e9091a 100644
--- a/assets/css/layouts/_card-grid.scss
+++ b/assets/css/layouts/_card-grid.scss
@@ -1,7 +1,7 @@
1@include namespace('card-grid') { 1@include namespace('card-grid') {
2 @include layout(namespace()) { 2 @include layout(namespace()) {
3 display: grid; 3 display: grid;
4 grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); 4 grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
5 gap: .7rem; 5 gap: .7rem;
6 } 6 }
7} 7}
diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss
index 218841d..d63460b 100644
--- a/assets/css/layouts/_container.scss
+++ b/assets/css/layouts/_container.scss
@@ -15,7 +15,7 @@
15 15
16 @include store(( 16 @include store((
17 --dims: ( 17 --dims: (
18 --pad-x: 5%, 18 --pad-x: 4%,
19 --pad-y: $line-height * 1rem 19 --pad-y: $line-height * 1rem
20 ) 20 )
21 ), 'sm'); 21 ), 'sm');
diff --git a/assets/css/objects/_icon.scss b/assets/css/objects/_icon.scss
index cb966c8..e708dd5 100644
--- a/assets/css/objects/_icon.scss
+++ b/assets/css/objects/_icon.scss
@@ -5,8 +5,6 @@
5 height: 16px; 5 height: 16px;
6 stroke-width: 1.5px; 6 stroke-width: 1.5px;
7 stroke-linecap: round; 7 stroke-linecap: round;
8 stroke: currentColor;
9 stroke-linejoin: round; 8 stroke-linejoin: round;
10 fill: none;
11 } 9 }
12} 10}
diff --git a/content/index.md b/content/index.md
index 242fd62..85ef328 100644
--- a/content/index.md
+++ b/content/index.md
@@ -3,16 +3,22 @@ title: Home
3 3
4profiles: 4profiles:
5 - platform: Bandcamp 5 - platform: Bandcamp
6 icon: bandcamp
6 username: volpeon 7 username: volpeon
7 url: https://bandcamp.com/volpeon 8 url: https://bandcamp.com/volpeon
8 - platform: E-Mail 9 - platform: E-Mail
10 icon: envelope
9 username: me@volpeon.ink 11 username: me@volpeon.ink
10 - platform: Fediverse 12 - platform: Fediverse
13 icon: share
11 username: "@volpeon@fedi.vulpes.one" 14 username: "@volpeon@fedi.vulpes.one"
12 - platform: IRC 15 - platform: IRC
16 icon: hash
13 username: volpeon 17 username: volpeon
14 - platform: PeerTube 18 - platform: PeerTube
19 icon: play
15 username: "@volpeon@pt.vulpes.one" 20 username: "@volpeon@pt.vulpes.one"
16 - platform: XMPP 21 - platform: XMPP
22 icon: messages
17 username: "<available>" 23 username: "<available>"
18--- 24---
diff --git a/templates/layouts/index.html b/templates/layouts/index.html
index 9b43503..d819455 100644
--- a/templates/layouts/index.html
+++ b/templates/layouts/index.html
@@ -7,7 +7,7 @@
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.
8 </span> 8 </span>
9 </h1> 9 </h1>
10 <p> 10 <p class="c-landing-banner__text">
11 Welcome to my website! I'm Volpeon, a red fox disguised as a human. 11 Welcome to my website! I'm Volpeon, a red fox disguised as a human.
12 I enjoy programming, creating vector art and designing user interfaces. 12 I enjoy programming, creating vector art and designing user interfaces.
13 </p> 13 </p>
@@ -25,17 +25,20 @@
25 $else$ 25 $else$
26 <div class="c-card"> 26 <div class="c-card">
27 $endif$ 27 $endif$
28 <div class="c-card__content"> 28 $if(it.icon)$
29 <div> 29 <svg class="c-card__icon o-icon">
30 <strong class="u-db">$it.platform$</strong> 30 <use href="#icon-$it.icon$"></use>
31 <small class="u-db">$it.username$</small> 31 </svg>
32 </div> 32 $endif$
33 $if(it.url)$ 33 <div class="c-card__content">
34 <svg class="c-card__icon o-icon"> 34 <strong class="u-db">$it.platform$</strong>
35 <use href="#icon-link-external"></use> 35 <small class="u-db">$it.username$</small>
36 </svg> 36 </div>
37 $endif$ 37 $if(it.url)$
38 </div> 38 <svg class="c-card__icon o-icon">
39 <use href="#icon-link-external"></use>
40 </svg>
41 $endif$
39 $if(it.url)$ 42 $if(it.url)$
40 </a> 43 </a>
41 $else$ 44 $else$
diff --git a/templates/symbols.svg b/templates/symbols.svg
index d3f2987..7972457 100644
--- a/templates/symbols.svg
+++ b/templates/symbols.svg
@@ -7,8 +7,36 @@
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-envelope" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
11 <path fill="none" stroke="currentColor"
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" />
13 </symbol>
14
15 <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" />
17 </symbol>
18
19 <symbol id="icon-messages" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
20 <path fill="none" stroke="currentColor"
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" />
22 <path fill="none" stroke="currentColor" d="m 6.75,11.750125 h 4.5 l 3,3 V 6.25" />
23 </symbol>
24
10 <symbol id="icon-link-external" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> 25 <symbol id="icon-link-external" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
11 <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" /> 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" />
12 </symbol> 27 </symbol>
28
29 <symbol id="icon-bandcamp" 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" />
31 </symbol>
32
33 <symbol id="icon-play" 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" />
35 </symbol>
36
37 <symbol id="icon-share" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
38 <path fill="none" stroke="currentColor"
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" />
40 </symbol>
13 </defs> 41 </defs>
14</svg> 42</svg>