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, 0 insertions, 110 deletions

diff --git a/src/components/molecules/layout/branding.module.scss b/src/components/molecules/layout/branding.module.scss
deleted file mode 100644
index 6f67c8b..0000000
--- a/src/components/molecules/layout/branding.module.scss
+++ /dev/null
@@ -1,110 +0,0 @@
-@use "../../../styles/abstracts/functions" as fun;
-@use "../../../styles/abstracts/mixins" as mix;
-
-@mixin 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);
-    }
-  }
-}
-
-.wrapper {
-  --logo-size: #{clamp(fun.convert-px(90), 12vw, fun.convert-px(100))};
-
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  justify-items: center;
-  width: 100%;
-
-  @include mix.media("screen") {
-    @include mix.dimensions("2xs") {
-      grid-template-columns:
-        var(--logo-size)
-        minmax(0, 1fr);
-      grid-template-rows: 1fr min-content;
-      align-items: center;
-      justify-items: left;
-      column-gap: var(--spacing-sm);
-      width: unset;
-    }
-  }
-
-  .logo {
-    grid-row: span 2;
-    animation: flip-logo 9s ease-in 0s 1;
-  }
-
-  .title {
-    font-size: clamp(var(--font-size-xl), 8vw, var(--font-size-2xl));
-    text-align: center;
-
-    @include typing-animation;
-  }
-
-  .baseline {
-    color: var(--color-fg-light);
-    font-size: var(--font-size-lg);
-    text-align: center;
-
-    @include typing-animation;
-  }
-
-  .link {
-    background: linear-gradient(
-        to top,
-        var(--color-primary-light) fun.convert-px(5),
-        transparent fun.convert-px(5)
-      )
-      left / 0 100% no-repeat;
-    text-decoration: none;
-    transition: all 0.6s ease-out 0s;
-
-    &:hover,
-    &:focus {
-      background-size: 100% 100%;
-    }
-
-    &:focus {
-      color: var(--color-primary-light);
-    }
-
-    &:active {
-      background-size: 0 100%;
-      color: var(--color-primary-dark);
-    }
-  }
-}
-
-@keyframes flip-logo {
-  0%,
-  90% {
-    transform: rotateY(180deg);
-  }
-
-  100% {
-    transform: rotateY(0deg);
-  }
-}