Add responsive design

.gitignore

 public/
+static/.sass-cache

static/style.css

@@ -67,12 +67,20 @@ body {
 .container {
   max-width: 800px;
   margin: 0 auto; }
+  @media screen and (max-width: 600px) {
+    .container {
+      padding: 0 20px; } }
 
 .navbar {
   padding-top: 15px;
   margin-bottom: 90px;
   display: flex;
   justify-content: space-between; }
+  @media screen and (max-width: 600px) {
+    .navbar {
+      flex-wrap: wrap;
+      justify-content: center;
+      margin-bottom: 30px; } }
   .navbar ul {
     list-style: none; }
     .navbar ul li {
@@ -127,6 +135,9 @@ body {
     top: -21px;
     left: -28px;
     pointer-events: none; }
+    @media screen and (max-width: 600px) {
+      .brand::before {
+        display: none; } }
   .brand:hover::before {
     top: -20px; }
 
@@ -143,6 +154,11 @@ body {
     font-weight: 500;
     color: #d9e1e8;
     line-height: 1; }
+  @media screen and (max-width: 600px) {
+    .intro {
+      padding-top: 20px; }
+      .intro h1 {
+        font-size: 28px; } }
 
 .thumbnail-grid {
   display: flex;
@@ -154,6 +170,9 @@ body {
     flex: 0 0 auto;
     padding: 0 15px;
     margin-bottom: 30px; }
+    @media screen and (max-width: 600px) {
+      .thumbnail-grid li {
+        width: 100%; } }
     .thumbnail-grid li .cover {
       display: block;
       background: #282d37;
@@ -343,12 +362,14 @@ body {
   padding: 40px; }
   .cta-banner h4 {
     font-size: 24px;
+    line-height: 1.08;
     font-weight: 600;
     margin-bottom: 20px;
     color: #fff; }
   .cta-banner p {
     color: #fff;
     font-size: 18px;
+    line-height: 1.22;
     margin-bottom: 20px; }
   .cta-banner > a {
     font-weight: 500;

static/style.scss

@@ -94,6 +94,10 @@ body {
 .container {
   max-width: $content-width;
   margin: 0 auto;
+
+  @media screen and (max-width: 600px) {
+    padding: 0 20px;
+  }
 }
 
 .navbar {
@@ -102,6 +106,12 @@ body {
   display: flex;
   justify-content: space-between;
 
+  @media screen and (max-width: 600px) {
+    flex-wrap: wrap;
+    justify-content: center;
+    margin-bottom: 30px;
+  }
+
   ul {
     list-style: none;
 
@@ -178,6 +188,10 @@ body {
     top: -21px;
     left: -28px;
     pointer-events: none;
+
+    @media screen and (max-width: 600px) {
+      display: none;
+    }
   }
 
   &:hover {
@@ -204,6 +218,14 @@ body {
     color: $lightest;
     line-height: 1;
   }
+
+  @media screen and (max-width: 600px) {
+    padding-top: 20px;
+
+    h1 {
+      font-size: 28px;
+    }
+  }
 }
 
 .thumbnail-grid {
@@ -218,6 +240,10 @@ body {
     padding: 0 15px;
     margin-bottom: 30px;
 
+    @media screen and (max-width: 600px) {
+      width: 100%;
+    }
+
     .cover {
       display: block;
       background: lighten($darkest, 4%);
@@ -486,6 +512,7 @@ body {
 
   h4 {
     font-size: 24px;
+    line-height: 1.08;
     font-weight: 600;
     margin-bottom: 20px;
     color: #fff;
@@ -494,6 +521,7 @@ body {
   p {
     color: #fff;
     font-size: 18px;
+    line-height: 1.22;
     margin-bottom: 20px;
   }