4 files changed, 86 insertions, 57 deletions

diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index 0d6a2a7..2a271ff 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -8,7 +8,7 @@ img::selection {
 }
 
 :focus {
-    outline:        2px solid prop(--colors --fg-lo);
+    outline:        3px solid prop(--colors --focus-ring);
     outline-offset: 3px;
 }
 
@@ -49,7 +49,7 @@ code {
 }
 
 pre {
-    margin:     ($line-height * 1em) 0 0;
+    margin:     ($line-height * 1rem) 0 0;
     overflow-x: auto;
 
     code {
@@ -69,7 +69,7 @@ small {
 
 ul,
 ol {
-    margin:     ($line-height * 1em) 0 0;
+    margin:     ($line-height * 1rem) 0 0;
     padding:    0;
     list-style: none;
 }
@@ -109,7 +109,7 @@ ul ul {
 }
 
 dl {
-    margin:  ($line-height * 1em) 0 0;
+    margin:  ($line-height * 1rem) 0 0;
     padding: 0;
 }
 
@@ -139,27 +139,19 @@ h3,
 h4,
 h5,
 h6 {
-    margin:                ($line-height * 2em) 0 0;
+    margin:                ($line-height * 2rem) 0 0;
+    color:                 var(--heading--fg);
     font-family:           $font-fam--large;
     font-size:             1em;
     font-weight:           600;
     line-height:           1.2;
     font-feature-settings: 'ss02' 1;
 
-    + & {
-        margin-top: $line-height * 1em;
+    & + & {
+        margin-top: $line-height * 1rem;
     }
 }
 
-h1,
-h2 {
-    color: var(--heading--fg);
-}
-
-h1 {
-    text-transform: uppercase;
-}
-
 p {
     margin: ($line-height * 1rem) 0 0;
 }
@@ -171,14 +163,14 @@ p {
 
 hr {
     height:           1px;
-    margin:           ($line-height * 1em) 0;
+    margin:           ($line-height * 1rem) 0;
     border:           0;
     background-color: prop(--colors --obj-hi);
 }
 
 blockquote,
 pre {
-    margin:       ($line-height * 1em) 0 0 1px;
+    margin:       ($line-height * 1rem) 0 0 1px;
     padding-left: calc(#{prop(--dims --indent)} - 3px);
     border-left:  2px solid prop(--colors --obj);
 }
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 2fd7b53..37262a6 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -12,6 +12,11 @@ $unit-intervals: (
     '':    0
 );
 
+$responsive-mod-scale: (
+    xs: (1rem, 1.2),
+    sm: (.5rem, 1.6)
+);
+
 $font-fam--text:  'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
 $font-fam--large: 'Garet', $font-fam--text;
 $font-fam--mono:  'Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;
@@ -19,13 +24,13 @@ $font-size:       16px;
 $line-height:     1.7;
 $content--width:  42rem;
 
-$gray0: hsl(220, 7%, 6%);
-$gray1: hsl(220, 7%, 9%);
-$gray2: hsl(220, 7%, 15%);
-$gray3: hsl(220, 7%, 20%);
-$gray4: hsl(220, 7%, 33%);
-$gray5: hsl(220, 7%, 54%);
-$gray6: hsl(220, 7%, 73%);
+$gray0: hsl(220, 7%, 7%);
+$gray1: hsl(220, 7%, 11%);
+$gray2: hsl(220, 7%, 18%);
+$gray3: hsl(220, 7%, 23%);
+$gray4: hsl(220, 7%, 38%);
+$gray5: hsl(220, 7%, 58%);
+$gray6: hsl(220, 7%, 76%);
 $gray7: hsl(220, 7%, 100%);
 
 @include store((
@@ -34,16 +39,16 @@ $gray7: hsl(220, 7%, 100%);
         --indent: 2rem,
     ),
     --colors: (
-        --bg-hi: $gray0, // Darker background
-        --bg:    $gray1, // Background
-        --bg-lo: $gray2, // Lighter background
+        --bg-hi:  $gray0, // Darker background
+        --bg:     $gray1, // Background
+        --bg-lo:  $gray2, // Lighter background
     
         --obj-hi: $gray3,
         --obj:    $gray4,
     
-        --fg-hi: $gray5, // Faint text
-        --fg:    $gray6, // Text
-        --fg-lo: $gray7, // Strong text
+        --fg-hi:  $gray5, // Faint text
+        --fg:     $gray6, // Text
+        --fg-lo:  $gray7, // Strong text
 
         --accent: (
             --h:     354,
@@ -52,6 +57,8 @@ $gray7: hsl(220, 7%, 100%);
             --color: hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)),
         ),
 
+        --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),
@@ -59,7 +66,9 @@ $gray7: hsl(220, 7%, 100%);
         ),
 
         --link: (
-            --idle: var(--colors--fg-lo)
+            --idle:         var(--colors--fg-lo),
+            --idle-body:    hsl(210, 90%, 72%), // hsl(354, 100%, 66%),
+            --visited-body: hsl(270, 60%, 72%), // hsl(354, 50%, 66%),
         )
     )
 ));
diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss
index 5f41f29..f725b0a 100644
--- a/assets/css/scopes/_body.scss
+++ b/assets/css/scopes/_body.scss
@@ -13,21 +13,49 @@
             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);
+            font-family: $font-fam--large;
+            font-weight: 600;
+        }
+
         h1 {
-            transform:      translateX(-.06em);
-            font-family:    $font-fam--large;
-            font-weight:    600;
-            text-transform: none;
+            @include iro-responsive-modular-scale(font-size, 4, $responsive-mod-scale);
         }
 
-        img {
-            max-width: 100%;
+        h2 {
+            @include iro-responsive-modular-scale(font-size, 3, $responsive-mod-scale);
         }
 
-        @include iro-responsive-env(('xs', 'md')) {
-            h1 {
-                font-size: iro-responsive-set((1.8rem, 3rem));
-            }
+        h3 {
+            @include iro-responsive-modular-scale(font-size, 2, $responsive-mod-scale);
+
+            letter-spacing: .1em;
+            text-transform: uppercase;
+        }
+
+        h4,
+        h5,
+        h6 {
+            @include iro-responsive-modular-scale(font-size, 1, $responsive-mod-scale);
+
+            letter-spacing: .1em;
+            text-transform: uppercase;
+        }
+
+        img {
+            max-width: 100%;
         }
     }
 }
diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html
index 916be94..2a37c9c 100644
--- a/templates/layouts/categorized_list.html
+++ b/templates/layouts/categorized_list.html
@@ -2,22 +2,22 @@
     <div class="l-container l-container--pad-x l-container--pad-y l-container--content">
         <div class="s-body">
 $body$
-        </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$
+            $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>
     </div>
 </section>