Merge pull request #2332 from hashicorp/website-typography-updates
Website typography updates
This commit is contained in:
Alex Dadgar
GitHub
commit
83c082dd74
BIN
website/source/assets/images/logo-header.png
(Stored with Git LFS)
BIN
website/source/assets/images/logo-header.png
(Stored with Git LFS)
Binary file not shown.
22
website/source/assets/images/logo-header.svg
Normal file
22
website/source/assets/images/logo-header.svg
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
|
||||
<svg id="nomad-logo" width="153px" height="59px" viewBox="235 295 153 59" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<desc>HashiCorp Nomad</desc>
|
||||
<defs></defs>
|
||||
<g id="Group-3" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(235.000000, 296.000000)">
|
||||
<g id="Group-2">
|
||||
<polygon id="Fill-1" fill="#9BDB9C" points="25.3417793 28.9464113 25.3417793 57.8922235 50.4097606 43.4189089 50.4097606 14.4730967"></polygon>
|
||||
<polygon id="Fill-2" fill="#449B82" points="0.272300469 43.4190451 25.3419155 57.8920873 25.3419155 28.9465474 0.272300469 14.4729606"></polygon>
|
||||
<polygon id="Fill-3" fill="#57CDAE" points="25.3417793 -8.16901409e-05 0.272164319 14.4729606 25.3417793 28.9462751 50.4097606 14.4729606"></polygon>
|
||||
<polyline id="Fill-4" fill="#FFFFFF" points="29.432631 26.4886545 29.432631 15.8419784 37.9414761 10.9291333 37.9414761 31.4586826"></polyline>
|
||||
<polygon id="Fill-5" fill="#FFFFFF" points="12.4476169 25.7696178 20.5850441 21.3205005 37.9414761 31.4587915 30.3546404 35.7908197 20.5850441 30.1256085 20.5850441 41.3108948 12.4476169 46.1736366"></polygon>
|
||||
<polygon id="Fill-7" fill="#FFFFFF" points="12.4476169 25.7696178 20.5850441 21.3205005 20.5850441 41.3108948 12.4476169 46.1736366"></polygon>
|
||||
</g>
|
||||
<g id="Group" transform="translate(60.000000, 17.000000)" fill="#000000">
|
||||
<polygon id="Fill-8" points="4.67506479 7.10711831 4.67506479 23.6079822 0.65618216 23.6079822 0.65618216 1.84654554 6.14548732 1.84654554 14.4122573 18.3798131 14.4122573 1.84654554 18.4314122 1.84654554 18.4314122 23.6079822 12.9418347 23.6079822"></polygon>
|
||||
<path d="M28.2338479,10.7666732 C26.1101765,10.7666732 25.2932751,11.7142789 25.2932751,13.511462 L25.2932751,17.7917531 C25.2932751,19.5886638 26.1101765,20.5365418 28.2338479,20.5365418 C30.3577915,20.5365418 31.174693,19.5886638 31.174693,17.7917531 L31.174693,13.511462 C31.174693,11.7142789 30.3577915,10.7666732 28.2338479,10.7666732 M28.2338479,23.9345793 C22.7772188,23.9345793 21.3070685,20.9283822 21.3070685,17.6610488 L21.3070685,13.6421662 C21.3070685,10.3745606 22.7772188,7.36863568 28.2338479,7.36863568 C33.6907493,7.36863568 35.1608995,10.3745606 35.1608995,13.6421662 L35.1608995,17.6610488 C35.1608995,20.9283822 33.6907493,23.9345793 28.2338479,23.9345793" id="Fill-9"></path>
|
||||
<path d="M47.2834441,23.6078732 L47.2834441,12.4985587 C47.2834441,11.6489812 46.9242798,11.2241925 46.0090779,11.2241925 C45.0290685,11.2241925 43.2969653,11.8123615 41.8594911,12.5636385 L41.8594911,23.6078732 L37.8730122,23.6078732 L37.8730122,7.6951784 L40.9121577,7.6951784 L41.3039981,9.03489671 C43.2969653,8.05461502 45.8132939,7.36841784 47.6755568,7.36841784 C49.2113315,7.36841784 50.1589371,7.98953521 50.6814817,9.06757277 C52.6096413,8.08729108 55.1581014,7.36841784 57.0859887,7.36841784 C59.7327493,7.36841784 60.6800826,9.23095305 60.6800826,12.07377 L60.6800826,23.6078732 L56.6938761,23.6078732 L56.6938761,12.4985587 C56.6938761,11.6489812 56.3344394,11.2241925 55.4195099,11.2241925 C54.4392282,11.2241925 52.5113408,11.8450376 51.269923,12.5636385 L51.269923,23.6078732 L47.2834441,23.6078732 Z" id="Fill-11"></path>
|
||||
<path d="M71.7577831,17.5957239 L68.8172103,17.5957239 C67.5101681,17.5957239 67.1507315,17.9551606 67.1507315,19.1641746 C67.1507315,20.2751606 67.5101681,20.7653014 68.7518582,20.7653014 C69.9279239,20.7653014 71.0062338,20.3729164 71.7577831,19.9484 L71.7577831,17.5957239 Z M75.744262,23.607846 L72.4769286,23.607846 L72.1828441,22.5295362 C70.7448254,23.4771418 69.0459427,23.9346066 67.444816,23.9346066 C64.5366469,23.9346066 63.2952291,21.9413671 63.2952291,19.1968507 C63.2952291,15.9619211 64.7000272,14.720231 67.9349568,14.720231 L71.7577831,14.720231 L71.7577831,13.0540244 C71.7577831,11.2895174 71.2676423,10.6686723 68.7191822,10.6686723 C67.2814357,10.6686723 65.712985,10.8647286 64.3081869,11.1588131 L63.818046,8.11993991 C65.3208723,7.66247512 67.5101681,7.36839061 69.2746751,7.36839061 C74.2738394,7.36839061 75.744262,9.13289765 75.744262,13.1193765 L75.744262,23.607846 Z" id="Fill-13"></path>
|
||||
<path d="M88.1081939,11.1938362 C87.0625601,10.9651039 85.7231141,10.7690475 84.5794521,10.7690475 C83.1417056,10.7690475 82.586485,11.4552447 82.586485,12.8929912 L82.586485,18.5130006 C82.586485,19.8197705 83.0763535,20.5389161 84.5467761,20.5389161 C85.8538183,20.5389161 87.2588887,19.8851226 88.1081939,19.1011696 L88.1081939,11.1938362 Z M78.6000061,12.9910193 C78.6000061,9.46200526 80.1684568,7.37073765 83.8605789,7.37073765 C85.2656493,7.37073765 86.8665038,7.56706629 88.1081939,7.82847474 L88.1081939,1.19550761 L92.0946728,0.640014648 L92.0946728,23.6101931 L88.9250953,23.6101931 L88.5332549,22.2704747 C87.1279122,23.2834325 85.4941094,23.9369536 83.5011423,23.9369536 C80.2988887,23.9369536 78.6000061,22.0417423 78.6000061,18.4149724 L78.6000061,12.9910193 Z" id="Fill-15"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5 KiB |
BIN
website/source/assets/images/logo-header@2x.png
(Stored with Git LFS)
BIN
website/source/assets/images/logo-header@2x.png
(Stored with Git LFS)
Binary file not shown.
|
|
@ -8,7 +8,6 @@
|
|||
color: $black;
|
||||
@include transition(color .3s ease-in-out);
|
||||
//@include btn-shadow();
|
||||
font-family: $font-family-blanc-reg;
|
||||
text-transform: uppercase;
|
||||
border-radius: 3px;
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,13 @@
|
|||
|
||||
$docs-font-size: 15px;
|
||||
|
||||
body.layout-inner{
|
||||
// h2, h3, h4, h5 {
|
||||
// font-family: $font-family-open-sans;
|
||||
// text-transform: none;
|
||||
// }
|
||||
}
|
||||
|
||||
body.layout-docs,
|
||||
body.layout-inner,
|
||||
body.layout-downloads,
|
||||
|
|
@ -240,12 +247,13 @@ body.layout-intro{
|
|||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
h1, .h1, h2, .h2, h3, .h3, h4, .h4{
|
||||
h1, h2, .h2, h3, .h3, h4, .h4{
|
||||
color: $gray-dark;
|
||||
margin-top: 54px;
|
||||
margin-bottom: $docs-font-size;
|
||||
line-height: 1.3;
|
||||
@include open-sb();
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
h2 {
|
||||
|
|
|
|||
|
|
@ -16,22 +16,17 @@ body {
|
|||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
||||
h1, h2, h3, h4, h5 {
|
||||
font-family: $font-family-klavika;
|
||||
text-transform: uppercase;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
h1{
|
||||
font-family: $font-family-open-sans;
|
||||
font-weight: $font-weight-reg;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
h3, h4{
|
||||
font-family: $font-family-open-sans;
|
||||
font-weight: $font-weight-reg;
|
||||
}
|
||||
|
||||
//an alternative color for buttons in the doc body
|
||||
.btn-serf{
|
||||
color: $white !important;
|
||||
|
|
@ -82,6 +77,15 @@ pre {
|
|||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
//Typekit utilites for hiding FOUC
|
||||
.wf-loading {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.wf-active, .wf-inactive {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
//fixed grid below 992 to prevent smaller responsive sizes
|
||||
@media (min-width: 768px) and (max-width: 992px) {
|
||||
.container{
|
||||
|
|
@ -89,7 +93,7 @@ pre {
|
|||
}
|
||||
}
|
||||
|
||||
//guarantees nav list fits at tablet viewport size
|
||||
//guarantees nav list fits at tablet viewport size
|
||||
@media (min-width: 768px) and (max-width: 800px) {
|
||||
#header .navbar-nav a {
|
||||
font-size: 12px !important;
|
||||
|
|
|
|||
|
|
@ -7,15 +7,15 @@
|
|||
#header {
|
||||
.navbar-brand {
|
||||
.logo{
|
||||
color: $gray-darker;
|
||||
font-family: $font-family-blanc;
|
||||
font-size: 28px;
|
||||
background: image-url('logo-header.png') 0 0 no-repeat;
|
||||
@include img-retina("logo-header.png", "logo-header@2x.png", $project-logo-width, $project-logo-height);
|
||||
background-position: 0 center;
|
||||
display: inline-block;
|
||||
height: 59px;
|
||||
width: 153px;
|
||||
margin-top: 15px;
|
||||
background: image-url('logo-header.svg') 0 0 no-repeat;
|
||||
font-size: 0;
|
||||
|
||||
&:hover{
|
||||
color: $green-dark;
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -55,25 +55,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 414px) {
|
||||
#header {
|
||||
.navbar-brand {
|
||||
.logo{
|
||||
padding-left: 42px;
|
||||
font-size: 18px;
|
||||
@include img-retina("logo-header.png", "logo-header@2x.png", $project-logo-width * .75, $project-logo-height * .75);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 320px) {
|
||||
#header {
|
||||
.navbar-brand {
|
||||
.logo{
|
||||
// font-size: 0 !important; //hide terraform text
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,6 +23,11 @@
|
|||
z-index: 1;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $gray;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#hero-graphic{
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
|
|
@ -97,12 +102,13 @@
|
|||
margin-top: 0;
|
||||
color: $blue-dark;
|
||||
font-size: $font-size-xl;
|
||||
font-family: $font-family-blanc;
|
||||
}
|
||||
|
||||
h4{
|
||||
font-family: $font-family-open-sans;
|
||||
font-weight: 500;
|
||||
text-transform: none;
|
||||
color: $blue-light;
|
||||
font-family: $font-family-blanc;
|
||||
}
|
||||
|
||||
#hero-btns{
|
||||
|
|
@ -182,7 +188,6 @@
|
|||
margin-right: 30px;
|
||||
font-size: $font-size-reg;
|
||||
line-height: $font-size-reg;
|
||||
font-family: $font-family-blanc-reg;
|
||||
}
|
||||
|
||||
p, a{
|
||||
|
|
@ -198,7 +203,6 @@
|
|||
margin-bottom: 120px;
|
||||
text-align: center;
|
||||
font-size: $font-size-m;
|
||||
font-family: $font-family-blanc;
|
||||
color: $green;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
|
@ -320,7 +324,6 @@
|
|||
color: $blue-dark;
|
||||
letter-spacing: 1px;
|
||||
font-size: $font-size-l;
|
||||
font-family: $font-family-blanc;
|
||||
line-height: 1.25em;
|
||||
max-width: 640px;
|
||||
}
|
||||
|
|
@ -329,7 +332,6 @@
|
|||
margin-bottom: 30px;
|
||||
color: $blue-light;
|
||||
font-size: $font-size-reg+2;
|
||||
font-family: $font-family-blanc-reg;
|
||||
line-height: 1.75em;
|
||||
max-width: 480px;
|
||||
}
|
||||
|
|
@ -342,7 +344,6 @@
|
|||
display: inline-block;
|
||||
color: $blue-dark;
|
||||
font-size: $font-size-reg;
|
||||
font-family: $font-family-blanc;
|
||||
line-height: 1.75em;
|
||||
max-width: 320px;
|
||||
padding-left: 20px;
|
||||
|
|
|
|||
|
|
@ -40,7 +40,6 @@
|
|||
|
||||
@mixin v-nav-style-core{
|
||||
color: $gray-darker;
|
||||
font-family: $font-family-blanc-reg;
|
||||
font-size: 13px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.0625em;
|
||||
|
|
|
|||
|
|
@ -51,8 +51,7 @@ $link-hover-color: darken($link-color, 15%);
|
|||
// Typography
|
||||
// -------------------------
|
||||
$font-family-open-sans: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
$font-family-blanc: 'Blanc-Light', 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
$font-family-blanc-reg: 'Blanc-Regular', 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
$font-family-klavika: 'klavika-web', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
$font-weight-xl: 300;
|
||||
$font-weight-reg: 400;
|
||||
$font-weight-sb: 600;
|
||||
|
|
|
|||
|
|
@ -1,29 +0,0 @@
|
|||
/**
|
||||
* @license
|
||||
* MyFonts Webfont Build ID 3078913, 2015-08-21T01:21:30-0400
|
||||
*
|
||||
* The fonts listed in this notice are subject to the End User License
|
||||
* Agreement(s) entered into by the website owner. All other parties are
|
||||
* explicitly restricted from using the Licensed Webfonts(s).
|
||||
*
|
||||
* You may obtain a valid license at the URLs below.
|
||||
*
|
||||
* Webfont: Blanc-Light by Latinotype
|
||||
* URL: http://www.myfonts.com/fonts/latinotype/blanc/light/
|
||||
* Copyright: Jorge Cisterna
|
||||
* Licensed pageviews: 10,000
|
||||
*
|
||||
*
|
||||
* License: http://www.myfonts.com/viewlicense?type=web&buildid=3078913
|
||||
*
|
||||
* © 2015 MyFonts Inc
|
||||
*/
|
||||
|
||||
|
||||
/* @import must be at top of file, otherwise CSS will not work */
|
||||
//@import url("//hello.myfonts.net/count/2efc68");
|
||||
@import url("//hello.myfonts.net/count/2efb01");
|
||||
|
||||
|
||||
@font-face {font-family: 'Blanc-Light';src: url('../webfonts/2EFB01_0_0.eot');src: url('../webfonts/2EFB01_0_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/2EFB01_0_0.woff2') format('woff2'),url('../webfonts/2EFB01_0_0.woff') format('woff'),url('../webfonts/2EFB01_0_0.ttf') format('truetype');}
|
||||
@font-face {font-family: 'Blanc-Regular';src: url('../webfonts/2EFC68_0_0.eot');src: url('../webfonts/2EFC68_0_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/2EFC68_0_0.woff2') format('woff2'),url('../webfonts/2EFC68_0_0.woff') format('woff'),url('../webfonts/2EFC68_0_0.ttf') format('truetype');}
|
||||
|
|
@ -10,9 +10,6 @@
|
|||
// Utility classes
|
||||
@import '_utilities';
|
||||
|
||||
// Core CSS
|
||||
@import '_webfonts';
|
||||
|
||||
//Global Site
|
||||
@import '_global';
|
||||
|
||||
|
|
|
|||
|
|
@ -204,14 +204,9 @@
|
|||
.navbar-brand {
|
||||
height: $header-mobile-height;
|
||||
|
||||
.logo{
|
||||
height: $header-mobile-height;
|
||||
line-height: $header-mobile-height;
|
||||
}
|
||||
.by{
|
||||
height: $header-mobile-height;
|
||||
line-height: $header-mobile-height;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
.main-links,
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ $header-font-family: $font-family-open-sans;
|
|||
$header-font-weight: 600; // semi-bold
|
||||
|
||||
$header-height: 74px;
|
||||
$header-mobile-height: 60px;
|
||||
$header-mobile-height: 90px;
|
||||
$by-hashicorp-width: 74px;
|
||||
$by-hashicorp-height: 16px;
|
||||
$nav-margin-right: 12px;
|
||||
|
|
|
|||
|
|
@ -23,6 +23,10 @@
|
|||
})(window,document,'script','dataLayer','GTM-NR2SD7C');</script>
|
||||
<!-- End Google Tag Manager -->
|
||||
|
||||
<!-- Typekit script to import 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 a new issue