Update

4 files changed, 32 insertions, 16 deletions

diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 2ab5efd..1123862 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -13,8 +13,8 @@ $unit-intervals: (
 );
 
 $responsive-mod-scale: (
-    xs: (.5rem, 1.4),
-    md: (.5rem, 1.6)
+    xs: (.8rem, 1.4),
+    md: (.8rem, 1.6)
 );
 
 $font-fam--text:  'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss
index f725b0a..0a22828 100644
--- a/assets/css/scopes/_body.scss
+++ b/assets/css/scopes/_body.scss
@@ -1,11 +1,11 @@
 @include namespace('body') {
-    @include scope(namespace()) {
-        > :first-child {
-            //margin-top: 0;
-        }
-    }
-}
-@include namespace('body') {
+    @include store((
+        --colors: (
+            --emph-fg: prop(--colors --accent --color, $global: true),
+            --emph-bg: prop(--colors --bg-hi, $global: true)
+        )
+    ));
+
     @include scope(namespace()) {
         font-size: 1 / 16 * 18em;
 
@@ -31,29 +31,45 @@
         }
 
         h1 {
-            @include iro-responsive-modular-scale(font-size, 4, $responsive-mod-scale);
+            @include iro-responsive-modular-scale(font-size, 3, $responsive-mod-scale);
         }
 
         h2 {
-            @include iro-responsive-modular-scale(font-size, 3, $responsive-mod-scale);
+            @include iro-responsive-modular-scale(font-size, 2, $responsive-mod-scale);
         }
 
         h3 {
-            @include iro-responsive-modular-scale(font-size, 2, $responsive-mod-scale);
+            @include iro-responsive-modular-scale(font-size, 1, $responsive-mod-scale);
 
-            letter-spacing: .1em;
+            letter-spacing: .05em;
             text-transform: uppercase;
         }
 
         h4,
         h5,
         h6 {
-            @include iro-responsive-modular-scale(font-size, 1, $responsive-mod-scale);
+            @include iro-responsive-modular-scale(font-size, 0, $responsive-mod-scale);
 
             letter-spacing: .1em;
             text-transform: uppercase;
         }
 
+        h5,
+        h6 {
+            color:       currentColor;
+            font-weight: 400;
+        }
+
+        @include element('title-inner') {
+            background-image: linear-gradient(
+                to top,
+                transparent .15em,
+                #{prop(--colors --emph-bg)} .15em,
+                #{prop(--colors --emph-bg)} .6em,
+                transparent .6em
+            );
+        }
+
         img {
             max-width: 100%;
         }
diff --git a/content/symbols.svg b/content/symbols.svg
index acc7f4f..00ea701 100644
--- a/content/symbols.svg
+++ b/content/symbols.svg
@@ -51,7 +51,7 @@
 
       <symbol id="icon-graph" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
          <path
-            d="m15.25 10.5a2.25 2.25 0 0 1-2.25 2.25 2.25 2.25 0 0 1-2.25-2.25 2.25 2.25 0 0 1 2.25-2.25 2.25 2.25 0 0 1 2.25 2.25zm-10 2.5a2.25 2.25 0 0 1-2.25 2.25 2.25 2.25 0 0 1-2.25-2.25 2.25 2.25 0 0 1 2.25-2.25 2.25 2.25 0 0 1 2.25 2.25zm2.5-10a2.25 2.25 0 0 1-2.25 2.25 2.25 2.25 0 0 1-2.25-2.25 2.25 2.25 0 0 1 2.25-2.25 2.25 2.25 0 0 1 2.25 2.25zm-2.5378 9.4469 5.5686-1.3921m0.61265-2.1613-4.2845-4.2845m-2.1627 0.6058-1.4004 5.6015"
+            d="m7.25 12.5c0 0.9665-0.7835 1.75-1.75 1.75s-1.75-0.7835-1.75-1.75 0.7835-1.75 1.75-1.75 1.75 0.7835 1.75 1.75zm8-3c0 0.9665-0.7835 1.75-1.75 1.75s-1.75-0.7835-1.75-1.75c0-0.9665 0.7835-1.75 1.75-1.75s1.75 0.7835 1.75 1.75zm-6-6.5c0 0.9665-0.7835 1.75-1.75 1.75s-1.75-0.7835-1.75-1.75 0.7835-1.75 1.75-1.75 1.75 0.7835 1.75 1.75zm2 12.25 1.6219-4.1121m-8.331-0.13789-3.7909-5.25m6.4058 6.1626 4.6868-1.8235m-3.163-5.7868 3.5859 3.9307m-5.0863-3.5029-1.3496 6.043"
             fill="none" stroke="currentColor" />
       </symbol>
 
diff --git a/templates/layouts/page.html b/templates/layouts/page.html
index b6ff7c3..bccdeae 100644
--- a/templates/layouts/page.html
+++ b/templates/layouts/page.html
@@ -1,6 +1,6 @@
 <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 s-body">
-        <h1>$title$</h1>
+        <h1><span class="s-body__title-inner">$title$</span></h1>
 
         $body$
     </div>