CSS/Markup improvements

4 files changed, 50 insertions, 21 deletions

diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index 066a00d..0a64f1f 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -13,6 +13,7 @@
             --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),
@@ -24,6 +25,7 @@
         --colors: (
             --bg:     prop(--colors --bg-hi, $global: true),
             --unread: prop(--colors --bg-lo, $global: true),
+            --border: prop(--colors --bg-lo, $global: true),
         )
     ), 'light');
 
@@ -98,6 +100,20 @@
                 width:       100%;
             }
 
+            /*@include modifier('separator') {
+                align-self:     stretch;
+                padding-top:    0;
+                padding-bottom: 0;
+
+                &::before {
+                    content:          '';
+                    display:          block;
+                    width:            1px;
+                    height:           100%;
+                    background-color: prop(--colors --border);
+                }
+            }*/
+
             @include modifier('indicator') {
                 transition: color .2s;
                 color:      prop(--colors --unread);
diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss
index f3d3276..fb3a51e 100644
--- a/assets/css/components/_outer-button.scss
+++ b/assets/css/components/_outer-button.scss
@@ -3,7 +3,7 @@
         --colors: (
             --fg:     prop(--colors --bg-hi, $global: true),
             --bg:     prop(--colors --fg-lo, $global: true),
-            --border: rgba(#000, .1),
+            --border: prop(--colors --fg, $global: true),
             --hover: (
                 --bg: prop(--colors --accent --color, $global: true),
                 --fg: prop(--colors --bg-hi, $global: true),
@@ -18,12 +18,6 @@
         )
     ));
 
-    @include store((
-        --colors: (
-            --border: rgba(#fff, .1),
-        )
-    ), 'light');
-
     @include component(namespace()) {
         display:          flex;
         height:           prop(--dims --outer, $global: true);
@@ -72,7 +66,7 @@
             height:        100%;
             padding-right: prop(--dims --pad-x);
             padding-left:  prop(--dims --pad-x);
-            transition:    border-color .2s;
+            transition:    border-left-color .2s;
             font-size:     1 / 16 * 14em;
             line-height:   prop(--dims --outer, $global: true);
             white-space:   nowrap;
diff --git a/assets/css/layouts/_landing.scss b/assets/css/layouts/_landing.scss
index 500849e..a81b105 100644
--- a/assets/css/layouts/_landing.scss
+++ b/assets/css/layouts/_landing.scss
@@ -12,6 +12,8 @@
         display:        flex;
         flex-direction: row;
         align-items:    center;
+        margin-top:     auto;
+        margin-bottom:  auto;
 
         @include element('banner') {
             width:            70%;
diff --git a/assets/css/layouts/_section.scss b/assets/css/layouts/_section.scss
index e8b1617..80b8ca9 100644
--- a/assets/css/layouts/_section.scss
+++ b/assets/css/layouts/_section.scss
@@ -15,6 +15,13 @@
     @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;
@@ -26,26 +33,17 @@
             background-color: prop(--colors --body-bg);
         }
 
-        @include modifier('no-head') {
+        @include modifier('no-header') {
             padding-top: prop(--dims --outer, $global: true);
         }
 
-        @include element('head') {
+        @include element('header') {
             display:        flex;
             flex-direction: row;
-            justify-self:   flex-start;
+            align-items:    center;
+            height:         prop(--dims --outer, $global: true);
             font-size:      1 / 16 * 15em;
 
-            &::after {
-                content:      '';
-                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);
-            }
-
             @include modifier('sticky') {
                 position: sticky;
                 z-index:  9000;
@@ -53,5 +51,24 @@
                 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);
+        }
     }
 }