Start enhancing the responsive view

Author: lancebecker

css/main.scss

@@ -1,3 +1,5 @@
+@import 'mixins.scss';
+
 html,body {
   margin: 0;
   padding: 0;
@@ -15,6 +17,7 @@ img {
 
 .primary-navigation {
   display: flex;
+  flex-direction: column;
   background: #fff;
   padding: 10px 0;
 
@@ -29,7 +32,7 @@ img {
     font-weight: bold;
     margin-right: 15px;
     padding: 0px 5px;
-    font-size: 0.9rem;
+    font-size: 0.4rem;
     letter-spacing: 0.03rem;
     border: 3px solid transparent;
 
@@ -43,14 +46,30 @@ img {
     border: 3px solid #e5cf5f;
   }
 
+  @include break-at( sm ) {
+    flex-direction: row;
+
+    a {
+      font-size: 0.9rem;
+    }
+
+  }
+
 }
 
 .primary-header {
-  font-size: 3.45rem;
   font-weight: bold;
   text-transform: uppercase;
-  padding-top: 15px;
-  margin-bottom: 65px;
+  text-align: center;
+  font-size: 2rem;
+  margin-bottom: 30px;
+
+  @include break-at( sm ) {
+    padding-top: 15px;
+    margin-bottom: 65px;
+    font-size: 3.45rem;
+  }
+
 }
 
 .hero-container {
@@ -74,8 +93,14 @@ img {
 }
 
 .hero-container-content {
-  max-width: 1000px;
-  padding: 50px 0 0;
+  width: 100%;
+  padding: 20px;
+
+  @include break-at( sm ) {
+    max-width: 1000px;
+    padding: 50px 0 0;
+  }
+
 }
 
 .sponsered-by-label {
@@ -102,7 +127,14 @@ img {
 .button-row {
   display: flex;
   align-items: center;
-  margin: 50px 0 0;
+  margin: 30px 0 0;
+  flex-direction: column;
+
+  @include break-at( sm ) {
+    flex-direction: row;
+    margin: 50px 0 0;
+  }
+
 }
 
 .outline-button {
@@ -111,15 +143,22 @@ img {
   justify-content: center;
   border: 2px solid #000;
   padding: 8px 10px;
+  margin-bottom: 10px;
   font-weight: bold;
-  margin-right: 10px;
   background: none;
   cursor: pointer;
   min-height: 55px;
   box-sizing: border-box;
   transition: all 0.2s ease-out;
   text-decoration: none;
   color: #000;
+  width: 80%;
+
+  @include break-at( sm ) {
+    width: auto;
+    margin-right: 10px;
+    margin-bottom: 0;
+  }
 
   &.small-button {
     max-width: 150px;
@@ -169,13 +208,33 @@ img {
   align-items: center;
   justify-content: center;
   flex-direction: column;
-  margin: 15% 0;
+  margin: 10px 0 0;
+
+  @include break-at( sm ) {
+    margin: 15% 0;
+  }
+
 }
 
 .sponser-container-row {
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-direction: column;
+
+  .sponser {
+    margin-bottom: 10px;
+  }
+
+  @include break-at( sm ) {
+    flex-direction: row;
+
+    .sponser {
+      margin-bottom: 0;
+    }
+
+  }
+
 }
 
 .sponsored-by-title {
@@ -215,10 +274,18 @@ img {
 .secondary-content {
   position: relative;
   display: flex;
-  margin: 3% auto;
+  flex-direction: column;
+  margin: 10px 30px;
   border: 5px solid #e5cf5f;
   padding: 20px;
-  max-width: 1000px;
+
+  @include break-at( sm ) {
+    margin: 3% auto;
+    flex-direction: row;
+    max-width: 1000px;
+    width: 100%;
+  }
+
 }
 
 .secondary-content-header {
@@ -235,9 +302,19 @@ img {
 .tilt-left {
 
   .secondary-content-header {
-    top: -10px;
-    left: -35px;
     transform: rotate( -1deg );
+    top: 5px;
+    left: 5px;
+  }
+
+
+  @include break-at( sm ) {
+
+    .secondary-content-header {
+      top: -10px;
+      left: -35px;
+    }
+
   }
 
 }
@@ -260,17 +337,27 @@ img {
 }
 
 .secondary-content-blurb {
-  width: 85%;
   margin-top: 45px;
   font-size: 1.1rem;
   padding-bottom: 10px;
   border-bottom: 1px solid #efefef;
+
+  @include break-at( sm ) {
+    width: 85%;
+  }
+
 }
 
 .map-container {
-  width: 500px;
-  height: 350px;
+  width: 100%;
+  height: 250px;
   background: #eee;
+
+  @include break-at( sm ) {
+    max-width: 500px;
+    height: 350px;
+  }
+
 }
 
 address {
@@ -328,11 +415,17 @@ address {
 .interior-page {
   position: relative;
   background: #ffffff;
-  padding: 75px 25px 25px;
-  max-width: 960px;
   box-sizing: border-box;
   margin: 2% auto;
   border: 5px solid #e5cf5f;
+  padding: 20px;
+
+  @include break-at( sm ) {
+    margin: 2% auto;
+    max-width: 960px;
+    padding: 75px 25px 25px;
+  }
+
 }
 
 .code-of-conduct {

css/mixins.scss

@@ -0,0 +1,29 @@
+$breakpoints: (
+  sm: 600px,
+  gt-sm: 960px,
+  md: 960px,
+  gt-md: 1280px,
+  lg: 1280px,
+  gt-lg: 1920px,
+  xl: 1920px
+);
+
+@mixin break-at( $name-or-min-width ) {
+  $min-width: 0;
+  @if map-has-key($breakpoints, $name-or-min-width) {
+    $min-width: map-get($breakpoints, $name-or-min-width);
+  }
+  @else if type-of($name-or-min-width) == 'number' and not unitless($name-or-min-width) {
+    $min-width: $name-or-min-width;
+  }
+  @else {
+    @error(
+		"No breakpoint named " 
+		+ $name-or-min-width 
+		+ " in $breakpoints.  Available breakpoints:" 
+		+ inspect($breakpoints) + ".  You can also pass in a value like 500px.");
+  }
+  @media only screen and ( min-width: $min-width ) {
+    @content;
+  }
+}

pages/_template.jsx

@@ -4,6 +4,7 @@ import { Link } from 'react-router'
 import { prefixLink } from 'gatsby-helpers'
 import Headroom from 'react-headroom'
 import '../css/markdown-styles'
+import '../css/mixins.scss'
 import '../css/main.scss'
 import { config } from 'config'
 
@@ -21,7 +22,7 @@ module.exports = React.createClass({
         <Headroom style={{background: '#fff'}}>
           <Container className="primary-navigation" >
             <Link to={prefixLink('/')} >
-              <img className="logo" src="images/javascriptmn.png" />
+              <img className="logo" src="/images/javascriptmn.png" />
             </Link>
             <Link to={prefixLink('/about/')} >
               About

pages/index.html

@@ -28,7 +28,7 @@
 
     <div class="sponser-container">
 
-      <div class="sponsored-by-title">Sponsored By:</div>
+      <div class="sponsored-by-title">Hosted By:</div>
 
       <div class="sponser-container-row">
         <div class="sponser">