From c7eb8d7f6105a5a15a1f45b5e2be3c2d1e2204bd Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Fri, 19 Mar 2021 22:10:55 +0100
Subject: WIP: Redesign

---
 assets/css/_basics.scss            |  64 ++++++++----------
 assets/css/_utils.scss             |  14 ++--
 assets/css/_vars.scss              | 117 ++++++++++++++------------------
 assets/css/components/_footer.scss |  21 ++++--
 assets/css/components/_hero.scss   |  71 ++++++++++++--------
 assets/css/components/_hlist.scss  |  13 ----
 assets/css/components/_nav.scss    | 132 ++++++++++++++++++++++++------------
 assets/css/components/_page.scss   | 134 +------------------------------------
 assets/css/components/_spacer.scss |   5 --
 assets/css/layouts/_container.scss |  47 ++++++++-----
 assets/css/scopes/_code.scss       |   4 +-
 assets/css/scopes/_page.scss       |   6 +-
 assets/css/style.scss              |  12 +++-
 13 files changed, 283 insertions(+), 357 deletions(-)
 delete mode 100644 assets/css/components/_hlist.scss
 delete mode 100644 assets/css/components/_spacer.scss

(limited to 'assets/css')

diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index 1536605..1cd5547 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -1,41 +1,23 @@
 @font-face {
-    font-family: 'Iosevka Term SS09';
-    font-style: normal;
-    font-weight: normal;
-    src: //local('Iosevka SS09'), 
-        url('/iosevka-term-ss09-regular.woff2') format('woff2');
-}
-
-@font-face {
-    font-family: 'Iosevka Term SS09';
-    font-style: normal;
-    font-weight: bold;
-    src: //local('Iosevka SS09 Bold'), 
-        url('/iosevka-term-ss09-bold.woff2') format('woff2');
-}
-
-@font-face {
-    font-family: 'Iosevka Aile';
+    font-family: 'IBM Plex Sans';
     font-style: normal;
     font-weight: normal;
-    src: //local('Iosevka Aile'), 
-        url('/iosevka-aile-regular.woff2') format('woff2');
+    src: //local('IBM Plex Sans'), 
+        url('/IBMPlexSans-Regular.woff2') format('woff2');
 }
 
 @font-face {
-    font-family: 'Iosevka Aile';
+    font-family: 'IBM Plex Sans';
     font-style: normal;
     font-weight: bold;
-    src: //local('Iosevka Aile Bold'), 
-        url('/iosevka-aile-bold.woff2') format('woff2');
+    src: url('/IBMPlexSans-Bold.woff2') format('woff2');
 }
 
 @font-face {
-    font-family: 'IBM Plex Sans';
+    font-family: 'Garet Variable';
     font-style: normal;
-    font-weight: normal;
-    src: //local('IBM Plex Sans'), 
-        url('/IBMPlexSans-Regular.woff2') format('woff2');
+    font-weight: 50 950;
+    src: url('/GaretVariable.woff2') format('woff2-variations');
 }
 
 ::selection {
@@ -54,8 +36,8 @@ code {
 }
 
 html {
-    background-color: var(--bg);
-    color: var(--fg);
+    background-color: prop(--colors --bg);
+    color: prop(--colors --fg);
     font-family: $font-fam--text;
     font-size: px-to-em($font-size, 16px);
     line-height: $line-height;
@@ -85,7 +67,7 @@ pre {
 }
 
 strong {
-    color: var(--fg-lo);
+    color: prop(--colors --fg-lo);
     font-weight: bold;
 }
 
@@ -105,7 +87,7 @@ li {
         position: absolute;
         width: $subcontent--indent;
         margin-left: -1 * $subcontent--indent;
-        color: var(--fg-hi);
+        color: prop(--colors --fg-hi);
         font-family: $font-fam--mono;
     }
 }
@@ -141,12 +123,12 @@ dd {
 }
 
 dt {
-    color: var(--fg-lo);
+    color: prop(--colors --fg-lo);
     font-weight: bold;
 
     &::after {
         content: ':';
-        color: var(--fg);
+        color: prop(--colors --fg);
         font-weight: normal;
     }
 }
@@ -157,13 +139,23 @@ dd {
 
 h1,
 h2,
-h3 {
+h3,
+h4,
+h5,
+h6 {
     margin: ($line-height * 2em) 0 0;
+    font-family: $font-fam--large;
     font-size: 1em;
+    font-weight: 600;
+    line-height: 1.2;
+    font-feature-settings: 'ss02' 1;
 
     + h1,
     + h2,
-    + h3 {
+    + h3,
+    + h4,
+    + h5,
+    + h6 {
         margin-top: $line-height * 1em;
     }
 }
@@ -205,12 +197,12 @@ hr {
     height: 1px;
     margin: ($line-height * 1em) 0;
     border: 0;
-    background-color: var(--obj);
+    background-color: prop(--colors --obj);
 }
 
 blockquote,
 pre {
     margin: ($line-height * 1em) 0 0 1px;
     padding-left: calc(#{$subcontent--indent} - 3px);
-    border-left: 2px solid var(--obj);
+    border-left: 2px solid prop(--colors --obj);
 }
diff --git a/assets/css/_utils.scss b/assets/css/_utils.scss
index 519a3a7..bca50d8 100644
--- a/assets/css/_utils.scss
+++ b/assets/css/_utils.scss
@@ -1,21 +1,21 @@
-.u-hidden {
+@include utility('hidden') {
     display: none;
 
-    @each $name, $width in $breakpoints {
-        &\@#{$name}-down {
-            @media (max-width: $width) {
+    @each $breakpoint in map-keys($breakpoints) {
+        @include media('<=#{$breakpoint}') {
+            @include suffix('#{$breakpoint}-lo') {
                 display: none;
             }
         }
 
-        &\@#{$name}-up {
-            @media (min-width: $width + 1) {
+        @include media('>#{$breakpoint}') {
+            @include suffix('#{$breakpoint}-hi') {
                 display: none;
             }
         }
     }
 }
 
-.u-mt0 {
+@include utility('mt0') {
     margin-top: 0;
 }
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index ea831a6..ae8a7a8 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -1,88 +1,75 @@
-$font-fam--text: 'Iosevka Aile', 'IBM Plex Sans', 'Open Sans', 'Segoe UI', 'Droid Sans',
-    Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif;
-$font-fam--mono: 'Iosevka Term SS09', 'Lucida Console', 'Courier New', Courier,
-    monospace;
-$font-size: 16px;
-$line-height: 1.7;
-
-$code-block--font-size: 16px;
-$code-block--line-height: 1.4;
-
-$content--width: 42em;
-$content--h1--font-size: $font-size + 1;
-
-$subcontent--indent: 2em;
-
-$container--pad-h: 2rem;
-$container--pad-h--sm: 1rem;
-$container--pad-v: $line-height * 2rem;
-$container--pad-v--sm: $line-height * 1rem;
-
-$nav--font-size: $font-size - 1;
-$nav--item--spacing: 2em;
-$nav--item--spacing--sm: 1.5em;
-$nav--item--pad-h: .5em;
-$nav--item--pad-v: .9em;
-
-$footer--pad-v: .8em;
-
-$page--item-prefix--max-chars: 1.5em;
-$page--item-prefix--pad: 1em;
-$page--item-prefix--width: $page--item-prefix--max-chars + $page--item-prefix--pad;
-
-$page--item-prefix--max-chars--sm: 1em;
-$page--item-prefix--width--sm: $page--item-prefix--max-chars--sm + $page--item-prefix--pad;
+$iro-root-size: 16px;
 
 $breakpoints: (
-    xs: 380px,
+    xs: 320px,
     sm: 700px,
+    md: 1100px,
 );
 
-:root {
-    --gray0: hsl(270, 0%, 7%);
-    --gray1: hsl(270, 0%, 10%);
-    --gray2: hsl(270, 1%, 29%);
-    --gray3: hsl(270, 2%, 54%);
-    --gray4: hsl(270, 2%, 73%);
-    --gray5: hsl(270, 2%, 100%);
-
-    //
-
-    --bg-hi: var(--gray0); // Lighter background
-    --bg:    var(--gray1); // Background
-
-    --obj:   var(--gray2);
+$unit-intervals: (
+    'px':  1,
+    'em':  .01,
+    'rem': .01,
+    '':    0
+);
 
-    --fg-hi: var(--gray3); // Faint text
-    --fg:    var(--gray4); // Text
-    --fg-lo: var(--gray5); // Strong text
+$font-fam--text: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
+$font-fam--large: 'Garet Variable', $font-fam--text;
+$font-fam--mono: 'Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;
+$font-size: 16px;
+$line-height: 1.7;
+$content--width: 56rem;
+$subcontent--indent: 2em;
 
-    //
+$gray0: hsl(220, 0%, 7%);
+$gray1: hsl(220, 0%, 10%);
+$gray2: hsl(220, 0%, 29%);
+$gray3: hsl(220, 0%, 54%);
+$gray4: hsl(220, 0%, 73%);
+$gray5: hsl(220, 0%, 100%);
+
+@include store((
+    --colors: (
+        --bg-hi: $gray0, // Lighter background
+        --bg:    $gray1, // Background
+    
+        --obj:   $gray2,
+    
+        --fg-hi: $gray3, // Faint text
+        --fg:    $gray4, // Text
+        --fg-lo: $gray5, // Strong text
+
+        --accent: hsl(354, 84%, 55%),
+    )
+));
 
-    --heading--fg: var(--fg-lo);
+:root {
+    --heading--fg: var(--colors--fg-lo);
 
     --select--bg:     hsla(270, 2%, 100%, .996);
     --select--img-bg: hsla(270, 2%, 100%, .5);
-    --select--fg:     var(--bg-hi);
+    --select--fg:     var(--colors--bg-hi);
 
-    --code--fg: var(--fg-hi);
+    --code--fg: var(--colors--fg-hi);
 
-    --code-block--fg: var(--fg-hi);
+    --code-block--fg: var(--colors--fg-hi);
 
-    --link--idle--fg: var(--fg-lo);
+    --link--idle--fg: var(--colors--fg-lo);
     --link--hover--bg: var(--link--idle--fg);
     --link--hover--fg: #000;
 
-    --nav--bg: var(--bg-hi);
-    --nav--logo--fg: var(--fg-hi);
-    --nav--item--idle--fg: var(--fg);
-    --nav--item--hover--fg: var(--fg-lo);
-    --nav--item--active--fg: var(--fg-lo);
+    --hero--back-fg: var(--colors--bg-hi);
+
+    --nav--bg: var(--colors--bg);
+    --nav--logo--fg: var(--colors--fg-hi);
+    --nav--item--idle--fg: var(--colors--fg);
+    --nav--item--hover--fg: var(--colors--fg-lo);
+    --nav--item--active--fg: var(--colors--fg-lo);
 
-    --page--item-prefix--fg: var(--fg-hi);
+    --footer--bg: var(--colors--bg);
 
     --page--link--idle--fg: var(--link--idle--fg); // hsl(45, 100%, 70%); // hsl(215, 100%, 80%); // var(--link--idle--fg); // #ffd866;
-    --page--link--visited--fg: var(--fg); // hsl(23, 89%, 65%); // hsl(260, 58%, 78%);  // var(--fg-lo); // #f59458;
+    --page--link--visited--fg: var(--colors--fg); // hsl(23, 89%, 65%); // hsl(260, 58%, 78%);  // var(--fg-lo); // #f59458;
     --page--link--hover--bg: var(--page--link--idle--fg);
     --page--link--hover--fg: #000;
 }
diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss
index a015d92..8fcbc98 100644
--- a/assets/css/components/_footer.scss
+++ b/assets/css/components/_footer.scss
@@ -1,6 +1,17 @@
-.c-footer {
-    padding-top: $footer--pad-v;
-    padding-bottom: $footer--pad-v;
-    color: var(--obj);
-    text-align: right;
+@include namespace('footer') {
+    @include store((
+        --dims: (
+            --pad-y: .8em
+        ),
+        --colors: (
+            --fg: prop(--colors --obj, $global: true)
+        )
+    ));
+
+    @include component(namespace()) {
+        padding-top: prop(--dims --pad-y);
+        padding-bottom: prop(--dims --pad-y);
+        color: prop(--colors --fg);
+        text-align: right;
+    }
 }
diff --git a/assets/css/components/_hero.scss b/assets/css/components/_hero.scss
index bfcdc16..6c497a1 100644
--- a/assets/css/components/_hero.scss
+++ b/assets/css/components/_hero.scss
@@ -1,35 +1,50 @@
-.c-hero {
-    margin-bottom: $line-height * 2em;
-    margin-left: -1 * $page--item-prefix--width;
-    padding-left: $page--item-prefix--width;
-    overflow: hidden;
-    font-family: $font-fam--mono;
+@include namespace('hero') {
+    @include store((
+        --colors: (
+            --back-fg: prop(--colors --bg-hi, $global: true)
+        )
+    ));
 
-    &::after {
-        content: str-repeat('░', 120);
-        display: block;
-        position: relative;
-        z-index: -10;
-        height: $line-height;
-        margin-top: px-to-em(2px);
-        margin-left: -1 * $page--item-prefix--width;
-        padding-top: px-to-em(2px);
-        border-top: 1px solid var(--fg-hi);
-        color: var(--fg-hi);
-        line-height: $code-block--line-height;
-    }
+    @include component(namespace()) {
+        display:         flex;
+        position:        relative;
+        flex-direction:  column;
+        align-items:     center;
+        justify-content: center;
+        text-align:      center;
 
-    &__pre {
-        margin-top: 0;
-        overflow: hidden;
-    }
+        @include element('title', 'backtitle') {
+            margin:         0 auto;
+            font-family:    $font-fam--large;
+            text-transform: none;
+        }
+
+        @include element('emph') {
+            color:       prop(--colors --accent, $global: true);
+            font-weight: 500;
+        }
+
+        @include element('title') {
+            max-width:   11em;
+            font-weight: 200;
+        }
+
+        @include element('backtitle') {
+            position:  absolute;
+            z-index:   -10;
+            transform: translateY(-.08em);
+            color:     prop(--colors --back-fg);
+        }
 
-    @media (max-width: map-get($breakpoints, 'sm')) {
-        margin-left: 0;
-        padding-left: 0;
+        @include iro-responsive-env(('xs', 'sm', 'md')) {
+            @include element('title') {
+                padding:   iro-responsive-set((7rem, 7rem, 10rem)) 0;
+                font-size: iro-responsive-set((1.8rem, 2.8rem, 3.3rem));
+            }
 
-        &::after {
-            margin-left: 0;
+            @include element('backtitle') {
+                font-size: iro-responsive-set((12rem, 14rem, 16rem));
+            }
         }
     }
 }
diff --git a/assets/css/components/_hlist.scss b/assets/css/components/_hlist.scss
deleted file mode 100644
index a7cf665..0000000
--- a/assets/css/components/_hlist.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.c-hlist {
-    display: flex;
-
-    &__item {
-        display: block;
-        margin-right: 4ch;
-        padding-left: 0;
-
-        &::before {
-            display: none;
-        }
-    }
-}
diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss
index cd3ef14..2472706 100644
--- a/assets/css/components/_nav.scss
+++ b/assets/css/components/_nav.scss
@@ -1,57 +1,103 @@
-.c-nav {
-    position: sticky;
-    z-index: 1000;
-    top: 0;
-    background-color: var(--nav--bg);
-    font-size: $nav--font-size;
-
-    &__items {
+@include namespace('nav') {
+    @include store((
+        --dims: (
+            --font-size: 15px,
+            --pad-y: 1em,
+            --pad-y-sm: .5em,
+            --item: (
+                --pad-x: 1em,
+                --pad-x-sm: .75em,
+                --pad-y: 1em,
+                --pad-y-sm: .75em,
+            ),
+        ),
+        --colors: (
+            --logo: (
+                --idle: (
+                    --fg: prop(--colors --fg-hi, $global: true),
+                ),
+                --hover: (
+                    --fg: prop(--colors --fg-lo, $global: true),
+                )
+            ),
+            --item: (
+                --idle: (
+                    --fg: prop(--colors --fg, $global: true),
+                ),
+                --hover: (
+                    --fg: prop(--colors --fg-lo, $global: true),
+                ),
+                --active: (
+                    --fg: prop(--colors --fg-lo, $global: true),
+                )
+            )
+        )
+    ));
+
+    @include component(namespace()) {
         display: flex;
-        align-items: baseline;
-    }
+        align-items: center;
+        padding: prop(--dims --pad-y) 0;
+        font-size: prop(--dims --font-size);
+
+        @include element('logo') {
+            display: inline-block;
+            margin: 0;
+            padding: prop(--dims --item --pad-y) 0;
+            color: prop(--colors --logo --idle --fg);
+            font-family: $font-fam--mono;
+            text-decoration: none;
+
+            &:link,
+            &:visited {
+                &:hover {
+                    background-color: transparent;
+                    color: prop(--colors --logo --hover --fg);
+                }
+            }
+        }
+
+        @include element('logo-symbol') {
+            display: block;
+            width:  $line-height * .9em;
+            height: $line-height * 1em;
+        }
 
-    &__logo {
-        display: inline-block;
-        margin: 0;
-        padding: $nav--item--pad-v 0;
-        color: var(--nav--logo--fg);
-        font-family: $font-fam--mono;
-        text-decoration: none;
+        @include element('item') {
+            display: inline-block;
+            margin: 0 calc(-1 * #{prop(--dims --item --pad-x)}) 0 prop(--dims --item --pad-x);
+            padding: prop(--dims --item --pad-y) prop(--dims --item --pad-x);
+            color: prop(--colors --item --idle --fg);
+            text-decoration: none;
+            text-transform: uppercase;
 
-        &:link,
-        &:visited {
             &:hover {
                 background-color: transparent;
-                color: var(--nav--item--hover--fg);
+                color: prop(--colors --item --hover --fg);
+                text-decoration: underline;
+            }
+
+            @include modifier('active') {
+                border-color: prop(--colors --item --active --fg);
+                color: prop(--colors --item --active --fg);
                 font-weight: bold;
             }
         }
-    }
 
-    &__item {
-        display: inline-block;
-        margin: 0 (-1 * $nav--item--pad-h) 0 ($nav--item--spacing - $nav--item--pad-h);
-        padding: $nav--item--pad-v $nav--item--pad-h calc(#{$nav--item--pad-v} - 2px);
-        border-bottom: 2px solid transparent;
-        color: var(--nav--item--idle--fg);
-        text-decoration: none;
-
-        &:hover {
-            background-color: transparent;
-            color: var(--nav--item--hover--fg);
-            font-weight: bold;
-        }
+        @include media('<=sm') {
+            padding: prop(--dims --pad-y-sm) 0;
 
-        &--active {
-            border-color: var(--nav--item--active--fg);
-            color: var(--nav--item--active--fg);
-            font-weight: bold;
-        }
-    }
+            @include element('logo', 'item') {
+                padding-top: prop(--dims --item --pad-y-sm);
+                padding-bottom: prop(--dims --item --pad-y-sm);
+            }
 
-    @media (max-width: map-get($breakpoints, 'sm')) {
-        &__item {
-            margin-left: $nav--item--spacing--sm - $nav--item--pad-h;
+            @include element('item') {
+                margin-right: calc(-1 * #{prop(--dims --item --pad-x-sm)});
+                margin-left: prop(--dims --item --pad-x-sm);
+                padding-right: prop(--dims --item --pad-x-sm);
+                padding-left: prop(--dims --item --pad-x-sm);
+            }
         }
     }
 }
diff --git a/assets/css/components/_page.scss b/assets/css/components/_page.scss
index 9d1e991..ef39061 100644
--- a/assets/css/components/_page.scss
+++ b/assets/css/components/_page.scss
@@ -1,133 +1,3 @@
-.c-page {
-    &__prefixed {
-        position: relative;
-        margin-left: -1 * $page--item-prefix--width;
-        padding-left: $page--item-prefix--width;
-
-        &::before {
-            display: inline-block;
-            position: absolute;
-            box-sizing: border-box;
-            width: $page--item-prefix--width;
-            margin-left: -1 * $page--item-prefix--width;
-            padding-right: $page--item-prefix--pad;
-            color: var(--page--item-prefix--fg);
-            font-family: $font-fam--mono;
-            font-weight: normal;
-            text-align: right;
-        }
-
-        $h1-unscale-factor: px-to-em($font-size, $content--h1--font-size);
-
-        &--h1 {
-            margin-top: $line-height * $h1-unscale-factor;
-            font-size: px-to-em($content--h1--font-size);
-
-            &::before {
-                content: '#';
-                font-size: $h1-unscale-factor;
-            }
-        }
-
-        &--h2::before {
-            content: '##';
-        }
-
-        &--h3::before {
-            content: '###';
-        }
-
-        &--pre {
-            $scale-factor: $font-size / $code-block--font-size;
-
-            margin-left: calc(#{-1 * $page--item-prefix--width} * #{$scale-factor});
-            padding-left: calc(#{$page--item-prefix--width} * #{$scale-factor});
-            border-left: 0;
-            color: var(--code-block--fg);
-            font-size: $code-block--font-size;
-            line-height: $code-block--line-height;
-            text-overflow: '';
-    
-            &::before {
-                content: str-repeat('``\A', 40);
-                height: 100%;
-                overflow: hidden;
-                color: var(--page--item-prefix--fg);
-                font-size: px-to-em($font-size, $code-block--font-size);
-                line-height: $code-block--line-height / $scale-factor;
-            }
-        }
-
-        &--ref::before {
-            content: '|>';
-        }
-
-        &--backref::before {
-            content: '<|';
-        }
-    }
-
-    &__header {
-        margin-bottom: $line-height * 1em;
-
-        &__title {
-            margin-top: 0;
-        }
-
-        &__backlink__link {
-            &:link,
-            &:visited {
-                color: var(--fg-hi);
-
-                &:hover {
-                    color: var(--link--hover--fg);
-                }
-            }
-        }
-
-        &__backlink + &__title {
-            margin-top: $line-height * 1em;
-        }
-
-        &__meta {
-            margin-top: 0;
-            color: var(--fg-hi);
-            font-weight: normal;
-        }
-    }
-
-    &__content {
-        padding-left: $page--item-prefix--width;
-
-        > :first-child {
-            margin-top: 0;
-        }
-    }
-
-    @media (max-width: map-get($breakpoints, 'sm')) {
-        &__prefixed {
-            margin-left: 0;
-            padding-left: $page--item-prefix--width--sm;
-
-            &::before {
-                width: $page--item-prefix--width--sm;
-                margin-left: -1 * $page--item-prefix--width--sm;
-            }
-
-            &--h1,
-            &--h2,
-            &--h3,
-            &--pre {
-                padding-left: 0;
-
-                &::before {
-                    display: none;
-                }
-            }
-        }
-
-        &__content {
-            padding-left: 0;
-        }
-    }
+@include component('page') {
+    //
 }
diff --git a/assets/css/components/_spacer.scss b/assets/css/components/_spacer.scss
deleted file mode 100644
index 692eb29..0000000
--- a/assets/css/components/_spacer.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.c-spacer {
-    display: block;
-    height: 0;
-    margin: ($line-height * 2em) 0 0;
-}
diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss
index e99c62f..2bb4d80 100644
--- a/assets/css/layouts/_container.scss
+++ b/assets/css/layouts/_container.scss
@@ -1,25 +1,36 @@
-.l-container {
-    padding-right: $container--pad-h;
-    padding-left: $container--pad-h;
+@include namespace('container') {
+    @include store((
+        --dims: (
+            --pad-x: 2rem,
+            --pad-x-sm: 1rem,
+            --pad-y: $line-height * 2rem,
+            --pad-y-sm: $line-height * 1rem
+        )
+    ));
 
-    &--content {
-        max-width: $content--width;
-        margin-right: auto;
-        margin-left: auto;
-    }
+    @include layout(namespace()) {
+        padding-right: prop(--dims --pad-x);
+        padding-left: prop(--dims --pad-x);
 
-    &--pad-v {
-        padding-top: $container--pad-v;
-        padding-bottom: $container--pad-v;
-    }
+        @include modifier('content') {
+            max-width: $content--width;
+            margin-right: auto;
+            margin-left: auto;
+        }
+
+        @include modifier('pad-v') {
+            padding-top: prop(--dims --pad-y);
+            padding-bottom: prop(--dims --pad-y);
+        }
 
-    @media (max-width: map-get($breakpoints, 'sm')) {
-        padding-right: $container--pad-h--sm;
-        padding-left: $container--pad-h--sm;
+        @include media('<=sm') {
+            padding-right: prop(--dims --pad-x-sm);
+            padding-left: prop(--dims --pad-x-sm);
 
-        &--pad-v {
-            padding-top: $container--pad-v--sm;
-            padding-bottom: $container--pad-v--sm;
+            @include modifier('pad-v') {
+                padding-top: prop(--dims --pad-y-sm);
+                padding-bottom: prop(--dims --pad-y-sm);
+            }
         }
     }
 }
diff --git a/assets/css/scopes/_code.scss b/assets/css/scopes/_code.scss
index 4a40d0f..3f50ce3 100644
--- a/assets/css/scopes/_code.scss
+++ b/assets/css/scopes/_code.scss
@@ -1,5 +1,5 @@
-.s-code {
-    &--highlight {
+@include scope('code') {
+    @include modifier('highlight') {
         pre {
             color: var(--fg-lo);
         }
diff --git a/assets/css/scopes/_page.scss b/assets/css/scopes/_page.scss
index e4c505e..70489fb 100644
--- a/assets/css/scopes/_page.scss
+++ b/assets/css/scopes/_page.scss
@@ -1,4 +1,4 @@
-.s-page {
+@include scope('page-content') {
     :link {
         color: var(--page--link--idle--fg);
     }
@@ -18,4 +18,8 @@
     img {
         max-width: 100%;
     }
+    
+    > :first-child {
+        margin-top: 0;
+    }
 }
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 6ffab5f..dad774a 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -1,9 +1,13 @@
+@import '../../node_modules/iro-sass/src/main';
+@import '../../node_modules/iro-sass/src/bem-shortcodes';
+@import '../../node_modules/iro-sass/src/responsive-shortcodes';
+@import '../../node_modules/iro-sass/src/props-shortcodes';
+@import '../../node_modules/include-media/dist/include-media';
+
 @import 'vars';
 @import 'functions';
 @import 'basics';
 
-//@import 'components/spacer';
-//@import 'components/hlist';
 @import 'components/nav';
 @import 'components/page';
 @import 'components/hero';
@@ -15,3 +19,7 @@
 @import 'scopes/page';
 
 @import 'utils';
+
+:root {
+    @include assign;
+}
-- 
cgit v1.2.3-70-g09d2