WIP: Redesign

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 <strong class="c-landing-banner__emph">red fox</strong> in disguise.
           </span>
         </h1>
-        <p>
+        <p class="c-landing-banner__text">
           Welcome to my website! I'm Volpeon, a red fox disguised as a human.
           I enjoy programming, creating vector art and designing user interfaces.
         </p>
@@ -25,17 +25,20 @@
             $else$
               <div class="c-card">
             $endif$
-                <div class="c-card__content">
-                  <div>
-                    <strong class="u-db">$it.platform$</strong>
-                    <small class="u-db">$it.username$</small>
-                  </div>
-                  $if(it.url)$
-                    <svg class="c-card__icon o-icon">
-                      <use href="#icon-link-external"></use>
-                    </svg>
-                  $endif$
-                </div>
+              $if(it.icon)$
+                <svg class="c-card__icon o-icon">
+                  <use href="#icon-$it.icon$"></use>
+                </svg>
+              $endif$
+              <div class="c-card__content">
+                <strong class="u-db">$it.platform$</strong>
+                <small class="u-db">$it.username$</small>
+              </div>
+              $if(it.url)$
+                <svg class="c-card__icon o-icon">
+                  <use href="#icon-link-external"></use>
+                </svg>
+              $endif$
             $if(it.url)$
               </a>
             $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 @@
          <path fill="currentColor" stroke="none" d="M 9.915975,13 H 12.08401 L 15.584018,3 h -2.168036 z" />
       </symbol>
 
+      <symbol id="icon-envelope" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
+         <path fill="none" stroke="currentColor"
+            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" />
+      </symbol>
+
+      <symbol id="icon-hash" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
+         <path fill="none" stroke="currentColor" d="m5.2497 13.75 1.0003-11m2.9997 11 1.0003-11m-7.5 3.5h10m-10 4h10" />
+      </symbol>
+
+      <symbol id="icon-messages" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
+         <path fill="none" stroke="currentColor"
+            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" />
+         <path fill="none" stroke="currentColor" d="m 6.75,11.750125 h 4.5 l 3,3 V 6.25" />
+      </symbol>
+
       <symbol id="icon-link-external" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
          <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" />
       </symbol>
+
+      <symbol id="icon-bandcamp" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
+         <path fill="none" stroke="currentColor" d="m 15.25,4.25 -5,7.5 h -9.5 l 5,-7.5 z" />
+      </symbol>
+
+      <symbol id="icon-play" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
+         <path fill="none" stroke="currentColor" d="M 4.25,3.25 11.75,8 4.25,12.75 Z" />
+      </symbol>
+
+      <symbol id="icon-share" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
+         <path fill="none" stroke="currentColor"
+            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" />
+      </symbol>
    </defs>
 </svg>