From 8c83a2ef92be845c5ffecb1434028d0c68915936 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sun, 18 Apr 2021 15:44:32 +0200 Subject: Update --- assets/css/components/_card.scss | 2 +- assets/css/components/_footer.scss | 4 +++- assets/css/components/_header.scss | 22 ++++++++++++++++++++ assets/css/components/_landing-banner.scss | 2 +- assets/css/components/_logo.scss | 19 ------------------ assets/css/components/_outer-button.scss | 31 +++++++++++++++-------------- assets/css/components/_section-heading.scss | 29 --------------------------- 7 files changed, 43 insertions(+), 66 deletions(-) create mode 100644 assets/css/components/_header.scss delete mode 100644 assets/css/components/_logo.scss delete mode 100644 assets/css/components/_section-heading.scss (limited to 'assets/css/components') diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss index 09b03b0..cb18810 100644 --- a/assets/css/components/_card.scss +++ b/assets/css/components/_card.scss @@ -15,7 +15,7 @@ @include store(( --dims: ( --pad-x: 1em, - --pad-y: .6em + --pad-y: .7em ) ), 'md'); diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss index c20bc22..c127d02 100644 --- a/assets/css/components/_footer.scss +++ b/assets/css/components/_footer.scss @@ -2,7 +2,7 @@ @include store(( --colors: ( --fg: prop(--colors --obj, $global: true), - --border: prop(--colors --bg-lo, $global: true), + --border: prop(--colors --obj-hi, $global: true), ) )); @@ -11,6 +11,8 @@ align-items: center; justify-content: space-between; height: prop(--dims --outer, $global: true); + padding-right: prop(--dims --outer, $global: true); + font-size: 1 / 16 * 15em; @include element('content') { width: 100%; diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss new file mode 100644 index 0000000..61f6f4a --- /dev/null +++ b/assets/css/components/_header.scss @@ -0,0 +1,22 @@ +@include namespace('header') { + @include store(( + --colors: ( + --fg: prop(--colors --fg-lo, $global: true), + --bg: prop(--colors --bg-hi, $global: true), + --hover: ( + --fg: prop(--colors --bg-hi, $global: true), + --bg: prop(--colors --accent --color, $global: true), + ) + ) + )); + + @include component(namespace()) { + display: flex; + position: fixed; + z-index: 10000; + top: 0; + left: 0; + flex-direction: row; + justify-content: flex-start; + } +} diff --git a/assets/css/components/_landing-banner.scss b/assets/css/components/_landing-banner.scss index f6016c4..58d64d7 100644 --- a/assets/css/components/_landing-banner.scss +++ b/assets/css/components/_landing-banner.scss @@ -10,7 +10,7 @@ @include element('title') { max-width: 7em; margin-top: 0; - transform: translateX(-.05em); + transform: translateX(-.06em); font-family: $font-fam--large; font-weight: 350; text-transform: none; diff --git a/assets/css/components/_logo.scss b/assets/css/components/_logo.scss deleted file mode 100644 index 13587c8..0000000 --- a/assets/css/components/_logo.scss +++ /dev/null @@ -1,19 +0,0 @@ -@include namespace('logo') { - @include store(( - --colors: ( - --fg: prop(--colors --fg-lo, $global: true), - --bg: prop(--colors --bg-hi, $global: true), - --hover: ( - --fg: prop(--colors --bg-hi, $global: true), - --bg: prop(--colors --accent --color, $global: true), - ) - ) - )); - - @include component(namespace()) { - position: fixed; - z-index: 10000; - top: 0; - left: 0; - } -} diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss index b92dd9e..774281d 100644 --- a/assets/css/components/_outer-button.scss +++ b/assets/css/components/_outer-button.scss @@ -7,13 +7,9 @@ --bg: prop(--colors --accent --color, $global: true), --fg: prop(--colors --bg-hi, $global: true), ), - --icon: ( + --inverted: ( --fg: prop(--colors --fg-lo, $global: true), --bg: prop(--colors --bg-hi, $global: true), - --hover: ( - --fg: prop(--colors --bg-hi, $global: true), - --bg: prop(--colors --accent --color, $global: true), - ) ) ) )); @@ -24,9 +20,17 @@ transition: background-color .2s, color .2s; background-color: prop(--colors --bg); color: prop(--colors --fg); + font-size: 1rem; font-weight: 450; text-decoration: none; + @include modifier('scroll-top') { + position: fixed; + z-index: 9000; + right: 0; + bottom: 0; + } + @include element('icon') { display: flex; position: relative; @@ -36,19 +40,16 @@ width: prop(--dims --outer, $global: true); height: 100%; transition: background-color .2s, color .2s; - background-color: prop(--colors --icon --bg); - color: prop(--colors --icon --fg); } - @include modifier('icon-only') { - @include element('icon') { - background-color: prop(--colors --bg); - color: prop(--colors --fg); - } + @include modifier('inverted') { + background-color: prop(--colors --inverted --bg); + color: prop(--colors --inverted --fg); } - - &:hover { - @include multi('&', 'element' 'icon') { + + &:link, + &:visited { + &:hover { background-color: prop(--colors --hover --bg); color: prop(--colors --hover --fg); } diff --git a/assets/css/components/_section-heading.scss b/assets/css/components/_section-heading.scss deleted file mode 100644 index 717442b..0000000 --- a/assets/css/components/_section-heading.scss +++ /dev/null @@ -1,29 +0,0 @@ -@include namespace('section-heading') { - @include store(( - --dims: ( - --pad-y: $line-height * 1rem - ), - --colors: ( - --line: prop(--colors --accent --color, $global: true), - ) - )); - - @include component(namespace()) { - margin: 0 0 prop(--dims --pad-y); - font-family: $font-fam--text; - font-size: 1 / 16 * 13em; - font-weight: bold; - letter-spacing: .2em; - text-transform: uppercase; - - &::before { - content: ''; - display: inline-block; - width: 3em; - height: 2px; - margin-right: 1.3em; - background-color: prop(--colors --line); - vertical-align: middle; - } - } -} -- cgit v1.2.3-54-g00ecf