From 8f7b11f216dd0b4967751bbdc487b629441a093f Mon Sep 17 00:00:00 2001
From: Kia King Ishii <kia.king.08@gmail.com>
Date: Sun, 29 May 2022 14:12:33 +0900
Subject: [PATCH] feat: adjust how we pass image to home hero

---
 .../theme-default/components/VPHero.vue       | 77 ++++++++++++-------
 src/client/theme-default/styles/vars.css      |  3 +
 2 files changed, 54 insertions(+), 26 deletions(-)

diff --git a/src/client/theme-default/components/VPHero.vue b/src/client/theme-default/components/VPHero.vue
index 1b8b363c..51987dc5 100644
--- a/src/client/theme-default/components/VPHero.vue
+++ b/src/client/theme-default/components/VPHero.vue
@@ -8,8 +8,8 @@ export interface HeroAction {
 }
 
 export interface Image {
-  light: string
-  dark: string
+  src: string
+  alt?: string
 }
 
 defineProps<{
@@ -44,8 +44,8 @@ defineProps<{
 
       <div v-if="image" class="image">
         <div class="image-container">
-          <img class="image-src light" :src="image.light">
-          <img class="image-src dark" :src="image.dark">
+          <div class="image-bg" />
+          <img class="image-src" :src="image.src" :alt="image.alt">
         </div>
       </div>
     </div>
@@ -56,7 +56,6 @@ defineProps<{
 .VPHero {
   margin-top: calc(var(--vp-nav-height) * -1);
   padding: calc(var(--vp-nav-height) + 48px) 24px 48px;
-  overflow: hidden;
 }
 
 @media (min-width: 640px) {
@@ -229,6 +228,15 @@ defineProps<{
   }
 }
 
+@media (min-width: 960px) {
+  .image {
+    order: 2;
+    margin: 0;
+    width: calc(100% / 3);
+    min-height: 100%;
+  }
+}
+
 .image-container {
   position: relative;
   margin: 0 auto;
@@ -243,43 +251,60 @@ defineProps<{
   }
 }
 
-.image-src {
+@media (min-width: 960px) {
+  .image-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    transform: translate(-32px, -32px);
+  }
+}
+
+.image-bg {
   position: absolute;
   top: 50%;
   left: 50%;
-  max-width: 392px;
+  border-radius: 50%;
+  width: 192px;
+  height: 192px;
+  background-image: var(--vp-home-hero-image-background-image);
+  filter: var(--vp-home-hero-image-filter);
   transform: translate(-50%, -50%);
 }
 
-.image-src.light { opacity: 1; }
-.image-src.dark  { opacity: 0; }
-
-.dark .image-src.light { opacity: 0; }
-.dark .image-src.dark  { opacity: 1; }
-
 @media (min-width: 640px) {
-  .image-src {
-    max-width: 512px;
-    transform: translate(-50%, -50%);
+  .image-bg {
+    width: 256px;
+    height: 256px;
   }
 }
 
 @media (min-width: 960px) {
-  .image {
-    order: 2;
-    margin: -8px 0;
-    width: calc(100% / 3);
-    min-height: 100%;
+  .image-bg {
+    width: 320px;
+    height: 320px;
   }
+}
 
-  .image-container {
-    width: 100%;
-    height: 100%;
+.image-src {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  max-width: 192px;
+  transform: translate(-50%, -50%);
+}
+
+@media (min-width: 640px) {
+  .image-src {
+    max-width: 256px;
   }
+}
 
+@media (min-width: 960px) {
   .image-src {
-    max-width: 640px;
-    transform: translate(calc(-50% - 32px), calc(-50% - 32px));
+    max-width: 320px;
   }
 }
 </style>
diff --git a/src/client/theme-default/styles/vars.css b/src/client/theme-default/styles/vars.css
index 408a42d9..00939405 100644
--- a/src/client/theme-default/styles/vars.css
+++ b/src/client/theme-default/styles/vars.css
@@ -347,4 +347,7 @@
 :root {
   --vp-home-hero-name-color: var(--vp-c-brand);
   --vp-home-hero-name-background: transparent;
+
+  --vp-home-hero-image-background-image: none;
+  --vp-home-hero-image-filter: none;
 }