Update CSS breakpoints

website/Gemfile

@@ -1,3 +1,3 @@
 source "https://rubygems.org"
 
-gem "middleman-hashicorp", "0.3.17"
+gem "middleman-hashicorp", "0.3.18"

website/Gemfile.lock

@@ -77,7 +77,7 @@ GEM
       rack (>= 1.4.5, < 2.0)
       thor (>= 0.15.2, < 2.0)
       tilt (~> 1.4.1, < 2.0)
-    middleman-hashicorp (0.3.17)
+    middleman-hashicorp (0.3.18)
       bootstrap-sass (~> 3.3)
       builder (~> 3.2)
       middleman (~> 3.4)
@@ -138,7 +138,7 @@ GEM
     turbolinks (5.0.1)
       turbolinks-source (~> 5)
     turbolinks-source (5.0.0)
-    tzinfo (1.2.2)
+    tzinfo (1.2.3)
       thread_safe (~> 0.1)
     uber (0.0.15)
     uglifier (2.7.2)
@@ -151,7 +151,7 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
-  middleman-hashicorp (= 0.3.17)
+  middleman-hashicorp (= 0.3.18)
 
 BUNDLED WITH
    1.14.6

website/Makefile

@@ -1,4 +1,4 @@
-VERSION?="0.3.17"
+VERSION?="0.3.18"
 
 website:
 	@echo "==> Starting website in Docker..."

website/packer.json

@@ -8,7 +8,7 @@
   "builders": [
     {
       "type": "docker",
-      "image": "hashicorp/middleman-hashicorp:0.3.17",
+      "image": "hashicorp/middleman-hashicorp:0.3.18",
       "discard": "true",
       "run_command": ["-d", "-i", "-t", "{{ .Image }}", "/bin/sh"]
     }

website/source/assets/stylesheets/_community.scss

@@ -1,8 +1,13 @@
+#inner {
   .people {
     margin-top: 30px;
 
     .person {
-    margin-bottom: 40px;
+      &:after {
+        display: block;
+        clear: both;
+        content: ' ';
+      }
 
       img {
         width: 125px;
@@ -14,3 +19,4 @@
       }
     }
   }
+}

website/source/assets/stylesheets/_docs.scss

@@ -1,40 +1,4 @@
-//
+#docs-sidebar {
-// Docs
-// --------------------------------------------------
-
-$docs-font-size: 15px;
-
-body.layout-community,
-body.layout-docs,
-body.layout-downloads,
-body.layout-guides,
-body.layout-http,
-body.layout-intro,
-body.layout-inner {
-  *:focus {
-    outline: none;
-  }
-
-  h1 > code,
-  h2 > code,
-  h3 > code,
-  h4 > code,
-  h5 > code
-  h6 > code,
-  li code,
-  table code,
-  p code,
-  tt,
-  .alert code {
-    font-family: $font-family-monospace;
-    font-size: 90%;
-    background-color: transparent;
-    color: inherit;
-    padding: 0;
-  }
-}
-
-.docs-sidebar {
   margin-bottom: 30px;
   margin-top: 50px;
 
@@ -109,66 +73,3 @@ body.layout-inner {
     }
   }
 }
-
-.bs-docs-section {
-  padding-left: 3%;
-
-  p, li, .alert {
-    font-size: $docs-font-size;
-    font-family: $font-family-open-sans;
-    font-weight: $font-weight-reg;
-    line-height: 1.84em;
-    margin: 0 0 $docs-font-size;
-    -webkit-font-smoothing: antialiased;
-  }
-
-  pre {
-    font-family: $font-family-monospace;
-    font-size: ($docs-font-size - 3);
-    font-weight: normal;
-    padding: 20px;
-    margin: 0 0 $docs-font-size;
-
-    // This will force the code to scroll horizontally on small screens
-    // instead of wrapping.
-    code {
-      overflow-wrap: normal;
-      white-space: pre;
-    }
-  }
-
-  a {
-    color: $body-link-color;
-    text-decoration: none;
-
-    &:hover {
-      text-decoration: underline;
-    }
-
-    code {
-      background: inherit;
-      color: $body-link-color;
-    }
-  }
-
-  img {
-    max-width: 650px;
-    margin-top: 25px;
-    margin-bottom: 25px;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4 {
-    color: $body-font-color;
-    margin-top: 54px;
-    margin-bottom: $docs-font-size;
-    line-height: 1.3;
-  }
-
-  h2 {
-    padding-bottom: 3px;
-    border-bottom: 1px solid $gray-light;
-  }
-}

website/source/assets/stylesheets/_downloads.scss

@@ -1,3 +1,5 @@
+body.layout-downloads {
+  #inner {
     .downloads {
       margin-top: 20px;
 
@@ -58,3 +60,5 @@
         }
       }
     }
+  }
+}

website/source/assets/stylesheets/_global.scss

@@ -25,15 +25,7 @@ h1 {
   margin-bottom: 24px;
 }
 
-.center {
+// Avoid FOUT
-  text-align: center;
-}
-
-.alert p:last-child {
-  margin-bottom: 0;
-}
-
-//Typekit utilites for hiding FOUC
 .wf-loading {
   visibility: hidden;
 }

website/source/assets/stylesheets/_inner.scss

@@ -0,0 +1,89 @@
+#inner {
+  p, li, .alert {
+    font-size: $font-size;
+    font-family: $font-family-open-sans;
+    font-weight: $font-weight-reg;
+    line-height: 1.84em;
+    margin: 0 0 $font-size;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  .alert p:last-child {
+    margin-bottom: 0;
+  }
+
+  pre {
+    font-family: $font-family-monospace;
+    font-size: ($font-size - 3);
+    font-weight: normal;
+    padding: 20px;
+    margin: 0 0 $font-size;
+
+    // This will force the code to scroll horizontally on small screens
+    // instead of wrapping.
+    code {
+      overflow-wrap: normal;
+      white-space: pre;
+    }
+  }
+
+  a {
+    color: $body-link-color;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    code {
+      background: inherit;
+      color: $body-link-color;
+    }
+  }
+
+  img {
+    display: block;
+    margin: 25px auto;
+    max-width: 650px;
+    height: auto;
+    width: 90%;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4 {
+    color: $body-font-color;
+    margin-top: 54px;
+    margin-bottom: $font-size;
+    line-height: 1.3;
+  }
+
+  h2 {
+    padding-bottom: 3px;
+    border-bottom: 1px solid $gray-light;
+  }
+
+  h1 > code,
+  h2 > code,
+  h3 > code,
+  h4 > code,
+  h5 > code
+  h6 > code,
+  li code,
+  table code,
+  p code,
+  tt,
+  .alert code {
+    font-family: $font-family-monospace;
+    font-size: 90%;
+    background-color: transparent;
+    color: inherit;
+    padding: 0;
+  }
+
+  table {
+    @extend .table;
+    @extend .table-striped;
+  }
+}

website/source/assets/stylesheets/_variables.scss

@@ -1,16 +1,14 @@
-//
-// NEW STUFF
-// ---------------------
-//
-
 // Colors
 $white: #FFFFFF;
 $black: #000000;
+$gray-darker: #555555;
 
 $packer-blue: #1DAEFF;
 $packer-blue-dark: #1D94DD;
 $vagrant-blue: #1563FF;
 $vagrant-blue-dark: #104EB2;
+$vault-black: #000000;
+$vault-blue: #00ABE0;
 
 // Typography
 $font-family-klavika:   'klavika-web', 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -37,7 +35,7 @@ $sidebar-font-weight: $font-weight-reg;
 $header-height: 92px;
 $header-font-size: $font-size - 2;
 $header-link-color: $body-font-color;
-$header-link-color-hover: $packer-blue-dark;
+$header-link-color-hover: $black;
 
 // Footer
 $footer-font-size: $font-size - 2;

website/source/assets/stylesheets/application.scss

@@ -22,6 +22,7 @@
 @import '_header';
 @import '_footer';
 @import '_buttons';
+@import '_inner';
 
 // Pages
 @import '_community';

website/source/layouts/docs.erb

@@ -1,6 +1,5 @@
 <% wrap_layout :inner do %>
   <% content_for :sidebar do %>
-    <div class="docs-sidebar hidden-print affix-top" role="complementary">
     <ul class="nav docs-sidenav">
       <li<%= sidebar_current("docs-install") %>>
         <a href="/docs/install/index.html">Installing Packer</a>
@@ -300,7 +299,6 @@
         <a href="/docs/other/debugging.html">Debugging</a>
       </li>
     </ul>
-    </div>
   <% end %>
 
   <%= yield %>

website/source/layouts/downloads.erb

@@ -7,7 +7,7 @@
         </li>
 
         <li<%= sidebar_current("downloads-community") %>>
-          <a href="/downloads-community.html">Download Community Tools</a>
+          <a href="/downloads-community.html">Community Tools</a>
         </li>
 
         <li>

website/source/layouts/guides.erb

@@ -1,12 +1,10 @@
 <% wrap_layout :inner do %>
   <% content_for :sidebar do %>
-    <div class="docs-sidebar hidden-print affix-top" role="complementary">
     <ul class="nav docs-sidenav">
       <li<%= sidebar_current("guides-veewee-to-packer") %>>
         <a href="/guides/veewee-to-packer.html">Veewee to Packer</a>
       </li>
     </ul>
-    </div>
   <% end %>
 
   <%= yield %>

website/source/layouts/inner.erb

@@ -1,15 +1,13 @@
 <% wrap_layout :layout do %>
 <div class="container">
   <div class="row">
-    <div class="col-sm-3 col-md-3 col-xs-12">
+    <div id="docs-sidebar" class="col-sm-3 col-md-3 col-xs-12 hidden-print" role="complementary">
       <%= yield_content :sidebar %>
     </div>
 
-    <div class="col-sm-9 col-md-9 col-xs-12" role="main">
+    <div id="inner" class="col-sm-9 col-md-9 col-xs-12" role="main">
-      <div class="bs-docs-section">
       <%= yield %>
     </div>
   </div>
 </div>
-</div>
 <% end %>

website/source/layouts/intro.erb

@@ -1,6 +1,5 @@
 <% wrap_layout :inner do %>
   <% content_for :sidebar do %>
-    <div class="docs-sidebar hidden-print affix-top" role="complementary">
     <ul class="nav docs-sidenav">
       <li<%= sidebar_current("intro-why") %>>
         <a href="/intro/why.html">Why Use Packer?</a>
@@ -39,7 +38,6 @@
         </ul>
       </li>
     </ul>
-    </div>
   <% end %>
 
   <%= yield %>