aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/molecules/layout/branding.module.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/molecules/layout/branding.module.scss')
-rw-r--r--src/components/molecules/layout/branding.module.scss110
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);
- }
-}