From 86dfe68e2e71e048ecc5544ad3a9b1a7b7e73634 Mon Sep 17 00:00:00 2001
From: Erik Vroon <erik.vroon22@gmail.com>
Date: Sun, 17 Sep 2023 14:30:50 +0200
Subject: [PATCH] Fix responsiveness homepage (#271)

---
 docs/src/pages/index.js         | 30 +++++++++++++++++-------------
 docs/src/pages/index.module.css | 27 +++++++++++++++++++++++++++
 2 files changed, 44 insertions(+), 13 deletions(-)

diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js
index 2f437097..65c83ff5 100644
--- a/docs/src/pages/index.js
+++ b/docs/src/pages/index.js
@@ -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>
diff --git a/docs/src/pages/index.module.css b/docs/src/pages/index.module.css
index b4566b53..00ca66db 100644
--- a/docs/src/pages/index.module.css
+++ b/docs/src/pages/index.module.css
@@ -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%;
+  }
+}