Update

3 files changed, 84 insertions, 68 deletions

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
+            );
+        }
+    }
+}