feat(homepage): add mobile styles

debtcollective · Sep 9, 2019 · 8038eb9 · 8038eb9
1 parent 5fd31c0
commit 8038eb9
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 6 deletions.
diff --git a/app/assets/stylesheets/_footer.scss b/app/assets/stylesheets/_footer.scss
@@ -9,10 +9,10 @@ footer {
   }
 
   nav {
-    display: flex;
-    flex-direction: column;
+    display: none;
 
-    @media (min-width: 60rem) {
+    @media (min-width: 70rem) {
+      display: flex;
       flex-direction: row;
     }
 
@@ -46,7 +46,30 @@ footer {
     display: flex;
     align-items: center;
 
-    * {
+    p {
+      @media (max-width: 70rem) {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        margin: 0;
+
+        * {
+          margin-top: 0.5rem;
+        }
+      }
+    }
+
+    img {
+      display: none;
+
+      @media (min-width: 70rem) {
+        display: flex;
+      }
+    }
+
+    > * {
       margin: 0 2rem 0 0;
     }
 
@@ -55,3 +78,10 @@ footer {
     }
   }
 }
+
+
+#to-top-link {
+  @media (min-width: 70rem) {
+    display: none;
+  }
+}
diff --git a/app/assets/stylesheets/_main-nav.scss b/app/assets/stylesheets/_main-nav.scss
@@ -1,32 +1,51 @@
 .main-nav {
   display: flex;
   width: 100%;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
   padding: 1rem 5rem;
   position: absolute;
 
+  @media(min-width: 75rem) {
+    justify-content: space-between;
+  }
+
   ul {
-    display: flex;
+    display: none;
     list-style: none;
 
     &:first-of-type {
       margin-right: auto;
     }
+
+    @media(min-width: 75rem) {
+      display: flex;
+    }
   }
 
   .links {
+    display: none;
+
     li {
       margin: 0 2rem;
       font-weight: bold;
     }
+
+    @media(min-width: 75rem) {
+      display: flex;
+    }
   }
 
   .button {
+    display: none;
     padding: 1rem 3rem;
 
     &:first-of-type {
       margin-right: 1rem;
     }
+
+    @media(min-width: 75rem) {
+      display: flex;
+    }
   }
 }
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -51,6 +51,7 @@ h5 {
 
 h1 {
   font-size: 300%;
+  font-weight: bolder;
 }
 
 h2 {

diff --git a/app/views/static_pages/home.html.erb b/app/views/static_pages/home.html.erb
@@ -126,6 +126,7 @@
   <div class="notice">
     <img src="assets/logo-dark.svg" alt="Debt Collective"/>
     <p>
+      <a id="to-top-link" href="#">Back to top</a>
       <span>Copyright <%= Time.new.year %></span>
       <a href="#">Terms and Conditions</a>
     </p>
-Original file line number
+Diff line change
@@ Expand Up / @@ -51,6 +51,7 @@ h5 { @@
     h1 {
       font-size: 300%;
+      font-weight: bolder;
     }
     h2 {
@@ Expand Down @@