From 1c8a576567af92a606f659918b76b89198d74b1a Mon Sep 17 00:00:00 2001
From: Robert Long <robert@robertlong.me>
Date: Wed, 14 Nov 2018 10:05:50 -0800
Subject: [PATCH] Improve css for smaller screens. Revert footer background on
 desktop.

---
 src/assets/stylesheets/hub-create.scss | 17 ++++++++++++++
 src/assets/stylesheets/index.scss      | 32 ++++++++++++++++++++------
 src/react-components/home-root.js      | 16 +++++++------
 3 files changed, 51 insertions(+), 14 deletions(-)

diff --git a/src/assets/stylesheets/hub-create.scss b/src/assets/stylesheets/hub-create.scss
index 8b614b1f8..f8b10d3c0 100644
--- a/src/assets/stylesheets/hub-create.scss
+++ b/src/assets/stylesheets/hub-create.scss
@@ -13,6 +13,10 @@
     width: 90%;
     height: 300px;
   }
+
+  @media (max-width: 350px) {
+    height: 250px;
+  }
 }
 
 :local(.create-panel) {
@@ -35,6 +39,10 @@
       height: 300px;
     }
 
+    @media (max-width: 350px) {
+      height: 250px;
+    }
+
     :local(.name) {
       @extend %rounded-border;
       @extend %default-font;
@@ -75,6 +83,11 @@
 
     :local(.submit-button) {
       @extend %big-action-button;
+
+      @media (max-width: 350px) {
+        font-size: 16px;
+        padding: 9px 24px;
+      }
     }
 
     :local(.container) {
@@ -203,6 +216,10 @@
 
             svg {
               filter: drop-shadow(0 0 1px #777);
+
+              @media (max-width: 520px) {
+                font-size: 48pt;
+              }
             }
           }
 
diff --git a/src/assets/stylesheets/index.scss b/src/assets/stylesheets/index.scss
index 8f483f47b..3fa05853d 100644
--- a/src/assets/stylesheets/index.scss
+++ b/src/assets/stylesheets/index.scss
@@ -104,6 +104,7 @@ body {
   min-height: 100%;
   z-index: -1;
   overflow: hidden;
+  opacity: 0.3;
 }
 
 :local(.hero-content) {
@@ -112,12 +113,9 @@ body {
   flex-direction: column;
   justify-content: center;
   position: relative;
-  min-height: 740px;
   padding: 2em 0;
-  background-color: rgba(255, 255, 255, 0.7);
 
   @media (max-width: 768px) {
-    min-height: 680px;
     padding: 0;
     padding-bottom: 64px;
     order: -1;
@@ -126,10 +124,15 @@ body {
   :local(.attribution) {
     position: absolute;
     right: 12px;
-    bottom: 12px;
+    top: 12px;
     color: $dark-grey;
     opacity: 0.8;
 
+    @media (max-width: 768px) {
+      bottom: 12px;
+      top: auto;
+    }
+
     a {
       font-weight: bold;
       color: $dark-grey;
@@ -142,7 +145,12 @@ body {
     align-items: center;
 
     :local(.logo) {
-      width: 350px;
+      max-width: 350px;
+
+      img {
+        width: 100%;
+        height: auto;
+      }
     }
 
     padding: 2em;
@@ -188,17 +196,26 @@ body {
       background: $spoke-action-color;
     }
   }
+
+  :local(.join-button), :local(.spoke-button) {
+    a {
+      @media (max-width: 350px) {
+        font-size: 0.75em;
+        height: 32px;
+      }
+    }
+  }
 }
 
 :local(.footer-content) {
   padding: 2.25em;
-  background-color: white;
   min-height: 80px;
   display: flex;
   align-items: center;
   justify-content: flex-end;
 
   @media (max-width: 768px) {
+    background-color: white;
     padding: 0 0 2em 0;
     margin: 0;
     justify-content: center;
@@ -226,9 +243,10 @@ body {
     :local(.top) {
       display: flex;
       justify-content: space-between;
-      align-items: center;
+      align-items: flex-end;
 
       @media (max-width: 768px) {
+        align-items: center;
         flex-direction: column;
       }
     }
diff --git a/src/react-components/home-root.js b/src/react-components/home-root.js
index 05a0de0f7..97ba4c345 100644
--- a/src/react-components/home-root.js
+++ b/src/react-components/home-root.js
@@ -173,6 +173,12 @@ class HomeRoot extends Component {
       <IntlProvider locale={lang} messages={messages}>
         <div className={styles.home}>
           <div className={mainContentClassNames}>
+            <div className={styles.videoContainer}>
+              <video playsInline muted loop autoPlay className={styles.backgroundVideo} id="background-video">
+                <source src={homeVideoWebM} type="video/webm" />
+                <source src={homeVideoMp4} type="video/mp4" />
+              </video>
+            </div>
             <div className={styles.headerContent}>
               <div className={styles.titleAndNav} onClick={() => (document.location = "/")}>
                 <div className={styles.links}>
@@ -195,12 +201,6 @@ class HomeRoot extends Component {
               </div>
             </div>
             <div className={styles.heroContent}>
-              <div className={styles.videoContainer}>
-                <video playsInline muted loop autoPlay className={styles.backgroundVideo} id="background-video">
-                  <source src={homeVideoWebM} type="video/webm" />
-                  <source src={homeVideoMp4} type="video/mp4" />
-                </video>
-              </div>
               <div className={styles.attribution}>
                 Medieval Fantasy Book by{" "}
                 <a
@@ -212,7 +212,9 @@ class HomeRoot extends Component {
                 </a>
               </div>
               <div className={styles.container}>
-                <img className={styles.logo} src={hubLogo} />
+                <div className={styles.logo}>
+                  <img src={hubLogo} />
+                </div>
                 <div className={styles.title}>
                   <FormattedMessage id="home.hero_title" />
                 </div>
-- 
GitLab