refactor(components): split Layout component in smaller components

The previous component was too long and hardly readable. So I splitted
it in different part and added tests.

1 files changed, 90 insertions, 0 deletions

diff --git a/src/components/templates/layout/site-header/site-header.module.scss b/src/components/templates/layout/site-header/site-header.module.scss
new file mode 100644
index 0000000..a48c054
--- /dev/null
+++ b/src/components/templates/layout/site-header/site-header.module.scss
@@ -0,0 +1,90 @@
+@use "../../../../styles/abstracts/functions" as fun;
+@use "../../../../styles/abstracts/mixins" as mix;
+
+%typing-animation {
+  --typing-animation: none;
+
+  width: fit-content;
+  position: relative;
+  overflow: hidden;
+
+  &::after {
+    content: "|";
+    display: block;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    right: 0;
+    background: var(--color-bg);
+    color: var(--color-primary-darker);
+    font-weight: 400;
+    text-align: left;
+    visibility: hidden;
+    transform: translateX(100%);
+    transform-origin: right;
+    animation: var(--typing-animation);
+
+    :global {
+      animation: var(--typing-animation);
+    }
+  }
+}
+
+.header {
+  display: flex;
+  flex-flow: row wrap;
+  gap: var(--spacing-md) var(--spacing-xl);
+  align-items: center;
+  padding: clamp(var(--spacing-md), 3vh, var(--spacing-xl)) 0;
+  border-bottom: fun.convert-px(3) solid var(--color-border-light);
+}
+
+.branding,
+.navbar {
+  margin-inline: auto;
+}
+
+.logo {
+  --logo-size: #{clamp(
+      fun.convert-px(95),
+      calc(120px - 5vw),
+      fun.convert-px(120)
+    )};
+
+  animation: flip-logo 9s ease-in 0s 1;
+}
+
+.title {
+  font-size: var(--font-size-2xl);
+
+  @extend %typing-animation;
+}
+
+.baseline {
+  color: var(--color-fg-light);
+  font-size: var(--font-size-lg);
+  font-weight: 600;
+
+  @extend %typing-animation;
+}
+
+.search,
+.settings {
+  @include mix.media("screen") {
+    @include mix.dimensions("sm") {
+      min-width: 30ch;
+    }
+  }
+}
+
+@keyframes flip-logo {
+  0%,
+  90% {
+    transform: rotateY(180deg);
+  }
+
+  100% {
+    transform: rotateY(0deg);
+  }
+}