3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-06-09 14:22:27 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix(website): make YT iframe responsive (#6667)

Browse source 
* fix(website): make YT iframe responsive

* Redesign
This commit is contained in:
Alexey Pyltsyn 2022-02-13 16:13:45 +03:00 • committed by GitHub
parent e42f57ebd6
commit 4b7bea950f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 53 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

45
website/src/pages/index.tsx
View file

@ -109,10 +109,15 @@ function TweetsSection() {
); );
} }
function ELIVideo() { function VideoContainer() {
return ( return (
<div className="container"> <div className="container text--center margin-bottom--xl">
<div className="margin-top--md"> <div className="row">
<div className="col">
<h2>
<Translate>Check it out in the intro video</Translate>
</h2>
<div className={styles.ytVideo}>
<iframe <iframe
width="560" width="560"
height="315" height="315"
@ -124,6 +129,8 @@ function ELIVideo() {
/> />
</div> </div>
</div> </div>
</div>
</div>
); );
} }
@ -199,7 +206,12 @@ function Home(): JSX.Element {
</div> </div>
</div> </div>
<div className={styles.section}> <div className={styles.section}>
<VideoContainer />
<div className="container text--center margin-bottom--xl"> <div className="container text--center margin-bottom--xl">
<h2>
<Translate>Main features</Translate>
</h2>
<div className="row"> <div className="row">
<div className="col"> <div className="col">
<img <img
@ -209,9 +221,9 @@ function Home(): JSX.Element {
width="1009.54" width="1009.54"
height="717.96" height="717.96"
/> />
<h2 className={clsx(styles.featureHeading)}> <h3 className={clsx(styles.featureHeading)}>
<Translate>Powered by Markdown</Translate> <Translate>Powered by Markdown</Translate>
</h2> </h3>
<p className="padding-horiz--md"> <p className="padding-horiz--md">
<Translate> <Translate>
Save time and focus on your project&apos;s documentation. Save time and focus on your project&apos;s documentation.
@ -230,9 +242,9 @@ function Home(): JSX.Element {
width="1108" width="1108"
height="731.18" height="731.18"
/> />
<h2 className={clsx(styles.featureHeading)}> <h3 className={clsx(styles.featureHeading)}>
<Translate>Built Using React</Translate> <Translate>Built Using React</Translate>
</h2> </h3>
<p className="padding-horiz--md"> <p className="padding-horiz--md">
<Translate> <Translate>
Extend or customize your project&apos;s layout by reusing Extend or customize your project&apos;s layout by reusing
@ -249,9 +261,9 @@ function Home(): JSX.Element {
width="1137" width="1137"
height="776.59" height="776.59"
/> />
<h2 className={clsx(styles.featureHeading)}> <h3 className={clsx(styles.featureHeading)}>
<Translate>Ready for Translations</Translate> <Translate>Ready for Translations</Translate>
</h2> </h3>
<p className="padding-horiz--md"> <p className="padding-horiz--md">
<Translate> <Translate>
Localization comes pre-configured. Use Crowdin to translate Localization comes pre-configured. Use Crowdin to translate
@ -271,9 +283,9 @@ function Home(): JSX.Element {
width="1038.23" width="1038.23"
height="693.31" height="693.31"
/> />
<h2 className={clsx(styles.featureHeading)}> <h3 className={clsx(styles.featureHeading)}>
<Translate>Document Versioning</Translate> <Translate>Document Versioning</Translate>
</h2> </h3>
<p className="padding-horiz--md"> <p className="padding-horiz--md">
<Translate> <Translate>
Support users on all versions of your project. Document Support users on all versions of your project. Document
@ -290,9 +302,9 @@ function Home(): JSX.Element {
width="1137.97" width="1137.97"
height="736.21" height="736.21"
/> />
<h2 className={clsx(styles.featureHeading)}> <h3 className={clsx(styles.featureHeading)}>
<Translate>Content Search</Translate> <Translate>Content Search</Translate>
</h2> </h3>
<p className="padding-horiz--md"> <p className="padding-horiz--md">
<Translate> <Translate>
Make it easy for your community to find what they need in Make it easy for your community to find what they need in
@ -303,13 +315,6 @@ function Home(): JSX.Element {
</div> </div>
</div> </div>
</div> </div>
<div className="container text--center">
<div className="row">
<div className="col">
<ELIVideo />
</div>
</div>
</div>
</div> </div>
<TweetsSection /> <TweetsSection />
<div className={clsx(styles.section)}> <div className={clsx(styles.section)}>

19
website/src/pages/styles.module.css
View file

@ -179,3 +179,22 @@
.test-marker-site-index-page { .test-marker-site-index-page {
content: 'site-index-page'; content: 'site-index-page';
} }
@media only screen and (max-width: 996px) {
.ytVideo {
position: relative;
overflow: hidden;
width: 100%;
max-width: 560px;
margin: 0 auto;
padding-top: 56.25%;
}
.ytVideo iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}