WIP: Redesign

11 files changed, 179 insertions, 189 deletions

diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index 1cd5547..740b293 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -1,28 +1,27 @@
 @font-face {
     font-family: 'IBM Plex Sans';
-    font-style: normal;
+    font-style:  normal;
     font-weight: normal;
-    src: //local('IBM Plex Sans'), 
-        url('/IBMPlexSans-Regular.woff2') format('woff2');
+    src:         url('/IBMPlexSans-Regular.woff2') format('woff2');
 }
 
 @font-face {
     font-family: 'IBM Plex Sans';
-    font-style: normal;
+    font-style:  normal;
     font-weight: bold;
-    src: url('/IBMPlexSans-Bold.woff2') format('woff2');
+    src:         url('/IBMPlexSans-Bold.woff2') format('woff2');
 }
 
 @font-face {
     font-family: 'Garet Variable';
-    font-style: normal;
+    font-style:  normal;
     font-weight: 50 950;
-    src: url('/GaretVariable.woff2') format('woff2-variations');
+    src:         url('/GaretVariable.woff2') format('woff2-variations');
 }
 
 ::selection {
     background-color: var(--select--bg);
-    color: var(--select--fg);
+    color:            var(--select--fg);
 }
 
 img::selection {
@@ -37,14 +36,14 @@ code {
 
 html {
     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;
+    color:            prop(--colors --fg);
+    font-family:      $font-fam--text;
+    font-size:        px-to-em($font-size, 16px);
+    line-height:      $line-height;
 }
 
 body {
-    margin: 0;
+    margin:  0;
     padding: 0;
 }
 
@@ -58,7 +57,7 @@ code {
 }
 
 pre {
-    margin: ($line-height * 1em) 0 0;
+    margin:     ($line-height * 1em) 0 0;
     overflow-x: auto;
 
     code {
@@ -67,27 +66,27 @@ pre {
 }
 
 strong {
-    color: prop(--colors --fg-lo);
+    color:       prop(--colors --fg-lo);
     font-weight: bold;
 }
 
 ul,
 ol {
-    margin: ($line-height * 1em) 0 0;
-    padding: 0;
+    margin:     ($line-height * 1em) 0 0;
+    padding:    0;
     list-style: none;
 }
 
 li {
-    position: relative;
+    position:     relative;
     padding-left: $subcontent--indent;
 
     &::before {
-        display: inline-block;
-        position: absolute;
-        width: $subcontent--indent;
+        display:     inline-block;
+        position:    absolute;
+        width:       $subcontent--indent;
         margin-left: -1 * $subcontent--indent;
-        color: prop(--colors --fg-hi);
+        color:       prop(--colors --fg-hi);
         font-family: $font-fam--mono;
     }
 }
@@ -113,7 +112,7 @@ ul ul {
 }
 
 dl {
-    margin: ($line-height * 1em) 0 0;
+    margin:  ($line-height * 1em) 0 0;
     padding: 0;
 }
 
@@ -123,12 +122,12 @@ dd {
 }
 
 dt {
-    color: prop(--colors --fg-lo);
+    color:       prop(--colors --fg-lo);
     font-weight: bold;
 
     &::after {
-        content: ':';
-        color: prop(--colors --fg);
+        content:     ':';
+        color:       prop(--colors --fg);
         font-weight: normal;
     }
 }
@@ -143,11 +142,11 @@ 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;
+    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,
@@ -170,22 +169,22 @@ h1 {
 }
 
 p {
-    margin: ($line-height * 1em) 0 0;
+    margin:  ($line-height * 1em) 0 0;
     hyphens: auto;
 }
 
 :link,
 :visited {
     position: relative;
-    z-index: 1;
-    margin: 0 -.3em;
-    padding: .2em .3em;
-    color: var(--link--idle--fg);
+    z-index:  1;
+    margin:   0 -.3em;
+    padding:  .2em .3em;
+    color:    var(--link--idle--fg);
 
     &:hover {
         background-color: var(--link--hover--bg);
-        color: var(--link--hover--fg);
-        text-decoration: none;
+        color:            var(--link--hover--fg);
+        text-decoration:  none;
     }
 
     strong {
@@ -194,15 +193,15 @@ p {
 }
 
 hr {
-    height: 1px;
-    margin: ($line-height * 1em) 0;
-    border: 0;
+    height:           1px;
+    margin:           ($line-height * 1em) 0;
+    border:           0;
     background-color: prop(--colors --obj);
 }
 
 blockquote,
 pre {
-    margin: ($line-height * 1em) 0 0 1px;
+    margin:       ($line-height * 1em) 0 0 1px;
     padding-left: calc(#{$subcontent--indent} - 3px);
-    border-left: 2px solid prop(--colors --obj);
+    border-left:  2px solid prop(--colors --obj);
 }
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index ae8a7a8..3461b81 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -13,12 +13,12 @@ $unit-intervals: (
     '':    0
 );
 
-$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;
+$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%);
@@ -43,6 +43,14 @@ $gray5: hsl(220, 0%, 100%);
     )
 ));
 
+@each $breakpoint in map-keys($breakpoints) {
+    @include media('<=#{$breakpoint}') {
+        @include store((
+            --colors: ()
+        ), $breakpoint);
+    }
+}
+
 :root {
     --heading--fg: var(--colors--fg-lo);
 
diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss
index 8fcbc98..db30fcd 100644
--- a/assets/css/components/_footer.scss
+++ b/assets/css/components/_footer.scss
@@ -9,9 +9,9 @@
     ));
 
     @include component(namespace()) {
-        padding-top: prop(--dims --pad-y);
+        padding-top:    prop(--dims --pad-y);
         padding-bottom: prop(--dims --pad-y);
-        color: prop(--colors --fg);
-        text-align: right;
+        color:          prop(--colors --fg);
+        text-align:     right;
     }
 }
diff --git a/assets/css/components/_hero.scss b/assets/css/components/_hero.scss
index 6c497a1..3d8890e 100644
--- a/assets/css/components/_hero.scss
+++ b/assets/css/components/_hero.scss
@@ -1,6 +1,7 @@
 @include namespace('hero') {
     @include store((
         --colors: (
+            --emph-fg: prop(--colors --accent, $global: true),
             --back-fg: prop(--colors --bg-hi, $global: true)
         )
     ));
@@ -8,42 +9,44 @@
     @include component(namespace()) {
         display:         flex;
         position:        relative;
-        flex-direction:  column;
         align-items:     center;
         justify-content: center;
         text-align:      center;
 
-        @include element('title', 'backtitle') {
-            margin:         0 auto;
+        @include element('title') {
+            margin-top:     0;
             font-family:    $font-fam--large;
             text-transform: none;
-        }
 
-        @include element('emph') {
-            color:       prop(--colors --accent, $global: true);
-            font-weight: 500;
-        }
+            @include modifier('front') {
+                max-width:   7em;
+                font-size:   2.5rem;
+                font-weight: 200;
+            }
 
-        @include element('title') {
-            max-width:   11em;
-            font-weight: 200;
+            @include modifier('back') {
+                position:  absolute;
+                z-index:   -10;
+                transform: translateY(-.08em);
+                color:     prop(--colors --back-fg);
+            }
         }
 
-        @include element('backtitle') {
-            position:  absolute;
-            z-index:   -10;
-            transform: translateY(-.08em);
-            color:     prop(--colors --back-fg);
+        @include element('emph') {
+            color:       prop(--colors --emph-fg);
+            font-weight: 500;
         }
 
         @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));
-            }
+                @include modifier('front') {
+                    padding:   iro-responsive-set((7rem, 7rem, 10rem)) 0;
+                    font-size: iro-responsive-set((2.2rem, 3rem, 3.5rem));
+                }
 
-            @include element('backtitle') {
-                font-size: iro-responsive-set((12rem, 14rem, 16rem));
+                @include modifier('back') {
+                    font-size: iro-responsive-set((12rem, 14rem, 16rem));
+                }
             }
         }
     }
diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss
index 2472706..8fc4564 100644
--- a/assets/css/components/_nav.scss
+++ b/assets/css/components/_nav.scss
@@ -2,13 +2,10 @@
     @include store((
         --dims: (
             --font-size: 15px,
-            --pad-y: 1em,
-            --pad-y-sm: .5em,
+            --pad-y:     1em,
             --item: (
                 --pad-x: 1em,
-                --pad-x-sm: .75em,
                 --pad-y: 1em,
-                --pad-y-sm: .75em,
             ),
         ),
         --colors: (
@@ -34,69 +31,63 @@
         )
     ));
 
+    @include store((
+        --dims: (
+            --pad-y: .5em,
+            --item: (
+                --pad-x: .75em,
+                --pad-y: .75em,
+            ),
+        )
+    ), 'sm');
+
     @include component(namespace()) {
-        display: flex;
+        display:     flex;
         align-items: center;
-        padding: prop(--dims --pad-y) 0;
-        font-size: prop(--dims --font-size);
+        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;
+            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);
+                    color:            prop(--colors --logo --hover --fg);
                 }
             }
         }
 
         @include element('logo-symbol') {
             display: block;
-            width:  $line-height * .9em;
-            height: $line-height * 1em;
+            width:   $line-height * .9em;
+            height:  $line-height * 1em;
         }
 
         @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);
+            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;
+            text-transform:  uppercase;
 
             &:hover {
                 background-color: transparent;
-                color: prop(--colors --item --hover --fg);
-                text-decoration: underline;
+                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;
-            }
-        }
-
-        @include media('<=sm') {
-            padding: prop(--dims --pad-y-sm) 0;
-
-            @include element('logo', 'item') {
-                padding-top: prop(--dims --item --pad-y-sm);
-                padding-bottom: prop(--dims --item --pad-y-sm);
-            }
-
-            @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);
+                color:        prop(--colors --item --active --fg);
+                font-weight:  bold;
             }
         }
     }
diff --git a/assets/css/components/_page.scss b/assets/css/components/_page.scss
deleted file mode 100644
index ef39061..0000000
--- a/assets/css/components/_page.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@include component('page') {
-    //
-}
diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss
index 2bb4d80..2e102ee 100644
--- a/assets/css/layouts/_container.scss
+++ b/assets/css/layouts/_container.scss
@@ -2,35 +2,30 @@
     @include store((
         --dims: (
             --pad-x: 2rem,
-            --pad-x-sm: 1rem,
-            --pad-y: $line-height * 2rem,
-            --pad-y-sm: $line-height * 1rem
+            --pad-y: $line-height * 2rem
         )
     ));
 
+    @include store((
+        --dims: (
+            --pad-x: 1rem,
+            --pad-y: $line-height * 1rem
+        )
+    ), 'sm');
+
     @include layout(namespace()) {
         padding-right: prop(--dims --pad-x);
-        padding-left: prop(--dims --pad-x);
+        padding-left:  prop(--dims --pad-x);
 
         @include modifier('content') {
-            max-width: $content--width;
+            max-width:    $content--width;
             margin-right: auto;
-            margin-left: auto;
+            margin-left:  auto;
         }
 
         @include modifier('pad-v') {
-            padding-top: prop(--dims --pad-y);
+            padding-top:    prop(--dims --pad-y);
             padding-bottom: prop(--dims --pad-y);
         }
-
-        @include media('<=sm') {
-            padding-right: prop(--dims --pad-x-sm);
-            padding-left: prop(--dims --pad-x-sm);
-
-            @include modifier('pad-v') {
-                padding-top: prop(--dims --pad-y-sm);
-                padding-bottom: prop(--dims --pad-y-sm);
-            }
-        }
     }
 }
diff --git a/assets/css/layouts/_site.scss b/assets/css/layouts/_site.scss
new file mode 100644
index 0000000..2c06606
--- /dev/null
+++ b/assets/css/layouts/_site.scss
@@ -0,0 +1,46 @@
+@include namespace('site') {
+    @include store((
+        --dims: (
+            --outer-pad-x: 6rem,
+            --inner-pad-x: 2rem,
+            --pad-y: 6rem,
+        )
+    ));
+
+    @include layout(namespace()) {
+        display:         flex;
+        flex-direction:  row;
+        justify-content: space-around;
+
+        @include element('col') {
+            box-sizing: border-box;
+            flex:       0 0 auto;
+            width:      100%;
+            min-width:  0;
+            max-width:  35rem;
+            height:     100%;
+            padding:    prop(--dims --pad-y) prop(--dims --inner-pad-x) prop(--dims --pad-y) prop(--dims --outer-pad-x);
+
+            @include next-twin-element {
+                flex:          1 1 auto;
+                max-width:     45rem;
+                height:        auto;
+                padding-right: prop(--dims --outer-pad-x);
+                padding-left:  prop(--dims --inner-pad-x);
+            }
+        }
+
+        @include media('<=sm') {
+            display: block;
+
+            @include element('col') {
+                width:  auto;
+                height: auto;
+
+                @include next-twin-element {
+                    width: auto;
+                }
+            }
+        }
+    }
+}
diff --git a/assets/css/scopes/_code.scss b/assets/css/scopes/_code.scss
deleted file mode 100644
index 3f50ce3..0000000
--- a/assets/css/scopes/_code.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-@include scope('code') {
-    @include modifier('highlight') {
-        pre {
-            color: var(--fg-lo);
-        }
-    }
-
-    pre {
-        font-size: 1em;
-        line-height: $line-height;
-    }
-
-    /* stylelint-disable selector-class-pattern */
-
-    .c {
-        color: var(--fg-hi);
-    }
-
-    .kt,
-    .k,
-    .kr,
-    .o,
-    .si,
-    .p {
-        color: var(--fg);
-    }
-}
diff --git a/assets/css/scopes/_page.scss b/assets/css/scopes/_page.scss
deleted file mode 100644
index 70489fb..0000000
--- a/assets/css/scopes/_page.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-@include scope('page-content') {
-    :link {
-        color: var(--page--link--idle--fg);
-    }
-
-    :visited {
-        color: var(--page--link--visited--fg);
-    }
-
-    :link,
-    :visited {
-        &:hover {
-            background-color: var(--page--link--hover--bg);
-            color: var(--page--link--hover--fg);
-        }
-    }
-
-    img {
-        max-width: 100%;
-    }
-    
-    > :first-child {
-        margin-top: 0;
-    }
-}
diff --git a/assets/css/style.scss b/assets/css/style.scss
index dad774a..c8fd0c1 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -9,17 +9,20 @@
 @import 'basics';
 
 @import 'components/nav';
-@import 'components/page';
 @import 'components/hero';
 @import 'components/footer';
 
+@import 'layouts/site';
 @import 'layouts/container';
 
-@import 'scopes/code';
-@import 'scopes/page';
-
 @import 'utils';
 
 :root {
     @include assign;
+
+    @each $breakpoint in map-keys($breakpoints) {
+        @include media('<=#{$breakpoint}') {
+            @include assign($breakpoint);
+        }
+    }
 }