haskal
/
vagrant
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Visual design changes to header 

The original text over the busy image is a bit hard to read. This
commit moves the tagline below and slightly reduces the size of the
image to make room
This commit is contained in:
Jason Costello 2017-02-23 15:43:03 -08:00
parent b7dbe249d5
commit 981c6f06bb
5 changed files with 32 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
website/source/assets/images/vagrant_header_background.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 104 KiB

After

Width:  |  Height:  |  Size: 145 KiB

5
website/source/assets/stylesheets/_docs.scss
View File

@ -99,7 +99,7 @@ body.layout-intro {
display: block; display: block;
li.active a { li.active a {
font-weight: $font-weight-open-sans-b; font-weight: $font-weight-b;
} }
li a { li a {
@ -123,7 +123,7 @@ body.layout-intro {
} }
li.active a { li.active a {
font-weight: $font-weight-open-sans-b; font-weight: $font-weight-b;
} }
} }
} }
@ -182,7 +182,6 @@ body.layout-intro {
p, li, .alert { p, li, .alert {
font-size: 20px; font-size: 20px;
font-family: $font-family-open-sans; font-family: $font-family-open-sans;
font-weight: $font-weight-open-sans;
line-height: 1.5em; line-height: 1.5em;
margin: 0 0 18px; margin: 0 0 18px;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;

9
website/source/assets/stylesheets/_global.scss
View File

@ -13,10 +13,6 @@ body {
font-weight: 400; font-weight: 400;
} }
h1, h2, h3, h4, h5 {
font-family: $font-family-klavika;
}
h1 { h1 {
font-size: 42px; font-size: 42px;
line-height: 42px; line-height: 42px;
@ -24,7 +20,7 @@ h1 {
} }
h2 { h2 {
text-transform: uppercase; font-size: 36px;
margin-top: 70px; margin-top: 70px;
} }
@ -33,13 +29,12 @@ h1 + h2 {
} }
h3 { h3 {
font-size: 28px; font-size: 24px;
line-height: 28px; line-height: 28px;
} }
p, a { p, a {
font-family: $font-family-open-sans; font-family: $font-family-open-sans;
font-family: $font-weight-open-sans-reg;
} }
.highlight{ .highlight{

44
website/source/assets/stylesheets/_home.scss
View File

@ -1,11 +1,20 @@
.page-home { .page-home {
h1 {
h1, h2, h3, h4, h5 {
color: $purple-text;
font-family: $font-family-klavika;
text-transform: uppercase;
text-align: center; text-align: center;
} }
p {
color: $purple-text;
}
.hero { .hero {
@include padded; @include padded;
background: $gray-background image-url("vagrant_header_background.png") no-repeat center -80px; background: $gray-background image-url("vagrant_header_background.png") no-repeat center -20px;
background-size: 1292px 532px;
text-align: center; text-align: center;
border-bottom: 1px solid #c6e0f0; border-bottom: 1px solid #c6e0f0;
@ -18,19 +27,13 @@
h1 { h1 {
color: $purple-text; color: $purple-text;
font-size: 55px; // font-size: 55px;
font-weight: 700; line-height: 1;
line-height: 60px; margin-top: 350px;
margin-bottom: ($baseline * 4);
} }
h2 { p {
color: $blue-text; color: $vagrant-blue;
font-size: 28px;
font-weight: 100;
letter-spacing: 1.6px;
line-height: 40px;
text-transform: none;
} }
} }
@ -48,12 +51,8 @@
@include padded; @include padded;
background: $light-blue-background image-url("steps_background.png") center -120px; background: $light-blue-background image-url("steps_background.png") center -120px;
h1 { h2 {
color: $blue-text; color: $blue-text;
text-transform: uppercase;
text-align: center;
font-size: 40px;
line-height: 50px;
} }
hgroup { hgroup {
@ -61,11 +60,8 @@
// width: 530px; // width: 530px;
h3 { h3 {
text-align: center; font-weight: bold;
text-transform: uppercase;
font-size: 40px;
margin-bottom: $baseline; margin-bottom: $baseline;
color: $purple-text;
} }
h4 { h4 {
@ -79,7 +75,7 @@
@include padded; @include padded;
@include get-started-bg; @include get-started-bg;
h1 { h2 {
color: $white; color: $white;
} }
@ -96,7 +92,7 @@
background-color: $black; background-color: $black;
border-bottom: 1px solid #333; border-bottom: 1px solid #333;
h1 { h2 {
color: $dark-gray-text; color: $dark-gray-text;
} }

16
website/source/index.html.erb
View File

@ -11,9 +11,9 @@ description: |-
<div class="hero-content"> <div class="hero-content">
<div class="row"> <div class="row">
<div class="col-md-8 col-md-offset-2"> <div class="col-md-12">
<hgroup> <hgroup>
<h1>Development<br>environments<br>made easy.</h1> <h1>Development environments made easy.</h1>
<p>Create and configure lightweight, reproducible, and portable development environments.</p> <p>Create and configure lightweight, reproducible, and portable development environments.</p>
</hgroup> </hgroup>
</div> </div>
@ -39,9 +39,9 @@ description: |-
<section class="why-vagrant"> <section class="why-vagrant">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<h1 class="col-md-12"> <h2 class="col-md-12">
Vagrant will change how you work Vagrant will change how you work
</h1> </h2>
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm-8 col-sm-offset-2"> <div class="col-sm-8 col-sm-offset-2">
@ -75,9 +75,9 @@ description: |-
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<h1 class="all-caps"> <h2 class="all-caps">
See how easy it is See how easy it is
</h1> </h2>
<pre> <pre>
$ vagrant init hashicorp/precise64 $ vagrant init hashicorp/precise64
$ vagrant up $ vagrant up
@ -98,9 +98,9 @@ $ vagrant up
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="customers-content col-md-12"> <div class="customers-content col-md-12">
<h1 class="all-caps"> <h2 class="all-caps">
Trusted by Trusted by
</h1> </h2>
<div class="customer-logos"> <div class="customer-logos">
<%= image_tag "customers.png", alt: "customers", width: 941, height: 111 %> <%= image_tag "customers.png", alt: "customers", width: 941, height: 111 %>
</div> </div>