aboutsummaryrefslogtreecommitdiffstats
path: root/htdocs/src/scss/layout/_header.scss
diff options
context:
space:
mode:
Diffstat (limited to 'htdocs/src/scss/layout/_header.scss')
-rw-r--r--htdocs/src/scss/layout/_header.scss143
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);
- }
- }
-}