Update

8 files changed, 96 insertions, 85 deletions

diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index 2a271ff..b2a437b 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -84,7 +84,6 @@ li {
         width:       prop(--dims --indent);
         margin-left: calc(-1 * #{prop(--dims --indent)});
         color:       prop(--colors --fg-hi);
-        font-family: $font-fam--mono;
     }
 }
 
@@ -144,7 +143,7 @@ h6 {
     font-family:           $font-fam--large;
     font-size:             1em;
     font-weight:           600;
-    line-height:           1.2;
+    line-height:           1.4;
     font-feature-settings: 'ss02' 1;
 
     & + & {
@@ -163,7 +162,7 @@ p {
 
 hr {
     height:           1px;
-    margin:           ($line-height * 1rem) 0;
+    margin:           ($line-height * 2rem) 0;
     border:           0;
     background-color: prop(--colors --obj-hi);
 }
@@ -172,5 +171,5 @@ blockquote,
 pre {
     margin:       ($line-height * 1rem) 0 0 1px;
     padding-left: calc(#{prop(--dims --indent)} - 3px);
-    border-left:  2px solid prop(--colors --obj);
+    border-left:  3px solid prop(--colors --obj);
 }
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 263cb5d..3adce04 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -66,9 +66,7 @@ $gray7: hsl(220, 7%, 100%);
         ),
 
         --link: (
-            --idle:         var(--colors--fg-lo),
-            --idle-body:    hsl(210, 90%, 72%), // hsl(354, 100%, 66%),
-            --visited-body: hsl(270, 60%, 75%), // hsl(354, 50%, 66%),
+            --idle: var(--colors--fg-lo),
         )
     )
 ));
diff --git a/assets/css/components/_landing-banner.scss b/assets/css/components/_landing-banner.scss
index 58d64d7..0e44e35 100644
--- a/assets/css/components/_landing-banner.scss
+++ b/assets/css/components/_landing-banner.scss
@@ -13,13 +13,10 @@
             transform:      translateX(-.06em);
             font-family:    $font-fam--large;
             font-weight:    350;
+            line-height:    1.2;
             text-transform: none;
         }
 
-        @include element('text') {
-            font-size: 1 / 16 * 18em;
-        }
-
         @include element('title-inner') {
             background-image: linear-gradient(
                 to top,
diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss
index d1da93c..22fa251 100644
--- a/assets/css/components/_outer-button.scss
+++ b/assets/css/components/_outer-button.scss
@@ -24,10 +24,10 @@
         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;
+        font-size:        1 / 16 * 15rem;
+        letter-spacing:   1px;
         text-decoration:  none;
+        text-transform:   uppercase;
 
         @include modifier('inverted') {
             background-color: prop(--colors --inverted --bg);
@@ -51,8 +51,8 @@
 
         @include element('icon-symbol') {
             display: block;
-            width:   1.35em;
-            height:  1.35em;
+            width:   1.45em;
+            height:  1.45em;
         }
 
         @include element('content') {
@@ -60,7 +60,6 @@
             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;
         }
diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss
index b4d0a3c..8e5f876 100644
--- a/assets/css/scopes/_body.scss
+++ b/assets/css/scopes/_body.scss
@@ -1,10 +1,6 @@
 @include namespace('body') {
     @include store((
         --colors: (
-            --emph: (
-                --fg: prop(--colors --accent --color, $global: true),
-                --bg: prop(--colors --bg-hi, $global: true),
-            ),
             --meta: (
                 --fg: prop(--colors --fg-hi, $global: true),
             )
@@ -12,73 +8,15 @@
     ));
 
     @include scope(namespace()) {
-        font-size: 1 / 16 * 18em;
-
-        > :first-child {
-            margin-top: 0;
-        }
-
-        :link {
-            color: prop(--colors --link --idle-body, $global: true);
-        }
-
-        :visited {
-            color: prop(--colors --link --visited-body, $global: true);
-        }
-
-        h1,
-        h2,
-        h3,
-        h4 {
-            transform: translateX(-.06em);
-        }
-
-        h1 {
-            @include iro-responsive-modular-scale(font-size, 3, $responsive-mod-scale);
-        }
-
-        h2 {
-            @include iro-responsive-modular-scale(font-size, 2, $responsive-mod-scale);
-        }
-
-        h3 {
-            @include iro-responsive-modular-scale(font-size, 1, $responsive-mod-scale);
-
-            letter-spacing: .05em;
-            text-transform: uppercase;
-        }
-
-        h4,
-        h5,
-        h6 {
-            @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
-            );
-        }
+        font-size: 1 / 16 * 19em;
 
         @include element('meta') {
-            color:     prop(--colors --meta --fg);
-            font-size: 1 / 18 * 16em;
+            margin-top:    $line-height * 1rem;
+            color:         prop(--colors --meta --fg);
+            font-size:     1 / 16 * 15rem;
 
-            + h1 {
-                margin-top: $line-height * 1rem;
+            + * {
+                margin-top: $line-height * 1.5rem;
             }
         }
 
diff --git a/assets/css/scopes/_colored-links.scss b/assets/css/scopes/_colored-links.scss
new file mode 100644
index 0000000..25ed289
--- /dev/null
+++ b/assets/css/scopes/_colored-links.scss
@@ -0,0 +1,20 @@
+@include namespace('colored-links') {
+    @include store((
+        --colors: (
+            --link: (
+                --idle:    hsl(210, 90%, 72%), // hsl(354, 100%, 66%),
+                --visited: hsl(270, 60%, 75%), // hsl(354, 50%, 66%),
+            )
+        )
+    ));
+
+    @include scope(namespace()) {
+        :link {
+            color: prop(--colors --link --idle);
+        }
+
+        :visited {
+            color: prop(--colors --link --visited);
+        }
+    }
+}
diff --git a/assets/css/scopes/_headlines.scss b/assets/css/scopes/_headlines.scss
new file mode 100644
index 0000000..6b28e9c
--- /dev/null
+++ b/assets/css/scopes/_headlines.scss
@@ -0,0 +1,58 @@
+@include namespace('headlines') {
+    @include store((
+        --colors: (
+            --emph: (
+                --bg: prop(--colors --bg-hi, $global: true),
+            )
+        )
+    ));
+
+    @include scope(namespace()) {
+        h1,
+        h2,
+        h3,
+        h4 {
+            transform: translateX(-.06em);
+        }
+
+        h1 {
+            @include iro-responsive-modular-scale(font-size, 3, $responsive-mod-scale);
+        }
+
+        h2 {
+            @include iro-responsive-modular-scale(font-size, 2, $responsive-mod-scale);
+        }
+
+        h3 {
+            @include iro-responsive-modular-scale(font-size, 1, $responsive-mod-scale);
+
+            letter-spacing: .05em;
+            text-transform: uppercase;
+        }
+
+        h4,
+        h5,
+        h6 {
+            @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
+            );
+        }
+    }
+}
diff --git a/assets/css/style.scss b/assets/css/style.scss
index aa83f85..e4a36b0 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -24,6 +24,8 @@
 @import 'components/card';
 @import 'components/project';
 
+@import 'scopes/colored-links';
+@import 'scopes/headlines';
 @import 'scopes/body';
 
 @import 'utils';