Re-implemented design via iro-design

6 files changed, 140 insertions, 279 deletions

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