Footer and font changes (#2030)

* Footer and font changes * Adding link to footer. * review fixes * some padding stuff on desktop that was weird and only meant for mobile.
mozilla · Jul 11, 2018 · 0c768cd · 0c768cd
1 parent d571ae0
commit 0c768cd
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 103 deletions.
diff --git a/less/components/footer.less b/less/components/footer.less
@@ -1,63 +1,79 @@
 footer {
   margin-top: 40px;
   background: #000;
-  padding: 40px 10px;
-  color: #666;
-  font-size: 12px;
+  padding: 50px 0;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  color: #808080;
+  p {
+    margin: 0;
+    padding: 0 15px;
+  }
   .footer {
-    max-width: 420px;
-    margin: 0 auto;
-    width: 100%;
-    .half {
-      width: 75%;
-      padding-right: 35px;
-      margin-right: 0;
+    .footer-links {
+      text-align: center;
+      a {
+        font-size: 14px;
+        font-weight: 700;
+        color: #808080;
+        &:hover {
+          color: #FFFFFF;
+        }
+      }
+      ul {
+        margin: 0;
+        li {
+          display: inline-block;
+          margin: 0 16px 16px 16px;
+        }
+      }
     }
-  }
-  a {
-    color: #FFFFFF;
-    &:hover {
-      text-decoration: underline;
+    .footer-info {
+      a {
+        color: #FFFFFF;
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+      .footer-break {
+        margin: 24px 0;
+        height: 1px;
+        width: 50px;
+        background: #808080;
+      }
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      @media screen and (max-width: 619px) {
+        text-align: center;
+      }
+      @media screen and (min-width: 620px) {
+        flex-direction: row;
+        p {
+          padding: 0;
+        }
+        .footer-break {
+          margin: 0 24px;
+          width: 1px;
+          height: 50px;
+        }
+      }
+      width: 100%;
+      margin: 0 auto;
+      max-width: 560px;
+      .footer-logo {
+        min-width: 100px;
+        width: 100px;
+      }
     }
-  }
-  img {
-    max-width: 120px;
+    max-width: 1110px;
+    margin: 0 auto;
+    width: 100%;
   }
   ul {
     padding-left: 0;
     padding-right: 0;
     list-style: none;
   }
-
-  @media screen and (max-width: 480px) {
-    .footer {
-      margin: 0 auto;
-      width: 100%;
-      max-width: 100%;
-      .half {
-        padding-right: 0;
-      }
-    }
-
-    .full,
-    .half,
-    .third,
-    .two-third,
-    .quarter {
-      width: 100%;
-    }
-  }
-}
-
-html[dir="rtl"] footer .footer {
-  .half {
-    padding-right: 0;
-    padding-left: 35px;
-  }
-  @media screen and (max-width: 480px) {
-    .half {
-      padding-left: 0;
-      padding-right: 0;
-    }
-  }
 }
diff --git a/less/pages/additional-info.less b/less/pages/additional-info.less
@@ -83,43 +83,13 @@
       margin: 0 2px -8px 0;
     }
   }
-
-  footer {
-    padding: 40px 0;
-  }
-  .footer {
-    max-width: 420px;
-    padding: 0 15px;
-    .half {
-      width: 75%;
-      padding-right: 35px;
-      margin-right: 0px;
-    }
-  }
-  .footer {
-    margin: 30px auto 0;
-  }
-
-  footer {
-    margin-top: 0;
-  }
-  @media screen and (min-width: 800px) {
-    footer {
-      margin-top: 40px;
-    }
-  }
   @media screen and (min-width: 1110px) {
     .additional-info-page {
       margin-top: 60px;
     }
   }
 
   @media screen and (min-width: 857px) {
-    .footer {
-      width: 100%;
-      max-width: 840px;
-      padding: 0 25px;
-    }
     .additional-page {
       min-height: 481px;
     }
@@ -128,10 +98,6 @@
 
 html[dir="rtl"] {
   .additional-info-container {
-    .footer .half {
-      padding-left: 35px;
-      padding-right: 0;
-    }
     .mozilla-watermark {
       margin: 0 0 -2px 8px;
     }

diff --git a/less/shared.less b/less/shared.less
@@ -11,7 +11,7 @@ html {
 }
 
 body {
-  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 14px;
   line-height: 20px;
   color: #333;

diff --git a/src/components/footer.js b/src/components/footer.js
@@ -10,31 +10,35 @@ var Footer = React.createClass({
     return (
       <footer>
         <div className="footer">
-          <div className="row">
-            <div className="half">
-              <img src="/assets/images/mozilla.1068965acefde994a71c187d253aca2b.svg"/>
+          <div className="footer-links">
+            <ul>
+              <li><a href="https://www.mozilla.org/mission/" target="_blank">{this.context.intl.formatMessage({id: 'Mission'})}</a></li>
+              <li><a href="https://www.mozilla.org/about/" target="_blank">{this.context.intl.formatMessage({id: 'About'})}</a></li>
+              <li><a href="https://www.mozilla.org/contact/spaces/" target="_blank">{this.context.intl.formatMessage({id: 'Contact'})}</a>
+              </li>
+              <li><a href="https://www.mozilla.org/privacy/" target="_blank">{this.context.intl.formatMessage({id: 'privacyPolicyFooter'})}</a>
+              </li>
+              <li><a href="https://www.mozilla.org/about/legal/" target="_blank">{this.context.intl.formatMessage({id: 'legalNotices'})}</a>
+              </li>
+            </ul>
+          </div>
+          <div className="footer-info">
+            <div className="footer-logo">
+              <a href="https://foundation.mozilla.org"><img src="/assets/images/mozilla.1068965acefde994a71c187d253aca2b.svg"/></a>
+            </div>
+            <div className="footer-break">
+
+            </div>
+            <div className="footer-paragraph">
               <p className="license">
                 <FormattedHTMLMessage
                   id='footerLicense'
                   values={{year}}
                 />
-              </p>
-              <p>
+                <br/>
                 {this.props.message}
               </p>
             </div>
-            <div className="quarter">
-              <ul>
-                <li><a href="https://www.mozilla.org/mission/" target="_blank">{this.context.intl.formatMessage({id: 'Mission'})}</a></li>
-                <li><a href="https://www.mozilla.org/about/" target="_blank">{this.context.intl.formatMessage({id: 'About'})}</a></li>
-                <li><a href="https://www.mozilla.org/contact/spaces/" target="_blank">{this.context.intl.formatMessage({id: 'Contact'})}</a>
-                </li>
-                <li><a href="https://www.mozilla.org/privacy/" target="_blank">{this.context.intl.formatMessage({id: 'privacyPolicyFooter'})}</a>
-                </li>
-                <li><a href="https://www.mozilla.org/about/legal/" target="_blank">{this.context.intl.formatMessage({id: 'legalNotices'})}</a>
-                </li>
-              </ul>
-            </div>
           </div>
         </div>
       </footer>

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -7,7 +7,7 @@ var Index = React.createClass({
   render: function() {
     var metaData = this.props.metaData;
     var robots = 'index, follow';
-    var googleFonts = "https://fonts.googleapis.com/css?family=Open+Sans:600,400,300,300italic";
+    var googleFonts = "https://fonts.googleapis.com/css?family=Nunito+Sans:600,400,300,700,300italic";
 
     var localesData = [];
     if (this.props.localesInfo.length) {