waveterm/docusaurus-og
0
0
Fork 0
mirror of https://github.com/wavetermdev/docusaurus-og.git synced 2026-08-05 13:46:35 -07:00
Code Issues Packages Projects Releases Wiki Activity

fix: adjust the height of hero video to fit in its container; fixes #91

Browse Source
This commit is contained in:
Hossein Mehrabi
2023-07-07 13:14:56 +03:30
parent 872b1e75be
commit 207c983275
2 changed files with 14 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/logos-docusaurus-theme/src/client/components/mdx/HeroVideo/HeroVideo.scss
+11 -7
View File
@@ -4,6 +4,8 @@
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr;
position: relative;
flex-grow: 1;
pointer-events: none;
@@ -22,9 +24,11 @@
transform: translateY(var(--hero-video-offset-y));
max-width: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
width: auto;
}
.mdx-hero-video__placeholder {
@@ -34,11 +38,12 @@
img,
video {
width: 100%;
height: auto;
transform: scale(var(--hero-video-scale));
margin-left: calc((var(--hero-video-scale) - 100%) * -1);
transform-origin: top left;
transform-origin: top center;
object-position: top;
height: 100%;
max-width: var(--container-max-width);
}
}
@@ -64,7 +69,6 @@
video {
width: 100%;
transform: scale(var(--hero-video-scale-mobile));
margin-left: calc((var(--hero-video-scale-mobile) - 100%) * -1);
}
}
}
packages/logos-docusaurus-theme/src/client/components/mdx/HeroVideo/HeroVideo.tsx
+3 -3
View File
@@ -69,9 +69,9 @@ export const HeroVideo: React.FC<HeroVideoProps> = ({
style={makeStyle(
{ ...style },
{
'hero-video-scale': desktop?.scale ?? '58%',
'hero-video-offset-y': desktop?.offsetY ?? '-10%',
'hero-video-scale-mobile': mobile?.scale ?? '117.8%',
'hero-video-scale': desktop?.scale ?? '151.5%',
'hero-video-offset-y': desktop?.offsetY ?? '-120px',
'hero-video-scale-mobile': mobile?.scale ?? '140%',
'hero-video-offset-y-mobile': mobile?.offsetY ?? '-10%',
},
)}