refactor(components): rewrite Branding component

The component should only be responsible of the layout for the logo,
the name and the optional baseline. Also, the homepage url could
be different from `/` so the consumer should give the right url.

1 files changed, 67 insertions, 0 deletions

diff --git a/src/components/templates/layout/layout.module.scss b/src/components/templates/layout/layout.module.scss
index 223fb93..4f00742 100644
--- a/src/components/templates/layout/layout.module.scss
+++ b/src/components/templates/layout/layout.module.scss
@@ -2,10 +2,66 @@
 @use "../../../styles/abstracts/mixins" as mix;
 @use "../../../styles/abstracts/placeholders";
 
+%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 {
   border-bottom: fun.convert-px(3) solid var(--color-border-light);
 }
 
+.brand {
+  &__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;
+  }
+}
+
 .main {
   flex: 1;
 }
@@ -66,3 +122,14 @@
     }
   }
 }
+
+@keyframes flip-logo {
+  0%,
+  90% {
+    transform: rotateY(180deg);
+  }
+
+  100% {
+    transform: rotateY(0deg);
+  }
+}