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/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 --
 6 files changed, 150 insertions(+), 226 deletions(-)
 delete mode 100644 assets/css/components/_hlist.scss
 delete mode 100644 assets/css/components/_spacer.scss

(limited to 'assets/css/components')

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;
-}
-- 
cgit v1.2.3-70-g09d2