1 files changed, 143 insertions, 0 deletions
diff --git a/src/scss/layout/_header.scss b/src/scss/layout/_header.scss
new file mode 100644
index 0000000..cbc1693
--- /dev/null
+++ b/src/scss/layout/_header.scss
@@ -0,0 +1,143 @@
+@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);
+    }
+  }
+}