diff --git a/website/Gemfile b/website/Gemfile index 24926e6fd1..405a8c9926 100644 --- a/website/Gemfile +++ b/website/Gemfile @@ -1,3 +1,3 @@ source "https://rubygems.org" -gem "middleman-hashicorp", "0.3.18" +gem "middleman-hashicorp", "0.3.22" diff --git a/website/Gemfile.lock b/website/Gemfile.lock index 502823760a..229218ac9f 100644 --- a/website/Gemfile.lock +++ b/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.18) + middleman-hashicorp (0.3.22) bootstrap-sass (~> 3.3) builder (~> 3.2) middleman (~> 3.4) @@ -151,7 +151,7 @@ PLATFORMS ruby DEPENDENCIES - middleman-hashicorp (= 0.3.18) + middleman-hashicorp (= 0.3.22) BUNDLED WITH 1.14.6 diff --git a/website/Makefile b/website/Makefile index 0a80966c76..0e83eb946c 100644 --- a/website/Makefile +++ b/website/Makefile @@ -1,4 +1,4 @@ -VERSION?="0.3.18" +VERSION?="0.3.22" website: @echo "==> Starting website in Docker..." diff --git a/website/packer.json b/website/packer.json index ac5c88ad00..35de632323 100644 --- a/website/packer.json +++ b/website/packer.json @@ -8,7 +8,7 @@ "builders": [ { "type": "docker", - "image": "hashicorp/middleman-hashicorp:0.3.18", + "image": "hashicorp/middleman-hashicorp:0.3.22", "discard": "true", "run_command": ["-d", "-i", "-t", "{{ .Image }}", "/bin/sh"] } diff --git a/website/source/404.html.erb b/website/source/404.html.erb deleted file mode 100644 index e7dcdc5a2b..0000000000 --- a/website/source/404.html.erb +++ /dev/null @@ -1,5 +0,0 @@ ---- -noindex: true ---- - -

Page Not Found

diff --git a/website/source/404.html.md b/website/source/404.html.md new file mode 100644 index 0000000000..e99ce088b3 --- /dev/null +++ b/website/source/404.html.md @@ -0,0 +1,14 @@ +--- +layout: "inner" +page_title: "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 5f91693d24..9af5c45082 100644 --- a/website/source/assets/images/logo-text.svg +++ b/website/source/assets/images/logo-text.svg @@ -1,38 +1,7 @@ - - - HashiCorp Vault - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + diff --git a/website/source/assets/images/logo.svg b/website/source/assets/images/logo.svg deleted file mode 100644 index 040f7e21b5..0000000000 --- a/website/source/assets/images/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/website/source/assets/stylesheets/_buttons.scss b/website/source/assets/stylesheets/_buttons.scss index 787366280f..e1037e818b 100755 --- a/website/source/assets/stylesheets/_buttons.scss +++ b/website/source/assets/stylesheets/_buttons.scss @@ -1,60 +1,37 @@ -.v-btn { - box-shadow: 2px 3px 2px rgba(0,0,0,0.08); +.button { + background: $button-background; + border: 1px solid $button-font-color; + box-shadow: 3px 4px 0 rgba(0,0,0,0.1); + color: $button-font-color; display: inline-block; - background-color: $white; - color: $black; - border: 1px solid $black; + font-family: $button-font-family; + font-size: $button-font-size; + font-weight: $button-font-weight; + letter-spacing: 1px; + margin-bottom: 4px; + padding: 10px 30px; + text-transform: uppercase; text-decoration: none; - @include transition(color .3s ease-in-out); - &.lrg { - font-size: 18px; - padding: 10px 50px; - } - - &.sml { - font-size: 15px; - line-height: 1; - padding: 8px 30px; - } - - &.blue { - color: $blue; - border: 1px solid $blue; - } - - &.gray { - font-weight: 300; - color: $gray; - border: 1px solid $light-gray; - } - - &.terminal { - padding-left: 52px; - padding-right: 30px; - margin-left: 12px; - background: image-url('icon-terminal.png') 16px center no-repeat; - @include img-retina("icon-terminal.png", "icon-terminal@2x.png", 26px, 25px); - } - - &.started { - margin-bottom: 12px; - } - - &:hover, &:active, &:focus { + &:hover, + &:active, + &:focus { text-decoration: none; - @include transition(color .3s ease-in-out); + } - &.blue { - color: darken($blue, 8%); - } + &:hover { + background: $button-font-color; + border: 1px solid $button-font-color; + color: $button-background; + } - &.black { - color: lighten($black, 50%); - } + &.primary { + background: $button-primary-background; + border: 1px solid darken($button-primary-background, 5%); + color: $button-primary-font-color; - &.gray { - color: $black; + &:hover { + background: lighten($button-primary-background, 5%); } } } diff --git a/website/source/assets/stylesheets/_demo.scss b/website/source/assets/stylesheets/_demo.scss index 966caf0abc..f68280fd33 100644 --- a/website/source/assets/stylesheets/_demo.scss +++ b/website/source/assets/stylesheets/_demo.scss @@ -45,7 +45,7 @@ max-width: 800px; min-width: 400px; margin: 0 auto; - background-color: darken($blue, 28%); + background-color: darken($vault-blue, 28%); code { background: none; diff --git a/website/source/assets/stylesheets/_downloads.scss b/website/source/assets/stylesheets/_downloads.scss index 155c448059..97a4dfc66b 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 07cfe6f02e..3b69c05ddc 100755 --- a/website/source/assets/stylesheets/_global.scss +++ b/website/source/assets/stylesheets/_global.scss @@ -16,7 +16,7 @@ body { min-height: 100%; } -h1, h2, h3, h4, h5, h5 { +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 4a985d7a8b..dde70d7d66 100755 --- 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 5409715d85..823719fdbe 100755 --- a/website/source/assets/stylesheets/_home.scss +++ b/website/source/assets/stylesheets/_home.scss @@ -1,4 +1,60 @@ #page-home { + // Override the main header + #header { + background: $home-header-background-color; + + .navbar-toggle { + .icon-bar { + border: 1px solid $home-header-link-color; + } + } + + .navbar-brand { + a { + svg.logo { + @extend svg.logo.color; + } + } + } + + 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; + } + } + + svg { + fill: $home-header-link-color; + } + } + } + } + } + + .button { + &.terminal { + padding-left: 52px; + padding-right: 30px; + margin-left: 12px; + background-image: image-url('icon-terminal.png'); + background-position: 16px center; + background-repeat: no-repeat; + @include img-retina("icon-terminal.png", "icon-terminal@2x.png", 26px, 25px); + } + + &.started { + margin-bottom: 12px; + } + } + #container { margin-top: 140px; position: relative; @@ -27,7 +83,7 @@ } h2.features-header { - color: $blue; + color: $vault-blue; display: inline-block; font-size: 44px; font-weight: 600; @@ -92,8 +148,8 @@ @include img-retina("bg-icons.png", "bg-icons@2x.png", 669px, 260px); background: image-url("bg-icons.png") center center no-repeat; background-position: center center; - border-top: 1px solid $faint-gray; - border-bottom: 1px solid $faint-gray; + border-top: 1px solid $gray-darker; + border-bottom: 1px solid $gray-darker; padding: 140px 0; p { diff --git a/website/source/assets/stylesheets/_logos.scss b/website/source/assets/stylesheets/_logos.scss new file mode 100644 index 0000000000..3ee70170dc --- /dev/null +++ b/website/source/assets/stylesheets/_logos.scss @@ -0,0 +1,43 @@ +svg.logo { + &.color { + opacity: 1.0; + + path.text { + fill: $black; + opacity: 1.0; + } + + path.v { + fill: $black; + opacity: 1.0; + } + + path.squares { + fill: $white; + opacity: 1.0; + } + } + + // The default logo class is the colored version + @extend .color; + + &.white { + opacity: 1.0; + + path.text { + fill: $white; + } + + path.v { + fill: $white; + } + + path.squares { + fill: $vault-gray; + } + + path.front { + opacity: 0.7; + } + } +} diff --git a/website/source/assets/stylesheets/_variables.scss b/website/source/assets/stylesheets/_variables.scss index 18b6619c52..b1d23b1c04 100755 --- a/website/source/assets/stylesheets/_variables.scss +++ b/website/source/assets/stylesheets/_variables.scss @@ -1,21 +1,25 @@ // Colors -$white: #FFFFFF; -$black: #000000; -$gray: #929199; -$light-gray: #C2C1C7; -$faint-gray: #E3E3EA; -$dark-blue: #00ABE0; -$blue: #00BFE0; -$light-black: #242424; -$orange: #E78C5B; -$green: #5BE764; -$gray-darker: #555555; -$gray: #777777; -$gray-light: #939393; -$gray-lighter: #979797; -$red: #DD4E58; -$red-dark: #C5454E; -$purple: #822FF7; +// $white: #FFFFFF; +// $black: #000000; +// $gray: #929199; +// $light-gray: #C2C1C7; +// $faint-gray: #E3E3EA; +// $dark-blue: #00ABE0; +// $blue: #00BFE0; +// $light-black: #242424; +// $orange: #E78C5B; +// $green: #5BE764; +// $gray-darker: #555555; +// $gray: #777777; +// $gray-light: #939393; +// $gray-lighter: #979797; +// $red: #DD4E58; +// $red-dark: #C5454E; +// $purple: #822FF7; + + + + // Colors $white: #FFFFFF; @@ -28,6 +32,7 @@ $vagrant-blue: #1563FF; $vagrant-blue-dark: #104EB2; $vault-black: #000000; $vault-blue: #00ABE0; +$vault-gray: #919FA8; // Typography $font-family-klavika: 'klavika-web', 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif; @@ -41,6 +46,11 @@ $font-weight-bold: 600; $body-font-color: $gray-darker; $body-link-color: $vault-blue; +// Home +$home-header-background-color: transparent; +$home-header-link-color: $gray-darker; +$home-header-link-color-hover: $black; + // Sidebar $sidebar-background-color: $white; $sidebar-font-size: $font-size - 2; @@ -51,17 +61,22 @@ $sidebar-font-family: $font-family-open-sans; $sidebar-font-weight: $font-weight-reg; // Header +$header-background-color: $vault-gray; $header-font-size: $font-size - 2; -$header-link-color: $body-font-color; -$header-link-color-hover: $black; - -// Header $header-height: 92px; -$header-font-size: $font-size - 2; -$header-link-color: $body-font-color; -$header-link-color-hover: $black; +$header-link-color: rgba($white, 0.85); +$header-link-color-hover: $white; // Footer $footer-font-size: $font-size - 2; $footer-link-color: $body-font-color; $footer-link-color-hover: $black; + +// Button +$button-background: $white; +$button-font-color: #7b8A8E; +$button-font-family: $font-family-klavika; +$button-font-size: $font-size; +$button-font-weight: $font-weight-bold; +$button-primary-background: $vault-gray; +$button-primary-font-color: $white; diff --git a/website/source/assets/stylesheets/application.scss b/website/source/assets/stylesheets/application.scss index 5b5d2ebbd0..02f67b2a32 100755 --- a/website/source/assets/stylesheets/application.scss +++ b/website/source/assets/stylesheets/application.scss @@ -3,34 +3,35 @@ @import url("//fonts.googleapis.com/css?family=Open+Sans:400,600"); -// Core variables and mixins -@import '_variables'; - -//Global Site -@import '_global'; - -//Mega Nav +// Mega Nav @import 'hashicorp/mega-nav'; // Anchor links @import 'hashicorp/anchor-links'; +// Core variables and mixins +@import '_variables'; + // Sidebar @import 'hashicorp/sidebar'; +//Global Site +@import '_global'; + // Components @import '_header'; @import '_footer'; -@import '_buttons'; @import '_inner'; -@import '_latest'; +@import '_buttons'; +@import '_syntax'; +@import '_logos'; // Pages @import '_community'; @import '_docs'; @import '_downloads'; @import '_home'; -@import '_syntax'; +@import '_latest'; // Demo @import '_demo'; diff --git a/website/source/downloads.html.erb b/website/source/downloads.html.erb index 2abc4c5dd2..fd73d17fa7 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 b41ae37f4a..e168af9507 100644 --- a/website/source/index.html.erb +++ b/website/source/index.html.erb @@ -12,12 +12,12 @@ description: |-
- " alt="Vault" height="80"> + <%= inline_svg "logo-text.svg", height: 120, class: "logo" %> A tool for managing secrets
- Get Started - Launch Interactive Tutorial + Get Started + Launch Interactive Tutorial
@@ -52,7 +52,7 @@ description: |- secrets.

- Learn more + Learn more
@@ -71,7 +71,7 @@ description: |- rolling is easy to enforce.

- Learn more + Learn more
@@ -89,14 +89,14 @@ description: |- trace the lifetime and origin of any secret.

- Learn more + Learn more
- Get Started with Vault + Get Started with Vault

Completely free and open source.

@@ -113,7 +113,7 @@ description: |- We are pleased to announce the release of Vault v0.6.5. This release includes several new features, improvements, and bug fixes.

- Read more + Read more
@@ -122,7 +122,7 @@ description: |- Listen to the recording with Adam Stacoviak on the popular Changelog podcast to talk about modern secrets management.

- Listen + Listen
diff --git a/website/source/layouts/_sidebar.erb b/website/source/layouts/_sidebar.erb index 39e502941c..257f15767e 100644 --- a/website/source/layouts/_sidebar.erb +++ b/website/source/layouts/_sidebar.erb @@ -2,7 +2,7 @@