From 76d2c735a474f5f8aad9b7ca9735393069913c10 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Tue, 26 Oct 2021 14:57:48 +0200 Subject: chore: change header/footer styles The branding takes a less space. I add box shadows and border to differentiate the header from the footer and the content. --- htdocs/src/scss/layout/_header.scss | 21 ++++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) (limited to 'htdocs/src/scss/layout/_header.scss') diff --git a/htdocs/src/scss/layout/_header.scss b/htdocs/src/scss/layout/_header.scss index 622a100..9adbebe 100644 --- a/htdocs/src/scss/layout/_header.scss +++ b/htdocs/src/scss/layout/_header.scss @@ -1,21 +1,32 @@ @use "../abstracts/functions" as fun; +@use "../abstracts/mixins" as mix; .header { background: fun.get-var(color-bg-secondary); padding: fun.get-var(spacing-md) clamp(#{fun.get-var(spacing-md)}, 3vw, #{fun.get-var(spacing-lg)}); z-index: 5; + + @include mix.media("screen") { + @include mix.dimensions("lg") { + box-shadow: 0 -1px 2px 0 fun.get-var(color-shadow); + } + } } .branding { - margin-bottom: fun.get-var(spacing-sm); + margin-bottom: clamp( + #{fun.get-var(spacing-sm)}, + 3vw, + #{fun.get-var(spacing-md)} + ); text-align: center; &__title { font-family: fun.get-var(font-family-secondary); - font-size: fun.get-var(font-size-3xl); + font-size: fun.get-var(font-size-2xl); font-weight: 500; - margin: fun.get-var(spacing-xs) 0; + margin: fun.get-var(spacing-xs) 0 fun.get-var(spacing-3xs); } &__link { @@ -71,10 +82,10 @@ &__link { display: block; - height: clamp(#{fun.convert-px(75)}, 15vmin, #{fun.convert-px(90)}); + height: clamp(#{fun.convert-px(75)}, 15vmin, #{fun.convert-px(85)}); transform-style: preserve-3d; transition: all 0.6s linear 0s; - width: clamp(#{fun.convert-px(75)}, 15vmin, #{fun.convert-px(90)}); + width: clamp(#{fun.convert-px(75)}, 15vmin, #{fun.convert-px(85)}); &:hover, &:focus { -- cgit v1.2.3