Merge pull request #11927 from hashicorp/typographic-updates
Website typographic updates
This commit is contained in:
Mitchell Hashimoto
GitHub
commit
3e2f324b20
Binary file not shown.
|
Before Width: | Height: | Size: 546 B After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 975 B After Width: | Height: | Size: 2.5 KiB |
|
|
@ -99,6 +99,8 @@ body.layout-intro{
|
|||
.docs-sidenav{
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
font-family: "Klavika-web";
|
||||
font-size: 16px;
|
||||
|
||||
:last-child{
|
||||
border-bottom: none;
|
||||
|
|
@ -129,6 +131,7 @@ body.layout-intro{
|
|||
>.nav{
|
||||
li{
|
||||
a{
|
||||
font-family: $font-family-open-sans;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
|
@ -137,7 +140,7 @@ body.layout-intro{
|
|||
&.active {
|
||||
>a{
|
||||
color: lighten($purple, 4%);
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&:before{
|
||||
|
|
@ -155,11 +158,6 @@ body.layout-intro{
|
|||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/*> a:hover,
|
||||
> a:focus {
|
||||
font-weight: $font-weight-lato-xb;
|
||||
}*/
|
||||
|
||||
.nav {
|
||||
display: block;
|
||||
|
||||
|
|
@ -198,9 +196,7 @@ body.layout-intro{
|
|||
|
||||
|
||||
.bs-docs-section{
|
||||
padding-top: 10px;
|
||||
padding-left: 3%;
|
||||
padding-bottom: 80px;
|
||||
padding: 10px 10px 80px 10px;
|
||||
|
||||
.lead{
|
||||
margin-bottom: 48px
|
||||
|
|
@ -211,9 +207,7 @@ body.layout-intro{
|
|||
}
|
||||
|
||||
p, li, .alert {
|
||||
font-size: 20px;
|
||||
font-family: $font-family-open-sans;
|
||||
font-weight: $font-weight-open;
|
||||
font-size: 18px;
|
||||
line-height: 1.5em;
|
||||
margin: 0 0 18px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
|
@ -242,10 +236,9 @@ body.layout-intro{
|
|||
text-transform: uppercase;
|
||||
word-wrap: break-word;
|
||||
padding-bottom: 24px;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 24px;
|
||||
margin-top: 24px;
|
||||
margin-bottom: 30px;
|
||||
border-bottom: 1px solid #eeeeee;
|
||||
@include lato-light();
|
||||
}
|
||||
|
||||
h2, h3, h4{
|
||||
|
|
|
|||
|
|
@ -1,27 +0,0 @@
|
|||
//
|
||||
// Typography
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
//light
|
||||
.rls-l{
|
||||
font-family: $font-family-lato;
|
||||
font-weight: $font-weight-lato-xl;
|
||||
}
|
||||
|
||||
//semibold
|
||||
.rls-sb{
|
||||
font-family: $font-family-lato;
|
||||
font-weight: $font-weight-lato-sb;
|
||||
}
|
||||
|
||||
//extrabold
|
||||
.rls-xb{
|
||||
font-family: $font-family-lato;
|
||||
font-weight: $font-weight-lato-xb;
|
||||
}
|
||||
|
||||
.os{
|
||||
font-family: $font-family-open-sans;
|
||||
font-weight: $font-weight-open;
|
||||
}
|
||||
|
|
@ -11,26 +11,44 @@ body {
|
|||
// -webkit-font-smoothing: subpixel-antialiased;
|
||||
color: $black;
|
||||
font-size: 15px;
|
||||
font-family: $font-family-lato;
|
||||
font-family: $font-family-open-sans;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5 {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-family: "klavika-web";
|
||||
font-weight: 600;
|
||||
}
|
||||
h1{
|
||||
font-size: 42px;
|
||||
line-height: 42px;
|
||||
font-family: $font-family-lato;
|
||||
font-weight: $font-weight-lato-sb;
|
||||
line-height: 40px;
|
||||
margin-bottom: 24px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h2{
|
||||
font-size: 34px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h3{
|
||||
font-size: 28px;
|
||||
line-height: 28px;
|
||||
font-family: $font-family-lato;
|
||||
font-weight: $font-weight-lato-sb;
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 30px;
|
||||
font-size: 16px;
|
||||
font-family: $font-family-open-sans;
|
||||
font-weight: regular;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
p.lead{
|
||||
font-size: 21px;
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
|
||||
//an alternative color for buttons in the doc body
|
||||
|
|
|
|||
|
|
@ -13,12 +13,12 @@ body.page-sub{
|
|||
#header {
|
||||
.navbar-brand {
|
||||
.logo{
|
||||
font-size: 20px;
|
||||
text-transform: uppercase;
|
||||
@include lato-light();
|
||||
font-size: 32px;
|
||||
font-family: "Klavika-web";
|
||||
font-weight: 500;
|
||||
background: image-url('logo-header.png') 0 0 no-repeat;
|
||||
@include img-retina("../images/logo-header.png", "../images/logo-header@2x.png", $project-logo-width, $project-logo-height);
|
||||
background-position: 0 45%;
|
||||
background-position: 0 40%;
|
||||
|
||||
&:hover{
|
||||
opacity: .6;
|
||||
|
|
@ -26,6 +26,7 @@ body.page-sub{
|
|||
}
|
||||
|
||||
.by-hashicorp{
|
||||
margin-top: 2px;
|
||||
&:hover{
|
||||
svg{
|
||||
.svg-bg-line{
|
||||
|
|
|
|||
|
|
@ -4,41 +4,7 @@
|
|||
|
||||
body.page-home {
|
||||
h2.tag-line {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
h2{
|
||||
margin-bottom: 40px;
|
||||
font-size: 42px;
|
||||
line-height: 42px;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
font-weight: regular;
|
||||
}
|
||||
|
||||
h3{
|
||||
margin-bottom: 10px;
|
||||
font-size: 18px;
|
||||
line-height: 1.2;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
p{
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
font-weight: regular;
|
||||
letter-spacing: .2px;
|
||||
margin-bottom: 2.2em;
|
||||
font-family: $font-family-open-sans;
|
||||
font-weight: $font-weight-open;
|
||||
}
|
||||
|
||||
p.lead{
|
||||
font-size: 21px;
|
||||
font-family: $font-family-open-sans;
|
||||
font-weight: $font-weight-open;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
#primary-cta{
|
||||
|
|
@ -378,8 +344,6 @@ body.page-home {
|
|||
font-size: 14px;
|
||||
letter-spacing: 1px;
|
||||
color: white;
|
||||
font-family: $font-family-lato;
|
||||
font-weight: $font-weight-lato-xb;
|
||||
}
|
||||
|
||||
ul.shell-dots{
|
||||
|
|
|
|||
|
|
@ -123,9 +123,6 @@
|
|||
color:#fff;
|
||||
visibility:hidden;
|
||||
|
||||
font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-weight: 500;
|
||||
|
||||
-webkit-transform:translate3d(0,0,0);
|
||||
-moz-transform:translate3d(0,0,0);
|
||||
-ms-transform:translate3d(0,0,0);
|
||||
|
|
|
|||
|
|
@ -7,11 +7,6 @@
|
|||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
@mixin lato-light() {
|
||||
font-family: $font-family-lato;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
@mixin skewY($skew) {
|
||||
-webkit-transform: skewY($skew);
|
||||
-moz-transform: skewY($skew);
|
||||
|
|
@ -19,3 +14,11 @@
|
|||
-o-transform: skewY($skew);
|
||||
transform: skewY($skew);
|
||||
}
|
||||
|
||||
.sub-black {
|
||||
color: #545454;
|
||||
}
|
||||
|
||||
.lower-opacity {
|
||||
opacity: .7;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -44,14 +44,7 @@ $link-hover-color: darken($link-color, 15%);
|
|||
|
||||
// Typography
|
||||
// -------------------------
|
||||
$font-family-lato: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
$font-family-open-sans: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
$font-weight-lato-xl: 300;
|
||||
$font-weight-lato-reg: 300;
|
||||
$font-weight-lato-sb: 500;
|
||||
$font-weight-lato-xb: 700;
|
||||
$font-weight-open: $font-weight-lato-reg;
|
||||
|
||||
|
||||
$text-shadow: 1px 1px 1px #000;
|
||||
$shadow: $text-shadow;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@import 'bootstrap-sprockets';
|
||||
@import 'bootstrap';
|
||||
|
||||
@import url("//fonts.googleapis.com/css?family=Lato:300,400,700|Open+Sans:300,400,600");
|
||||
@import url("Open+Sans:300,400,600");
|
||||
|
||||
// Core variables and mixins
|
||||
@import '_variables';
|
||||
|
|
@ -9,9 +9,6 @@
|
|||
// Utility
|
||||
@import '_utilities';
|
||||
|
||||
// Core CSS
|
||||
@import '_fonts';
|
||||
|
||||
//Global Site
|
||||
@import '_global';
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<p class="lead">Terraform enables you to safely and predictably create, change, and
|
||||
<p class="lead lower-opacity">Terraform enables you to safely and predictably create, change, and
|
||||
improve production infrastructure. It is an open source tool that
|
||||
codifies APIs into declarative configuration files that can be shared amongst team members,
|
||||
treated as code, edited, reviewed, and versioned. </p>
|
||||
|
|
@ -67,17 +67,17 @@
|
|||
<div id="write-section" class="row">
|
||||
<div class="col-sm-12">
|
||||
<h2>Infrastructure as code</h2>
|
||||
<p class="lead">Define infrastructure as code to increase operator productivity and transparency.</p>
|
||||
<p class="lead sub-black">Define infrastructure as code to increase operator productivity and transparency.</p>
|
||||
</div>
|
||||
<img class="feature-image" id="feature-image-write-sm-screen" src="/assets/images/feature-write-bg.svg" />
|
||||
<div class="col-sm-4">
|
||||
<h3>Collaborate & share</h3>
|
||||
<p>Terraform configuration can be stored in version control,
|
||||
<p class="sub-black">Terraform configuration can be stored in version control,
|
||||
shared, and collaborated on by teams of operators.</p>
|
||||
<h3>Evolve your infrastructure</h3>
|
||||
<p>Track the complete history of infrastructure versions.</p>
|
||||
<p class="sub-black">Track the complete history of infrastructure versions.</p>
|
||||
<h3>Automation friendly</h3>
|
||||
<p>If it can be codified, it can be automated.</p>
|
||||
<p class="sub-black">If it can be codified, it can be automated.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- /container -->
|
||||
|
|
@ -91,7 +91,7 @@
|
|||
<div id="plan-section" class="row">
|
||||
<div class="col-sm-12">
|
||||
<h2>One safe workflow across providers</h2>
|
||||
<p class="lead">Terraform provides an elegant user experience for
|
||||
<p class="lead lower-opacity">Terraform provides an elegant user experience for
|
||||
operators to safely and predictably make changes to infrastructure.</p>
|
||||
</div>
|
||||
<div class="col-sm-12">
|
||||
|
|
@ -100,20 +100,20 @@
|
|||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h3>Map resource dependencies</h3>
|
||||
<p>Understand how a minor change could have potential cascading effects
|
||||
<p class="lower-opacity">Understand how a minor change could have potential cascading effects
|
||||
across an infrastructure before executing that change. Terraform
|
||||
builds a dependency graph from the configurations, and walks this
|
||||
graph to generate plans, refresh state, and more.</p>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h3>Separation of plan & apply</h3>
|
||||
<p>Separating plans and applies reduces mistakes and uncertainty at
|
||||
<p class="lower-opacity">Separating plans and applies reduces mistakes and uncertainty at
|
||||
scale. Plans show operators what would happen, applies execute
|
||||
changes.</p>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h3>One workflow</h3>
|
||||
<p>Use Terraform to create resources across all major infrastructure
|
||||
<p class="lower-opacity">Use Terraform to create resources across all major infrastructure
|
||||
providers (AWS, GCP, Azure, OpenStack, VMware, and more).</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -126,7 +126,7 @@
|
|||
<div id="create-section" class="row">
|
||||
<div class="col-sm-6">
|
||||
<h2>Reproducible infrastructure</h2>
|
||||
<p class="lead">Terraform lets operators easily use the same
|
||||
<p class="lead sub-black">Terraform lets operators easily use the same
|
||||
configurations in multiple places to reduce mistakes and save time.</p>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
|
|
@ -136,17 +136,17 @@
|
|||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<h3>Environment parity</h3>
|
||||
<p>Use the same Terraform configuration to provision identical staging,
|
||||
<p class="sub-black">Use the same Terraform configuration to provision identical staging,
|
||||
QA, and production environments.</p>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h3>Shareable modules</h3>
|
||||
<p>Common Terraform configurations can be packaged as modules and used
|
||||
<p class="sub-black">Common Terraform configurations can be packaged as modules and used
|
||||
across teams and organizations.</p>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h3>Combine multiple providers consistently</h3>
|
||||
<p>Terraform allows you to effortlessly combine high-level system
|
||||
<p class="sub-black">Terraform allows you to effortlessly combine high-level system
|
||||
providers. Launch a server from one cloud provider, add a DNS entry
|
||||
with its IP with a different provider. Built-in dependency resolution
|
||||
means things happen in the right order.</p>
|
||||
|
|
@ -165,7 +165,7 @@
|
|||
|
||||
<div class="col-md-6 explantion">
|
||||
<h3>Composing Resources</h3>
|
||||
<p>Use attributes from other resources to create an infrastructure
|
||||
<p class="sub-black">Use attributes from other resources to create an infrastructure
|
||||
composed of resources across multiple providers.
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -199,7 +199,7 @@
|
|||
|
||||
<div class="col-md-6 explantion">
|
||||
<h3>Fast, Simplified Interaction</h3>
|
||||
<p>Simple and intuitive configuration makes even the most complicated
|
||||
<p class="sub-black">Simple and intuitive configuration makes even the most complicated
|
||||
services approachable: no more web consoles, loading bars, or
|
||||
confusing CLI clients.
|
||||
</p>
|
||||
|
|
@ -237,7 +237,7 @@
|
|||
</div>
|
||||
</div> <!-- /.terminal-item -->
|
||||
<div class="cta col-sm-12 col-lg-8 col-lg-offset-2" id="demo-cta">
|
||||
<p class="lead">The intro contains a walkthrough guide, introductory literature, and
|
||||
<p class="lead lower-opacity">The intro contains a walkthrough guide, introductory literature, and
|
||||
a range of examples to experiment with Terraform.</p>
|
||||
<p>
|
||||
<a class="terra-btn" href="/intro/index.html">Get started</a>
|
||||
|
|
@ -267,7 +267,7 @@
|
|||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<h2><span>Terraform Enterprise</span></h2>
|
||||
<p class="lead">Collaborative Infrastructure Automation for
|
||||
<p class="lead lower-opacity">Collaborative Infrastructure Automation for
|
||||
organizations. Collaborate on Terraform configurations,
|
||||
validate changes, and automate provisioning across providers.</p>
|
||||
<p>
|
||||
|
|
|
|||
|
|
@ -23,6 +23,10 @@
|
|||
})(window,document,'script','dataLayer','GTM-NR2SD7C');</script>
|
||||
<!-- End Google Tag Manager -->
|
||||
|
||||
<!-- Typekit script for Klavika font -->
|
||||
<script src="https://use.typekit.net/wxf7mfi.js"></script>
|
||||
<script>try{Typekit.load({ async: true });}catch(e){}</script>
|
||||
|
||||
<%= yield_content :head %>
|
||||
</head>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue