From 2505d74dd0519cc7cc76d952fd7ce1fe4654e0e6 Mon Sep 17 00:00:00 2001 From: Seth Vargo Date: Sun, 26 Mar 2017 17:21:14 -0400 Subject: [PATCH] Update CSS breakpoints --- website/Gemfile | 2 +- website/Gemfile.lock | 6 +- website/Makefile | 2 +- website/packer.json | 2 +- .../source/assets/stylesheets/_community.scss | 26 +- website/source/assets/stylesheets/_docs.scss | 101 +-- .../source/assets/stylesheets/_downloads.scss | 90 +-- .../source/assets/stylesheets/_global.scss | 10 +- website/source/assets/stylesheets/_inner.scss | 89 +++ .../source/assets/stylesheets/_variables.scss | 10 +- .../assets/stylesheets/application.scss | 1 + website/source/layouts/docs.erb | 584 +++++++++--------- website/source/layouts/downloads.erb | 2 +- website/source/layouts/guides.erb | 12 +- website/source/layouts/inner.erb | 8 +- website/source/layouts/intro.erb | 76 ++- website/source/layouts/layout.erb | 2 +- 17 files changed, 503 insertions(+), 520 deletions(-) create mode 100644 website/source/assets/stylesheets/_inner.scss diff --git a/website/Gemfile b/website/Gemfile index 3a22f44c0..24926e6fd 100644 --- a/website/Gemfile +++ b/website/Gemfile @@ -1,3 +1,3 @@ source "https://rubygems.org" -gem "middleman-hashicorp", "0.3.17" +gem "middleman-hashicorp", "0.3.18" diff --git a/website/Gemfile.lock b/website/Gemfile.lock index 18c94e4b1..502823760 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.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 diff --git a/website/Makefile b/website/Makefile index cc47b65c2..0a80966c7 100644 --- a/website/Makefile +++ b/website/Makefile @@ -1,4 +1,4 @@ -VERSION?="0.3.17" +VERSION?="0.3.18" website: @echo "==> Starting website in Docker..." diff --git a/website/packer.json b/website/packer.json index ca61b412f..ac5c88ad0 100644 --- a/website/packer.json +++ b/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"] } diff --git a/website/source/assets/stylesheets/_community.scss b/website/source/assets/stylesheets/_community.scss index 11c985532..1ff047de6 100644 --- a/website/source/assets/stylesheets/_community.scss +++ b/website/source/assets/stylesheets/_community.scss @@ -1,16 +1,22 @@ -.people { - margin-top: 30px; +#inner { + .people { + margin-top: 30px; - .person { - margin-bottom: 40px; + .person { + &:after { + display: block; + clear: both; + content: ' '; + } - img { - width: 125px; - margin: auto auto; - } + img { + width: 125px; + margin: auto auto; + } - .bio { - padding-left: 150px; + .bio { + padding-left: 150px; + } } } } diff --git a/website/source/assets/stylesheets/_docs.scss b/website/source/assets/stylesheets/_docs.scss index 3a0aaa300..ccbbf2135 100644 --- a/website/source/assets/stylesheets/_docs.scss +++ b/website/source/assets/stylesheets/_docs.scss @@ -1,40 +1,4 @@ -// -// 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 { +#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; - } -} diff --git a/website/source/assets/stylesheets/_downloads.scss b/website/source/assets/stylesheets/_downloads.scss index 1f374d2ad..155c44805 100644 --- a/website/source/assets/stylesheets/_downloads.scss +++ b/website/source/assets/stylesheets/_downloads.scss @@ -1,60 +1,64 @@ -.downloads { - margin-top: 20px; +body.layout-downloads { + #inner { + .downloads { + margin-top: 20px; - .description { - margin-bottom: 20px; - } + .description { + margin-bottom: 20px; + } - .download { - border-bottom: 1px solid #b2b2b2; - padding-bottom: 15px; - margin-top: 10px; - margin-bottom: 10px; + .download { + border-bottom: 1px solid #b2b2b2; + padding-bottom: 15px; + margin-top: 10px; + margin-bottom: 10px; - .details { - padding-left: 95px; + .details { + padding-left: 95px; - h2 { - margin-top: 30px; - } + h2 { + margin-top: 30px; + } - ul { - padding-left: 0px; - margin-top: 8px; - } + ul { + padding-left: 0px; + margin-top: 8px; + } - li { - display: inline-block; + li { + display: inline-block; - &:after { - content: " | "; + &:after { + content: " | "; + } + + &:last-child:after { + content: ""; + } + } } - &:last-child:after { - content: ""; + .icon { + img { + width: 75px; + } } - } - } - .icon { - img { - width: 75px; + .os-name { + font-size: 40px; + margin-bottom: -3px; + } } - } - .os-name { - font-size: 40px; - margin-bottom: -3px; - } - } + .poweredby { + margin-top: 20px; - .poweredby { - margin-top: 20px; - - img { - display: block; - margin: 0 auto; - width: 122px; + img { + display: block; + margin: 0 auto; + width: 122px; + } + } } } } diff --git a/website/source/assets/stylesheets/_global.scss b/website/source/assets/stylesheets/_global.scss index cafe5e394..07cfe6f02 100644 --- a/website/source/assets/stylesheets/_global.scss +++ b/website/source/assets/stylesheets/_global.scss @@ -25,15 +25,7 @@ h1 { margin-bottom: 24px; } -.center { - text-align: center; -} - -.alert p:last-child { - margin-bottom: 0; -} - -//Typekit utilites for hiding FOUC +// Avoid FOUT .wf-loading { visibility: hidden; } diff --git a/website/source/assets/stylesheets/_inner.scss b/website/source/assets/stylesheets/_inner.scss new file mode 100644 index 000000000..d20d71398 --- /dev/null +++ b/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; + } +} diff --git a/website/source/assets/stylesheets/_variables.scss b/website/source/assets/stylesheets/_variables.scss index 6c144499d..c8419af0e 100644 --- a/website/source/assets/stylesheets/_variables.scss +++ b/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; diff --git a/website/source/assets/stylesheets/application.scss b/website/source/assets/stylesheets/application.scss index 450bd2a82..6640956fe 100644 --- a/website/source/assets/stylesheets/application.scss +++ b/website/source/assets/stylesheets/application.scss @@ -22,6 +22,7 @@ @import '_header'; @import '_footer'; @import '_buttons'; +@import '_inner'; // Pages @import '_community'; diff --git a/website/source/layouts/docs.erb b/website/source/layouts/docs.erb index 289fafea4..45c92ed98 100644 --- a/website/source/layouts/docs.erb +++ b/website/source/layouts/docs.erb @@ -1,306 +1,304 @@ <% wrap_layout :inner do %> <% content_for :sidebar do %> - + > + Environment Variables + + > + Core Configuration + + > + Debugging + + <% end %> <%= yield %> diff --git a/website/source/layouts/downloads.erb b/website/source/layouts/downloads.erb index 0a4338808..9e9a79632 100644 --- a/website/source/layouts/downloads.erb +++ b/website/source/layouts/downloads.erb @@ -7,7 +7,7 @@ > - Download Community Tools + Community Tools
  • diff --git a/website/source/layouts/guides.erb b/website/source/layouts/guides.erb index 7b1229af5..f842f51a6 100644 --- a/website/source/layouts/guides.erb +++ b/website/source/layouts/guides.erb @@ -1,12 +1,10 @@ <% wrap_layout :inner do %> <% content_for :sidebar do %> - + <% end %> <%= yield %> diff --git a/website/source/layouts/inner.erb b/website/source/layouts/inner.erb index c23296a98..b1406f15f 100644 --- a/website/source/layouts/inner.erb +++ b/website/source/layouts/inner.erb @@ -1,14 +1,12 @@ <% wrap_layout :layout do %>
    -
    + -
    -
    - <%= yield %> -
    +
    + <%= yield %>
    diff --git a/website/source/layouts/intro.erb b/website/source/layouts/intro.erb index c75077348..1963d3f01 100644 --- a/website/source/layouts/intro.erb +++ b/website/source/layouts/intro.erb @@ -1,45 +1,43 @@ <% wrap_layout :inner do %> <% content_for :sidebar do %> - + > + Getting Started + +
    • + <% end %> <%= yield %> diff --git a/website/source/layouts/layout.erb b/website/source/layouts/layout.erb index b5a34a5cd..5ad2a4ad2 100644 --- a/website/source/layouts/layout.erb +++ b/website/source/layouts/layout.erb @@ -39,7 +39,7 @@ - <%= mega_nav :packer %> + <%= mega_nav :packer %>