diff --git a/website/source/404.html.erb b/website/source/404.html.erb deleted file mode 100644 index 4e1ef3b47..000000000 --- a/website/source/404.html.erb +++ /dev/null @@ -1,12 +0,0 @@ ---- -noindex: true -page_title: Page Not Found -layout: inner ---- - -

Page Not Found

- -

- We are sorry. The page you are trying to reach is not available. - Please make sure you have spelled everything correctly. -

diff --git a/website/source/404.html.md b/website/source/404.html.md new file mode 100644 index 000000000..a77d0edb9 --- /dev/null +++ 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. diff --git a/website/source/assets/images/logo-text.svg b/website/source/assets/images/logo-text.svg index fa9748168..82444a606 100644 --- a/website/source/assets/images/logo-text.svg +++ b/website/source/assets/images/logo-text.svg @@ -1,18 +1,7 @@ - - - - - - - - - - - - - - - - - + + + + + + diff --git a/website/source/assets/images/screenshots/works_with.png b/website/source/assets/images/screenshots/works_with.png deleted file mode 100644 index 8c744b143..000000000 Binary files a/website/source/assets/images/screenshots/works_with.png and /dev/null differ diff --git a/website/source/assets/javascripts/application.js b/website/source/assets/javascripts/application.js index 79bf5c1c2..5d2365e14 100644 --- 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 diff --git a/website/source/assets/stylesheets/_buttons.scss b/website/source/assets/stylesheets/_buttons.scss index ee745256d..e1037e818 100644 --- 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; - } - } } diff --git a/website/source/assets/stylesheets/_downloads.scss b/website/source/assets/stylesheets/_downloads.scss index 155c44805..97a4dfc66 100644 --- 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; } } } diff --git a/website/source/assets/stylesheets/_global.scss b/website/source/assets/stylesheets/_global.scss index 72cc6f363..3b69c05dd 100644 --- 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; } diff --git a/website/source/assets/stylesheets/_header.scss b/website/source/assets/stylesheets/_header.scss index 4a985d7a8..dde70d7d6 100644 --- 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; diff --git a/website/source/assets/stylesheets/_home.scss b/website/source/assets/stylesheets/_home.scss index 89ee7d9a3..3ec38da1c 100644 --- 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%; + } } } diff --git a/website/source/assets/stylesheets/_logos.scss b/website/source/assets/stylesheets/_logos.scss new file mode 100644 index 000000000..811cf2175 --- /dev/null +++ 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; + } + } +} diff --git a/website/source/assets/stylesheets/_variables.scss b/website/source/assets/stylesheets/_variables.scss index 2650ef594..bac625e0a 100644 --- 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; diff --git a/website/source/assets/stylesheets/application.scss b/website/source/assets/stylesheets/application.scss index 6640956fe..791b81a0d 100644 --- 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'; diff --git a/website/source/downloads.html.erb b/website/source/downloads.html.erb index 060a5a26e..83fd1d6ba 100644 --- a/website/source/downloads.html.erb +++ b/website/source/downloads.html.erb @@ -55,7 +55,7 @@ description: |-
- <%= image_tag "fastly_logo.png" %> + <%= inline_svg "fastly.svg", height: 50 %>
diff --git a/website/source/index.html.erb b/website/source/index.html.erb index 9afd11041..57056ef28 100644 --- a/website/source/index.html.erb +++ b/website/source/index.html.erb @@ -4,82 +4,84 @@ description: |- platforms from a single source configuration. --- -
-
+
+
+ <%= inline_svg "logo-text.svg", height: 120, class: "logo" %> +

- Create platform specific machine images from a single source + Build Automated Machine Images

- Get Started -
-

Packer V0.12.2 has been released

- Download -
+ + Get Started + Download <%= latest_version %> +
+
+ <%= inline_svg "hero-image.svg" %>
-
-
-
-
- <%= image_tag 'screenshots/vmware_and_virtualbox.png', class: 'img-responsive' %> -
-
- Infrastructure as code -

Modern, Automated

-

- 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. -

-
+
+
+
+
+ <%= image_tag 'screenshots/vmware_and_virtualbox.png', class: 'img-responsive' %> +
+
+ Infrastructure as code +

Modern, Automated

+

+ 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. +

-
+
+
-
-
-
-
- Integrations -

Works Out of The Box

-

- 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. -

-
-
-
-
- <%= image_tag("integrations/azure.svg", alt: "Microsoft Azure") %> -
-
- <%= image_tag("integrations/aws.svg", alt: "Amazon AWS") %> -
-
- <%= image_tag("integrations/vmware.svg", alt: "VMware") %> -
-
- <%= image_tag("integrations/google-cloud.svg", alt: "Google Cloud") %> -
-
- <%= image_tag("integrations/docker.svg", alt: "Docker") %> -
-
- <%= image_tag("integrations/aws.svg", alt: "Virtual Box") %> -
+
+
+
+
+ Integrations +

Works Out of The Box

+

+ 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. +

+
+
+
+
+ <%= image_tag("integrations/azure.svg", alt: "Microsoft Azure") %> +
+
+ <%= image_tag("integrations/aws.svg", alt: "Amazon AWS") %> +
+
+ <%= image_tag("integrations/vmware.svg", alt: "VMware") %> +
+
+ <%= image_tag("integrations/google-cloud.svg", alt: "Google Cloud") %> +
+
+ <%= image_tag("integrations/docker.svg", alt: "Docker") %> +
+
+ <%= image_tag("integrations/aws.svg", alt: "Virtual Box") %>
-
-
+
+
diff --git a/website/source/layouts/_sidebar.erb b/website/source/layouts/_sidebar.erb index 9257621b8..3cc4438e1 100644 --- a/website/source/layouts/_sidebar.erb +++ b/website/source/layouts/_sidebar.erb @@ -2,7 +2,7 @@