Update styles

9 years ago · 47f07cfbfa
parent 1d5cd34fcb
commit 47f07cfbfa
17 changed files with 224 additions and 262 deletions
--- a/website/source/404.html.erb
+++ b/website/source/404.html.erb
@ -1,12 +0,0 @@
---
-noindex: true
-page_title: Page Not Found
-layout: inner
---
-
-<h1>Page Not Found</h1>
-
-<p>
-  We are sorry. The page you are trying to reach is not available.
-  Please make sure you have spelled everything correctly.
-</p>
--- a/website/source/404.html.md
+++ b/website/source/404.html.md
@ -0,0 +1,14 @@
+---
+layout: inner
+page_title: Page Not Found
+noindex: true
+description: |-
+  Page not found!
+---
+
+# Page Not Found
+
+Sorry, the page you tried to visit does not exist. This could be our fault,
+and if so we will fix that up right away.
+
+Please go back, or go back to get back on track.
--- a/website/source/assets/images/logo-text.svg
+++ b/website/source/assets/images/logo-text.svg
@ -1,18 +1,7 @@
-<svg width="142px" height="54px" viewBox="423 368 142 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(423.000000, 368.000000)">
-        <g id="Group">
-            <g id="Group-3" transform="translate(46.285714, 13.885714)" fill="#020302">
-                <path d="M9.76303017,5.59004 L5.21499244,5.59004 L5.21499244,13.7839543 L9.76303017,13.7839543 C12.3062229,13.7839543 13.0584349,12.84944 13.0584349,10.8725829 L13.0584349,8.42952571 C13.0584349,6.45266857 12.2356372,5.59004 9.76303017,5.59004 L9.76303017,5.59004 Z M0.701720789,1.60144 L10.0137675,1.60144 C15.5299884,1.60144 17.5717065,3.86478286 17.5717065,8.07009715 L17.5717065,11.33984 C17.5717065,15.5092115 15.3508904,17.7725543 9.79884979,17.7725543 L5.21499244,17.7725543 L5.21499244,25.5362115 L0.701720789,25.5362115 L0.701720789,1.60144 Z" id="Fill-1"></path>
-                <path d="M28.8200141,18.9230429 L25.5962487,18.9230429 C24.1634641,18.9230429 23.7694482,19.3184143 23.7694482,20.6493571 C23.7694482,21.8703572 24.1634641,22.4095 25.5246094,22.4095 C26.8151692,22.4095 27.996163,21.9792428 28.8200141,21.5109286 L28.8200141,18.9230429 Z M33.1889538,25.5365286 L29.6080457,25.5365286 L29.2856692,24.3504143 C27.709606,25.3927571 25.8480395,25.8959572 24.0928783,25.8959572 C20.9049325,25.8959572 19.5437871,23.7034428 19.5437871,20.6842429 C19.5437871,17.1269571 21.0840305,15.7611286 24.6291191,15.7611286 L28.8200141,15.7611286 L28.8200141,13.9280429 C28.8200141,11.9871286 28.2827199,11.3042143 25.4898434,11.3042143 C23.9137803,11.3042143 22.1944386,11.5198714 20.6541951,11.8433571 L20.1169009,8.50172857 C21.7646033,7.99852857 24.1634641,7.67398571 26.0977233,7.67398571 C31.5781246,7.67398571 33.1889538,9.6149 33.1889538,13.9999286 L33.1889538,25.5365286 Z" id="Fill-3"></path>
-                <path d="M36.3427657,19.17496 L36.3427657,14.3956171 C36.3427657,9.68710286 38.3834303,7.67430285 43.8648851,7.67430285 C45.0816984,7.67430285 46.8368596,7.88995999 48.1263659,8.32127429 L47.5890717,11.91556 C46.4070244,11.5920743 44.8320147,11.4483029 43.9712904,11.4483029 C41.4639173,11.4483029 40.7117054,12.2031029 40.7117054,14.3586171 L40.7117054,19.2109028 C40.7117054,21.3674742 41.4639173,22.1222742 43.9712904,22.1222742 C45.0816984,22.1222742 46.3353851,21.9785029 47.5890717,21.6550171 L48.1263659,25.2493029 C46.9801381,25.6436172 45.2966162,25.8952171 43.8648851,25.8952171 C38.3834303,25.8952171 36.3427657,23.8834742 36.3427657,19.17496" id="Fill-5"></path>
-                <path d="M66.2497221,8.03373143 L61.1285705,16.6949028 L66.4646398,25.5368457 L61.6648113,25.5368457 L56.4003811,16.6949028 L61.3793078,8.03373143 L66.2497221,8.03373143 Z M51.422508,25.5368457 L51.422508,0.88216 L55.7914477,0.271131428 L55.7914477,25.5368457 L51.422508,25.5368457 Z" id="Fill-7"></path>
-                <path d="M72.125298,14.9340199 L77.6773386,14.9340199 L77.6773386,14.0724486 C77.6773386,12.41802 77.1758639,11.2678486 75.026687,11.2678486 C72.8775099,11.2678486 72.125298,12.41802 72.125298,14.0724486 L72.125298,14.9340199 Z M75.5271081,22.3023058 C77.2106301,22.3023058 78.9657912,22.0496486 80.8642309,21.4745629 L81.5448036,24.7813058 C79.5747247,25.5361058 77.2106301,25.8955342 75.1330922,25.8955342 C69.6537445,25.8955342 67.7563584,23.3435914 67.7563584,19.1393343 L67.7563584,14.5037628 C67.7563584,10.8016486 69.4030073,7.67461999 74.9908673,7.67461999 C80.577674,7.67461999 81.8313605,10.94542 81.8313605,14.7183629 L81.8313605,18.45642 L72.125298,18.45642 L72.125298,19.3549914 C72.125298,21.4745629 72.8775099,22.3023058 75.5271081,22.3023058 L75.5271081,22.3023058 Z" id="Fill-9"></path>
-                <path d="M94.0464818,11.6995857 C92.3629597,12.4543857 91.0018144,13.2451286 89.4257512,14.2515285 L89.4257512,25.5365286 L85.0568116,25.5365286 L85.0568116,8.03341429 L88.7462321,8.03341429 L89.0317355,9.97432857 C89.9988651,9.32841429 92.0764029,8.10635714 93.6166464,7.67398571 L94.0464818,11.6995857 Z" id="Fill-11"></path>
-            </g>
-            <g id="Group-2">
-                <polygon id="Fill-14" fill="#4DA7DD" points="0.0457551661 6.78122188 17.4668089 16.7388331 17.4668089 53.4565393 0.0457551661 43.4989281"></polygon>
-                <path d="M26.0912358,11.0720936 L7.15522129,0.281399106 L7.15522129,7.77521048 L20.0313926,15.1311594 L20.0313926,37.6116087 L26.0912358,41.0552169 C29.8408135,43.1960245 32.9085593,41.9129186 32.9085593,38.2044175 L32.9085593,21.7091699 C32.9085593,18.0006687 29.8408135,13.2129012 26.0912358,11.0720936" id="Fill-17" fill="#3192D0"></path>
-            </g>
-        </g>
-    </g>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="423 368 142 54">
+  <g fill="none" fill-rule="evenodd">
+    <path class="p-front" d="M423.046 374.78l17.42 9.96v36.717l-17.42-9.958"/>
+    <path class="p-back" d="M449.09 379.072l-18.935-10.79v7.493l12.876 7.356v22.485l6.06 3.443c3.75 2.14 6.82.858 6.82-2.85V389.71c0-3.71-3.07-8.497-6.82-10.638"/>
+    <path class="text" d="M479.05 387.476h-4.55v8.194h4.55c2.542 0 3.294-.935 3.294-2.912v-2.443c0-1.977-.823-2.84-3.295-2.84zm-9.063-3.99h9.312c5.513 0 7.554 2.264 7.554 6.47v3.27c0 4.17-2.22 6.432-7.772 6.432H474.5v7.764h-4.513v-23.935zm28.12 17.324h-3.225c-1.433 0-1.827.394-1.827 1.725 0 1.22.394 1.76 1.755 1.76 1.29 0 2.472-.43 3.296-.898v-2.588zm4.37 6.612h-3.583l-.323-1.186c-1.572 1.042-3.433 1.546-5.19 1.546-3.19 0-4.55-2.193-4.55-5.212 0-3.557 1.54-4.923 5.088-4.923h4.19v-1.833c0-1.94-.537-2.624-3.33-2.624-1.576 0-3.295.216-4.835.54l-.536-3.343c1.647-.503 4.046-.827 5.98-.827 5.48 0 7.092 1.94 7.092 6.326v11.536zm3.15-6.362v-4.78c0-4.707 2.04-6.72 7.524-6.72 1.22 0 2.976.216 4.265.647l-.537 3.594c-1.182-.32-2.757-.463-3.618-.463-2.508 0-3.26.755-3.26 2.91v4.853c0 2.155.752 2.91 3.26 2.91 1.11 0 2.363-.144 3.617-.467l.537 3.595c-1.146.394-2.83.646-4.26.646-5.483 0-7.524-2.01-7.524-6.72m29.905-11.143l-5.12 8.66 5.335 8.845h-4.8l-5.264-8.842 4.98-8.66h4.87zm-14.827 17.505V382.77l4.37-.61v25.264h-4.37zm20.702-10.603h5.553v-.86c0-1.655-.5-2.805-2.65-2.805s-2.902 1.15-2.902 2.804v.86zm3.403 7.37c1.683 0 3.44-.254 5.337-.83l.68 3.308c-1.97.755-4.334 1.114-6.41 1.114-5.48 0-7.378-2.55-7.378-6.754v-4.636c0-3.703 1.647-6.83 7.235-6.83 5.586 0 6.84 3.27 6.84 7.044v3.738h-9.706v.9c0 2.118.756 2.946 3.406 2.946zm18.52-10.604c-1.684.755-3.045 1.546-4.62 2.552v11.285h-4.37V389.92h3.69l.284 1.94c.968-.646 3.045-1.868 4.585-2.3l.43 4.025z"/>
+  </g>
 </svg>
--- a/website/source/assets/images/screenshots/works_with.png
+++ b/website/source/assets/images/screenshots/works_with.png
--- a/website/source/assets/javascripts/application.js
+++ b/website/source/assets/javascripts/application.js
@ -1,6 +1,5 @@
 //= require jquery
 //= require turbolinks
-//= require bootstrap

 //= require hashicorp/mega-nav
 //= require hashicorp/sidebar
--- a/website/source/assets/stylesheets/_buttons.scss
+++ b/website/source/assets/stylesheets/_buttons.scss
@ -1,11 +1,3 @@
-$gray-mid: #7b8A8E;
-$gray-light: #E6E6E6;
-
-$button-background: $white;
-$button-font-color: $gray-mid;
-$button-primary-background: $packer-blue;
-$button-primary-font-color: $white;
-
 .button {
  background: $button-background;
  border: 1px solid $button-font-color;
@ -42,13 +34,4 @@ $button-primary-font-color: $white;
      background: lighten($button-primary-background, 5%);
    }
  }
-
-  &.secondary {
-    color: $button-font-color;
-
-    &:hover {
-      color: $white;
-      background-color: $black;
-    }
-  }
 }
--- a/website/source/assets/stylesheets/_downloads.scss
+++ b/website/source/assets/stylesheets/_downloads.scss
@ -8,21 +8,22 @@ body.layout-downloads {
      }

      .download {
+        align-items: center;
        border-bottom: 1px solid #b2b2b2;
-        padding-bottom: 15px;
-        margin-top: 10px;
-        margin-bottom: 10px;
+        display: flex;
+        padding: 15px;

        .details {
-          padding-left: 95px;
+          padding-left: 20px;

          h2 {
-            margin-top: 30px;
+            margin-top: 4px;
+            border: none;
          }

          ul {
            padding-left: 0px;
-            margin-top: 8px;
+            margin: -8px 0 0 0;
          }

          li {
@ -39,7 +40,7 @@ body.layout-downloads {
        }

        .icon {
-          img {
+          svg {
            width: 75px;
          }
        }
@ -52,12 +53,7 @@ body.layout-downloads {

      .poweredby {
        margin-top: 20px;
-
-        img {
-          display: block;
-          margin: 0 auto;
-          width: 122px;
-        }
+        text-align: center;
      }
    }
  }
--- a/website/source/assets/stylesheets/_global.scss
+++ b/website/source/assets/stylesheets/_global.scss
@ -16,8 +16,7 @@ body {
  min-height: 100%;
 }

-h1, h2, h3, h4, h5, h5 {
-  color: $black;
+h1, h2, h3, h4, h5 {
  font-family: $font-family-klavika;
  -webkit-font-smoothing: antialiased;
 }
--- a/website/source/assets/stylesheets/_header.scss
+++ b/website/source/assets/stylesheets/_header.scss
@ -1,5 +1,6 @@
 #header {
-  // Hamburger menu
+  background: $header-background-color;
+
  .navbar-toggle {
    height: $header-height;
    margin: 0;
@ -7,44 +8,42 @@
    border-radius: 0;

    .icon-bar {
-      border: 1px solid $black;
+      border: 1px solid $white;
      border-radius: 0;
    }
  }

-  // Logo
  .navbar-brand {
    display: block;
    margin: 0;
    padding: 0;

-    .logo {
-      color: $header-link-color;
-      display: inline-block;
-      font-family: $font-family-klavika;
-      font-weight: $font-weight-bold;
-      font-size: 0;
+    a {
+      display: flex;
+      align-items: center;
      height: $header-height;
      line-height: $header-height;
-      width: 200px;
-      padding-left: 64px;
-      background: image-url('logo-text.svg') 0 0 no-repeat;
-      background-position: left center;

-      &:hover, &:focus, &:active {
-        outline: 0;
-        text-decoration: none;
+      svg.logo {
+        transition: opacity 0.15s ease-in-out;
+        @extend svg.logo.white;
+
+        &:hover, &:focus, &:active {
+          opacity: 0.6;
+          outline: 0;
+          text-decoration: none;
+        }
      }
    }
  }

-  // Nav
  ul.nav {
    li {
      a {
        color: $header-link-color;
        font-size: $header-font-size;
        font-family: $font-family-open-sans;
+        font-weight: $font-weight-bold;
        height: $header-height;
        line-height: $header-height;
        padding: 0 10px;
--- a/website/source/assets/stylesheets/_home.scss
+++ b/website/source/assets/stylesheets/_home.scss
@ -1,79 +1,67 @@
-#page-home {
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    font-weight: $font-weight-bold;
-  }
-
-  h1 {
-    font-size: 36px;
-    letter-spacing: -0.02em
-  }
-
-  h2 {
-    font-size: 24px;
-  }
-
-  h3 {
-    font-size: 18px;
-  }
+// TODO: remove
+$hero-height: 350px;
+$baseline: 20px;

-  .hero {
-    height: $hero-height + 100px;
-    margin-bottom: ($baseline * 4);
-    background: image-url('hero-image.svg') no-repeat;
-    background-position: top right;

-    h1 { color: $black;}
+#page-home {
+  // Override the main header
+  #header {
+    background: $home-header-background-color;

-    @media (min-width: 1200px) {
-      h1 {
-        margin-top: 100px;
+    .navbar-toggle {
+      .icon-bar {
+        border: 1px solid $home-header-link-color;
      }
    }

-    @media (max-width: $screen-md-max) {
-      height: $hero-height;
-
-      h1 {
-        font-size: 36px;
-        padding-top: 1em;
-        padding-bottom: 1em;
+    .navbar-brand {
+      a {
+        svg.logo {
+          @extend svg.logo.color;
+        }
      }
    }

-    @media (max-width: $screen-sm-max) {
-      height: auto;
-      background: none;
+    ul.nav {
+      li {
+        a {
+          color: $home-header-link-color;
+
+          &:hover, &:focus, &:active {
+            background-color: transparent;
+            color: $home-header-link-color-hover;
+
+            svg {
+              fill: $home-header-link-color-hover;
+            }
+          }

-      h1 {
-        margin: 0;
-        padding-top: 1em;
-        margin-bottom: 1em;
+          svg {
+            fill: $home-header-link-color;
+          }
+        }
      }
    }
  }

-  .download-module {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    margin: $baseline*6 0 $baseline 0;
-    padding: $baseline;
-    background-color: $white;
-    border: 1px solid $gray-light;
+  header {
+    .hero {
+      margin: 140px auto 160px auto;
+      text-align: center;

-    p {
-      padding-top: 7px;
-    }
+      .button {
+        margin: 5px;

-    .button {
-      display: block;
-      margin: 0 0 0 $baseline;
-      background-color: $white;
+        @media (max-width: 768px) {
+          display: block;
+          margin-top: 10px;
+          text-align: center;
+        }
+      }
+
+      svg {
+        max-width: 90%;
+      }
    }
  }

--- a/website/source/assets/stylesheets/_logos.scss
+++ b/website/source/assets/stylesheets/_logos.scss
@ -0,0 +1,39 @@
+svg.logo {
+  &.color {
+    opacity: 1.0;
+
+    path.text {
+      fill: $black;
+      opacity: 1.0;
+    }
+
+    path.p-front {
+      fill: #4DA7DD;
+      opacity: 1.0;
+    }
+
+    path.p-back {
+      fill: #3192D0;
+      opacity: 1.0;
+    }
+  }
+
+  // The default logo class is the colored version
+  @extend .color;
+
+  &.white {
+    opacity: 1.0;
+
+    path.text {
+      fill: $white;
+    }
+
+    path.p-front, path.p-back {
+      fill: $white;
+    }
+
+    path.p-back {
+      opacity: 0.7;
+    }
+  }
+}
--- a/website/source/assets/stylesheets/_variables.scss
+++ b/website/source/assets/stylesheets/_variables.scss
@ -9,35 +9,23 @@ $vagrant-blue: #1563FF;
 $vagrant-blue-dark: #104EB2;
 $vault-black: #000000;
 $vault-blue: #00ABE0;
-$green: #7bc6b1;

 // Typography
 $font-family-klavika:   'klavika-web', 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
 $font-family-open-sans: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
-$font-family-mono: 'Inconsolata', 'Monaco', 'courier new', courier, monospace;
-$font-size:             16px;
+$font-family-monospace: 'Menlo', 'Monaco', 'Consolas', "Courier New", monospace;
+$font-size:             15px;
 $font-weight-reg:       400;
 $font-weight-bold:      600;

-
-.open-sans { font-family: $font-family-open-sans;}
-.klavika { font-family: $font-family-klavika; }
-.mono { font-family: $font-family-mono; }
-
-.text-center { text-align: center !important; }
-.text-left { text-align: left !important; }
-.text-right { text-align: right !important; }
-
-// helper class to add additional weight and subtle spacing
-// to improve legibility of light text on dark backgrounds
-.rev-out { font-weight: 600; letter-spacing: 0.01em; }
-
-.uppercase { text-transform: uppercase !important; }
-.letterspaced { letter-spacing: 0.05em; }
-
 // Body
 $body-font-color: $gray-darker;
-$body-link-color: $packer-blue-dark;
+$body-link-color: $packer-blue;
+
+// Home
+$home-header-background-color: transparent;
+$home-header-link-color: $gray-darker;
+$home-header-link-color-hover: $black;

 // Sidebar
 $sidebar-background-color: $white;
@ -49,10 +37,11 @@ $sidebar-font-family: $font-family-open-sans;
 $sidebar-font-weight: $font-weight-reg;

 // Header
-$header-height: 92px;
+$header-background-color: $packer-blue;
 $header-font-size: $font-size - 2;
-$header-link-color: $body-font-color;
-$header-link-color-hover: $black;
+$header-height: 92px;
+$header-link-color: rgba($white, 0.85);
+$header-link-color-hover: $white;

 // Footer
 $footer-font-size: $font-size - 2;
@ -60,18 +49,10 @@ $footer-link-color: $body-font-color;
 $footer-link-color-hover: $black;

 // Buttons
+$button-background: $white;
+$button-font-color: #7b8A8E;
 $button-font-family: $font-family-klavika;
-$button-font-size: $font-size - 2;
+$button-font-size: $font-size;
 $button-font-weight: $font-weight-bold;
-
-// components
-$nav-height: 100px;
-$hero-height: 350px;
-$docs-top-margin: 40px;
-$sidebar-width: 250px;
-
-// base measures
-$baseline: 20px;
-$base-font-size: 16px;
-$base-line-height: 1.8;
-$button-height: 60px;
+$button-primary-background: $packer-blue;
+$button-primary-font-color: $white;
--- a/website/source/assets/stylesheets/application.scss
+++ b/website/source/assets/stylesheets/application.scss
@ -21,12 +21,13 @@
 // Components
@import '_header';
@import '_footer';
-@import '_buttons';
@import '_inner';
+@import '_buttons';
+@import '_syntax';
+@import '_logos';

 // Pages
@import '_community';
@import '_docs';
@import '_downloads';
@import '_home';
-@import '_syntax';
--- a/website/source/downloads.html.erb
+++ b/website/source/downloads.html.erb
@ -55,7 +55,7 @@ description: |-
  <div class="row">
    <div class="col-md-12 poweredby">
      <a href="https://www.fastly.com?utm_source=hashicorp" target="_blank" rel="nofollow noopener noreferrer">
-        <%= image_tag "fastly_logo.png" %>
+        <%= inline_svg "fastly.svg", height: 50 %>
      </a>
    </div>
  </div>
--- a/website/source/index.html.erb
+++ b/website/source/index.html.erb
@ -4,82 +4,84 @@ description: |-
  platforms from a single source configuration.
 ---

-<header class="hero">
-  <div class="container">
+<header>
+  <div class="container hero">
    <div class="row">
      <div class="col-md-6">
+        <%= inline_svg "logo-text.svg", height: 120, class: "logo" %>
+
        <h1>
-          Create platform specific machine images from a single source
+          Build Automated Machine Images
        </h1>
-        <a class="button primary" href="/intro.html">Get Started</a>
-        <div class="download-module">
-          <p>Packer V0.12.2 has been released</p>
-          <a class="button secondary klavika" href="/downloads.html">Download</a>
-        </div>
+
+        <a class="button primary" href="/intro/index.html">Get Started</a>
+        <a class="button" href="/downloads.html">Download <%= latest_version %></a>
+      </div>
+      <div class="col-md-6">
+        <%= inline_svg "hero-image.svg" %>
      </div>
    </div>
  </div>
 </header>

-  <section id="automated" class="marketing">
-    <div class="container">
-      <div class="row">
-        <div class="col-md-6">
-          <%= image_tag 'screenshots/vmware_and_virtualbox.png', class: 'img-responsive' %>
-        </div>
-        <div class="col-md-6">
-          <span class="callout">Infrastructure as code</span>
-          <h2>Modern, Automated</h2>
-          <p>
-            Packer is easy to use and automates the creation of any type of
-            machine image. It embraces modern configuration management by
-            encouraging you to use automated scripts to install and configure
-            the software within your Packer-made images. Packer brings machine
-            images into the modern age, unlocking untapped potential and opening
-            new opportunities.
-          </p>
-        </div>
+<section id="automated" class="marketing">
+  <div class="container">
+    <div class="row">
+      <div class="col-md-6">
+        <%= image_tag 'screenshots/vmware_and_virtualbox.png', class: 'img-responsive' %>
+      </div>
+      <div class="col-md-6">
+        <span class="callout">Infrastructure as code</span>
+        <h2>Modern, Automated</h2>
+        <p>
+          Packer is easy to use and automates the creation of any type of
+          machine image. It embraces modern configuration management by
+          encouraging you to use automated scripts to install and configure
+          the software within your Packer-made images. Packer brings machine
+          images into the modern age, unlocking untapped potential and opening
+          new opportunities.
+        </p>
      </div>
    </div>
-  </section>
+  </div>
+</section>

-  <section id="integrations" class="marketing invert">
-    <div class="container">
-      <div class="row">
-        <div class="col-md-6">
-          <span class="callout">Integrations</span>
-          <h2>Works Out of The Box</h2>
-          <p>
-            Out of the box Packer comes with support to build images for
-            Amazon EC2, CloudStack, DigitalOcean, Docker, Google Compute
-            Engine, Microsoft Azure, QEMU, VirtualBox, VMware, and more.
-            Support for more platforms is on the way, and anyone can add
-            new platforms via plugins.
-          </p>
-        </div>
-        <div class="col-md-6">
-          <div class="integrations-list">
-            <div class="integration">
-              <%= image_tag("integrations/azure.svg", alt: "Microsoft Azure") %>
-            </div>
-            <div class="integration">
-              <%= image_tag("integrations/aws.svg", alt: "Amazon AWS") %>
-            </div>
-            <div class="integration">
-              <%= image_tag("integrations/vmware.svg", alt: "VMware") %>
-            </div>
-            <div class="integration">
-              <%= image_tag("integrations/google-cloud.svg", alt: "Google Cloud") %>
-            </div>
-            <div class="integration">
-              <%= image_tag("integrations/docker.svg", alt: "Docker") %>
-            </div>
-            <div class="integration">
-              <%= image_tag("integrations/aws.svg", alt: "Virtual Box") %>
-            </div>
+<section id="integrations" class="marketing invert">
+  <div class="container">
+    <div class="row">
+      <div class="col-md-6">
+        <span class="callout">Integrations</span>
+        <h2>Works Out of The Box</h2>
+        <p>
+          Out of the box Packer comes with support to build images for
+          Amazon EC2, CloudStack, DigitalOcean, Docker, Google Compute
+          Engine, Microsoft Azure, QEMU, VirtualBox, VMware, and more.
+          Support for more platforms is on the way, and anyone can add
+          new platforms via plugins.
+        </p>
+      </div>
+      <div class="col-md-6">
+        <div class="integrations-list">
+          <div class="integration">
+            <%= image_tag("integrations/azure.svg", alt: "Microsoft Azure") %>
+          </div>
+          <div class="integration">
+            <%= image_tag("integrations/aws.svg", alt: "Amazon AWS") %>
+          </div>
+          <div class="integration">
+            <%= image_tag("integrations/vmware.svg", alt: "VMware") %>
+          </div>
+          <div class="integration">
+            <%= image_tag("integrations/google-cloud.svg", alt: "Google Cloud") %>
+          </div>
+          <div class="integration">
+            <%= image_tag("integrations/docker.svg", alt: "Docker") %>
+          </div>
+          <div class="integration">
+            <%= image_tag("integrations/aws.svg", alt: "Virtual Box") %>
          </div>
        </div>
      </div>
    </div>
-  </section>
-</div>
+  </div>
+</section>
--- a/website/source/layouts/_sidebar.erb
+++ b/website/source/layouts/_sidebar.erb
@ -2,7 +2,7 @@

 <aside class="sidebar" role="navigation">
  <div class="sidebar-header">
-    <%= inline_svg "logo-text.svg", height: 42 %>
+    <%= inline_svg "logo-text.svg", height: 42, class: "logo" %>
  </div>

  <ul class="nav sidebar-nav">
--- a/website/source/layouts/layout.erb
+++ b/website/source/layouts/layout.erb
@ -47,7 +47,9 @@
          <div class="col-xs-12">
            <div class="navbar-header">
              <div class="navbar-brand">
-                <a class="logo" href="/">Packer</a>
+                <a href="/">
+                  <%= inline_svg "logo-text.svg", height: 50, class: "logo" %>
+                </a>
              </div>
              <button class="navbar-toggle" type="button">
                <span class="sr-only">Toggle navigation</span>
@ -112,25 +114,7 @@

      ga('create', 'UA-43075859-1', 'packer.io');
      ga('require', 'linkid');
-      ga('send', 'pageview');
-    </script>
-
-    <script type="text/javascript">
-    adroll_adv_id = "6QAAFJDIWBG3DJBDRJ7BEX";
-    adroll_pix_id = "PYT5HSNKNRDS7LMUR5B6YG";
-    (function () {
-    var oldonload = window.onload;
-    window.onload = function(){
-       __adroll_loaded=true;
-       var scr = document.createElement("script");
-       var host = (("https:" == document.location.protocol) ? "https://s.adroll.com" : "http://a.adroll.com");
-       scr.setAttribute('async', 'true');
-       scr.type = "text/javascript";
-       scr.src = host + "/j/roundtrip.js";
-       ((document.getElementsByTagName('head') || [null])[0] ||
-        document.getElementsByTagName('script')[0].parentNode).appendChild(scr);
-       if(oldonload){oldonload()}};
-    }());
+      ga('send', 'pageview', location.pathname);
    </script>

    <script type="application/ld+json">