Make the main navigation a bit more usable on small devices

Author: lancebecker

css/main.scss

@@ -17,15 +17,11 @@ img {
 
 .primary-navigation {
   display: flex;
-  flex-direction: column;
   background: #fff;
   padding: 10px 0;
 
-  .logo {
-    width: 25px;
-  }
-
   a {
+    display: block;
     text-transform: uppercase;
     text-decoration: none;
     color: #000;
@@ -57,6 +53,55 @@ img {
 
 }
 
+.logo-container {
+  width: 100px;
+
+  a {
+    display: block;
+  }
+
+  .logo {
+    display: block;
+    width: 100%;
+  }
+
+  @include break-at( sm ) {
+    width: auto;
+
+    .logo {
+      display: block;
+      width: 25px;
+    }
+
+  }
+
+}
+
+.secondary-nav {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  margin: 0 10px;
+
+  a {
+    margin: 0;
+    flex: 1 1 50%;
+    text-align: center;
+  }
+
+  @include break-at( sm ) {
+    flex-wrap: nowrap;
+
+    a {
+      margin-right: 10px;
+      text-align: left;
+      flex: unset;
+    }
+  }
+
+}
+
 .primary-header {
   font-weight: bold;
   text-transform: uppercase;
@@ -307,7 +352,6 @@ img {
     left: 5px;
   }
 
-
   @include break-at( sm ) {
 
     .secondary-content-header {
@@ -321,29 +365,45 @@ img {
 
 .tilt-right {
 
-  .info-column {
-    padding-left: 20px;
-  }
-
   .secondary-content-blurb {
+    margin-top: 10px;
     margin-bottom: 10px;
   }
 
   .secondary-content-header {
-    top: -10px;
-    right: -35px;
+    right: 5px;
+    top: 5px;
     transform: rotate( 1deg );
   }
+
+  @include break-at( sm ) {
+
+    .secondary-content-blurb {
+      margin-top: 25px;
+    }
+
+    .info-column {
+      padding-left: 20px;
+    }
+
+    .secondary-content-header {
+      top: -10px;
+      right: -35px;
+    }
+
+  }
+
 }
 
 .secondary-content-blurb {
   margin-top: 45px;
-  font-size: 1.1rem;
+  font-size: 1rem;
   padding-bottom: 10px;
   border-bottom: 1px solid #efefef;
 
   @include break-at( sm ) {
     width: 85%;
+    font-size: 1.1rem;
   }
 
 }
@@ -418,7 +478,7 @@ address {
   box-sizing: border-box;
   margin: 2% auto;
   border: 5px solid #e5cf5f;
-  padding: 20px;
+  padding: 80px 20px 0;
 
   @include break-at( sm ) {
     margin: 2% auto;
@@ -461,10 +521,19 @@ address {
 }
 
 .tier-title {
-  font-size: 1.6rem;
+  font-size: 1.45rem;
   font-family: 'Didot';
   font-style: oblique;
-  opacity: 0.6;
+  opacity: 0.8;
+  text-align: center;
+  display: block;
+
+  @include break-at( sm ) {
+    opacity: 0.6;
+    font-size: 1.6rem;
+    text-align: left;
+  }
+
 }
 
 .sponser-tier-2 {
@@ -496,3 +565,15 @@ address {
   text-transform: uppercase;
 }
 
+.sponsers-page {
+
+  .sponser-container-row {
+    padding: 10px 0;
+
+    @include break-at( sm ) {
+      padding: 40px 0 45px;
+    }
+
+  }
+
+}

pages/_template.jsx

@@ -21,21 +21,25 @@ module.exports = React.createClass({
       <div className="site-wrapper">
         <Headroom style={{background: '#fff'}}>
           <Container className="primary-navigation" >
-            <Link to={prefixLink('/')} >
-              <img className="logo" src="/images/javascriptmn.png" />
-            </Link>
-            <Link to={prefixLink('/about/')} >
-              About
-            </Link>
-            <Link to={prefixLink('/our_sponsors/')} >
-              Current Sponsors
-            </Link>
-            <Link to={prefixLink('/code-of-conduct/')} >
-              Code of Conduct
-            </Link>
-            <Link className="highlight" to={prefixLink('/speak/')} >
-              Speak
-            </Link>
+            <div className="logo-container">
+              <Link to={prefixLink('/')} >
+                <img className="logo" src="/images/javascriptmn.png" />
+              </Link>
+            </div>
+            <div className="secondary-nav">
+              <Link to={prefixLink('/about/')} >
+                About
+              </Link>
+              <Link to={prefixLink('/our_sponsors/')} >
+                Current Sponsors
+              </Link>
+              <Link to={prefixLink('/code-of-conduct/')} >
+                Code of Conduct
+              </Link>
+              <Link className="highlight" to={prefixLink('/speak/')} >
+                Speak
+              </Link>
+            </div>
           </Container>
         </Headroom>