Add mobile and tablet styles

Closes luckyframework#43

This commit makes minimal changes to the existing styles and as few
changes as possible to the existing markup to add responsive views into
the guides.

source/assets/stylesheets/_btn.scss

@@ -3,7 +3,7 @@
   background: $medium-green;
   text-transform: uppercase;
   font-weight: bold;
-  height: $btn-height;
+  min-height: $btn-height;
   font-size: 14px;
   color: #fff;
   padding: 15px 30px;

source/assets/stylesheets/_header-nav.scss

@@ -1,9 +1,13 @@
 .header-nav {
-  display: flex;
-  flex-direction: row;
+  @include medium-up {
+    display: flex;
+    align-items: center;
+  }
 
-  li {
-    margin-left: 35px;
+  @include medium-up {
+    li {
+      margin-left: 35px;
+    }
   }
 
   a {
@@ -14,9 +18,20 @@
     letter-spacing: 1.5px;
     text-decoration: none;
     text-transform: uppercase;
+    padding-top: 10px;
+    padding-bottom: 8px;
+
+    @include medium-up {
+      padding-top: 26px;
+      padding-bottom: 24px;
+    }
 
     &:hover {
       text-decoration: underline;
     }
   }
+
+  .github-button-item {
+    padding: 10px 0;
+  }
 }

source/assets/stylesheets/_header.scss

@@ -1,14 +1,16 @@
 .header {
   background: #002748;
   background-image: linear-gradient(90deg, #021E37 0%, #023B6C 100%);
-  height: 70px;
+  padding-top: 20px;
+  padding-bottom: 20px;
 
   &__container {
     @include centered-container;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    height: 100%;
+    @include medium-up {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
   }
 
   &__logo {

source/assets/stylesheets/_intro-card.scss

@@ -6,7 +6,10 @@ $intro-card-padding: 38px;
   border-radius: 8px;
   padding: 20px 0;
   box-sizing: border-box;
-  width: $intro-card-width;
+
+  @include large-up {
+    width: $intro-card-width;
+  }
 
   &__heading {
     text-transform: uppercase;

source/assets/stylesheets/_page-intro.scss

@@ -3,18 +3,24 @@
   background-image: linear-gradient(130deg, #00a7c1 0%, #25dcad 100%);
   color: #fff;
 
-  .intro-card {
-    position: absolute;
-    top: 20px;
-    left: 10px;
+  @include large-up {
+    .intro-card {
+      position: absolute;
+      top: 20px;
+      left: 10px;
+    }
   }
 
   &__container {
     @include centered-container;
     @include padding(60px null);
     position: relative;
-    display: flex;
-    flex-direction: row;
+  }
+
+  @include large-up {
+    &__container {
+      display: flex;
+    }
   }
 
   &__arrow {
@@ -28,7 +34,10 @@
     text-shadow: 0 1px 2px rgba(20, 120, 102, 0.27);
     font-weight: bold;
     text-transform: uppercase;
-    float: left;
+
+    @include large-up {
+      float: left;
+    }
 
     a {
       color: #fff;
@@ -41,20 +50,28 @@
     }
   }
 
-  &__left {
-    display: flex;
-    flex-direction: column;
-    margin-left: $intro-card-width + 30px;
+
+  @include large-up {
+    &__left {
+      display: flex;
+      flex-direction: column;
+      margin-left: $intro-card-width + 30px;
+    }
   }
 
   &__toc {
     font-size: 18px;
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.39);
-    padding: 10px 75px 0 0;
 
-    &--wide {
-      column-count: 2;
-      break-inside: avoid;
+    padding: 20px 0;
+
+    @include medium-up {
+      padding: 10px 75px 30px 0;
+
+      &--wide {
+        column-count: 2;
+        break-inside: avoid;
+      }
     }
   }
 

source/assets/stylesheets/_text-container.scss

@@ -1,16 +1,27 @@
 .text-container {
   @include centered-container;
   margin: 30px auto;
+  max-width: 40em;
   color: $dark-navy;
-  font-size: 16px;
   padding-bottom: 40px;
+  word-wrap: break-word;
+  font-size: 12px;
 
-  #next-page-link {
-    margin: 15px 0;
+  @include medium-up {
+    font-size: 14px;
+  }
+
+  @include large-up {
+    font-size: 16px;
+    @include centered-container;
+
+    &--with-table-of-contents {
+      padding-left: $intro-card-width + 60px;
+    }
   }
 
-  &--with-table-of-contents {
-    padding-left: $intro-card-width + 60px;
+  #next-page-link {
+    margin: 15px 0;
   }
 
   h1,
@@ -56,7 +67,6 @@
   }
 
   code {
-    font-size: 16px;
     font-family: Menlo, Roboto Mono, Courier New, monospace;
     background: #fff;
     border-radius: 4px;
@@ -72,11 +82,17 @@
   blockquote {
     background: #ffffff;
     border-radius: 4px;
-    padding: 10px 10px 10px 16px;
-    margin: 30px 0 30px -16px;
+    margin: 30px -16px;
     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
   }
 
+  pre > code {
+    padding-left: 16px;
+    padding-right: 16px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
+
   blockquote {
     border-left: 2px solid $medium-green;
     color: $medium-gray;

source/assets/stylesheets/main.css.scss

@@ -30,6 +30,10 @@ body {
   font-family: "Lato", sans-serif;
 }
 
+main {
+  overflow: hidden;
+}
+
 .light-body {
   background: #f4f7f6;
 }

source/assets/stylesheets/mixins/_centered-container.scss

@@ -3,6 +3,11 @@
   margin-left: auto;
   margin-right: auto;
   box-sizing: border-box;
-  padding-left: 24px;
-  padding-right: 24px;
+  padding-left: 12px;
+  padding-right: 12px;
+
+  @include medium-up {
+    padding-left: 24px;
+    padding-right: 24px;
+  }
 }

source/partials/_header.erb

@@ -17,7 +17,7 @@
       <li>
         <a href="https://github.com/luckyframework/web">GitHub</a>
       </li>
-      <li>
+      <li class="github-button-item">
         <a class="github-button" href="https://github.com/luckyframework/web" data-size="large" data-show-count="true" aria-label="Star luckyframework/web on GitHub">Star</a>
       </li>
       <li>

source/partials/_layout_head.erb

@@ -1,6 +1,7 @@
 <head>
   <meta charset="utf-8">
   <title><%= title %></title>
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
   <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
   <link rel="stylesheet"