From a78ad2257864db20d07b25fb72c5975e7b6f207d Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Fri, 20 Jan 2023 00:51:18 +0100
Subject: [PATCH] refactor: migrate Welcome component

---
 src/components/Welcome.vue       | 56 --------------------
 src/components/WelcomeHeader.vue | 89 ++++++++++++++++++++++++++++++++
 2 files changed, 89 insertions(+), 56 deletions(-)
 delete mode 100644 src/components/Welcome.vue
 create mode 100644 src/components/WelcomeHeader.vue

diff --git a/src/components/Welcome.vue b/src/components/Welcome.vue
deleted file mode 100644
index ebee91e..0000000
--- a/src/components/Welcome.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<template>
-  <div class="welcome flex flex--row flex--wrap flex--center flex--center-v">
-    <div class="welcome__image-container col col-m-6 col-3">
-      <img
-        class="welcome__image"
-        src="@/assets/sebin-smug-icon.png"
-        alt="Sebin Avatar"
-      />
-    </div>
-    <div class="welcome__headings col col-m-12 col-7">
-      <h1 class="welcome__main-heading">
-        <slot name="main"></slot>
-      </h1>
-      <h2 class="welcome__sub-heading">
-        <slot name="sub"></slot>
-      </h2>
-    </div>
-  </div>
-</template>
-
-<style lang="scss">
-.welcome {
-  max-width: 40em;
-  margin: 1em auto;
-
-  &__image {
-    width: 100%;
-    border-radius: 100%;
-    border: 0.375em solid #fff;
-    box-shadow: 0.125em 0.125em 0.5em rgba(#000, 0.7);
-  }
-
-  &__main-heading,
-  &__sub-heading {
-    font-family: "Exo", sans-serif;
-    margin: 1rem 0;
-    text-align: center;
-  }
-
-  &__main-heading {
-    font-size: 2.125em;
-    font-weight: 900;
-    font-style: italic;
-
-    @media (min-width: 35em) {
-      font-size: 2.75em;
-    }
-  }
-
-  &__sub-heading {
-    font-size: 1em;
-    font-weight: 300;
-    font-style: italic;
-  }
-}
-</style>
diff --git a/src/components/WelcomeHeader.vue b/src/components/WelcomeHeader.vue
new file mode 100644
index 0000000..0ce6904
--- /dev/null
+++ b/src/components/WelcomeHeader.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="welcome">
+    <div class="welcome__image">
+      <!-- max 500px -->
+      <picture>
+        <source
+          srcset="
+            @/assets/sebin-smug-icon.png?w=180;200;240;280;350;400;480;0&avif&quality=75&withoutEnlargement&srcset
+          "
+          sizes="(min-width: 120em) 280px, (min-width: 80em) 240px, (min-width: 35em) 200px, 180px"
+          type="image/avif"
+        />
+        <source
+          srcset="
+            @/assets/sebin-smug-icon.png?w=180;200;240;280;350;400;480;0&webp&quality=100&withoutEnlargement&srcset
+          "
+          sizes="(min-width: 120em) 280px, (min-width: 80em) 240px, (min-width: 35em) 200px, 180px"
+          type="image/webp"
+        />
+        <img
+          srcset="
+            @/assets/sebin-smug-icon.png?w=180;200;240;280;350;400;480;0&png&withoutEnlargement&srcset
+          "
+          sizes="(min-width: 120em) 280px, (min-width: 80em) 240px, (min-width: 35em) 200px, 180px"
+          alt="Sebin Avatar"
+        />
+      </picture>
+    </div>
+    <div class="welcome__headings">
+      <h1 class="welcome__mainline">
+        <slot name="main"></slot>
+      </h1>
+      <h2 class="welcome__subline">
+        <slot name="sub"></slot>
+      </h2>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.welcome {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-evenly;
+  align-items: center;
+
+  max-width: 40rem;
+  margin: 1rem auto;
+
+  &__image {
+    flex: 0 0 50vw;
+    max-width: 10rem;
+
+    img {
+      display: block;
+      width: 100%;
+      border-radius: 100%;
+      border: 0.375rem solid #fff;
+      box-shadow: var(--container-box-shadow);
+    }
+  }
+
+  &__headings {
+    flex: 0 0 100%;
+    max-width: 23rem;
+    margin: var(--welcome-header-headings-margin);
+  }
+
+  &__mainline,
+  &__subline {
+    font-family: "Exo", sans-serif;
+    text-align: center;
+    font-style: italic;
+    margin: 0;
+  }
+
+  &__mainline {
+    font-size: var(--welcome-header-mainline-font-size);
+    font-weight: 900;
+  }
+
+  &__subline {
+    font-size: var(--welcome-header-subline-font-size);
+    font-weight: 300;
+  }
+}
+</style>