From 286dd23fa65e0e860e6bbb45e0b09fed6892a80b Mon Sep 17 00:00:00 2001
From: Hossein Mehrabi <ohyeaross@gmail.com>
Date: Mon, 10 Jul 2023 21:29:35 +0330
Subject: [PATCH] feat: hero video new style

---
 .../components/mdx/HeroVideo/HeroVideo.scss   | 28 +++++++++++--------
 .../components/mdx/HeroVideo/HeroVideo.tsx    | 14 +++++++---
 2 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroVideo/HeroVideo.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroVideo/HeroVideo.scss
index 841a842..511760f 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroVideo/HeroVideo.scss
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroVideo/HeroVideo.scss
@@ -9,10 +9,15 @@
 
   pointer-events: none;
 
-  --hero-video-scale: 58%;
-  --hero-video-offset-y: -10%;
-  --hero-video-scale-mobile: 117.8%;
-  --hero-video-offset-y-mobile: -10%;
+  --hero-video-height: 120%;
+  --hero-video-min-height: 100vh;
+  --hero-video-offset-y: -150px;
+  --hero-video-scale: 1.70951586;
+
+  --hero-video-height-mobile: 120%;
+  --hero-video-min-height-mobile: 100vh;
+  --hero-video-offset-y-mobile: -50px;
+  --hero-video-scale-mobile: 1.70951586;
 
   & > * {
     grid-row: 1 / 1;
@@ -28,7 +33,8 @@
     top: 0;
     left: 0;
     width: 100%;
-    height: 100%;
+    height: var(--hero-video-height);
+    min-height: var(--hero-video-min-height);
   }
 
   .mdx-hero-video__placeholder {
@@ -42,12 +48,12 @@
 
   img,
   video {
-    transform: scale(var(--hero-video-scale));
     transform-origin: top center;
     object-position: top;
 
     height: 100%;
-    max-width: calc(var(--container-max-width) / var(--hero-video-scale));
+    width: auto;
+    max-width: calc(var(--container-max-width) * var(--hero-video-scale));
   }
 }
 
@@ -66,16 +72,14 @@
 @include utils.responsive('lg', 'down') {
   .mdx-hero-video {
     > * {
+      height: var(--hero-video-height-mobile);
+      min-height: var(--hero-video-min-height-mobile);
       transform: translateY(var(--hero-video-offset-y-mobile));
     }
 
     img,
     video {
-      width: 100%;
-      transform: scale(var(--hero-video-scale-mobile));
-      max-width: calc(
-        var(--container-max-width) / var(--hero-video-scale-mobile)
-      );
+      max-width: calc((100vw - 32px) * var(--hero-video-scale-mobile));
     }
   }
 }
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroVideo/HeroVideo.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroVideo/HeroVideo.tsx
index 5f13477..e4d912f 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroVideo/HeroVideo.tsx
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroVideo/HeroVideo.tsx
@@ -8,6 +8,8 @@ import './HeroVideo.scss'
 
 export type HeroVideoStyle = {
   scale?: string
+  height?: string
+  minHeight?: string
   offsetY?: string
 }
 
@@ -71,10 +73,14 @@ export const HeroVideo: React.FC<HeroVideoProps> = ({
         style={makeStyle(
           { ...style },
           {
-            'hero-video-scale': desktop?.scale ?? '1.515',
-            'hero-video-offset-y': desktop?.offsetY ?? '-120px',
-            'hero-video-scale-mobile': mobile?.scale ?? '1.40',
-            'hero-video-offset-y-mobile': mobile?.offsetY ?? '-10%',
+            'hero-video-scale': desktop?.scale ?? '1.70951586',
+            'hero-video-offset-y': desktop?.offsetY ?? '-150px',
+            'hero-video-height': desktop?.height ?? '120%',
+            'hero-video-min-height': desktop?.minHeight ?? '100vh',
+            'hero-video-scale-mobile': mobile?.scale ?? '1.70951586',
+            'hero-video-offset-y-mobile': mobile?.offsetY ?? '-50px',
+            'hero-video-height-mobile': mobile?.height ?? '120%',
+            'hero-video-min-height-mobile': mobile?.minHeight ?? '100vh',
           },
         )}
         {...(props as any)}