Update

3 files changed, 34 insertions, 21 deletions

diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index bb8b4d2..09b03b0 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -14,7 +14,7 @@
 
     @include store((
         --dims: (
-            --pad-x: .9em,
+            --pad-x: 1em,
             --pad-y: .6em
         )
     ), 'md');
@@ -69,5 +69,14 @@
             flex:    0 0 auto;
             padding: prop(--dims --pad-y) 0 prop(--dims --pad-y) prop(--dims --pad-x);
         }
+
+        @include element('image') {
+            display:         block;
+            flex:            0 0 auto;
+            width:           4em;
+            height:          100%;
+            object-fit:      cover;
+            object-position: center center;
+        }
     }
 }
diff --git a/assets/css/components/_landing-banner.scss b/assets/css/components/_landing-banner.scss
index 8f07c37..f6016c4 100644
--- a/assets/css/components/_landing-banner.scss
+++ b/assets/css/components/_landing-banner.scss
@@ -17,7 +17,7 @@
         }
 
         @include element('text') {
-            font-size: 1 / 16 * 17em;
+            font-size: 1 / 16 * 18em;
         }
 
         @include element('title-inner') {
diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss
index 13614bb..b92dd9e 100644
--- a/assets/css/components/_outer-button.scss
+++ b/assets/css/components/_outer-button.scss
@@ -7,7 +7,7 @@
                 --bg: prop(--colors --accent --color, $global: true),
                 --fg: prop(--colors --bg-hi, $global: true),
             ),
-            --logo: (
+            --icon: (
                 --fg: prop(--colors --fg-lo, $global: true),
                 --bg: prop(--colors --bg-hi, $global: true),
                 --hover: (
@@ -24,31 +24,34 @@
         transition:       background-color .2s, color .2s;
         background-color: prop(--colors --bg);
         color:            prop(--colors --fg);
-        font-weight:      500;
+        font-weight:      450;
         text-decoration:  none;
 
-        &:hover {
-            background-color: prop(--colors --hover --bg);
-            color:            prop(--colors --hover --fg);
+        @include element('icon') {
+            display:          flex;
+            position:         relative;
+            flex:             0 0 auto;
+            align-items:      center;
+            justify-content:  center;
+            width:            prop(--dims --outer, $global: true);
+            height:           100%;
+            transition:       background-color .2s, color .2s;
+            background-color: prop(--colors --icon --bg);
+            color:            prop(--colors --icon --fg);
         }
 
-        @include modifier('logo') {
-            background-color: prop(--colors --logo --bg);
-            color:            prop(--colors --logo --fg);
-
-            &:hover {
-                background-color: prop(--colors --logo --hover --bg);
-                color:            prop(--colors --logo --hover --fg);
+        @include modifier('icon-only') {
+            @include element('icon') {
+                background-color: prop(--colors --bg);
+                color:            prop(--colors --fg);
             }
         }
 
-        @include element('icon') {
-            display:         flex;
-            position:        relative;
-            align-items:     center;
-            justify-content: center;
-            width:           prop(--dims --outer, $global: true);
-            height:          100%;
+        &:hover {
+            @include multi('&', 'element' 'icon') {
+                background-color: prop(--colors --hover --bg);
+                color:            prop(--colors --hover --fg);
+            }
         }
 
         @include element('icon-symbol') {
@@ -62,6 +65,7 @@
             padding-right: prop(--dims --outer-spacing, $global: true);
             padding-left:  prop(--dims --outer-spacing, $global: true);
             line-height:   prop(--dims --outer, $global: true);
+            white-space:   nowrap;
         }
     }
 }