From 7588b3b71d01093507a2776e36ede1e6550dedd7 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 27 Mar 2021 22:03:08 +0100 Subject: WIP: Redesign --- assets/css/_utils.scss | 4 ++++ assets/css/components/_card.scss | 25 +++++++++++++++---------- assets/css/components/_section-heading.scss | 5 +++-- assets/css/layouts/_card-grid.scss | 2 +- assets/css/layouts/_container.scss | 2 +- assets/css/objects/_icon.scss | 2 -- content/index.md | 6 ++++++ templates/layouts/index.html | 27 +++++++++++++++------------ templates/symbols.svg | 28 ++++++++++++++++++++++++++++ 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 @@ margin-top: 0; } +@include utility('ml') { + margin-left: auto; +} + @include utility('db') { display: block; } 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 @@ @include namespace('card') { @include store(( --dims: ( - --pad-x: 1.3em, - --pad-y: 1em + --pad-x: 1.1em, + --pad-y: .8em ), --colors: ( --bg: prop(--colors --bg-lo, $global: true), @@ -13,8 +13,9 @@ )); @include component(namespace()) { - display: block; + display: flex; position: relative; + align-items: center; background-color: prop(--colors --bg); line-height: 1.4; @@ -37,18 +38,15 @@ } @include element('content') { - display: flex; - box-sizing: border-box; - flex-direction: row; - align-items: center; - padding: prop(--dims --pad-y) prop(--dims --pad-x); + box-sizing: border-box; + width: 100%; + padding: prop(--dims --pad-y) prop(--dims --pad-x); @include modifier('flip') { visibility: hidden; position: absolute; top: 0; left: 0; - width: 100%; height: 100%; transition: visibility 0s linear .2s, @@ -56,10 +54,17 @@ opacity: 0; background-color: prop(--colors --flip --bg); } + + @include sibling-element('icon') { + padding-right: prop(--dims --pad-x); + padding-left: 0; + } } @include element('icon') { - margin-left: auto; + display: block; + flex: 0 0 auto; + padding: prop(--dims --pad-y) 0 prop(--dims --pad-y) prop(--dims --pad-x); } } } 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 @@ @include component(namespace()) { margin: 0 0 prop(--dims --pad-y); - font-size: 1 / 16 * 12em; - font-weight: 550; + font-family: $font-fam--text; + font-size: 1 / 16 * 13em; + font-weight: bold; letter-spacing: .2em; text-transform: uppercase; 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 @@ @include namespace('card-grid') { @include layout(namespace()) { display: grid; - grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .7rem; } } 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 @@ @include store(( --dims: ( - --pad-x: 5%, + --pad-x: 4%, --pad-y: $line-height * 1rem ) ), '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 @@ height: 16px; stroke-width: 1.5px; stroke-linecap: round; - stroke: currentColor; stroke-linejoin: round; - fill: none; } } 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 profiles: - platform: Bandcamp + icon: bandcamp username: volpeon url: https://bandcamp.com/volpeon - platform: E-Mail + icon: envelope username: me@volpeon.ink - platform: Fediverse + icon: share username: "@volpeon@fedi.vulpes.one" - platform: IRC + icon: hash username: volpeon - platform: PeerTube + icon: play username: "@volpeon@pt.vulpes.one" - platform: XMPP + icon: messages username: "<available>" --- 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 @@ I'm a red fox in disguise. -

+

Welcome to my website! I'm Volpeon, a red fox disguised as a human. I enjoy programming, creating vector art and designing user interfaces.

@@ -25,17 +25,20 @@ $else$
$endif$ -
-
- $it.platform$ - $it.username$ -
- $if(it.url)$ - - - - $endif$ -
+ $if(it.icon)$ + + + + $endif$ +
+ $it.platform$ + $it.username$ +
+ $if(it.url)$ + + + + $endif$ $if(it.url)$ $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 @@ + + + + + + + + + + + + + + + + + + + + + + + + + -- cgit v1.2.3-70-g09d2