Add responsive styles

src/index.hbs

@@ -3,10 +3,12 @@
 
 <section id="hero">
   <div class="inner">
-    <div class="nine columns offset-by-one">
-      <h1>Secret Handshake</h1>
+    <div class="row">
+      <div class="nine columns offset-by-one">
+        <h1>Secret Handshake</h1>
+      </div>
+      <div class="three columns offset-by-nine"><img src="images/logo-dark.svg"></div>
     </div>
-    <div class="three columns offset-by-nine"><img src="images/logo-dark.svg"></div>
   </div>
 </section>
 
@@ -77,7 +79,7 @@
 
 <section id="next-meetup" class="sec">
   <div class="inner">
-    <h2 class="section-title">Next meetup</h2>
+    <h2 class="section-title">Next one</h2>
     <div class="row">
       <div class="eight columns center meetup">
         <h3>Secret Handshake #62</h3>

src/scss/base/base.scss

@@ -30,19 +30,44 @@ a {
   }
 }
 
+h1,
+h2,
+h3 {
+  font-weight: bold !important;
+}
+
 h1 {
-  font: font(xx-large);
-  font-weight: bold;
+  font: font(large);
 }
 
 h2 {
-  font: font(x-large);
-  font-weight: bold;
+  font: font(large);
 }
 
 h3 {
-  font: font(large);
-  font-weight: bold;
+  font: font(x-medium);
+}
+
+// For tablets
+@media (min-width: 750px) {
+  h1 {
+    font: font(x-large);
+  }
+}
+
+// For larger screens
+@media (min-width: 1000px) {
+  h1 {
+    font: font(xx-large);
+  }
+
+  h2 {
+    font: font(x-large);
+  }
+
+  h3 {
+    font: font(large);
+  }
 }
 
 .cf {
@@ -54,20 +79,52 @@ h3 {
 }
 
 .sec {
+  background: color(light);
+
   &:not(:first-of-type) {
-    margin-top: ws(xxxx-large);
+    margin-top: ws(xxx-large);
   }
 
   .inner {
-    padding: ws(xxx-large) ws(large) ws(xx-large) ws(large);
+    padding: ws(x-large) ws(x-small) ws(x-large) ws(x-small);
     background: color(light);
   }
 
   .section-title {
+    text-align: center;
+    left: 0;
+    right: 0;
     position: absolute;
-    top: - ws(large);
+    top: - ws(x-medium);
     z-index: 9;
   }
+
+  @media (min-width: 750px) {
+    .inner {
+      padding: ws(xxx-large) ws(small) ws(xx-large) ws(small);
+    }
+  }
+
+  @media (min-width: 1000px) {
+    & {
+      background: none;
+    }
+
+    &:not(:first-of-type) {
+      margin-top: ws(xxxx-large);
+    }
+
+    .inner {
+      padding: ws(xxx-large) ws(large) ws(xx-large) ws(large);
+      background: color(light);
+    }
+
+    .section-title {
+      top: - ws(large);
+      text-align: left;
+      margin-left: ws(large);
+    }
+  }
 }
 
 .btn {

src/scss/base/grid.scss

@@ -110,27 +110,27 @@
 
 }
 
-/* Larger than mobile */
+// Larger than mobile
 @media (min-width: 400px) {
 
 }
 
-/* Larger than phablet (also point when grid becomes active) */
+// Larger than phablet (also point when grid becomes active)
 @media (min-width: 550px) {
-  
+
 }
 
-/* Larger than tablet */
+// Larger than tablet
 @media (min-width: 750px) {
 
 }
 
-/* Larger than desktop */
+// Larger than desktop
 @media (min-width: 1000px) {
 
 }
 
-/* Larger than Desktop HD */
+// Larger than Desktop HD
 @media (min-width: 1200px) {
 
 }

src/scss/base/variables.scss

@@ -14,7 +14,7 @@ $whitespace: (
   xx-large: 5rem,
   x-large: 4rem,
   large: 3rem,
-  x-medium: 2.15rem,
+  x-medium: 2.25rem,
   medium: 2rem,
   small: 1.2rem,
   x-small: 0.7rem,
@@ -27,6 +27,7 @@ $font-size: (
   xx-large: 8rem/1.05,
   x-large: 5rem/1.0,
   large: 3rem/1.2,
+  x-medium: 2.2rem/1.2,
   medium: 1.2rem/1.4,
   small: 1rem/1.6,
   tiny: 0.8rem/1.0

src/scss/components/footer.scss

@@ -19,8 +19,28 @@
       font: font(medium) !important;
 
       &:not(:first-of-type) {
-        margin-left: ws(medium);
+        margin-left: ws(small);
       }
     }
   }
+
+  .sponsor {
+    margin-top: ws(small);
+  }
+}
+
+@media (min-width: 1000px) {
+  #main-footer {
+    ul.social {
+      li {
+        &:not(:first-of-type) {
+          margin-left: ws(medium);
+        }
+      }
+    }
+
+    .sponsor {
+      margin-top: 0;
+    }
+  } 
 }

src/scss/pages/home/hero.scss

@@ -1,23 +1,59 @@
 #hero {
-  margin-top: ws(x-large);
-
+  background: color(yellow);
+
+  .inner {
+    padding: ws(medium) ws(x-small) ws(medium) ws(x-small);
+  }
+
   .nine.columns {
     background: color(yellow);
-    padding: ws(medium);
     position: relative;
     z-index: 9;
   }
 
   .three.columns {
-    position: absolute;
-    opacity: 0.1;
-    margin-top: ws(xxx-large);
-    z-index: 4;
-
-    img {
-      width: 100%;
-      height: auto;
-      transform: rotate(12deg);
+    display: none;
+  }
+}
+
+// Larger than tablet
+@media (min-width: 750px) {
+  #hero {
+    .inner {
+      padding-top: ws(x-large);
+      padding-bottom: ws(x-large);
+    }
+  }
+}
+
+// For larger screens
+@media (min-width: 1000px) {
+  #hero {
+    background: none;
+    margin-top: ws(x-large);
+
+    .inner {
+      padding: 0;
+    }
+
+    .nine.columns {
+      background: color(yellow);
+      padding: ws(medium);
+      position: relative;
+      z-index: 9;
+    }
+
+    .three.columns {
+      position: absolute;
+      opacity: 0.1;
+      margin-top: ws(xxx-large);
+      z-index: 4;
+
+      img {
+        width: 100%;
+        height: auto;
+        transform: rotate(12deg);
+      }
     }
   }
 }

src/scss/pages/home/intro.scss

@@ -1,11 +1,30 @@
 #intro {
-  margin-top: - ws(xx-large);
-  text-align: center;
-  position: relative;
-  z-index: 2;
+  margin-top: 0;
 
   .inner {
-    border-top: ws(xx-large) solid color(light);
     padding-top: ws(x-large);
   }
-}
+}
+
+
+@media (min-width: 750px) {
+  #intro {
+    .inner {
+      padding-top: ws(xx-large);
+    }
+  }
+}
+
+@media (min-width: 1000px) {
+  #intro {
+    text-align: center;
+    margin-top: - ws(xx-large);
+    position: relative;
+    z-index: 2;
+
+    .inner {
+      border-top: ws(xx-large) solid color(light);
+      padding-top: ws(xx-large);
+    }
+  }
+}

src/scss/pages/home/next-meetup.scss

@@ -1,7 +1,6 @@
 #next-meetup {
   .inner {
-    border-bottom: ws(xx-large) solid color(light);
-    text-align: center;
+    text-align: left;
   }
 
   .section-title {
@@ -16,4 +15,21 @@
     display: inline-block;
     margin-top: ws(large);
   }
+}
+
+@media (min-width: 750px) {
+  #next-meetup {
+    .inner {
+      text-align: center;
+    }
+  }
+}
+
+@media (min-width: 1000px) {
+  #next-meetup {
+    .inner {
+      text-align: center;
+      border-bottom: ws(xx-large) solid color(light);
+    }
+  }  
 }