WIP: Redesign

6 files changed, 24 insertions, 16 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;
     }
 }