chore: add styles

1 files changed, 121 insertions, 0 deletions

diff --git a/htdocs/src/scss/layout/_header.scss b/htdocs/src/scss/layout/_header.scss
new file mode 100644
index 0000000..622a100
--- /dev/null
+++ b/htdocs/src/scss/layout/_header.scss
@@ -0,0 +1,121 @@
+@use "../abstracts/functions" as fun;
+
+.header {
+  background: fun.get-var(color-bg-secondary);
+  padding: fun.get-var(spacing-md)
+    clamp(#{fun.get-var(spacing-md)}, 3vw, #{fun.get-var(spacing-lg)});
+  z-index: 5;
+}
+
+.branding {
+  margin-bottom: fun.get-var(spacing-sm);
+  text-align: center;
+
+  &__title {
+    font-family: fun.get-var(font-family-secondary);
+    font-size: fun.get-var(font-size-3xl);
+    font-weight: 500;
+    margin: fun.get-var(spacing-xs) 0;
+  }
+
+  &__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: fun.get-var(font-size-md);
+    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);
+    }
+  }
+}