Update

4 files changed, 31 insertions, 15 deletions

diff --git a/assets/css/_fonts.scss b/assets/css/_fonts.scss
index 9e57600..e278abe 100644
--- a/assets/css/_fonts.scss
+++ b/assets/css/_fonts.scss
@@ -8,13 +8,6 @@
 @font-face {
     font-family: 'IBM Plex Sans';
     font-style:  normal;
-    font-weight: 500;
-    src:         url('/IBMPlexSans-Medium.woff2') format('woff2');
-}
-
-@font-face {
-    font-family: 'IBM Plex Sans';
-    font-style:  normal;
     font-weight: bold;
     src:         url('/IBMPlexSans-Bold.woff2') format('woff2');
 }
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 260205f..264ff91 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -13,7 +13,7 @@ $unit-intervals: (
 );
 
 $responsive-mod-scale: (
-    xs: (.8rem, 1.4),
+    xs: (.8rem, 1.37),
     md: (.8rem, 1.6)
 );
 
@@ -60,9 +60,9 @@ $gray7: hsl(220, 7%, 100%);
         --focus-ring: var(--colors--accent--color),
 
         --select: (
-            --bg:     hsla(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l), .996),
-            --img-bg: hsla(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l), .5),
-            --fg:     var(--colors--bg-hi),
+            --bg:     rgba($gray7, .996),
+            --img-bg: rgba($gray7, .5),
+            --fg:     $gray0,
         ),
 
         --link: (
diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss
index 00c4ccb..d1da93c 100644
--- a/assets/css/components/_outer-button.scss
+++ b/assets/css/components/_outer-button.scss
@@ -1,8 +1,9 @@
 @include namespace('outer-button') {
     @include store((
         --colors: (
-            --fg: prop(--colors --bg-hi, $global: true),
-            --bg: prop(--colors --fg-lo, $global: true),
+            --fg:     prop(--colors --bg-hi, $global: true),
+            --bg:     prop(--colors --fg-lo, $global: true),
+            --border: rgba(#000, .1),
             --hover: (
                 --bg: prop(--colors --accent --color, $global: true),
                 --fg: prop(--colors --bg-hi, $global: true),
@@ -23,6 +24,7 @@
         transition:       background-color .2s, color .2s;
         background-color: prop(--colors --bg);
         color:            prop(--colors --fg);
+        font-family:      $font-fam--large;
         font-size:        1rem;
         font-weight:      500;
         text-decoration:  none;
@@ -40,18 +42,25 @@
             justify-content:  center;
             width:            prop(--dims --outer, $global: true);
             height:           100%;
+
+            @include next-element('content') {
+                margin-left: -1px;
+                border-left: 1px solid prop(--colors --border);
+            }
         }
 
         @include element('icon-symbol') {
             display: block;
-            width:   1.5em;
-            height:  1.5em;
+            width:   1.35em;
+            height:  1.35em;
         }
 
         @include element('content') {
             height:        100%;
             padding-right: prop(--dims --pad-x);
             padding-left:  prop(--dims --pad-x);
+            transition:    border-color .2s;
+            font-size:     1 / 16 * 15em;
             line-height:   prop(--dims --outer, $global: true);
             white-space:   nowrap;
         }
@@ -61,6 +70,12 @@
             &:hover {
                 background-color: prop(--colors --hover --bg);
                 color:            prop(--colors --hover --fg);
+
+                @include element('icon') {
+                    @include next-element('content') {
+                        border-left-color: transparent;
+                    }
+                }
             }
         }
     }
diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss
index ef7d762..faf1ef0 100644
--- a/assets/css/scopes/_body.scss
+++ b/assets/css/scopes/_body.scss
@@ -71,5 +71,13 @@
         img {
             max-width: 100%;
         }
+
+        @include media('<=sm') {
+            font-size: 1 / 16 * 17em;
+        }
+
+        @include media('<=xs') {
+            font-size: 1em;
+        }
     }
 }