From 8177471f70a517e78b4470cd01c375ed30121102 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Wed, 10 Nov 2021 21:20:58 +0100
Subject: Simplified home page

---
 assets/css/_basics.scss                    | 11 ++--
 assets/css/_vars.scss                      |  2 +-
 assets/css/components/_header.scss         | 48 +++++++++++++---
 assets/css/components/_landing-banner.scss | 49 ----------------
 assets/css/components/_outer-button.scss   | 89 ------------------------------
 assets/css/components/_post-list.scss      | 17 ++++++
 assets/css/components/_project.scss        | 68 -----------------------
 assets/css/layouts/_card-grid.scss         | 22 --------
 assets/css/layouts/_landing.scss           | 54 ------------------
 assets/css/layouts/_project-grid.scss      | 22 --------
 assets/css/layouts/_section.scss           | 74 -------------------------
 assets/css/style.scss                      |  8 ---
 12 files changed, 62 insertions(+), 402 deletions(-)
 delete mode 100644 assets/css/components/_landing-banner.scss
 delete mode 100644 assets/css/components/_outer-button.scss
 delete mode 100644 assets/css/components/_project.scss
 delete mode 100644 assets/css/layouts/_card-grid.scss
 delete mode 100644 assets/css/layouts/_landing.scss
 delete mode 100644 assets/css/layouts/_project-grid.scss
 delete mode 100644 assets/css/layouts/_section.scss

(limited to 'assets')

diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index 4fe73a2..71beceb 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -32,12 +32,6 @@ body {
     padding: 0;
 }
 
-main {
-    display:        flex;
-    flex-direction: column;
-    min-height:     100vh;
-}
-
 pre,
 code {
     font-family: $font-fam--mono;
@@ -156,6 +150,11 @@ h6 {
     & + & {
         margin-top: $line-height * 1rem;
     }
+
+    strong {
+        color:       prop(--colors --accent --color, $global: true);
+        font-weight: 550;
+    }
 }
 
 p {
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 4b60518..ebbefad 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -22,7 +22,7 @@ $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:  42rem;
+$content--width:  46rem;
 
 @include iro-execute {
     $gray0: hsl(220, 5%, 7%);
diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss
index e74780b..81e4d4f 100644
--- a/assets/css/components/_header.scss
+++ b/assets/css/components/_header.scss
@@ -1,23 +1,53 @@
 @include namespace('header') {
     @include store((
         --colors: (
-            --fg: prop(--colors --fg-lo, $global: true),
-            --bg: prop(--colors --bg-hi, $global: true),
+            --fg: prop(--colors --fg-hi, $global: true),
             --hover: (
-                --fg: prop(--colors --bg-hi, $global: true),
-                --bg: prop(--colors --accent --color, $global: true),
+                --fg: prop(--colors --fg-lo, $global: true),
+            ),
+            --active: (
+                --fg: prop(--colors --fg-lo, $global: true),
             )
+        ),
+        --dims: (
+            --height: 4rem,
+            --pad-x: .6rem,
         )
     ));
 
     @include component(namespace()) {
         display:         flex;
-        position:        fixed;
-        z-index:         10000;
-        top:             0;
-        left:            0;
         flex-direction:  row;
         justify-content: flex-start;
-        box-shadow:      prop(--dims --obj-shadow, $global: true) prop(--colors --obj-shadow, $global: true);
+        height:          prop(--dims --height);
+
+        @include element('item') {
+            padding:         0 prop(--dims --pad-x);
+            line-height:     prop(--dims --height);
+            color:           prop(--colors --fg);
+            text-decoration: none;
+
+            &:hover {
+                color: prop(--colors --hover --fg);
+            }
+
+            @include modifier('icon') {
+                display:         flex;
+                align-items:     center;
+                justify-content: center;
+                padding:         0;
+                width:           prop(--dims --height);
+            }
+
+            @include modifier('active') {
+                font-weight: bold;
+                color:       prop(--colors --active --fg);
+            }
+        }
+
+        @include element('icon') {
+            width:  1.5em;
+            height: 1.5em;
+        }
     }
 }
diff --git a/assets/css/components/_landing-banner.scss b/assets/css/components/_landing-banner.scss
deleted file mode 100644
index f1b8595..0000000
--- a/assets/css/components/_landing-banner.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-@include namespace('landing-banner') {
-    @include store((
-        --colors: (
-            --emph: (
-                --fg: prop(--colors --accent --color, $global: true),
-                --bg: prop(--colors --bg-hi, $global: true)
-            )
-        )
-    ));
-
-    @include component(namespace()) {
-        @include element('title') {
-            max-width:      7em;
-            margin-top:     0;
-            transform:      translateX(-.06em);
-            font-family:    $font-fam--large;
-            font-weight:    350;
-            line-height:    1.2;
-            text-transform: none;
-        }
-
-        @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('emph') {
-            color:       prop(--colors --emph --fg);
-            font-weight: 550;
-        }
-
-        @include media('<=md') {
-            @include element('title') {
-                max-width: none;
-            }
-        }
-
-        @include iro-responsive-env(('md', 'lg')) {
-            @include element('title') {
-                font-size: iro-responsive-set((2.6rem, 3.4rem));
-            }
-        }
-    }
-}
diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss
deleted file mode 100644
index fb3a51e..0000000
--- a/assets/css/components/_outer-button.scss
+++ /dev/null
@@ -1,89 +0,0 @@
-@include namespace('outer-button') {
-    @include store((
-        --colors: (
-            --fg:     prop(--colors --bg-hi, $global: true),
-            --bg:     prop(--colors --fg-lo, $global: true),
-            --border: prop(--colors --fg, $global: true),
-            --hover: (
-                --bg: prop(--colors --accent --color, $global: true),
-                --fg: prop(--colors --bg-hi, $global: true),
-            ),
-            --inverted: (
-                --fg: prop(--colors --fg-lo, $global: true),
-                --bg: prop(--colors --bg-hi, $global: true),
-            )
-        ),
-        --dims: (
-            --pad-x: 1.7rem,
-        )
-    ));
-
-    @include component(namespace()) {
-        display:          flex;
-        height:           prop(--dims --outer, $global: true);
-        transition:       background-color .2s, color .2s;
-        background-color: prop(--colors --bg);
-        color:            prop(--colors --fg);
-        font-size:        1rem;
-        font-weight:      700;
-        letter-spacing:   .5px;
-        text-decoration:  none;
-        text-transform:   uppercase;
-
-        @include modifier('inverted') {
-            background-color: prop(--colors --inverted --bg);
-            color:            prop(--colors --inverted --fg);
-        }
-
-        @include modifier('scroll-top') {
-            position: absolute;
-            right:    0;
-            bottom:   0;
-        }
-
-        @include element('icon') {
-            display:          flex;
-            position:         relative;
-            flex:             0 0 auto;
-            align-items:      center;
-            justify-content:  center;
-            width:            prop(--dims --outer, $global: true);
-            height:           100%;
-
-            @include next-element('content') {
-                margin-left: -1px;
-                border-left: 1px solid prop(--colors --border);
-            }
-        }
-
-        @include element('icon-symbol') {
-            display: block;
-            width:   1.5em;
-            height:  1.5em;
-        }
-
-        @include element('content') {
-            height:        100%;
-            padding-right: prop(--dims --pad-x);
-            padding-left:  prop(--dims --pad-x);
-            transition:    border-left-color .2s;
-            font-size:     1 / 16 * 14em;
-            line-height:   prop(--dims --outer, $global: true);
-            white-space:   nowrap;
-        }
-        
-        &:link,
-        &:visited {
-            &:hover {
-                background-color: prop(--colors --hover --bg);
-                color:            prop(--colors --hover --fg);
-
-                @include element('icon') {
-                    @include next-element('content') {
-                        border-left-color: transparent;
-                    }
-                }
-            }
-        }
-    }
-}
diff --git a/assets/css/components/_post-list.scss b/assets/css/components/_post-list.scss
index 7a3b8a0..5126589 100644
--- a/assets/css/components/_post-list.scss
+++ b/assets/css/components/_post-list.scss
@@ -7,6 +7,9 @@
             --meta: (
                 --fg: prop(--colors --fg-hi, $global: true),
             )
+        ),
+        --dims: (
+            --col-width: 17em
         )
     ));
 
@@ -39,5 +42,19 @@
                 margin-top: 1px;
             }
         }
+
+        @include modifier('grid') {
+            @include element('category-content') {
+                display:               grid;
+                grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr));
+                gap:                   $line-height * .5rem;
+            }
+
+            @include element('post') {
+                @include next-twin-element {
+                    margin-top: 0;
+                }
+            }
+        }
     }
 }
diff --git a/assets/css/components/_project.scss b/assets/css/components/_project.scss
deleted file mode 100644
index 5248e32..0000000
--- a/assets/css/components/_project.scss
+++ /dev/null
@@ -1,68 +0,0 @@
-@include namespace('project') {
-    @include store((
-        --colors: (
-            --bg: prop(--colors --bg-hi, $global: true),
-        )
-    ));
-
-    @include component(namespace()) {
-        position:   relative;
-        overflow:   hidden;
-        box-shadow: prop(--dims --obj-shadow, $global: true) prop(--colors --obj-shadow, $global: true);
-
-        &::before {
-            content:          '';
-            display:          block;
-            padding-top:      12em;
-            padding-bottom:   5vw;
-            background-color: prop(--colors --bg);
-        }
-
-        &:link,
-        &:visited {
-            color:           currentColor;
-            text-decoration: none;
-
-            &:hover,
-            &:focus {
-                @include element('picture') {
-                    opacity: .75;
-                    filter:  blur(0);
-                }
-
-                @include element('card') {
-                    transform:        translateY(#{prop(--card --dims --hover-offset, $global: true)});
-                    background-color: prop(--card --colors --hover --bg, $global: true);
-                    color:            prop(--card --colors --hover --fg, $global: true);
-
-                    * {
-                        color: currentColor;
-                    }
-                }
-            }
-        }
-
-        @include element('picture') {
-            display:         block;
-            position:        absolute;
-            z-index:         10;
-            top:             0;
-            left:            0;
-            width:           100%;
-            height:          100%;
-            object-fit:      cover;
-            object-position: center center;
-            transition:      opacity .2s;
-            mask-image:      iro-easing-gradient(linear, 340deg, rgba(#000, .75) 7em, ease, #000 26em);
-        }
-
-        @include element('card') {
-            position:  absolute;
-            z-index:   20;
-            right:     1em;
-            bottom:    1em;
-            min-width: 15em;
-            max-width: calc(100% - 2em);
-        }
-    }
-}
diff --git a/assets/css/layouts/_card-grid.scss b/assets/css/layouts/_card-grid.scss
deleted file mode 100644
index c9d927a..0000000
--- a/assets/css/layouts/_card-grid.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-@include namespace('card-grid') {
-    @include store((
-        --dims: (
-            --col-width: 17em
-        )
-    ));
-
-    @include layout(namespace()) {
-        display:               grid;
-        grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr));
-        gap:                   .6rem;
-        filter:                drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)});
-
-        @include element('card') {
-            box-shadow: none;
-        }
-
-        @include media('<=sm') {
-            grid-template-columns: 1fr;
-        }
-    }
-}
diff --git a/assets/css/layouts/_landing.scss b/assets/css/layouts/_landing.scss
deleted file mode 100644
index a81b105..0000000
--- a/assets/css/layouts/_landing.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-@include namespace('landing') {
-    @include store((
-        --dims: (
-            --banner-width: 30rem,
-        ),
-        --colors: (
-            --banner-bg: prop(--colors --bg, $global: true)
-        )
-    ));
-
-    @include layout(namespace()) {
-        display:        flex;
-        flex-direction: row;
-        align-items:    center;
-        margin-top:     auto;
-        margin-bottom:  auto;
-
-        @include element('banner') {
-            width:            70%;
-            max-width:        prop(--dims --banner-width);
-            background-color: prop(--colors --banner-bg);
-        }
-
-        @include element('content') {
-            width: 100%;
-        }
-
-        @include iro-responsive-env(('md', 'lg')) {
-            padding-right: iro-responsive-set((0, 3rem));
-            padding-left:  iro-responsive-set((0, 6rem));
-        }
-
-        @include media('<=md') {
-            display: block;
-
-            @include element('side') {
-                display: none;
-
-                @include sibling-element('side') {
-                    display: block;
-                }
-            }
-
-            @include element('banner', 'content') {
-                width:   auto;
-                padding: 0;
-            }
-
-            @include element('banner') {
-                max-width: none;
-            }
-        }
-    }
-}
diff --git a/assets/css/layouts/_project-grid.scss b/assets/css/layouts/_project-grid.scss
deleted file mode 100644
index 5ed983c..0000000
--- a/assets/css/layouts/_project-grid.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-@include namespace('project-grid') {
-    @include store((
-        --dims: (
-            --col-width: 20em
-        )
-    ));
-
-    @include layout(namespace()) {
-        display:               grid;
-        grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr));
-        gap:                   2rem;
-        filter:                drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)});
-
-        @include element('project') {
-            box-shadow: none;
-        }
-
-        @include media('<=sm') {
-            grid-template-columns: 1fr;
-        }
-    }
-}
diff --git a/assets/css/layouts/_section.scss b/assets/css/layouts/_section.scss
deleted file mode 100644
index 80b8ca9..0000000
--- a/assets/css/layouts/_section.scss
+++ /dev/null
@@ -1,74 +0,0 @@
-@include namespace('section') {
-    @include store((
-        --colors: (
-            --border:  prop(--colors --obj-hi, $global: true),
-            --body-bg: transparent,
-        )
-    ));
-
-    @include store((
-        --colors: (
-            --body-bg: prop(--colors --bg-hi, $global: true),
-        )
-    ), 'light');
-
-    @include layout(namespace()) {
-        position: relative;
-
-        @include modifier('flex') {
-            display:         flex;
-            flex-direction:  column;
-            align-items:     stretch;
-            justify-content: flex-start;
-        }
-
-        @include modifier('fullscreen') {
-            box-sizing:     border-box;
-            min-height:     100vh;
-            margin-bottom:  calc(-1 * #{prop(--dims --outer, $global: true)});
-            padding-bottom: prop(--dims --outer, $global: true);
-        }
-
-        @include modifier('body') {
-            background-color: prop(--colors --body-bg);
-        }
-
-        @include modifier('no-header') {
-            padding-top: prop(--dims --outer, $global: true);
-        }
-
-        @include element('header') {
-            display:        flex;
-            flex-direction: row;
-            align-items:    center;
-            height:         prop(--dims --outer, $global: true);
-            font-size:      1 / 16 * 15em;
-
-            @include modifier('sticky') {
-                position: sticky;
-                z-index:  9000;
-                top:      0;
-                left:     0;
-            }
-        }
-
-        /*@include element('footer') {
-            position:  absolute;
-            z-index:   10000;
-            right:     0;
-            bottom:    0;
-            height:    prop(--dims --outer, $global: true);
-            font-size: 1 / 16 * 15em;
-        }*/
-
-        @include element('header-separator') {
-            flex:         1 1 auto;
-            width:        100%;
-            height:       100%;
-            margin-top:   -1px;
-            margin-right: prop(--container --dims --pad-x, $global: true);
-            margin-left:  prop(--container --dims --pad-x, $global: true);
-            border-top:   1px solid prop(--colors --border);
-        }
-    }
-}
diff --git a/assets/css/style.scss b/assets/css/style.scss
index cd27f35..99d52c1 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -10,22 +10,14 @@
 @import 'basics';
 
 @import 'layouts/container';
-@import 'layouts/section';
-@import 'layouts/landing';
 
 @import 'objects/icon';
 
-@import 'components/outer-button';
 @import 'components/header';
-@import 'components/landing-banner';
 @import 'components/footer';
 @import 'components/card';
-@import 'components/project';
 @import 'components/post-list';
 
-@import 'layouts/card-grid';
-@import 'layouts/project-grid';
-
 @import 'scopes/colored-links';
 @import 'scopes/headlines';
 @import 'scopes/body';
-- 
cgit v1.2.3-70-g09d2