From 9cb9bed4313f9f4e10700131e98f79da847c1f49 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Thu, 19 Jan 2023 22:04:46 +0100
Subject: [PATCH] refactor: simplify WelcomeHeader component

---
 src/components/WelcomeHeader.vue | 108 +++++++++++--------------------
 1 file changed, 39 insertions(+), 69 deletions(-)

diff --git a/src/components/WelcomeHeader.vue b/src/components/WelcomeHeader.vue
index 6636550..ab2326f 100644
--- a/src/components/WelcomeHeader.vue
+++ b/src/components/WelcomeHeader.vue
@@ -1,30 +1,22 @@
 <template>
   <header class="welcome">
     <div class="welcome__image">
-      <div class="welcome__image-wrapper">
-        <picture>
-          <source
-            srcset="@/assets/viktor-avatar.png?w=400;800&avif&quality=75&srcset"
-          />
-          <source
-            srcset="
-              @/assets/viktor-avatar.png?w=400;800&webp&quality=100&srcset
-            "
-          />
-          <img
-            class="welcome__image-img"
-            src="@/assets/viktor-avatar.png?w=400&png"
-            alt="Viktor Avatar"
-          />
-        </picture>
-      </div>
+      <picture>
+        <source
+          srcset="@/assets/viktor-avatar.png?w=400;800&avif&quality=75&srcset"
+        />
+        <source
+          srcset="@/assets/viktor-avatar.png?w=400;800&webp&quality=100&srcset"
+        />
+        <img src="@/assets/viktor-avatar.png?w=400&png" alt="Viktor Avatar" />
+      </picture>
     </div>
 
     <div class="welcome__heading">
-      <h1 class="welcome__main">
+      <h1 class="welcome__mainline">
         <slot name="main"></slot>
       </h1>
-      <h2 class="welcome__sub">
+      <h2 class="welcome__subline">
         <slot name="sub"></slot>
       </h2>
     </div>
@@ -35,68 +27,46 @@
 .welcome {
   display: flex;
   flex-flow: row wrap;
-  justify-content: center;
+  justify-content: space-evenly;
+  align-items: var(--welcome-headings-align-items);
 
+  width: 100%;
   max-width: 50rem;
-  margin: 2rem auto;
-  padding: var(--textblock-padding);
+
+  margin: 0 auto;
+  padding: var(--welcome-padding);
   transition: 0.2s ease-out;
 
-  &:hover &__image-wrapper {
-    @media (min-width: 50em) {
-      transform: scale(0.84) translateX(15%) rotateZ(0);
-    }
-  }
-
-  &:hover &__image-img {
-    @media (min-width: 50em) {
-      transform: scale(1.2) rotateZ(0);
-    }
-  }
-
-  &:hover &__heading {
-    @media (min-width: 50em) {
-      margin: 4.75rem 0 0 2rem;
-    }
-  }
-
   &__image {
-    flex: 0 0 15rem;
+    flex: 0 1 15rem;
+
+    background-color: var(--theme-c-desert-sand-translucent);
+
+    border: 0.5rem solid var(--theme-c-walnut-brown);
+    border-radius: 2rem;
+
+    transform: scale(0.84) translateX(15%) rotateZ(calc(-1 * (11 * 1deg)));
+    transform-origin: 0 100%;
+
+    overflow: hidden;
+
+    img {
+      display: block;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      transform: scale(1.2) rotateZ(calc(11 * 1deg));
+    }
   }
 
   &__heading {
-    flex: 1 0 0;
-    text-align: center;
+    flex: 0 1 auto;
+    text-align: var(--welcome-headings-text-align);
     line-height: 1.6;
-    margin: 2rem 0 0 0;
     transition: 0.2s ease-out;
-
-    @media (min-width: 50em) {
-      text-align: left;
-      margin: 2rem 0 0 4rem;
-    }
   }
 
-  &__image-wrapper {
-    background-color: var(--theme-c-desert-sand-translucent);
-    border: 0.5rem solid var(--theme-c-walnut-brown);
-    border-radius: 2rem;
-    transform: scale(0.84) translateX(15%) rotateZ(calc(-1 * (11 * 1deg)));
-    transform-origin: 0 100%;
-    overflow: hidden;
-    transition: transform 0.2s ease-out;
-  }
-
-  &__image-img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    display: block;
-    transform: scale(1.2) rotateZ(calc(11 * 1deg));
-    transition: transform 0.2s ease-out;
-  }
-
-  &__main {
+  &__mainline {
     margin: 1rem 0;
     line-height: 1;
   }