From 8e1e42fcb54c33816d00b26a949753e6c3c9a904 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sun, 21 Mar 2021 12:52:39 +0100 Subject: WIP: Redesign --- assets/css/components/_footer.scss | 6 ++-- assets/css/components/_hero.scss | 45 +++++++++++++----------- assets/css/components/_nav.scss | 71 +++++++++++++++++--------------------- assets/css/components/_page.scss | 3 -- 4 files changed, 58 insertions(+), 67 deletions(-) delete mode 100644 assets/css/components/_page.scss (limited to 'assets/css/components') 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') { - // -} -- cgit v1.2.3-70-g09d2