mirror/bracket
1
0
Fork 0
mirror of https://github.com/evroon/bracket.git synced 2026-06-11 10:15:19 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fix responsiveness homepage (#271)

Browse Source
This commit is contained in:
Erik Vroon
2023-09-17 14:30:50 +02:00
committed by GitHub
parent dcd753e1c1
commit 86dfe68e2e
2 changed files with 44 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
docs/src/pages/index.js
View File

@@ -12,20 +12,24 @@ function HomepageHeader() {
return (
<header className={clsx('hero hero--primary', styles.heroBanner)}>
<div className="container">
<div style={{width: "40%", float: 'left', clear: 'left', paddingRight: "1rem", paddingLeft: "1rem", color: "white"}}>
<h1 className="hero__title">{siteConfig.title}</h1>
<p className="hero__subtitle">{siteConfig.tagline}</p>
<div className={styles.buttons}>
<Link
className="button button--secondary button--lg"
to="/docs/intro">
Get Started
</Link>
<div className={styles.heroRow}>
<div className={clsx(styles.heroColumn, styles.heroColumn4)}>
<h1 className="hero__title">{siteConfig.title}</h1>
<p className="hero__subtitle">{siteConfig.tagline}</p>
<div className={styles.buttons}>
<Link
className="button button--secondary button--lg"
to="/docs/intro">
Get Started
</Link>
</div>
</div>
</div>
<div style={{width: "60%", float: 'right', clear: 'right'}}>
<div className="text--center">
<img alt="Preview of the web interface" src={require('@site/static/img/schedule_preview.png').default} width="100%"/>
<div className={clsx(styles.heroColumn, styles.heroColumn6)}>
<div className="text--center">
<img alt="Preview of the web interface"
src={require('@site/static/img/schedule_preview.png').default}
width="100%"/>
</div>
</div>
</div>
</div>

27
docs/src/pages/index.module.css
View File

@@ -22,3 +22,30 @@
align-items: center;
justify-content: center;
}
/* Create two equal columns that floats next to each other */
.heroColumn {
float: left;
color: white;
padding: 1rem;
}
.heroColumn4 {
width: 40%;
}
.heroColumn6 {
width: 60%;
}
/* Clear floats after the columns */
.heroRow:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 900px) {
.heroColumn {
width: 100%;
}
}