From 6b2c6c4260b2af2adad37dc1f8c50a904e04f13d Mon Sep 17 00:00:00 2001 From: Volpeon Date: Mon, 12 Apr 2021 20:39:04 +0200 Subject: Update --- assets/css/components/_card.scss | 15 ++-- assets/css/components/_footer.scss | 24 ++++--- assets/css/components/_landing-banner.scss | 16 +++-- assets/css/components/_logo.scss | 19 +++++ assets/css/components/_nav.scss | 109 ----------------------------- assets/css/components/_outer-button.scss | 67 ++++++++++++++++++ 6 files changed, 123 insertions(+), 127 deletions(-) create mode 100644 assets/css/components/_logo.scss delete mode 100644 assets/css/components/_nav.scss create mode 100644 assets/css/components/_outer-button.scss (limited to 'assets/css/components') diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss index 6260518..bb8b4d2 100644 --- a/assets/css/components/_card.scss +++ b/assets/css/components/_card.scss @@ -12,6 +12,13 @@ ) )); + @include store(( + --dims: ( + --pad-x: .9em, + --pad-y: .6em + ) + ), 'md'); + @include component(namespace()) { display: flex; position: relative; @@ -29,9 +36,7 @@ @include element('content') { @include modifier('flip') { visibility: visible; - transition: - visibility 0s, - opacity .2s; + transition: visibility 0s, opacity .2s; opacity: 1; } } @@ -48,9 +53,7 @@ top: 0; left: 0; height: 100%; - transition: - visibility 0s linear .2s, - opacity .2s; + transition: visibility 0s linear .2s, opacity .2s; opacity: 0; background-color: prop(--colors --flip --bg); } diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss index db30fcd..c20bc22 100644 --- a/assets/css/components/_footer.scss +++ b/assets/css/components/_footer.scss @@ -1,17 +1,25 @@ @include namespace('footer') { @include store(( - --dims: ( - --pad-y: .8em - ), --colors: ( - --fg: prop(--colors --obj, $global: true) + --fg: prop(--colors --obj, $global: true), + --border: prop(--colors --bg-lo, $global: true), ) )); @include component(namespace()) { - padding-top: prop(--dims --pad-y); - padding-bottom: prop(--dims --pad-y); - color: prop(--colors --fg); - text-align: right; + display: flex; + align-items: center; + justify-content: space-between; + height: prop(--dims --outer, $global: true); + + @include element('content') { + width: 100%; + height: 100%; + margin-right: prop(--dims --outer-spacing, $global: true); + margin-left: prop(--dims --outer-spacing, $global: true); + border-top: 1px solid prop(--colors --border); + color: prop(--colors --fg); + line-height: prop(--dims --outer, $global: true); + } } } diff --git a/assets/css/components/_landing-banner.scss b/assets/css/components/_landing-banner.scss index 412ca8a..8f07c37 100644 --- a/assets/css/components/_landing-banner.scss +++ b/assets/css/components/_landing-banner.scss @@ -7,17 +7,19 @@ )); @include component(namespace()) { - font-size: 1 / 16 * 17em; - @include element('title') { max-width: 7em; margin-top: 0; - transform: translateX(-.04em); + transform: translateX(-.05em); font-family: $font-fam--large; font-weight: 350; text-transform: none; } + @include element('text') { + font-size: 1 / 16 * 17em; + } + @include element('title-inner') { background-image: linear-gradient( to top, @@ -33,9 +35,15 @@ font-weight: 550; } + @include media('<=md') { + @include element('title') { + max-width: none; + } + } + @include iro-responsive-env(('md', 'lg')) { @include element('title') { - font-size: iro-responsive-set((2.6rem, 3rem)); + font-size: iro-responsive-set((2.6rem, 3.4rem)); } } } diff --git a/assets/css/components/_logo.scss b/assets/css/components/_logo.scss new file mode 100644 index 0000000..13587c8 --- /dev/null +++ b/assets/css/components/_logo.scss @@ -0,0 +1,19 @@ +@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/_nav.scss b/assets/css/components/_nav.scss deleted file mode 100644 index d0a255e..0000000 --- a/assets/css/components/_nav.scss +++ /dev/null @@ -1,109 +0,0 @@ -@include namespace('nav') { - @include store(( - --dims: ( - --font-size: 15px, - --pad-x: 2.5rem, - --item: ( - --pad-x: 1rem, - ), - ), - --colors: ( - --bg: prop(--colors --bg-hi, $global: true), - --logo: ( - --idle: ( - --fg: prop(--colors --accent --color, $global: true), - ), - --hover: ( - --fg: prop(--colors --fg-lo, $global: true), - ) - ), - --item: ( - --idle: ( - --fg: prop(--colors --fg, $global: true), - ), - --hover: ( - --fg: prop(--colors --fg-lo, $global: true), - ), - --active: ( - --fg: prop(--colors --fg-lo, $global: true), - ) - ) - ) - )); - - @include store(( - --dims: ( - --pad-x: prop(--container --dims --pad-x, $global: true), - ) - ), 'md'); - - @include store(( - --dims: ( - --item: ( - --pad-x: .75em, - ), - ) - ), 'sm'); - - @include component(namespace()) { - display: flex; - position: fixed; - z-index: 10000; - top: 0; - left: 0; - height: prop(--dims --outer, $global: true); - padding: 0 prop(--dims --pad-x); - background-color: prop(--colors --bg); - font-size: prop(--dims --font-size); - - @include element('logo', 'item') { - display: flex; - align-items: center; - height: 100%; - } - - @include element('logo') { - 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); - } - } - } - - @include element('logo-symbol') { - display: block; - width: $line-height * .9em; - height: $line-height * 1em; - } - - @include element('item') { - margin: 0 calc(-1 * #{prop(--dims --item --pad-x)}) 0 prop(--dims --item --pad-x); - padding: 0 prop(--dims --item --pad-x); - color: prop(--colors --item --idle --fg); - text-decoration: none; - text-transform: uppercase; - - &:hover { - background-color: transparent; - 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('<=md') { - width: 100%; - } - } -} diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss new file mode 100644 index 0000000..13614bb --- /dev/null +++ b/assets/css/components/_outer-button.scss @@ -0,0 +1,67 @@ +@include namespace('outer-button') { + @include store(( + --colors: ( + --fg: prop(--colors --bg-hi, $global: true), + --bg: prop(--colors --fg-lo, $global: true), + --hover: ( + --bg: prop(--colors --accent --color, $global: true), + --fg: prop(--colors --bg-hi, $global: true), + ), + --logo: ( + --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; + height: prop(--dims --outer, $global: true); + transition: background-color .2s, color .2s; + background-color: prop(--colors --bg); + color: prop(--colors --fg); + font-weight: 500; + text-decoration: none; + + &:hover { + background-color: prop(--colors --hover --bg); + color: prop(--colors --hover --fg); + } + + @include modifier('logo') { + background-color: prop(--colors --logo --bg); + color: prop(--colors --logo --fg); + + &:hover { + background-color: prop(--colors --logo --hover --bg); + color: prop(--colors --logo --hover --fg); + } + } + + @include element('icon') { + display: flex; + position: relative; + align-items: center; + justify-content: center; + width: prop(--dims --outer, $global: true); + height: 100%; + } + + @include element('icon-symbol') { + display: block; + width: 1.5em; + height: 1.5em; + } + + @include element('content') { + height: 100%; + padding-right: prop(--dims --outer-spacing, $global: true); + padding-left: prop(--dims --outer-spacing, $global: true); + line-height: prop(--dims --outer, $global: true); + } + } +} -- cgit v1.2.3-54-g00ecf