From 6906f6b2ef746208a0f7ad0d2b099b7907ac3014 Mon Sep 17 00:00:00 2001 From: Jason Costello Date: Mon, 27 Feb 2017 16:54:39 -0800 Subject: [PATCH 01/12] implement klavika, open sans --- .../source/assets/stylesheets/_buttons.scss | 2 +- .../assets/stylesheets/_components.scss | 6 +---- .../source/assets/stylesheets/_helpers.scss | 23 ++++++------------- website/source/assets/stylesheets/_reset.scss | 2 +- .../source/assets/stylesheets/_sidebar.scss | 2 +- .../source/assets/stylesheets/_styles.scss | 22 ++++-------------- website/source/layouts/layout.erb | 12 +++++----- 7 files changed, 22 insertions(+), 47 deletions(-) diff --git a/website/source/assets/stylesheets/_buttons.scss b/website/source/assets/stylesheets/_buttons.scss index 0edc0c7c4..41cc1fac4 100644 --- a/website/source/assets/stylesheets/_buttons.scss +++ b/website/source/assets/stylesheets/_buttons.scss @@ -1,5 +1,5 @@ @mixin button { - font-family: $mono; + font-family: $font-family-open-sans; height: $button-height; line-height: $button-height; background-color: transparent; diff --git a/website/source/assets/stylesheets/_components.scss b/website/source/assets/stylesheets/_components.scss index 7e5d35917..395aa1380 100644 --- a/website/source/assets/stylesheets/_components.scss +++ b/website/source/assets/stylesheets/_components.scss @@ -72,7 +72,6 @@ header .header { } h2 { - font-family: $serif; font-size: 44px; color: #7bc6b1; margin: 0px; @@ -181,7 +180,7 @@ header .header { color: #b1d631; font-size: 14px; font-weight: normal; - font-family: $mono; + font-family: $font-family-mono; text-shadow: 0 0 0; } @@ -203,7 +202,6 @@ header .header { margin-right: 20px; li { - font-family: $serif; font-size: 17px; line-height: (30/17) !important; margin-bottom: $baseline; @@ -225,10 +223,8 @@ header .header { } div.alert { - font-family: $serif; font-size: 17px; line-height: 1.5; - letter-spacing: 1px; margin-left: -135px; margin-right: -135px; padding-top: 40px; diff --git a/website/source/assets/stylesheets/_helpers.scss b/website/source/assets/stylesheets/_helpers.scss index 1f95b8f0e..c952e645c 100644 --- a/website/source/assets/stylesheets/_helpers.scss +++ b/website/source/assets/stylesheets/_helpers.scss @@ -19,7 +19,7 @@ $border-dark: #333; // base measures $baseline: 20px; $base-font-size: 16px; -$base-line-height: 20px; +$base-line-height: 1.5; $button-height: 60px; .center { @@ -40,13 +40,13 @@ $sidebar-width: 250px; //typography -$serif: 'myriad-pro', helvetica, Georgia, serif; -$sans: 'HeimatStencil-SemiBold', 'Avenir', 'Helvetica Neue', Helvetica, Arial, sans-serif; -$mono: 'Inconsolata', 'courier new', courier, monospace; +$font-family-open-sans: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; +$font-family-klavika: 'klavika-web', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; +$font-family-mono: 'Inconsolata', 'Monaco', 'courier new', courier, monospace; -.serif { font-family: $serif; } -.sans { font-family: $sans; } -.mono { font-family: $mono; } +.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; } @@ -56,15 +56,6 @@ $mono: 'Inconsolata', 'courier new', courier, monospace; .uppercase { text-transform: uppercase !important; } -@font-face { - font-family: 'HeimatStencil-SemiBold'; - src: font-url('2772B2_0_0.eot'); - src: font-url('2772B2_0_0.woff') format('woff'), - font-url('2772B2_0_0.ttf') format('truetype'); - font-weight: normal; - font-style: normal; -} - //color .dark-background { background-color: #000; diff --git a/website/source/assets/stylesheets/_reset.scss b/website/source/assets/stylesheets/_reset.scss index 5a417ec09..db6b68457 100644 --- a/website/source/assets/stylesheets/_reset.scss +++ b/website/source/assets/stylesheets/_reset.scss @@ -9,7 +9,7 @@ form, input, textarea, button { -khtml-border-radius: 0; border-radius: 0; background-color: transparent; - font-family: $mono; + font-family: $font-family-mono; font-size: $base-font-size; line-height: 1.0; color: inherit; diff --git a/website/source/assets/stylesheets/_sidebar.scss b/website/source/assets/stylesheets/_sidebar.scss index b1450fbd3..81237ef95 100644 --- a/website/source/assets/stylesheets/_sidebar.scss +++ b/website/source/assets/stylesheets/_sidebar.scss @@ -3,7 +3,7 @@ max-width: 320px; $border: 1px solid $gray-dark; font-size: 16px; - font-family: $mono; + font-family: $font-family-mono; color: $gray-light; background-color: $sidebar-background-color; diff --git a/website/source/assets/stylesheets/_styles.scss b/website/source/assets/stylesheets/_styles.scss index 077ec44d8..44cf21d21 100644 --- a/website/source/assets/stylesheets/_styles.scss +++ b/website/source/assets/stylesheets/_styles.scss @@ -17,19 +17,17 @@ html { body { background-color: $background; - font-family: $sans; - letter-spacing: 1px; + font-family: $font-family-open-sans; font-size: $base-font-size; line-height: $base-line-height; } h1, h2, h3, h4, h5, h6 { - letter-spacing: 2px; + font-family: $font-family-klavika; font-weight: normal; } h1 { - font-family: $sans; font-size: 70px; line-height: (80/70); @include respond-to(mobile) { @@ -39,7 +37,6 @@ h1 { } h2 { - font-family: $sans; font-size: 40px; line-height: (50/40); @@ -55,38 +52,31 @@ h2 { } h3 { - font-family: $sans; font-size: 20px; line-height: (30/20); } h4 { - font-family: $mono; + font-family: $font-family-mono; font-size: 20px; line-height: (30/20); } h5 { - font-family: $sans; font-size: 16px; line-height: (22/16); } h6 { - font-family: $mono; + font-family: $font-family-mono; font-size: 16px; line-height: (22/16); } p { - font-family: $serif; - font-size: 17px; - line-height: (30/17); - letter-spacing: 1px; &.large-text { font-size: 20px; - line-height: (35/20); } a { @@ -121,10 +111,8 @@ dt { } dd { - font-family: $serif; font-size: 17px; line-height: 1.5; - letter-spacing: 1px; margin-bottom: 30px; } @@ -159,7 +147,7 @@ pre { } table { - font-family: $mono; + font-family: $font-family-mono; margin: ($baseline * 2) 0; color: $gray-dark; diff --git a/website/source/layouts/layout.erb b/website/source/layouts/layout.erb index 4841fbed8..db61fc82e 100644 --- a/website/source/layouts/layout.erb +++ b/website/source/layouts/layout.erb @@ -13,12 +13,7 @@ " type="image/x-icon"> " type="image/x-icon"> - - + + + + + + " class="page-<%= current_page.data.page_title ? "#{current_page.data.page_title} layout-#{current_page.data.layout} page-sub" : "home layout-#{current_page.data.layout}" %>"> From 4caf4f1e2020ae8ed02a8efe01c3234ec0bccd1e Mon Sep 17 00:00:00 2001 From: Jason Costello Date: Mon, 27 Feb 2017 17:23:41 -0800 Subject: [PATCH 02/12] Scope klavika to home page, style docs headings --- .../source/assets/stylesheets/_components.scss | 4 ++-- website/source/assets/stylesheets/_styles.scss | 15 +++++++++------ website/source/index.html.erb | 6 +++--- website/source/layouts/layout.erb | 4 ++-- 4 files changed, 16 insertions(+), 13 deletions(-) diff --git a/website/source/assets/stylesheets/_components.scss b/website/source/assets/stylesheets/_components.scss index 395aa1380..d56d71f56 100644 --- a/website/source/assets/stylesheets/_components.scss +++ b/website/source/assets/stylesheets/_components.scss @@ -5,7 +5,6 @@ header .header { h1 { margin-bottom: -8px; margin-top: 60px; - text-transform: uppercase; } span { @@ -254,12 +253,13 @@ header .header { h1 { font-size: 40px; line-height: (25/20); - text-transform: uppercase; + font-weight: 600; } h2 { margin-top: $baseline * 2; text-transform: capitalize; + font-weight: 600; } h3 { diff --git a/website/source/assets/stylesheets/_styles.scss b/website/source/assets/stylesheets/_styles.scss index 44cf21d21..efb9946f5 100644 --- a/website/source/assets/stylesheets/_styles.scss +++ b/website/source/assets/stylesheets/_styles.scss @@ -19,16 +19,19 @@ body { background-color: $background; font-family: $font-family-open-sans; font-size: $base-font-size; + font-weight: 400; line-height: $base-line-height; } -h1, h2, h3, h4, h5, h6 { - font-family: $font-family-klavika; - font-weight: normal; +.home { + h1, h2, h3, h4, h5, h6 { + font-family: $font-family-klavika; + font-weight: normal; + } } h1 { - font-size: 70px; + font-size: 42px; line-height: (80/70); @include respond-to(mobile) { font-size: 50px; @@ -37,7 +40,7 @@ h1 { } h2 { - font-size: 40px; + font-size: 36px; line-height: (50/40); &.has-dividers { @@ -52,7 +55,7 @@ h2 { } h3 { - font-size: 20px; + font-size: 24px; line-height: (30/20); } diff --git a/website/source/index.html.erb b/website/source/index.html.erb index 1603f9e02..500f9d42f 100644 --- a/website/source/index.html.erb +++ b/website/source/index.html.erb @@ -7,10 +7,10 @@ description: Packer is a free and open source tool for creating golden images
-
-

+
+

Packer is a tool for creating machine and container images for multiple platforms from a single source configuration. -

+

diff --git a/website/source/layouts/layout.erb b/website/source/layouts/layout.erb index db61fc82e..f4432a409 100644 --- a/website/source/layouts/layout.erb +++ b/website/source/layouts/layout.erb @@ -35,7 +35,7 @@ height="0" width="0" style="display:none;visibility:hidden">
"> -
+
@@ -72,7 +72,7 @@ <%= yield %>