Merge pull request #8295 from rjspiker/rj.fonts
website - font and brand updates
This commit is contained in:
Adrien Delorme
GitHub
commit
7108f6d07e
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -1,16 +1,16 @@
|
|||
.button {
|
||||
background: $button-background;
|
||||
border: 1px solid $button-font-color;
|
||||
box-shadow: 4px 4px 0 rgba(0,0,0,0.1);
|
||||
border: 1px solid #d6d6d7;
|
||||
border-radius: 1px;
|
||||
box-sizing: border-box;
|
||||
color: $button-font-color;
|
||||
display: inline-block;
|
||||
font-family: $button-font-family;
|
||||
font-size: $button-font-size;
|
||||
font-weight: $button-font-weight;
|
||||
letter-spacing: 1px;
|
||||
font-weight: $font-weight-medium;
|
||||
line-height: 1.6em;
|
||||
margin-bottom: 4px;
|
||||
padding: 12px 30px 10px 30px;
|
||||
text-transform: uppercase;
|
||||
padding: 13px 19px;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
|
|
@ -19,19 +19,54 @@
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border: 3px solid $packer-l1;
|
||||
color: $button-font-color;
|
||||
outline: none;
|
||||
padding: 11px 17px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $button-font-color;
|
||||
border: 1px solid $button-font-color;
|
||||
color: $button-background;
|
||||
background: #eaeaeb;
|
||||
border: 1px solid #d6d6d7;
|
||||
color: $button-font-color;
|
||||
padding: 13px 19px;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: #dfdfe0;
|
||||
border: 1px solid #d6d6d7;
|
||||
color: $button-font-color;
|
||||
padding: 13px 19px;
|
||||
}
|
||||
|
||||
&.primary {
|
||||
background: $button-primary-background;
|
||||
border: 1px solid darken($button-primary-background, 5%);
|
||||
color: $button-primary-font-color;
|
||||
border: none;
|
||||
color: $white;
|
||||
padding: 14px 20px;
|
||||
|
||||
&:focus {
|
||||
border: 3px solid $packer-l1;
|
||||
padding: 11px 17px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: lighten($button-primary-background, 5%);
|
||||
background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
|
||||
$button-primary-background;
|
||||
border: none;
|
||||
padding: 14px 20px;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
|
||||
$button-primary-background;
|
||||
border: none;
|
||||
padding: 14px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&.inline {
|
||||
padding: 8px 14px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,20 +9,17 @@
|
|||
li {
|
||||
a {
|
||||
color: $sidebar-link-color;
|
||||
font-size: $sidebar-font-size;
|
||||
padding: 10px 0 10px 15px;
|
||||
|
||||
&:before {
|
||||
color: $sidebar-link-color-active;
|
||||
content: '\203A';
|
||||
font-size: $font-size;
|
||||
content: "\203A";
|
||||
left: 0;
|
||||
line-height: 100%;
|
||||
opacity: 0.4;
|
||||
position: absolute;
|
||||
|
||||
height: 100%;
|
||||
width: 8px
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ body.layout-downloads {
|
|||
padding-left: 20px;
|
||||
|
||||
h2 {
|
||||
@extend .g-type-display-4;
|
||||
margin-top: 4px;
|
||||
border: none;
|
||||
}
|
||||
|
|
@ -46,7 +47,6 @@ body.layout-downloads {
|
|||
}
|
||||
|
||||
.os-name {
|
||||
font-size: 40px;
|
||||
margin-bottom: -3px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,74 @@
|
|||
/* Display Font (Gilmer) */
|
||||
@font-face {
|
||||
font-family: "gilmer-web";
|
||||
src: url("/assets/fonts/gilmer/gilmer-light.woff2") format("woff2"),
|
||||
url("/assets/fonts/gilmer/gilmer-light.woff") format("woff");
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "gilmer-web";
|
||||
src: url("/assets/fonts/gilmer/gilmer-regular.woff2") format("woff2"),
|
||||
url("/assets/fonts/gilmer/gilmer-regular.woff") format("woff");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "gilmer-web";
|
||||
src: url("/assets/fonts/gilmer/gilmer-medium.woff2") format("woff2"),
|
||||
url("/assets/fonts/gilmer/gilmer-medium.woff") format("woff");
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "gilmer-web";
|
||||
src: url("/assets/fonts/gilmer/gilmer-bold.woff2") format("woff2"),
|
||||
url("/assets/fonts/gilmer/gilmer-bold.woff") format("woff");
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* Body Font (Metro) */
|
||||
@font-face {
|
||||
font-family: "metro-web";
|
||||
src: url("/assets/fonts/metro/metro-sans-book.woff2") format("woff2"),
|
||||
url("/assets/fonts/metro/metro-sans-book.woff") format("woff");
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "metro-web";
|
||||
src: url("/assets/fonts/metro/metro-sans-regular.woff2") format("woff2"),
|
||||
url("/assets/fonts/metro/metro-sans-regular.woff") format("woff");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "metro-web";
|
||||
src: url("/assets/fonts/metro/metro-sans-semi-bold.woff2") format("woff2"),
|
||||
url("/assets/fonts/metro/metro-sans-semi-bold.woff") format("woff");
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "metro-web";
|
||||
src: url("/assets/fonts/metro/metro-sans-bold.woff2") format("woff2"),
|
||||
url("/assets/fonts/metro/metro-sans-bold.woff") format("woff");
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* Code Font (Deja Vu) */
|
||||
@font-face {
|
||||
font-family: "dejavu-sans-mono-web";
|
||||
src: url("/assets/fonts/dejavu/DejaVuSansMono.woff2") format("woff2"),
|
||||
url("/assets/fonts/dejavu/DejaVuSansMono.woff") format("woff");
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
a {
|
||||
color: $footer-link-color;
|
||||
font-size: $footer-font-size;
|
||||
font-family: $font-family-open-sans;
|
||||
font-family: $font-body;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover, &:focus, &:active {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
html {
|
||||
font-size: $font-size-default;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
text-rendering: optimizeLegibility;
|
||||
|
|
@ -9,18 +10,9 @@ body {
|
|||
-webkit-font-smoothing: antialiased;
|
||||
color: $body-font-color;
|
||||
background-color: $white;
|
||||
font-size: $font-size;
|
||||
font-family: $font-family-open-sans;
|
||||
font-size: $font-size-default;
|
||||
font-family: $font-body;
|
||||
font-weight: $font-weight-reg;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5 {
|
||||
font-family: $font-family-klavika;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
a {
|
||||
color: $header-link-color;
|
||||
font-size: $header-font-size;
|
||||
font-family: $font-family-open-sans;
|
||||
font-family: $font-body;
|
||||
font-weight: $font-weight-bold;
|
||||
height: $header-height;
|
||||
line-height: $header-height;
|
||||
|
|
|
|||
|
|
@ -22,7 +22,9 @@
|
|||
a {
|
||||
color: $home-header-link-color;
|
||||
|
||||
&:hover, &:focus, &:active {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: transparent;
|
||||
color: $home-header-link-color-hover;
|
||||
|
||||
|
|
@ -44,6 +46,10 @@
|
|||
margin: 140px auto 160px auto;
|
||||
text-align: center;
|
||||
|
||||
h1 {
|
||||
margin: 24px 0 40px 0;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin: 5px;
|
||||
|
||||
|
|
@ -67,21 +73,12 @@
|
|||
|
||||
section.marketing {
|
||||
h2 {
|
||||
font-family: $font-family-klavika;
|
||||
font-size: 36px;
|
||||
font-weight: $font-weight-bold;
|
||||
line-height: 1.25;
|
||||
letter-spacing: -0.02em;
|
||||
margin: 20px 0 10px 0;
|
||||
padding: 0;
|
||||
color: $black;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: $font-family-open-sans;
|
||||
font-size: 16px;
|
||||
letter-spacing: 0.01em;
|
||||
line-height: 1.8;
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
|
|
@ -89,18 +86,12 @@
|
|||
background: $black;
|
||||
color: $white;
|
||||
display: inline-block;
|
||||
font-family: $font-family-klavika;
|
||||
font-size: 18px;
|
||||
font-weight: $font-weight-bold;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
padding: 7px 5px 5px 5px;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&.invert {
|
||||
background: $packer-blue;
|
||||
background: $packer;
|
||||
|
||||
h2 {
|
||||
color: $white;
|
||||
|
|
@ -108,7 +99,6 @@
|
|||
|
||||
p {
|
||||
color: $white;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -139,7 +129,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 5px solid $packer-blue;
|
||||
border: 5px solid $packer;
|
||||
height: 100px;
|
||||
width: 33.3%;
|
||||
background-color: $white;
|
||||
|
|
@ -154,13 +144,11 @@
|
|||
}
|
||||
|
||||
.terminal {
|
||||
@extend .g-type-code;
|
||||
border: 1px solid $white;
|
||||
background-color: $black;
|
||||
box-sizing: border-box;
|
||||
color: $white;
|
||||
font-family: $font-family-monospace;
|
||||
font-size: 15px;
|
||||
line-height: 1.8;
|
||||
margin: 20px auto;
|
||||
padding: 10px 20px 20px 20px;
|
||||
|
||||
|
|
@ -178,11 +166,8 @@
|
|||
|
||||
span.circle {
|
||||
&:before {
|
||||
content: '\25CF';
|
||||
content: "\25CF";
|
||||
color: $white;
|
||||
font-family: $font-family-monospace;
|
||||
font-size: 30px;
|
||||
line-height: 1;
|
||||
margin: 0 0 0 -4px;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -1,29 +1,39 @@
|
|||
#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;
|
||||
h1 {
|
||||
@extend .g-type-display-2;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@extend .g-type-display-3;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@extend .g-type-display-4;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@extend .g-type-display-5;
|
||||
}
|
||||
|
||||
h5,
|
||||
h6 {
|
||||
@extend .g-type-display-6;
|
||||
}
|
||||
|
||||
p,
|
||||
li,
|
||||
.alert {
|
||||
@extend .g-type-long-body;
|
||||
margin: 0 0 $font-size-default;
|
||||
}
|
||||
|
||||
.alert p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
pre,
|
||||
code,
|
||||
pre code,
|
||||
tt {
|
||||
font-family: $font-family-monospace;
|
||||
font-size: $font-size - 2;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: 20px;
|
||||
margin: 0 0 $font-size;
|
||||
margin: 0 0 $font-size-default;
|
||||
|
||||
// This will force the code to scroll horizontally on small screens
|
||||
// instead of wrapping.
|
||||
|
|
@ -61,8 +71,7 @@
|
|||
h4 {
|
||||
color: $body-font-color;
|
||||
margin-top: 54px;
|
||||
margin-bottom: $font-size;
|
||||
line-height: 1.3;
|
||||
margin-bottom: $font-size-default;
|
||||
}
|
||||
|
||||
h2 {
|
||||
|
|
@ -74,17 +83,11 @@
|
|||
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%;
|
||||
h5 > code,
|
||||
h6 > code {
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
font-size: 90%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,12 +8,12 @@ svg.logo {
|
|||
}
|
||||
|
||||
path.p-front {
|
||||
fill: $packer-blue;
|
||||
fill: #1DAEFF;
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
path.p-back {
|
||||
fill: $packer-blue-dark;
|
||||
fill: #1D94DD;
|
||||
opacity: 1.0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,283 @@
|
|||
/* HashiCorp-style headings */
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: $font-display;
|
||||
font-weight: $font-weight-bold;
|
||||
font-kerning: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
pre,
|
||||
code,
|
||||
pre code,
|
||||
tt {
|
||||
@extend .g-type-code;
|
||||
}
|
||||
|
||||
/* Display 1 */
|
||||
.g-type-display-1 {
|
||||
font-family: $font-display;
|
||||
font-weight: $font-weight-bold;
|
||||
font-size: 2.125rem;
|
||||
letter-spacing: -0.008em;
|
||||
line-height: 1.265em;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
font-size: 2.625rem;
|
||||
letter-spacing: -0.01em;
|
||||
line-height: 1.19em;
|
||||
}
|
||||
|
||||
@media (min-width: 1120px) {
|
||||
font-size: 3.125rem;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
/* Display 2 */
|
||||
.g-type-display-2 {
|
||||
font-family: $font-display;
|
||||
font-weight: $font-weight-bold;
|
||||
font-size: 1.75rem;
|
||||
letter-spacing: -0.004em;
|
||||
line-height: 1.286em;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
font-size: 2.125rem;
|
||||
letter-spacing: -0.008em;
|
||||
line-height: 1.265em;
|
||||
}
|
||||
|
||||
@media (min-width: 1120px) {
|
||||
font-size: 2.5rem;
|
||||
letter-spacing: -0.01em;
|
||||
line-height: 1.25em;
|
||||
}
|
||||
}
|
||||
|
||||
/* Display 3 */
|
||||
.g-type-display-3 {
|
||||
font-family: $font-display;
|
||||
font-weight: $font-weight-bold;
|
||||
font-size: 1.5rem;
|
||||
letter-spacing: -0.004em;
|
||||
line-height: 1.375em;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
font-size: 1.75rem;
|
||||
line-height: 1.321em;
|
||||
}
|
||||
|
||||
@media (min-width: 1120px) {
|
||||
font-size: 2rem;
|
||||
letter-spacing: -0.006em;
|
||||
line-height: 1.313em;
|
||||
}
|
||||
}
|
||||
|
||||
/* Display 4 */
|
||||
.g-type-display-4 {
|
||||
font-family: $font-display;
|
||||
font-weight: $font-weight-bold;
|
||||
font-size: 1.313rem;
|
||||
line-height: 1.429em;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
font-size: 1.438rem;
|
||||
letter-spacing: -0.004em;
|
||||
line-height: 1.391em;
|
||||
}
|
||||
|
||||
@media (min-width: 1120px) {
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.417em;
|
||||
}
|
||||
}
|
||||
|
||||
/* Display 5 */
|
||||
.g-type-display-5 {
|
||||
font-family: $font-display;
|
||||
font-weight: $font-weight-bold;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.556em;
|
||||
}
|
||||
|
||||
/* Display 6 */
|
||||
.g-type-display-6 {
|
||||
font-family: $font-display;
|
||||
font-weight: $font-weight-bold;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
/* Body Large */
|
||||
.g-type-body-large {
|
||||
font-family: $font-body;
|
||||
font-weight: $font-weight-reg;
|
||||
font-size: 1.188rem;
|
||||
letter-spacing: 0.01em;
|
||||
line-height: 1.579em;
|
||||
|
||||
@media (min-width: 1120px) {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.55em;
|
||||
}
|
||||
}
|
||||
|
||||
/* Body */
|
||||
.g-type-body {
|
||||
font-family: $font-body;
|
||||
font-weight: $font-weight-reg;
|
||||
font-size: 1.063rem;
|
||||
letter-spacing: 0.01em;
|
||||
line-height: 1.647em;
|
||||
}
|
||||
|
||||
/* Body - Strong */
|
||||
.g-type-body-strong {
|
||||
font-family: $font-body;
|
||||
font-weight: $font-weight-semi-bold;
|
||||
font-size: 1.063rem;
|
||||
letter-spacing: 0.01em;
|
||||
line-height: 1.647em;
|
||||
}
|
||||
|
||||
/* Body - X Strong */
|
||||
.g-type-body-x-strong {
|
||||
font-family: $font-body;
|
||||
font-weight: $font-weight-bold;
|
||||
font-size: 1.063rem;
|
||||
letter-spacing: 0.01em;
|
||||
line-height: 1.647em;
|
||||
}
|
||||
|
||||
/* Body - Italic */
|
||||
.g-type-body-italic {
|
||||
font-family: $font-body;
|
||||
font-weight: $font-weight-reg;
|
||||
font-size: 1.063rem;
|
||||
letter-spacing: 0.01em;
|
||||
line-height: 1.647em;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Body Small */
|
||||
.g-type-body-small {
|
||||
font-family: $font-body;
|
||||
font-weight: $font-weight-reg;
|
||||
font-size: 0.938rem;
|
||||
letter-spacing: 0.01em;
|
||||
line-height: 1.667em;
|
||||
}
|
||||
|
||||
/* Body Small - Strong */
|
||||
.g-type-body-small-strong {
|
||||
font-family: $font-body;
|
||||
font-weight: $font-weight-semi-bold;
|
||||
font-size: 0.938rem;
|
||||
letter-spacing: 0.01em;
|
||||
line-height: 1.667em;
|
||||
}
|
||||
|
||||
/* Body Small - X Strong */
|
||||
.g-type-body-small-x-strong {
|
||||
font-family: $font-body;
|
||||
font-weight: $font-weight-bold;
|
||||
font-size: 0.938rem;
|
||||
letter-spacing: 0.01em;
|
||||
line-height: 1.667em;
|
||||
}
|
||||
|
||||
/* Body Small - Italic */
|
||||
.g-type-body-small-italic {
|
||||
font-family: $font-body;
|
||||
font-weight: $font-weight-reg;
|
||||
font-size: 0.938rem;
|
||||
letter-spacing: 0.01em;
|
||||
line-height: 1.667em;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Long Body */
|
||||
.g-type-long-body {
|
||||
font-family: $font-body;
|
||||
font-weight: $font-weight-reg;
|
||||
font-size: 1.063rem;
|
||||
letter-spacing: 0.01em;
|
||||
line-height: 1.765em;
|
||||
}
|
||||
|
||||
/* Long Body Strong */
|
||||
.g-type-long-body-strong {
|
||||
font-family: $font-body;
|
||||
font-weight: $font-weight-semi-bold;
|
||||
font-size: 1.063rem;
|
||||
letter-spacing: 0.01em;
|
||||
line-height: 1.765em;
|
||||
}
|
||||
|
||||
/* Long Body Italic */
|
||||
.g-type-long-body-italic {
|
||||
font-family: $font-body;
|
||||
font-weight: $font-weight-reg;
|
||||
font-size: 1.063rem;
|
||||
letter-spacing: 0.01em;
|
||||
line-height: 1.765em;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Buttons and standalone links */
|
||||
.g-type-buttons-and-standalone-links {
|
||||
font-family: $font-display;
|
||||
font-weight: $font-weight-medium;
|
||||
font-size: 0.938rem;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
/* Header Nav */
|
||||
.g-type-header-nav {
|
||||
font-family: $font-display;
|
||||
font-weight: $font-weight-medium;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.429em;
|
||||
}
|
||||
|
||||
/* Label */
|
||||
.g-type-label {
|
||||
font-family: $font-display;
|
||||
font-weight: $font-weight-medium;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.08em;
|
||||
line-height: 1.5em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* Label - Strong */
|
||||
.g-type-label-strong {
|
||||
font-family: $font-display;
|
||||
font-weight: $font-weight-bold;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.08em;
|
||||
line-height: 1.5em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* Tag Label */
|
||||
.g-type-tag-label {
|
||||
font-family: $font-body;
|
||||
font-weight: $font-weight-bold;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.333em;
|
||||
}
|
||||
|
||||
/* Code */
|
||||
.g-type-code {
|
||||
font-family: $font-monospace;
|
||||
font-weight: $font-weight-reg;
|
||||
font-size: 0.844rem;
|
||||
line-height: 1.63em;
|
||||
}
|
||||
|
|
@ -1,32 +1,66 @@
|
|||
// Colors
|
||||
$white: #FFFFFF;
|
||||
$white: #ffffff;
|
||||
$black: #000000;
|
||||
$gray: #555555;
|
||||
$gray-darker: #24292e;
|
||||
$gray-darker: #1d1e23;
|
||||
|
||||
$consul-pink: #D62783;
|
||||
$consul-pink-dark: #961D59;
|
||||
$packer-blue: #1DAEFF;
|
||||
$packer-blue-dark: #1D94DD;
|
||||
$terraform-purple: #5C4EE5;
|
||||
$terraform-purple-dark: #4040B2;
|
||||
$vagrant-blue: #1563FF;
|
||||
$vagrant-blue-dark: #104EB2;
|
||||
$vault-black: #000000;
|
||||
$vault-blue: #00ABE0;
|
||||
$vault-gray: #919FA8;
|
||||
$vagrant-l3: #eff5ff;
|
||||
$vagrant-l2: #d0e0ff;
|
||||
$vagrant-l1: #66a2ff;
|
||||
$vagrant: #1563ff;
|
||||
$vagrant-d1: #0d44cc;
|
||||
$vagrant-d2: #08368b;
|
||||
$packer-l3: #ebf8ff;
|
||||
$packer-l2: #bfe8fe;
|
||||
$packer-l1: #6bceff;
|
||||
$packer: #00acff;
|
||||
$packer-d1: #0074ba;
|
||||
$packer-d2: #005283;
|
||||
$nomad-l3: #ebfdf7;
|
||||
$nomad-l2: #c1f1e0;
|
||||
$nomad-l1: #6bd8b4;
|
||||
$nomad-on-dark: #00bc7f;
|
||||
$nomad: #00bc7f;
|
||||
$nomad-d1: #007854;
|
||||
$nomad-d2: #004c3a;
|
||||
$terraform-l3: #f5f3ff;
|
||||
$terraform-l2: #ddd6fa;
|
||||
$terraform-l1: #a28ce8;
|
||||
$terraform-on-dark: #7c65ef;
|
||||
$terraform: #623ce4;
|
||||
$terraform-d1: #3c2aa8;
|
||||
$terraform-d2: #2a1c73;
|
||||
$consul-l3: #fff2f8;
|
||||
$consul-l2: #f8d9e7;
|
||||
$consul-l1: #e07eac;
|
||||
$consul-on-dark: #e03a89;
|
||||
$consul: #ca2171;
|
||||
$consul-d1: #8e134a;
|
||||
$consul-d2: #650d34;
|
||||
$vault-l3: #f7f7f9;
|
||||
$vault-l2: #dcdde0;
|
||||
$vault-l1: #bdbec2;
|
||||
$vault: #4c4c53;
|
||||
$vault-d1: #323339;
|
||||
$vault-d2: #1d1e23;
|
||||
|
||||
// Typography
|
||||
$font-family-klavika: 'klavika-web', Helvetica, sans-serif;
|
||||
$font-family-open-sans: 'Open Sans', sans-serif;
|
||||
$font-family-monospace: 'Fira Mono', monospace;
|
||||
$font-size: 15px;
|
||||
$font-size-default: 16px;
|
||||
$font-weight-light: 300;
|
||||
$font-weight-book: $font-weight-light;
|
||||
$font-weight-reg: 400;
|
||||
$font-weight-bold: 600;
|
||||
$font-weight-medium: 500;
|
||||
$font-weight-semi-bold: 600;
|
||||
$font-weight-bold: 700;
|
||||
$font-display: "gilmer-web", "Gilmer", Geneva, Tahoma, Helvetica, Verdana,
|
||||
sans-serif;
|
||||
$font-body: "metro-web", "Metro", -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||
Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||
$font-monospace: "dejavu-sans-mono-web", monospace;
|
||||
|
||||
// Body
|
||||
$body-font-color: $gray-darker;
|
||||
$body-link-color: $packer-blue;
|
||||
$body-link-color: $packer;
|
||||
|
||||
// Home
|
||||
$home-header-background-color: transparent;
|
||||
|
|
@ -35,30 +69,30 @@ $home-header-link-color-hover: $black;
|
|||
|
||||
// Sidebar
|
||||
$sidebar-background-color: $white;
|
||||
$sidebar-font-size: $font-size - 2;
|
||||
$sidebar-font-size: $font-size-default - 2;
|
||||
$sidebar-link-color: $body-font-color;
|
||||
$sidebar-link-color-hover: $black;
|
||||
$sidebar-link-color-active: $body-link-color;
|
||||
$sidebar-font-family: $font-family-open-sans;
|
||||
$sidebar-font-family: $font-body;
|
||||
$sidebar-font-weight: $font-weight-reg;
|
||||
|
||||
// Header
|
||||
$header-background-color: $packer-blue;
|
||||
$header-font-size: $font-size - 2;
|
||||
$header-background-color: $packer;
|
||||
$header-font-size: $font-size-default - 2;
|
||||
$header-height: 92px;
|
||||
$header-link-color: rgba($white, 0.85);
|
||||
$header-link-color-hover: $white;
|
||||
|
||||
// Footer
|
||||
$footer-font-size: $font-size - 2;
|
||||
$footer-font-size: $font-size-default - 2;
|
||||
$footer-link-color: $body-font-color;
|
||||
$footer-link-color-hover: $black;
|
||||
|
||||
// Buttons
|
||||
$button-background: $white;
|
||||
$button-font-color: #7b8A8E;
|
||||
$button-font-family: $font-family-klavika;
|
||||
$button-font-size: $font-size;
|
||||
$button-font-color: $black;
|
||||
$button-font-family: $font-display;
|
||||
$button-font-size: 0.938rem;
|
||||
$button-font-weight: $font-weight-bold;
|
||||
$button-primary-background: $packer-blue;
|
||||
$button-primary-background: $packer;
|
||||
$button-primary-font-color: $white;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
@import 'bootstrap-sprockets';
|
||||
@import 'bootstrap';
|
||||
|
||||
@import url('https://fonts.googleapis.com/css?family=Fira+Mono|Open+Sans:400,600');
|
||||
// Fonts
|
||||
@import '_fonts';
|
||||
|
||||
// Core variables and mixins
|
||||
@import '_variables';
|
||||
|
|
@ -15,6 +16,9 @@
|
|||
// Sidebar
|
||||
@import 'hashicorp/sidebar';
|
||||
|
||||
// Typography
|
||||
@import '_typography';
|
||||
|
||||
// Global Site
|
||||
@import '_global';
|
||||
|
||||
|
|
|
|||
|
|
@ -6,17 +6,17 @@ description: |-
|
|||
Download Packer
|
||||
---
|
||||
|
||||
<h1>Download Packer</h1>
|
||||
<h1 class="g-type-display-2">Download Packer</h1>
|
||||
|
||||
<section class="downloads">
|
||||
<div class="description row">
|
||||
<div class="col-md-12">
|
||||
<p>
|
||||
<p class="g-type-body">
|
||||
Below are the available downloads for the latest version of Packer
|
||||
(<%= latest_version %>). Please download the proper package for your
|
||||
operating system and architecture.
|
||||
</p>
|
||||
<p>
|
||||
<p class="g-type-body">
|
||||
You can find the
|
||||
<a href="https://releases.hashicorp.com/packer/<%= latest_version %>/packer_<%= latest_version %>_SHA256SUMS">
|
||||
SHA256 checksums for Packer <%= latest_version %>
|
||||
|
|
@ -28,10 +28,10 @@ description: |-
|
|||
which has been signed using <a href="https://hashicorp.com/security.html" target="_blank" rel="nofollow noopener noreferrer">HashiCorp's GPG key</a>.
|
||||
You can also <a href="https://releases.hashicorp.com/packer/" target="_blank" rel="nofollow noopener noreferrer">download other versions of Packer</a> from the releases service.
|
||||
</p>
|
||||
<p>
|
||||
<p class="g-type-body">
|
||||
Follow the <a href="/intro/getting-started/install.html#precompiled-binaries"> Install guide </a> once downloaded.
|
||||
</p>
|
||||
<p>
|
||||
<p class="g-type-body">
|
||||
Check out the <a href="https://github.com/hashicorp/packer/blob/v<%= latest_version %>/CHANGELOG.md">v<%= latest_version %> CHANGELOG</a> for information on the latest release.
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -43,14 +43,14 @@ description: |-
|
|||
<div class="col-md-12 download">
|
||||
<div class="icon pull-left"><%= system_icon(os) %></div>
|
||||
<div class="details">
|
||||
<h2 class="os-name"><%= pretty_os(os) %></h2>
|
||||
<h2 class="os-name g-type-display-4"><%= pretty_os(os) %></h2>
|
||||
<ul>
|
||||
<% arches.each do |arch, url| %>
|
||||
<li><a href="<%= url %>"><%= pretty_arch(arch) %></a></li>
|
||||
<li><a href="<%= url %>" class="g-type-body"><%= pretty_arch(arch) %></a></li>
|
||||
<% end %>
|
||||
</ul>
|
||||
<% if os == "freebsd" %>
|
||||
<div class="alert alert-info">
|
||||
<div class="alert alert-info g-type-body-small">
|
||||
Note: At least <code>FreeBSD 10-STABLE</code> is required to run Packer.
|
||||
If you'd like to run on an earlier version, please
|
||||
<a href="/docs/install/index.html#compiling-from-source">compile Packer yourself</a>
|
||||
|
|
|
|||
|
|
@ -8,10 +8,10 @@ description: |-
|
|||
<div class="container hero">
|
||||
<div class="row">
|
||||
|
||||
<div class="col-md-offset-3 col-md-6 col-sm-offset-2 col-sm-8">
|
||||
<div class="col-sm-12">
|
||||
<%= inline_svg "logo-hashicorp.svg", height: 120, class: "logo" %>
|
||||
|
||||
<h1>
|
||||
<h1 class="g-type-display-3">
|
||||
Build Automated Machine Images
|
||||
</h1>
|
||||
|
||||
|
|
@ -56,9 +56,9 @@ description: |-
|
|||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<span class="callout">Infrastructure as code</span>
|
||||
<h2>Modern, Automated</h2>
|
||||
<p>
|
||||
<span class="callout g-type-label">Infrastructure as code</span>
|
||||
<h2 class="g-type-display-2">Modern, Automated</h2>
|
||||
<p class="g-type-body">
|
||||
HashiCorp Packer is easy to use and automates the creation of any type of
|
||||
machine image. It embraces modern configuration management by
|
||||
encouraging you to use automated scripts to install and configure
|
||||
|
|
@ -75,9 +75,9 @@ description: |-
|
|||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<span class="callout">Integrations</span>
|
||||
<h2>Works Out of The Box</h2>
|
||||
<p>
|
||||
<span class="callout g-type-label">Integrations</span>
|
||||
<h2 class="g-type-display-2">Works Out of The Box</h2>
|
||||
<p class="g-type-body">
|
||||
Out of the box Packer comes with support to build images for
|
||||
Amazon EC2, CloudStack, DigitalOcean, Docker, Google Compute
|
||||
Engine, Microsoft Azure, QEMU, VirtualBox, VMware, and more.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<% wrap_layout :inner do %>
|
||||
<% content_for :sidebar do %>
|
||||
<div class="docs-sidebar hidden-print affix-top" role="complementary">
|
||||
<div class="docs-sidebar g-type-body-small hidden-print affix-top" role="complementary">
|
||||
<ul class="nav docs-sidenav">
|
||||
<li<%= sidebar_current("community-index") %>>
|
||||
<a href="/community.html">Community</a>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<% wrap_layout :inner do %>
|
||||
<% content_for :sidebar do %>
|
||||
<div class="docs-sidebar hidden-print affix-top" role="complementary">
|
||||
<div class="docs-sidebar g-type-body-small hidden-print affix-top" role="complementary">
|
||||
<ul class="nav docs-sidenav">
|
||||
<li<%= sidebar_current("downloads-packer") %>>
|
||||
<a href="/downloads.html">Download Packer</a>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<% wrap_layout :layout do %>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div id="docs-sidebar" class="col-sm-3 col-md-3 col-xs-12 hidden-print" role="complementary">
|
||||
<div id="docs-sidebar" class="col-sm-3 col-md-3 col-xs-12 hidden-print g-type-body-small" role="complementary">
|
||||
<%= yield_content :sidebar %>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue