Merge pull request lf-lang#208 from axmmisaka/responsive-slider

Make slider more responsive and fix button layout

Author: lhstrh

src/components/HomepageSlider/index.tsx

@@ -79,7 +79,7 @@ export const CodeContainer = ({
             </CSSTransition>
           </SwitchTransition>
       </div>
-      <div className={clsx(styles.linkButton)}>
+      <div className={clsx(styles.gitPodLinkButton)}>
       <Link href="https://gitpod.io/new#https://github.com/lf-lang/playground-lingua-franca/tree/main">
         <img src="https://raw.githubusercontent.com/gitpod-io/gitpod/30da76375c996109f243491b23e47feefab7217f/components/dashboard/public/button/open-in-gitpod.svg" />
       </Link>

src/components/HomepageSlider/styles.module.css

@@ -9,7 +9,7 @@
 }
 
 .codeContainer.title {
-    max-height: 2rem;
+    height: auto;
     border-radius: 8px 8px 0 0;
     font-size: 1.2rem;
     color: white;
@@ -35,12 +35,34 @@
     /* Override Infima's button */
 }
 
-.linkButton {
+/* Why 996? 996 is Docusaurus and Infima's breakpoint */
+/* If the container is extended to the full width of the screen having the advance button 1.5rem more to the right will cause layout issues. */
+@media only screen and (max-width: 996px) {
+    .advance {
+        right: 0;
+    }
+}
+
+.gitPodLinkButton {
     position: absolute;
     right: 1rem;
     top: 3rem;
 }
 
+/* Why 575? Because Bootstrap 5 uses 575px as "xs" and 575 px looks fine with gitpod */
+@media only screen and (max-width: 575px) {
+    .gitPodLinkButton {
+        display: none;
+    }
+}
+
+/* For screens narrower than 256px reading code is like crap honestly */
+@media only screen and (max-width: 256px) {
+    .codeContainer {
+        display: none;
+    }
+}
+
 .codeContent {
     height: 30rem;
 }

src/pages/index.module.css

@@ -141,7 +141,7 @@
 }
 
 .buttonContainer .button:last-of-type {
-  margin: 0px 36px;
+  margin: 10px 18px;
 }
 
 /* Hardcode stuff */