6 files changed, 48 insertions, 32 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;
+        }
     }
 }
diff --git a/assets/fonts/IBMPlexSans-Medium.ttf b/assets/fonts/IBMPlexSans-Medium.ttf
deleted file mode 100644
index b278201..0000000
--- a/assets/fonts/IBMPlexSans-Medium.ttf
+++ /dev/null
diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html
index 2a37c9c..f2eda8b 100644
--- a/templates/layouts/categorized_list.html
+++ b/templates/layouts/categorized_list.html
@@ -1,23 +1,23 @@
 <section class="l-section l-section--fullscreen l-section--no-head">
-    <div class="l-container l-container--pad-x l-container--pad-y l-container--content">
-        <div class="s-body">
+    <div class="l-container l-container--pad-x l-container--pad-y l-container--content s-body">
+        <h1><span class="s-body__title-inner">$title$</span></h1>
+
 $body$
 
-            $for(pages.by_category)$
-                <h2>
-                    $for(it.value/first)$
-                        $it.category.name$
-                    $endfor$
-                </h2>
-                <ul>
-                    $for(it.value)$
-                        <li>
-                            <a href="$it.url.rel$">$it.title$</a>
-                        </li>
-                    $endfor$
-                </ul>
-            $endfor$
-        </div>
+        $for(pages.by_category)$
+            <h2>
+                $for(it.value/first)$
+                    $it.category.name$
+                $endfor$
+            </h2>
+            <ul>
+                $for(it.value)$
+                    <li>
+                        <a href="$it.url.rel$">$it.title$</a>
+                    </li>
+                $endfor$
+            </ul>
+        $endfor$
     </div>
 </section>