From 6e0a7ea009b08983f2966d51fe4438681c0863c3 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Fri, 26 Mar 2021 23:17:56 +0100 Subject: WIP: Redesign --- assets/css/_basics.scss | 2 +- assets/css/_vars.scss | 8 ++------ assets/css/components/_nav.scss | 3 +-- assets/css/layouts/_landing.scss | 7 +++++-- 4 files changed, 9 insertions(+), 11 deletions(-) (limited to 'assets/css') diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss index d05bc36..3e67b76 100644 --- a/assets/css/_basics.scss +++ b/assets/css/_basics.scss @@ -30,7 +30,7 @@ html { body { margin: 0; - padding: prop(--dims --nav --height, $global: true) 0 0; + padding: prop(--dims --outer, $global: true) 0 0; } pre, diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss index 18cebc6..1063dc8 100644 --- a/assets/css/_vars.scss +++ b/assets/css/_vars.scss @@ -30,9 +30,7 @@ $gray6: hsl(220, 0%, 100%); @include store(( --dims: ( - --nav: ( - --height: 4.5rem - ) + --outer: 4.5rem, ), --colors: ( --bg-hi: $gray0, // Darker background @@ -64,9 +62,7 @@ $gray6: hsl(220, 0%, 100%); @include store(( --dims: ( - --nav: ( - --height: 3.5rem - ) + --outer: 4rem ), ), 'sm'); diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss index 900b4f2..d0a255e 100644 --- a/assets/css/components/_nav.scss +++ b/assets/css/components/_nav.scss @@ -2,7 +2,6 @@ @include store(( --dims: ( --font-size: 15px, - --height: prop(--dims --nav --height, $global: true), --pad-x: 2.5rem, --item: ( --pad-x: 1rem, @@ -52,7 +51,7 @@ z-index: 10000; top: 0; left: 0; - height: prop(--dims --height); + height: prop(--dims --outer, $global: true); padding: 0 prop(--dims --pad-x); background-color: prop(--colors --bg); font-size: prop(--dims --font-size); diff --git a/assets/css/layouts/_landing.scss b/assets/css/layouts/_landing.scss index 7683d44..03af39f 100644 --- a/assets/css/layouts/_landing.scss +++ b/assets/css/layouts/_landing.scss @@ -10,9 +10,11 @@ @include layout(namespace()) { display: flex; + box-sizing: border-box; flex-direction: row; align-items: center; min-height: 100%; + padding-bottom: prop(--dims --outer, $global: true); @include element('banner') { flex-shrink: 1.2; @@ -36,8 +38,9 @@ } @include media('<=md') { - display: block; - height: auto; + display: block; + height: auto; + padding-bottom: 0; @include element('banner', 'content') { width: auto; -- cgit v1.2.3-70-g09d2