From 575278aba99139635adc3b1f9385befe57102541 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Sat, 11 Jun 2022 09:44:04 +0200
Subject: Re-implemented design via iro-design

---
 assets/css/_base.scss                   |  36 ++++++
 assets/css/_basics.scss                 | 194 -------------------------------
 assets/css/_declare-vars.scss           |  31 +++++
 assets/css/_functions.scss              |   2 +-
 assets/css/_utils.scss                  |  46 --------
 assets/css/_vars.scss                   | 196 --------------------------------
 assets/css/components/_card.scss        | 135 ++++++++++------------
 assets/css/components/_footer.scss      |  37 +++---
 assets/css/components/_header.scss      |  77 +++++++------
 assets/css/components/_hnav.scss        |  31 +++--
 assets/css/components/_lightbox.scss    | 116 -------------------
 assets/css/components/_note.scss        |  23 ----
 assets/css/layouts/_card-list.scss      |  33 +++---
 assets/css/layouts/_container.scss      |  33 ------
 assets/css/layouts/_media.scss          |  26 +++++
 assets/css/objects/_badge.scss          |  25 ----
 assets/css/objects/_icon.scss           |  33 ------
 assets/css/scopes/_body.scss            |  83 --------------
 assets/css/scopes/_colored-links.scss   |  20 ----
 assets/css/scopes/_headlines.scss       | 104 -----------------
 assets/css/scopes/_intro.scss           |   8 --
 assets/css/scopes/_invisible-links.scss |  13 ---
 assets/css/scopes/_small.scss           |  23 ++--
 assets/css/style.scss                   |  63 +++-------
 assets/fonts/GaretVariable.ttf          | Bin 392080 -> 394776 bytes
 25 files changed, 285 insertions(+), 1103 deletions(-)
 create mode 100644 assets/css/_base.scss
 delete mode 100644 assets/css/_basics.scss
 create mode 100644 assets/css/_declare-vars.scss
 delete mode 100644 assets/css/_utils.scss
 delete mode 100644 assets/css/_vars.scss
 delete mode 100644 assets/css/components/_lightbox.scss
 delete mode 100644 assets/css/components/_note.scss
 delete mode 100644 assets/css/layouts/_container.scss
 create mode 100644 assets/css/layouts/_media.scss
 delete mode 100644 assets/css/objects/_badge.scss
 delete mode 100644 assets/css/objects/_icon.scss
 delete mode 100644 assets/css/scopes/_body.scss
 delete mode 100644 assets/css/scopes/_colored-links.scss
 delete mode 100644 assets/css/scopes/_headlines.scss
 delete mode 100644 assets/css/scopes/_intro.scss
 delete mode 100644 assets/css/scopes/_invisible-links.scss

(limited to 'assets')

diff --git a/assets/css/_base.scss b/assets/css/_base.scss
new file mode 100644
index 0000000..dd24fed
--- /dev/null
+++ b/assets/css/_base.scss
@@ -0,0 +1,36 @@
+@use 'iro-sass/src/index' as iro;
+@use 'iro-design/src/functions' as fn;
+
+html,
+pre,
+code {
+    font-feature-settings: 'calt' 0, 'dlig' 1, 'ss09' 1;
+}
+
+body {
+    box-sizing: border-box;
+    min-height: 100%;
+}
+
+main {
+    @include iro.responsive-env((600px, 900px)) {
+        font-size: iro.responsive-set((1rem, iro.fn-px-to-rem(18px)));
+    }
+}
+
+img {
+    display:   block;
+    max-width: 100%;
+}
+
+figure {
+    margin:  fn.dim(--paragraph --margin-top) 0 0;
+    padding: 0;
+
+    img {
+        display:    block;
+        max-width:  100%;
+        max-height: 70vh;
+        object-fit: contain;
+    }
+}
diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
deleted file mode 100644
index 7689379..0000000
--- a/assets/css/_basics.scss
+++ /dev/null
@@ -1,194 +0,0 @@
-::selection {
-    background-color: prop(--colors --select --bg);
-    color:            prop(--colors --select --fg);
-}
-
-img::selection {
-    background-color: prop(--colors --select --img-bg);
-}
-
-:focus {
-    outline:        2px solid prop(--colors --focus-ring);
-    outline-offset: 3px;
-}
-
-html,
-pre,
-code {
-    font-feature-settings: 'calt' 0, 'dlig' 1, 'ss09' 1;
-}
-
-html {
-    height:           100%;
-    background-color: prop(--colors --bg);
-    color:            prop(--colors --fg);
-    font-family:      $font-fam--text;
-    font-size:        px-to-em($font-size);
-    line-height:      $line-height;
-}
-
-body {
-    box-sizing: border-box;
-    min-height: 100%;
-    margin:     0;
-    padding:    0;
-}
-
-main {
-    @include iro-responsive-env(('sm', 'md')) {
-        font-size: iro-responsive-set((1rem, iro-px-to-rem(18px)));
-    }
-}
-
-pre,
-code {
-    font-family: $font-fam--mono;
-}
-
-code {
-    color:     prop(--colors --code --fg);
-    font-size: px-to-em(15px);
-}
-
-pre {
-    margin:      0;
-    overflow-x:  auto;
-    font-size:   px-to-em(15px);
-    line-height: 1.4;
-
-    code {
-        color:     currentColor;
-        font-size: 1em;
-    }
-
-    strong {
-        //font-weight: normal;
-    }
-}
-
-strong {
-    color:       prop(--colors --fg-lo);
-    font-weight: bold;
-}
-
-small {
-    color:     prop(--colors --fg-hi);
-    font-size: px-to-em(14px);
-}
-
-ul,
-ol {
-    margin:     ($line-height * 1rem) 0 0;
-    padding:    0;
-    list-style: none;
-}
-
-li {
-    position:     relative;
-    padding-left: prop(--dims --indent);
-
-    &::before {
-        display:     inline-block;
-        position:    absolute;
-        width:       prop(--dims --indent);
-        margin-left: calc(-1 * #{prop(--dims --indent)});
-        color:       prop(--colors --fg-hi);
-    }
-}
-
-ul > li::before {
-    content: '-';
-}
-
-ol {
-    counter-reset: cnt;
-
-    > li {
-        counter-increment: cnt;
-
-        &::before {
-            content: counter(cnt) '.';
-        }
-    }
-}
-
-ul ul {
-    margin-top: 0;
-}
-
-dl {
-    margin:  ($line-height * 1rem) 0 0;
-    padding: 0;
-}
-
-dt,
-dd {
-    display: inline-block;
-}
-
-dt {
-    color:       prop(--colors --fg-lo);
-    font-weight: bold;
-
-    &::after {
-        content:     ':';
-        color:       prop(--colors --fg);
-        font-weight: normal;
-    }
-}
-
-dd {
-    margin: 0 3ch 0 0;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-    @include iro-responsive-modular-scale(font-size, 0, $responsive-mod-scale);
-
-    margin:         ($line-height * 2rem) 0 0;
-    color:          prop(--colors --fg-lo);
-    font-weight:    700;
-    letter-spacing: 1px;
-    text-transform: uppercase;
-
-    & + & {
-        margin-top: $line-height * 1rem;
-    }
-
-    strong {
-        color:       prop(--colors --accent --color, $global: true);
-        font-weight: 550;
-    }
-}
-
-p {
-    margin: ($line-height * 1rem) 0 0;
-}
-
-figure {
-    margin:  ($line-height * 1rem) 0 0;
-    padding: 0;
-
-    img {
-        display:    block;
-        max-width:  100%;
-        max-height: 70vh;
-        object-fit: contain;
-    }
-}
-
-:link,
-:visited {
-    color: prop(--colors --link --default);
-}
-
-hr {
-    height:           1px;
-    margin:           ($line-height * 2rem) 0;
-    border:           0;
-    background-color: prop(--colors --obj-hi);
-}
diff --git a/assets/css/_declare-vars.scss b/assets/css/_declare-vars.scss
new file mode 100644
index 0000000..4a9513c
--- /dev/null
+++ b/assets/css/_declare-vars.scss
@@ -0,0 +1,31 @@
+@use 'iro-sass/src/index' as iro;
+@use 'iro-design/src/functions' as fn;
+
+@include iro.props-store((
+    --dims: (
+        --font-size: (
+            --50:   iro.fn-px-to-rem(13px),
+            --75:   iro.fn-px-to-rem(14px),
+            --100:  iro.fn-px-to-rem(16px),
+            --150:  iro.fn-px-to-rem(18px),
+            --200:  iro.fn-px-to-rem(20px),
+            --300:  iro.fn-px-to-rem(24px),
+            --400:  iro.fn-px-to-rem(28px),
+            --500:  iro.fn-px-to-rem(32px),
+            --600:  iro.fn-px-to-rem(36px),
+            --700:  iro.fn-px-to-rem(40px),
+            --800:  iro.fn-px-to-rem(45px),
+            --900:  iro.fn-px-to-rem(50px),
+            --1000: iro.fn-px-to-rem(60px),
+            --1100: iro.fn-px-to-rem(70px),
+        ),
+
+        --paragraph: (
+            --margin-top: fn.dim(--size --400, null),
+        ),
+
+        --heading: (
+            --margin-top: fn.dim(--size --700, null),
+        ),
+    )
+), 'dims');
diff --git a/assets/css/_functions.scss b/assets/css/_functions.scss
index a641a34..107cba7 100644
--- a/assets/css/_functions.scss
+++ b/assets/css/_functions.scss
@@ -1,6 +1,6 @@
 @use 'sass:math';
 
-@function px-to-em($s, $b: $font-size) {
+@function px-to-em($s, $b: 16px) {
     @return math.div(1, math.div($b, 1px)) * math.div($s, 1px) * 1em;
 }
 
diff --git a/assets/css/_utils.scss b/assets/css/_utils.scss
deleted file mode 100644
index 71118fe..0000000
--- a/assets/css/_utils.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-@include utility('dn') {
-    display: none;
-
-    @each $breakpoint in ('sm') /*map-keys($breakpoints)*/ {
-        @include media('<=#{$breakpoint}') {
-            @include suffix('#{$breakpoint}-lo') {
-                display: none;
-            }
-        }
-
-        @include media('>#{$breakpoint}') {
-            @include suffix('#{$breakpoint}-hi') {
-                display: none;
-            }
-        }
-    }
-}
-
-@include utility('mt0') {
-    margin-top: 0;
-}
-
-@include utility('pb0') {
-    padding-bottom: 0;
-}
-
-@include utility('db') {
-    display: block;
-}
-
-@include utility('fs0') {
-    flex-shrink: 0;
-}
-
-@include utility('g-span-row') {
-    grid-column: 1 / -1;
-}
-
-@include utility('elp') {
-    overflow:      hidden;
-    text-overflow: ellipsis;
-}
-
-@include utility('tar') {
-    text-align: right;
-}
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
deleted file mode 100644
index ad9e16f..0000000
--- a/assets/css/_vars.scss
+++ /dev/null
@@ -1,196 +0,0 @@
-$breakpoints: (
-    lg: 1340px,
-    md: 900px,
-    sm: 600px,
-    xs: 400px,
-);
-
-$unit-intervals: (
-    'px':  1,
-    'em':  .01,
-    'rem': .01,
-    '':    0
-);
-
-$responsive-mod-scale: (
-    xs: (iro-px-to-rem(14px), 1.28),
-    md: (iro-px-to-rem(14px), 1.49)
-);
-
-$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;
-$font-size:       16px;
-$line-height:     1.7;
-$content--width:  44rem;
-
-@include iro-execute {
-    $gray0: hsl(220, 5%, 4%);
-    $gray1: hsl(220, 5%, 10%);
-    $gray2: hsl(220, 5%, 16%);
-    $gray3: hsl(220, 5%, 23%);
-    $gray4: hsl(220, 5%, 38%);
-    $gray5: hsl(220, 5%, 60%);
-    $gray6: hsl(220, 5%, 80%);
-    $gray7: hsl(220, 5%, 100%);
-
-    @include store((
-        --dims: (
-            --indent: 2rem,
-        ),
-        --colors: (
-            --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
-
-            --accent: (
-                --h:      354,
-                --s:      84%,
-                --l:      55%,
-                --color:  hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)),
-                --strong: hsl(
-                    var(--colors--accent--h),
-                    calc(var(--colors--accent--s) * 1.2),
-                    calc(var(--colors--accent--l) * 1.2)
-                ),
-                --faint: hsla(
-                    var(--colors--accent--h),
-                    var(--colors--accent--s),
-                    var(--colors--accent--l),
-                    .1
-                ),
-            ),
-
-            --focus-ring: var(--colors--fg-lo),
-
-            --select: (
-                --bg:     rgba($gray7, .996),
-                --img-bg: rgba($gray7, .5),
-                --fg:     var(--colors--bg-hi),
-                --inverted: (
-                    --bg: rgba($gray0, .996),
-                    --fg: var(--colors--fg-lo),
-                )
-            ),
-
-            --link: (
-                --default: var(--colors--fg-lo),
-                --colored: (
-                    --idle-h:  220,
-                    --idle-s:  100%,
-                    --idle-l:  80%,
-                    --idle:    hsl(
-                        var(--colors--link--colored--idle-h),
-                        var(--colors--link--colored--idle-s),
-                        var(--colors--link--colored--idle-l),
-                    ), //hsl(var(--colors--accent--h), 100%, 66%), //
-                    --visited: hsl(290, 35%, 72%), //hsl(var(--colors--accent--h), 50%, 66%), //
-                )
-            ),
-
-            --code: (
-                --fg: var(--colors--fg-hi),
-            ),
-        )
-    ));
-}
-
-@include iro-execute {
-    $gray0: hsl(220, 5%, 100%);
-    $gray1: hsl(220, 5%, 95%);
-    $gray2: hsl(220, 5%, 88%);
-    $gray3: hsl(220, 5%, 83%);
-    $gray4: hsl(220, 5%, 68%);
-    $gray5: hsl(220, 5%, 44%);
-    $gray6: hsl(220, 5%, 16%);
-    $gray7: hsl(220, 5%, 0%);
-
-    @include store((
-        --colors: (
-            --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
-
-            --accent: (
-                --h:      354,
-                --s:      74%,
-                --l:      48%,
-                --strong: hsl(
-                    var(--colors--accent--h),
-                    var(--colors--accent--s),
-                    calc(var(--colors--accent--l) * .8)
-                ),
-            ),
-
-            --select: (
-                --bg:     rgba($gray7, .996),
-                --img-bg: rgba($gray7, .5),
-                --inverted: (
-                    --bg: rgba($gray0, .996),
-                ),
-            ),
-
-            --link: (
-                --colored: (
-                    --idle-h:  220,
-                    --idle-s:  60%,
-                    --idle-l:  40%,
-                    --idle:    hsl(
-                        var(--colors--link--colored--idle-h),
-                        var(--colors--link--colored--idle-s),
-                        var(--colors--link--colored--idle-l),
-                    ), //hsl(var(--colors--accent--h), 100%, 66%), //
-                    --visited: hsl(290, 30%, 35%), //hsl(var(--colors--accent--h), 50%, 66%), //
-                )
-            ),
-        ),
-    ), 'light');
-}
-
-@include iro-execute {
-    $white: #fff;
-    $black: #000;
-
-    @include store((
-        --colors: (
-            --bg-hi:  $white, // Darker background
-            --bg:     $white, // Background
-            --bg-lo:  $black, // Lighter background
-        
-            --obj-hi: $black,
-            --obj:    $black,
-        
-            --fg-hi:  $black, // Faint text
-            --fg:     $black, // Text
-            --fg-lo:  $black, // Strong text
-        ),
-    ), 'print');
-}
-
-@each $breakpoint in map-keys($breakpoints) {
-    @include media('<=#{$breakpoint}') {
-        @include store((
-            --colors: ()
-        ), $breakpoint);
-    }
-}
-
-@include store((
-    --dims: (
-        --indent: 1.5rem,
-    ),
-), 'sm');
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index 20614e7..f8f106d 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -1,41 +1,46 @@
-@include namespace('card') {
-    @include store((
-        --colors: (
-            --bg:     prop(--colors --bg-lo, $global: true),
-            --fg:     prop(--colors --fg, $global: true),
-            --unread: prop(--colors --bg, $global: true),
-            --border: prop(--colors --obj-hi, $global: true),
-            --hover: (
-                --bg: prop(--colors --fg-lo, $global: true),
-                --fg: prop(--colors --bg-hi, $global: true),
-            ),
-        ),
+@use 'iro-sass/src/index' as iro;
+@use 'iro-design/src/functions' as fn;
+@use '../functions' as fn2;
+
+@include iro.props-namespace('card') {
+    @include iro.props-store((
         --dims: (
-            --pad-x:        1em,
-            --pad-y:        px-to-em(12px),
-            --hover-offset: px-to-em(-5px),
+            --hover-offset: fn2.px-to-em(-5px),
             --indicator: (
                 --width:  1em,
                 --height: 4px,
             ),
         )
-    ));
+    ), 'dims');
+
+    @include iro.props-store((
+        --colors: (
+            --bg:     fn.global-color(--bg-hi2),
+            --fg:     fn.global-color(--fg),
+            --unread: fn.global-color(--obj-hi),
+            --border: fn.global-color(--obj-hi),
+            --hover: (
+                --bg: fn.global-color(--fg-lo),
+                --fg: fn.global-color(--bg-hi2),
+            ),
+        )
+    ), 'colors');
 
-    @include store((
+    @include iro.props-store((
         --colors: (
-            --bg:     prop(--colors --bg-hi, $global: true),
-            --unread: prop(--colors --bg-lo, $global: true),
-            --border: prop(--colors --bg-lo, $global: true),
+            --bg:     fn.global-color(--obj-hi),
+            --unread: fn.global-color(--bg),
+            --border: fn.global-color(--obj-hi),
         )
-    ), 'light');
+    ), 'colors-dark');
 
-    @include component(namespace()) {
+    @include iro.bem-component(iro.props-namespace()) {
         display:          block;
         position:         relative;
         transform:        translateY(0);
         transition:       transform .2s, background-color .2s, color .2s, border-color .2s;
-        background-color: prop(--colors --bg);
-        color:            prop(--colors --fg);
+        background-color: fn.color(--bg);
+        color:            fn.color(--fg);
         line-height:      1.4;
 
         &::after {
@@ -45,7 +50,7 @@
             top:      100%;
             left:     0;
             width:    100%;
-            height:   calc(-1 * #{prop(--dims --hover-offset)});
+            height:   calc(-1 * fn.dim(--hover-offset));
         }
 
         small,
@@ -59,9 +64,9 @@
 
             &:hover,
             &:focus {
-                transform:        translateY(#{prop(--dims --hover-offset)});
-                background-color: prop(--colors --hover --bg);
-                color:            prop(--colors --hover --fg);
+                transform:        translateY(fn.dim(--hover-offset));
+                background-color: fn.color(--hover --bg);
+                color:            fn.color(--hover --fg);
 
                 &::after {
                     display: block;
@@ -69,35 +74,31 @@
 
                 small,
                 strong {
-                    color: prop(--colors --hover --fg);
+                    color: fn.color(--hover --fg);
                 }
 
-                @include element('row') {
-                    @include modifier('hidden') {
+                @include iro.bem-elem('row') {
+                    @include iro.bem-modifier('hidden') {
                         visibility: visible;
                         transition: opacity .2s;
                         opacity:    1;
                     }
                 }
 
-                @include element('block') {
-                    @include modifier('indicator') {
-                        color: prop(--colors --hover --fg);
-                    }
+                @include iro.bem-elem('indicator') {
+                    color: fn.color(--hover --fg);
                 }
             }
         }
 
         &:visited {
-            @include element('block') {
-                @include modifier('indicator') {
-                    color: prop(--colors --bg);
-                }
+            @include iro.bem-elem('indicator') {
+                color: fn.color(--bg);
             }
         }
 
-        @include modifier('outline') {
-            border:           1px solid prop(--colors --border);
+        @include iro.bem-modifier('outline') {
+            border:           1px solid fn.color(--border);
             background-color: transparent;
 
             &:link,
@@ -109,17 +110,8 @@
             }
         }
 
-        @include element('row') {
-            display:     flex;
-            align-items: center;
-            padding:     prop(--dims --pad-y) prop(--dims --pad-x);
-            gap:         prop(--dims --pad-x);
-
-            @include modifier('flush') {
-                padding: 0;
-            }
-
-            @include modifier('hidden') {
+        @include iro.bem-elem('row') {
+            @include iro.bem-modifier('hidden') {
                 visibility:       hidden;
                 position:         absolute;
                 z-index:          10;
@@ -128,7 +120,7 @@
                 left:             0;
                 transition:       opacity .2s, visibility 0s .2s;
                 opacity:          0;
-                background-color: prop(--colors --hover --bg);
+                background-color: fn.color(--hover --bg);
 
                 @media (hover: none) {
                     visibility:       visible;
@@ -139,14 +131,14 @@
             }
         }
 
-        @include element('thumbnail') {
+        @include iro.bem-elem('thumbnail') {
             position:    relative;
             width:       100%;
             height:      2em;
             padding-top: 46%;
         }
 
-        @include element('thumbnail-img') {
+        @include iro.bem-elem('thumbnail-img') {
             display:    block;
             position:   absolute;
             top:        0;
@@ -156,28 +148,17 @@
             object-fit: cover;
         }
 
-        @include element('block') {
-            flex:          0 0 auto;
-            overflow:      hidden;
-            text-overflow: ellipsis;
-
-            @include modifier('main') {
-                flex-shrink: 1;
-                width:       100%;
-            }
-
-            @include modifier('indicator') {
-                transition: color .2s;
-                color:      prop(--colors --unread);
-
-                &::before {
-                    content:          '';
-                    display:          block;
-                    width:            prop(--dims --indicator --width);
-                    height:           prop(--dims --indicator --height);
-                    border-radius:    prop(--dims --indicator --height);
-                    background-color: currentColor;
-                }
+        @include iro.bem-elem('indicator') {
+            transition: color .2s;
+            color:      fn.color(--unread);
+
+            &::before {
+                content:          '';
+                display:          block;
+                width:            fn.dim(--indicator --width);
+                height:           fn.dim(--indicator --height);
+                border-radius:    fn.dim(--indicator --height);
+                background-color: currentColor;
             }
         }
 
diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss
index 6b483ca..2cc63f5 100644
--- a/assets/css/components/_footer.scss
+++ b/assets/css/components/_footer.scss
@@ -1,30 +1,35 @@
-@include namespace('footer') {
-    @include store((
+@use 'iro-sass/src/index' as iro;
+@use 'iro-design/src/functions' as fn;
+@use 'iro-design/src/mixins' as mx;
+@use '../functions' as fn2;
+
+@include iro.props-namespace('footer') {
+    @include iro.props-store((
         --colors: (
-            --fg:     prop(--colors --obj, $global: true),
-            --ground: prop(--colors --obj, $global: true),
+            --fg:     fn.global-color(--obj-lo),
+            --ground: fn.global-color(--obj),
         )
-    ));
+    ), 'colors');
+
+    @include iro.bem-component(iro.props-namespace()) {
+        @include mx.set-font(--mono);
 
-    @include component(namespace()) {
-        position:    sticky;
-        top:         100vh;
-        overflow:    hidden;
-        color:       prop(--colors --fg);
-        font-family: $font-fam--mono;
-        line-height: 1.4;
+        position: sticky;
+        top:      100vh;
+        overflow: hidden;
+        color:    fn.color(--fg);
 
         &::after {
-            content:     str-repeat('░', 400);
+            content:     fn2.str-repeat('░', 400);
             display:     block;
             margin-top:  2px;
             padding-top: 2px;
             overflow:    hidden;
-            border-top:  1px solid prop(--colors --ground);
-            color:       prop(--colors --ground);
+            border-top:  1px solid fn.color(--ground);
+            color:       fn.color(--ground);
         }
 
-        @include element('ascii') {
+        @include iro.bem-elem('ascii') {
             display:   inline-block;
             position:  relative;
             left:      50%;
diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss
index ca85438..cf396ce 100644
--- a/assets/css/components/_header.scss
+++ b/assets/css/components/_header.scss
@@ -1,86 +1,93 @@
-@include namespace('header') {
-    @include store((
+@use 'iro-sass/src/index' as iro;
+@use 'iro-design/src/functions' as fn;
+@use 'include-media/dist/include-media' as media;
+
+@include iro.props-namespace('header') {
+    @include iro.props-store((
         --colors: (
-            --bg: prop(--colors --bg-lo, $global: true),
-            --fg: prop(--colors --fg-lo, $global: true),
+            --bg: fn.global-color(--bg-hi),
+            --fg: fn.global-color(--fg-lo),
             --hover: (
-                --bg: prop(--colors --fg-lo, $global: true),
-                --fg: prop(--colors --bg-hi, $global: true),
+                --bg: fn.global-color(--fg-lo),
+                --fg: fn.global-color(--bg-hi),
             ),
             --active: (
-                --fg: prop(--colors --fg-lo, $global: true),
+                --fg: fn.global-color(--fg-lo),
             )
-        ),
+        )
+    ), 'colors');
+
+    @include iro.props-store((
         --dims: (
             --height: 4rem,
             --icon:   1.5rem,
             --pad-x:  calc(.5 * (var(--header--dims--height) - var(--header--dims--icon))),
             --gap:    2px,
         )
-    ));
+    ), 'dims');
 
-    @include store((
+    @include iro.props-store((
         --colors: (
-            --bg: prop(--colors --bg-hi, $global: true),
+            --bg: fn.global-color(--obj-hi),
         )
-    ), 'light');
+    ), 'colors-dark');
 
-    @include store((
+    @include iro.props-store((
         --dims: (
             --height: 3.4rem,
         )
     ), 'sm');
 
-    @include component(namespace()) {
+    @include iro.bem-component(iro.props-namespace()) {
         display: flex;
         width:   0;
-        height:  prop(--dims --height);
-        padding: prop(--dims --gap);
-        gap:     prop(--dims --gap);
+        height:  fn.dim(--height);
+        padding: fn.dim(--gap);
+        gap:     fn.dim(--gap);
 
-        @include element('item') {
-            padding:          0 prop(--dims --pad-x);
+        @include iro.bem-elem('item') {
+            padding:          0 fn.dim(--pad-x);
             transition:       background-color .2s, color .2s, border-left-color .2s;
-            background-color: prop(--colors --bg);
-            color:            prop(--colors --fg);
-            line-height:      prop(--dims --height);
+            background-color: fn.color(--bg);
+            color:            fn.color(--fg);
+            line-height:      fn.dim(--height);
             text-decoration:  none;
 
             &:hover,
             &:focus {
-                border-left-color: prop(--colors --hover --bg);
-                background-color:  prop(--colors --hover --bg);
-                color:             prop(--colors --hover --fg);
+                border-left-color: fn.color(--hover --bg);
+                background-color:  fn.color(--hover --bg);
+                color:             fn.color(--hover --fg);
             }
 
-            @include modifier('icon') {
+            @include iro.bem-modifier('icon') {
                 display:         flex;
                 align-items:     center;
                 justify-content: center;
             }
 
-            @include modifier('active') {
-                color:       prop(--colors --active --fg);
+            @include iro.bem-modifier('active') {
+                color:       fn.color(--active --fg);
                 font-weight: bold;
             }
         }
 
-        @include element('icon') {
-            width:  prop(--dims --icon);
-            height: prop(--dims --icon);
+        @include iro.bem-elem('icon') {
+            width:  fn.dim(--icon);
+            height: fn.dim(--icon);
         }
 
-        @include modifier('fixed') {
+        @include iro.bem-modifier('fixed') {
             position: fixed;
         }
 
-        @include media('>=lg') {
+        @include media.media('>=lg') {
             position:      sticky;
             z-index:       100;
             top:           0;
-            margin-bottom: calc(-.75 * #{prop(--dims --height)});
+            margin-bottom: calc(-.75 * #{fn.dim(--height)});
 
-            @include modifier('fixed') {
+            @include iro.bem-modifier('fixed') {
                 position: fixed;
             }
         }
diff --git a/assets/css/components/_hnav.scss b/assets/css/components/_hnav.scss
index 220afde..4097373 100644
--- a/assets/css/components/_hnav.scss
+++ b/assets/css/components/_hnav.scss
@@ -1,22 +1,29 @@
-@include namespace('hnav') {
-    @include store((
+@use 'iro-sass/src/index' as iro;
+@use 'iro-design/src/functions' as fn;
+
+@include iro.props-namespace('hnav') {
+    @include iro.props-store((
         --colors: (
-            --border: prop(--colors --obj-hi, $global: true)
-        ),
+            --border: fn.global-color(--obj-hi)
+        )
+    ), 'colors');
+
+    @include iro.props-store((
         --dims: (
-            --gap:   2em,
-            --pad-y: .5em
+            --margin-top: fn.global-dim(--size --600),
+            --gap:        2em,
+            --pad-y:      .5em
         )
-    ));
+    ), 'dims');
 
-    @include component(namespace()) {
+    @include iro.bem-component(iro.props-namespace()) {
         display:      flex;
-        gap:          prop(--dims --gap);
+        gap:          fn.dim(--gap);
         align-items:  baseline;
-        margin-top:   $line-height * 2rem;
-        padding:      prop(--dims --pad-y) 0 0;
+        margin-top:   fn.dim(--margin-top);
+        padding:      fn.dim(--pad-y) 0 0;
         border-width: 1px 0 0;
         border-style: solid;
-        border-color: prop(--colors --border);
+        border-color: fn.color(--border);
     }
 }
diff --git a/assets/css/components/_lightbox.scss b/assets/css/components/_lightbox.scss
deleted file mode 100644
index f497a5e..0000000
--- a/assets/css/components/_lightbox.scss
+++ /dev/null
@@ -1,116 +0,0 @@
-@include namespace('lightbox') {
-    @include store((
-        --colors: (
-            --bg: prop(--colors --bg-hi, $global: true),
-            --button: (
-                --idle:  prop(--colors --fg-hi, $global: true),
-                --hover: prop(--colors --fg-lo, $global: true),
-                --bg:    prop(--colors --bg-hi, $global: true),
-            )
-        ),
-        --dims: (
-            --pad: 1rem,
-        ),
-    ));
-
-    @include component(namespace()) {
-        display:         flex;
-        visibility:      hidden;
-        position:        fixed;
-        z-index:         5000;
-        top:             0;
-        left:            0;
-        box-sizing:      border-box;
-        flex-direction:  column;
-        align-items:     center;
-        justify-content: center;
-        width:           100%;
-        height:          100%;
-        padding-bottom:  3vh;
-        transition:      opacity .2s, visibility .2s;
-        opacity:         0;
-
-        @include element('bg') {
-            position:         absolute;
-            z-index:          -10;
-            top:              0;
-            left:             0;
-            width:            100%;
-            height:           100%;
-            opacity:          .85;
-            background-color: prop(--colors --bg);
-        }
-
-        @include is('shown') {
-            visibility: visible;
-            transition: opacity .2s, visibility 0 .2s;
-            opacity:    1;
-        }
-
-        @include element('infobar') {
-            display:     flex;
-            box-sizing:  border-box;
-            flex:        0 0 auto;
-            align-items: center;
-            width:       100%;
-            padding:     0 prop(--dims --pad);
-        }
-
-        @include element('img') {
-            max-width:     100%;
-            min-height:    0;
-            max-height:    100%;
-            margin-top:    auto;
-            margin-bottom: auto;
-        }
-
-        @include element('close', 'prev', 'next') {
-            margin:           0;
-            transition:       color .2s;
-            border:           0;
-            background-color: transparent;
-            color:            currentColor;
-
-            &:hover {
-                color: prop(--colors --button --hover);
-            }
-        }
-
-        @include element('close') {
-            margin:      0 calc(-1 * #{prop(--dims --pad)}) 0 auto;
-            padding:     prop(--dims --pad);
-            font-size:   1.5em;
-        }
-
-        @include element('prev', 'next') {
-            position:            absolute;
-            top:                 50%;
-            padding:             2rem .5rem;
-            transform:           translate(0, -50%);
-            font-size:           3em;
-            --icon-stroke-width: .75px;
-
-            &::before {
-                content:          '';
-                display:          block;
-                position:         absolute;
-                z-index:          -1;
-                top:              50%;
-                left:             50%;
-                width:            1.2em;
-                height:           1.2em;
-                transform:        translate(-50%, -50%);
-                opacity:          .25;
-                background-color: prop(--colors --button --bg);
-            }
-        }
-
-        @include element('prev') {
-            left: 0;
-        }
-
-        @include element('next') {
-            right: 0;
-        }
-    }
-}
diff --git a/assets/css/components/_note.scss b/assets/css/components/_note.scss
deleted file mode 100644
index 1879ea9..0000000
--- a/assets/css/components/_note.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-@include namespace('note') {
-    @include store((
-        --colors: (
-            --fg: prop(--colors --accent --strong, $global: true),
-            --bg: prop(--colors --accent --faint, $global: true),
-        ),
-        --dims: (
-            --pad-x: 1em,
-            --pad-y: .7em
-        )
-    ));
-
-    @include component(namespace()) {
-        margin-top:       $line-height * 1rem;
-        padding:          prop(--dims --pad-y) prop(--dims --pad-x);
-        background-color: prop(--colors --bg);
-        color:            prop(--colors --fg);
-
-        :first-child {
-            margin-top: 0;
-        }
-    }
-}
diff --git a/assets/css/layouts/_card-list.scss b/assets/css/layouts/_card-list.scss
index a53b771..96f9060 100644
--- a/assets/css/layouts/_card-list.scss
+++ b/assets/css/layouts/_card-list.scss
@@ -1,37 +1,38 @@
-@include namespace('card-list') {
-    @include store((
+@use 'iro-sass/src/index' as iro;
+@use 'iro-design/src/functions' as fn;
+
+@include iro.props-namespace('card-list') {
+    @include iro.props-store((
         --dims: (
-            --col-width: 17em
+            --margin-top: fn.global-dim(--size --600),
+            --spacing:    fn.global-dim(--size --200),
+            --col-width:  17em,
         )
-    ));
+    ), 'dims');
 
-    @include layout(namespace()) {
-        margin-top: $line-height * 2rem;
+    @include iro.bem-layout(iro.props-namespace()) {
+        margin-top: fn.dim(--margin-top);
         font-size:  1rem;
 
-        @include element('cards') {
+        @include iro.bem-elem('cards') {
             display:        flex;
             flex-direction: column;
             gap:            2px;
-            margin-top:     $line-height * .625rem;
+            margin-top:     fn.dim(--spacing);
 
-            @include modifier('grid', 'gallery') {
+            @include iro.bem-modifier('grid', 'gallery') {
                 display:               grid;
-                grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr));
+                grid-template-columns: repeat(auto-fill, minmax(fn.dim(--col-width), 1fr));
                 align-items:           start;
             }
 
-            @include modifier('grid') {
+            @include iro.bem-modifier('grid') {
                 gap: 6px;
             }
 
-            @include modifier('gallery') {
+            @include iro.bem-modifier('gallery') {
                 gap: 20px;
             }
-
-            @media print {
-                filter: none;
-            }
         }
     }
 }
diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss
deleted file mode 100644
index ae23042..0000000
--- a/assets/css/layouts/_container.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-@include namespace('container') {
-    @include store((
-        --dims: (
-            --pad-x: 2rem,
-            --pad-y: 4rem,
-        )
-    ));
-
-    @include store((
-        --dims: (
-            --pad-x: 1rem,
-            --pad-y: 3rem,
-        )
-    ), 'sm');
-
-    @include layout(namespace()) {
-        @include modifier('content') {
-            max-width:    $content--width;
-            margin-right: auto;
-            margin-left:  auto;
-        }
-
-        @include modifier('pad-x') {
-            padding-right: prop(--dims --pad-x);
-            padding-left:  prop(--dims --pad-x);
-        }
-
-        @include modifier('pad-y') {
-            padding-top:    prop(--dims --pad-y);
-            padding-bottom: prop(--dims --pad-y);
-        }
-    }
-}
diff --git a/assets/css/layouts/_media.scss b/assets/css/layouts/_media.scss
new file mode 100644
index 0000000..c4ad222
--- /dev/null
+++ b/assets/css/layouts/_media.scss
@@ -0,0 +1,26 @@
+@use 'iro-sass/src/index' as iro;
+@use 'iro-design/src/functions' as fn;
+
+@include iro.props-namespace('media') {
+    @include iro.props-store((
+        --dims: (
+            --pad-x: fn.global-dim(--size --200),
+            --pad-y: fn.global-dim(--size --150),
+
+            --75: (
+                --pad-x: fn.global-dim(--size --150),
+                --pad-y: fn.global-dim(--size --85),
+            ),
+
+            --200: (
+                --pad-x: fn.global-dim(--size --450),
+                --pad-y: fn.global-dim(--size --225),
+            ),
+            
+            --300: (
+                --pad-x: fn.global-dim(--size --450),
+                --pad-y: fn.global-dim(--size --225),
+            )
+        )
+    ), 'dims');
+}
diff --git a/assets/css/objects/_badge.scss b/assets/css/objects/_badge.scss
deleted file mode 100644
index 216bb89..0000000
--- a/assets/css/objects/_badge.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-@include namespace('badge') {
-    @include store((
-        --colors: (
-            --fg: prop(--colors --bg-hi, $global: true),
-            --bg: prop(--colors --fg-lo, $global: true),
-        ),
-        --dims: (
-            --pad-x: .6em,
-            --pad-y: .2em
-        )
-    ));
-
-    @include object(namespace()) {
-        display:          inline-block;
-        padding:          prop(--dims --pad-y) prop(--dims --pad-x);
-        background-color: prop(--colors --bg);
-        color:            prop(--colors --fg);
-        font-size:        iro-px-to-rem(14px);
-
-        &::selection {
-            background-color: prop(--colors --select --inverted --bg, $global: true);
-            color:            prop(--colors --select --inverted --fg, $global: true);
-        }
-    }
-}
diff --git a/assets/css/objects/_icon.scss b/assets/css/objects/_icon.scss
deleted file mode 100644
index 15389f5..0000000
--- a/assets/css/objects/_icon.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-@include namespace('icon') {
-    @keyframes fall {
-        to {
-            transform: translateY(105vh) rotate(90deg);
-        }
-    }
-    
-    @include object(namespace()) {
-        display:         block;
-        width:           1em;
-        height:          1em;
-        stroke-width:    var(--icon-stroke-width, 1.5px);
-        stroke-linecap:  round;
-        stroke-linejoin: round;
-
-        @include modifier('inline') {
-            display:        inline-block;
-            vertical-align: -.1em;
-        }
-
-        @include modifier('snow') {
-            position:       fixed;
-            z-index:        1000;
-            top:            -1.2em;
-            width:          1em;
-            height:         1em;
-            animation:      fall linear forwards;
-            stroke-width:   2px;
-            color:          #fff;
-            pointer-events: none;
-        }
-    }
-}
diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss
deleted file mode 100644
index 1fc8166..0000000
--- a/assets/css/scopes/_body.scss
+++ /dev/null
@@ -1,83 +0,0 @@
-@include namespace('body') {
-    @include store((
-        --colors: (
-            --code: (
-                --fg: prop(--colors --accent --strong, $global: true),
-                --bg: prop(--colors --bg-hi, $global: true),
-            ),
-            --code-block: (
-                --fg: prop(--colors --fg, $global: true),
-                --bg: prop(--colors --bg-lo, $global: true),
-            ),
-            --blockquote: (
-                --border: prop(--colors --obj-hi, $global: true),
-            )
-        ),
-        --dims: (
-            --code: (
-                --pad-x: .3em,
-                --pad-y: .1em
-            ),
-            --code-block: (
-                --pad-x: 1em,
-                --pad-y: .7em
-            )
-        )
-    ));
-
-    @include store((
-        --colors: (
-            --code: (
-                --bg: prop(--colors --accent --faint, $global: true),
-            ),
-            --code-block: (
-                --bg: prop(--colors --bg-hi, $global: true),
-            ),
-        )
-    ), 'light');
-
-    @include scope(namespace()) {
-        @include element('meta') {
-            + h1 {
-                margin-top: $line-height * .5rem;
-            }
-        }
-
-        img {
-            max-width: 100%;
-        }
-
-        code {
-            padding:          prop(--dims --code --pad-y) prop(--dims --code --pad-x);
-            border-radius:    3px;
-            background-color: prop(--colors --code --bg);
-            color:            prop(--colors --code --fg);
-        }
-
-        blockquote {
-            margin:       ($line-height * 1rem) 0 0 1px;
-            padding-left: calc(#{prop(--dims --indent, $global: true)} - 3px);
-            border-left:  3px solid prop(--colors --blockquote --border);
-        }
-
-        pre {
-            margin:           ($line-height * 1rem) 0 0 0;
-            padding:          prop(--dims --code-block --pad-y) prop(--dims --code-block --pad-x);
-            background-color: prop(--colors --code-block --bg);
-            color:            prop(--colors --code-block --fg);
-
-            code {
-                display:          inline-block;
-                margin-right:     prop(--dims --code-block --pad-x);
-                padding:          0;
-                border-radius:    0;
-                background-color: transparent;
-                color:            currentColor;
-            }
-
-            @media print {
-                border: 2px solid currentColor;
-            }
-        }
-    }
-}
diff --git a/assets/css/scopes/_colored-links.scss b/assets/css/scopes/_colored-links.scss
deleted file mode 100644
index 9be0f93..0000000
--- a/assets/css/scopes/_colored-links.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-@include namespace('colored-links') {
-    @include store((
-        --colors: (
-            --link: (
-                --idle:    prop(--colors --link --colored --idle, $global: true),
-                --visited: prop(--colors --link --colored --visited, $global: true),
-            )
-        )
-    ));
-
-    @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
deleted file mode 100644
index bfd5caa..0000000
--- a/assets/css/scopes/_headlines.scss
+++ /dev/null
@@ -1,104 +0,0 @@
-@include namespace('headlines') {
-    @include store((
-        --colors: (
-            --link: (
-                --idle-fg:  prop(--colors --obj, $global: true),
-                --hover-fg: prop(--colors --fg-lo, $global: true),
-            ),
-            --emph: (
-                --bg:      prop(--colors --bg-hi, $global: true),
-                --body-bg: prop(--colors --bg-hi, $global: true),
-            )
-        )
-    ));
-
-    @include store((
-        --colors: (
-            --emph: (
-                --body-bg: prop(--colors --bg, $global: true),
-            )
-        )
-    ), 'light');
-
-    @include scope(namespace()) {
-        h1,
-        h2,
-        h3 {
-            font-family:           $font-fam--large;
-            font-weight:           600;
-            letter-spacing:        normal;
-            line-height:           1.4;
-            text-transform:        none;
-            font-feature-settings: 'ss02' 1;
-        }
-
-        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);
-        }
-
-        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
-            );
-        }
-
-        @include element('link') {
-            display:        none;
-            margin:         -.5rem 0;
-            padding:        .5rem;
-            vertical-align: -.02em;
-
-            svg {
-                width:  px-to-em(12px);
-                height: px-to-em(12px);
-            }
-
-            &:link,
-            &:visited {
-                color: prop(--colors --link --idle-fg);
-
-                &:hover {
-                    color: prop(--colors --link --hover-fg);
-                }
-            }
-        }
-
-        h1,
-        h2,
-        h3,
-        h4,
-        h5,
-        h6 {
-            &:hover {
-                @include element('link') {
-                    display: inline-block;
-                }
-            }
-        }
-    }
-}
diff --git a/assets/css/scopes/_intro.scss b/assets/css/scopes/_intro.scss
deleted file mode 100644
index 6d4ac14..0000000
--- a/assets/css/scopes/_intro.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@include namespace('intro') {
-    @include scope(namespace()) {
-        h1 + p {
-            font-size:  px-to-em(20px, 18px);
-            font-style: italic;
-        }
-    }
-}
diff --git a/assets/css/scopes/_invisible-links.scss b/assets/css/scopes/_invisible-links.scss
deleted file mode 100644
index e4d149e..0000000
--- a/assets/css/scopes/_invisible-links.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@include namespace('invisible-links') {
-    @include scope(namespace()) {
-        :link,
-        :visited {
-            color:           currentColor;
-            text-decoration: none;
-
-            &:hover {
-                text-decoration: underline;
-            }
-        }
-    }
-}
diff --git a/assets/css/scopes/_small.scss b/assets/css/scopes/_small.scss
index f7aa61c..a4cc596 100644
--- a/assets/css/scopes/_small.scss
+++ b/assets/css/scopes/_small.scss
@@ -1,16 +1,25 @@
-@include namespace('small') {
-    @include store((
+@use 'iro-sass/src/index' as iro;
+@use 'iro-design/src/functions' as fn;
+
+@include iro.props-namespace('small') {
+    @include iro.props-store((
         --colors: (
-            --fg: prop(--colors --fg-hi, $global: true),
+            --fg: fn.global-color(--fg-hi),
+        ),
+    ), 'colors');
+
+    @include iro.props-store((
+        --dims: (
+            --margin-top: fn.global-dim(--size --75),
         )
-    ));
+    ), 'dims');
 
-    @include scope(namespace()) {
-        color:       prop(--colors --fg);
+    @include iro.bem-scope(iro.props-namespace()) {
+        color:       fn.color(--fg);
         line-height: 1.4;
 
         p {
-            margin-top: $line-height * .25rem;
+            margin-top: fn.dim(--margin-top);
         }
     }
 }
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 0b8f75c..1184bb2 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -1,52 +1,25 @@
-@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';
+@use 'iro-design/src/declare-vars' as iro-vars;
+@use 'declare-vars';
 
-@import 'vars';
-@import 'functions';
-@import 'fonts';
-@import 'basics';
+@use 'iro-design/src/base' as iro-base;
+@use 'functions';
+@use 'fonts';
+@use 'base';
 
-@import 'layouts/container';
+@use 'iro-design/src/layouts';
+@use 'layouts/media';
+@use 'layouts/card-list';
 
-@import 'objects/icon';
-@import 'objects/badge';
+@use 'iro-design/src/objects';
 
-@import 'components/header';
-@import 'components/footer';
-@import 'components/card';
-@import 'components/note';
-@import 'components/lightbox';
-@import 'components/hnav';
+@use 'components/footer';
+@use 'components/header';
+@use 'components/hnav';
+@use 'components/card';
 
-@import 'layouts/card-list';
+@use 'iro-design/src/scopes';
+@use 'scopes/small';
 
-@import 'scopes/colored-links';
-@import 'scopes/invisible-links';
-@import 'scopes/headlines';
-@import 'scopes/small';
-@import 'scopes/body';
-@import 'scopes/intro';
+@use 'iro-design/src/utils';
 
-@import 'utils';
-
-:root {
-    @include assign;
-
-    @each $breakpoint in map-keys($breakpoints) {
-        @include media('<=#{$breakpoint}') {
-            @include assign($breakpoint);
-        }
-    }
-
-    @media (prefers-color-scheme: light) {
-        @include assign('light');
-    }
-
-    @media print {
-        @include assign('light');
-        @include assign('print');
-    }
-}
+@use 'iro-design/src/apply-vars';
diff --git a/assets/fonts/GaretVariable.ttf b/assets/fonts/GaretVariable.ttf
index 2f0a27d..6de6af5 100644
Binary files a/assets/fonts/GaretVariable.ttf and b/assets/fonts/GaretVariable.ttf differ
-- 
cgit v1.2.3-70-g09d2