diff options
Diffstat (limited to 'htdocs/src/scss/layout/_header.scss')
| -rw-r--r-- | htdocs/src/scss/layout/_header.scss | 143 |
1 files changed, 0 insertions, 143 deletions
diff --git a/htdocs/src/scss/layout/_header.scss b/htdocs/src/scss/layout/_header.scss deleted file mode 100644 index cbc1693..0000000 --- a/htdocs/src/scss/layout/_header.scss +++ /dev/null @@ -1,143 +0,0 @@ -@use "../abstracts/functions" as fun; -@use "../abstracts/mixins" as mix; - -.header { - background: fun.get-var(color-bg-secondary); - overflow-y: auto; - padding: fun.get-var(spacing-md) - clamp(#{fun.get-var(spacing-md)}, 3vw, #{fun.get-var(spacing-lg)}); - scrollbar-color: fun.get-var(color-primary-light-opacity) - fun.get-var(color-bg-tertiary); - 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: 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: clamp( - #{fun.get-var(font-size-2xl)}, - 5vw, - #{fun.get-var(font-size-3xl)} - ); - font-weight: 500; - margin: fun.get-var(spacing-xs) 0 fun.get-var(spacing-3xs); - } - - &__link { - background: linear-gradient( - to top, - fun.get-var(color-primary-light) fun.convert-px(5), - transparent fun.convert-px(5) - ) - center / 0 100% no-repeat; - text-decoration: none; - transition: all 0.5s ease-in-out 0s; - - &:hover, - &:focus { - background-size: 100% 100%; - } - - &:active { - background-size: 0 100%; - } - } - - &__description { - font-family: fun.get-var(font-family-secondary); - font-size: clamp( - #{fun.get-var(font-size-md)}, - 3vw, - #{fun.get-var(font-size-lg)} - ); - font-weight: 400; - letter-spacing: fun.convert-px(1); - margin: 0; - text-transform: uppercase; - } -} - -.logo { - margin: auto; - position: relative; - width: max-content; - - &__image { - backface-visibility: hidden; - border: fun.convert-px(3) solid fun.get-var(color-border-light); - border-radius: 50%; - box-shadow: 0 0 fun.convert-px(6) fun.convert-px(1) - fun.get-var(color-shadow-darker); - left: 0; - position: absolute; - top: 0; - width: 100%; - - &--back { - transform: rotateY(180deg); - } - } - - &__link { - display: block; - height: clamp(#{fun.convert-px(75)}, 15vmin, #{fun.convert-px(90)}); - transform-style: preserve-3d; - transition: all 0.6s linear 0s; - width: clamp(#{fun.convert-px(75)}, 15vmin, #{fun.convert-px(90)}); - - &:hover, - &:focus { - outline: none; - transform: rotateY(180deg); - } - - &:hover &, - &:focus & { - &__image { - &--front { - transform: none; - } - - &--back { - transform: rotateY(180deg); - } - } - } - - &:focus & { - &__image { - box-shadow: 0 0 fun.convert-px(6) fun.convert-px(1) - fun.get-var(color-shadow-dark), - 0 0 0 fun.convert-px(5) fun.get-var(color-primary-light-opacity); - outline: none; - } - } - - &:active & { - &__image { - box-shadow: 0 0 fun.convert-px(6) fun.convert-px(1) - fun.get-var(color-shadow-dark), - 0 0 0 fun.convert-px(7) fun.get-var(color-primary-light-opacity); - } - } - } - - &:hover & { - &__link { - transform: rotateY(180deg); - } - } -} |
