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

feat: hero video new style

Browse Source
This commit is contained in:
Hossein Mehrabi
2023-07-10 21:29:35 +03:30
parent 487a4d443e
commit 286dd23fa6
2 changed files with 26 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/logos-docusaurus-theme/src/client/components/mdx/HeroVideo/HeroVideo.scss
+16 -12
View File
@@ -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));
}
}
}
packages/logos-docusaurus-theme/src/client/components/mdx/HeroVideo/HeroVideo.tsx
+10 -4
View File
@@ -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)}