Merge pull request #6596 from rjspiker/rj.fonts
website - font and brand update
This commit is contained in:
Charlie Voiselle
GitHub
commit
404aa6837e
BIN
website/source/assets/fonts/dejavu/DejaVuSansMono.woff
(Stored with Git LFS)
Normal file
BIN
website/source/assets/fonts/dejavu/DejaVuSansMono.woff
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
website/source/assets/fonts/dejavu/DejaVuSansMono.woff2
(Stored with Git LFS)
Normal file
BIN
website/source/assets/fonts/dejavu/DejaVuSansMono.woff2
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
website/source/assets/fonts/gilmer/gilmer-bold.woff
(Stored with Git LFS)
Normal file
BIN
website/source/assets/fonts/gilmer/gilmer-bold.woff
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
website/source/assets/fonts/gilmer/gilmer-bold.woff2
(Stored with Git LFS)
Normal file
BIN
website/source/assets/fonts/gilmer/gilmer-bold.woff2
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
website/source/assets/fonts/gilmer/gilmer-light.woff
(Stored with Git LFS)
Normal file
BIN
website/source/assets/fonts/gilmer/gilmer-light.woff
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
website/source/assets/fonts/gilmer/gilmer-light.woff2
(Stored with Git LFS)
Normal file
BIN
website/source/assets/fonts/gilmer/gilmer-light.woff2
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
website/source/assets/fonts/gilmer/gilmer-medium.woff
(Stored with Git LFS)
Normal file
BIN
website/source/assets/fonts/gilmer/gilmer-medium.woff
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
website/source/assets/fonts/gilmer/gilmer-medium.woff2
(Stored with Git LFS)
Normal file
BIN
website/source/assets/fonts/gilmer/gilmer-medium.woff2
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
website/source/assets/fonts/gilmer/gilmer-regular.woff
(Stored with Git LFS)
Normal file
BIN
website/source/assets/fonts/gilmer/gilmer-regular.woff
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
website/source/assets/fonts/gilmer/gilmer-regular.woff2
(Stored with Git LFS)
Normal file
BIN
website/source/assets/fonts/gilmer/gilmer-regular.woff2
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
website/source/assets/fonts/metro/metro-sans-bold.woff
(Stored with Git LFS)
Normal file
BIN
website/source/assets/fonts/metro/metro-sans-bold.woff
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
website/source/assets/fonts/metro/metro-sans-bold.woff2
(Stored with Git LFS)
Normal file
BIN
website/source/assets/fonts/metro/metro-sans-bold.woff2
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
website/source/assets/fonts/metro/metro-sans-book.woff
(Stored with Git LFS)
Normal file
BIN
website/source/assets/fonts/metro/metro-sans-book.woff
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
website/source/assets/fonts/metro/metro-sans-book.woff2
(Stored with Git LFS)
Normal file
BIN
website/source/assets/fonts/metro/metro-sans-book.woff2
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
website/source/assets/fonts/metro/metro-sans-regular.woff
(Stored with Git LFS)
Normal file
BIN
website/source/assets/fonts/metro/metro-sans-regular.woff
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
website/source/assets/fonts/metro/metro-sans-regular.woff2
(Stored with Git LFS)
Normal file
BIN
website/source/assets/fonts/metro/metro-sans-regular.woff2
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
website/source/assets/fonts/metro/metro-sans-semi-bold.woff
(Stored with Git LFS)
Normal file
BIN
website/source/assets/fonts/metro/metro-sans-semi-bold.woff
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
website/source/assets/fonts/metro/metro-sans-semi-bold.woff2
(Stored with Git LFS)
Normal file
BIN
website/source/assets/fonts/metro/metro-sans-semi-bold.woff2
(Stored with Git LFS)
Normal file
Binary file not shown.
|
|
@ -11,7 +11,7 @@ document.addEventListener('turbolinks:load', function() {
|
|||
// Build the quick-nav HTML:
|
||||
$("#inner h1").first().after(
|
||||
'<div id="inner-quicknav">' +
|
||||
'<span id="inner-quicknav-trigger">' +
|
||||
'<span id="inner-quicknav-trigger" class="g-type-label">' +
|
||||
'Jump to Section' +
|
||||
'<svg width="9" height="5" xmlns="http://www.w3.org/2000/svg"><path d="M8.811 1.067a.612.612 0 0 0 0-.884.655.655 0 0 0-.908 0L4.5 3.491 1.097.183a.655.655 0 0 0-.909 0 .615.615 0 0 0 0 .884l3.857 3.75a.655.655 0 0 0 .91 0l3.856-3.75z" fill-rule="evenodd"/></svg>' +
|
||||
'</span>' +
|
||||
|
|
|
|||
|
|
@ -21,26 +21,19 @@
|
|||
}
|
||||
|
||||
.g-alert span{
|
||||
font-size: 16px;
|
||||
background-color: white;
|
||||
text-transform:uppercase;
|
||||
padding:3px 10px;
|
||||
border:1px solid #1563ff;
|
||||
border-radius:3px;
|
||||
font-weight:600;
|
||||
font-size:1.25rem;
|
||||
line-height:16px;
|
||||
margin-right:12px;
|
||||
color:black;
|
||||
white-space:nowrap;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.g-alert p{
|
||||
font-size: 16px;
|
||||
background-color: white;
|
||||
color:black;
|
||||
font-size:16px;
|
||||
line-height:23px;
|
||||
margin:0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
|
@ -58,7 +51,6 @@
|
|||
background:linear-gradient(90deg, #1563ff 1.56%, #08368b 100%);
|
||||
color:#ffffff;
|
||||
display:none;
|
||||
font-weight:600;
|
||||
overflow:hidden;
|
||||
position:relative;
|
||||
transition:height 0.3s ease-out
|
||||
|
|
|
|||
|
|
@ -65,9 +65,7 @@
|
|||
margin-left: 10px;
|
||||
|
||||
span {
|
||||
line-height: 20px;
|
||||
cursor: pointer;
|
||||
font-variant-caps: all-small-caps;
|
||||
color: #666;
|
||||
|
||||
svg {
|
||||
|
|
@ -87,7 +85,7 @@
|
|||
width: 80%;
|
||||
box-shadow: 0px 4px 12px -2px rgba(63, 68, 85, 0.5);
|
||||
border-radius: 3px;
|
||||
padding: 2rem;
|
||||
padding: 20px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
background-color: white;
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
.button {
|
||||
background: $button-background;
|
||||
border: 1px solid $button-font-color;
|
||||
box-shadow: 3px 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: 10px 30px;
|
||||
text-transform: uppercase;
|
||||
padding: 13px 19px;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
|
|
@ -19,25 +19,54 @@
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border: 3px solid $nomad-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 $nomad-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;
|
||||
font-size: $font-size - 2;
|
||||
line-height: 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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
74
website/source/assets/stylesheets/_fonts.scss
Normal file
74
website/source/assets/stylesheets/_fonts.scss
Normal file
|
|
@ -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,22 +10,13 @@ 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;
|
||||
}
|
||||
|
||||
@media (min-width: $screen-sm) and (max-width: $screen-md) {
|
||||
.container {
|
||||
padding: 0;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
@ -66,63 +72,29 @@
|
|||
}
|
||||
|
||||
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;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: $black;
|
||||
font-size: 20px;
|
||||
font-weight: $font-weight-bold;;
|
||||
line-height: 1.2;
|
||||
margin: 50px 0 15px 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: $font-family-open-sans;
|
||||
font-size: 16px;
|
||||
letter-spacing: 0.01em;
|
||||
line-height: 1.5;
|
||||
margin: 0 0 10px;
|
||||
|
||||
&.lead {
|
||||
font-size: 20px;
|
||||
margin: 30px 0 30px 0;
|
||||
}
|
||||
}
|
||||
|
||||
span.callout {
|
||||
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: 5px;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&.green {
|
||||
background: $nomad-green;
|
||||
background: $nomad;
|
||||
|
||||
h2, h3 {
|
||||
h2,
|
||||
h3 {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $white;
|
||||
font-weight: $font-weight-reg;
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -138,20 +110,20 @@
|
|||
|
||||
span.callout {
|
||||
background: $white;
|
||||
color: $nomad-green;
|
||||
color: $nomad;
|
||||
}
|
||||
}
|
||||
|
||||
&.gray {
|
||||
background: #EDEDED;
|
||||
background: #ededed;
|
||||
|
||||
h2, h3 {
|
||||
h2,
|
||||
h3 {
|
||||
color: $black;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $black;
|
||||
font-weight: $font-weight-reg;
|
||||
}
|
||||
|
||||
span.callout {
|
||||
|
|
@ -163,13 +135,13 @@
|
|||
&.black {
|
||||
background: $black;
|
||||
|
||||
h2, h3 {
|
||||
h2,
|
||||
h3 {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $white;
|
||||
font-weight: $font-weight-reg;
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -215,7 +187,7 @@
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
@media(max-width: $screen-sm) {
|
||||
@media (max-width: $screen-sm) {
|
||||
svg {
|
||||
margin: 60px auto;
|
||||
}
|
||||
|
|
@ -230,16 +202,18 @@
|
|||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.get-started {
|
||||
margin-top: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.terminal {
|
||||
@extend .g-type-code;
|
||||
border: 1px solid $white;
|
||||
background: $black;
|
||||
box-sizing: border-box;
|
||||
color: $white;
|
||||
font-family: $font-family-monospace;
|
||||
font-size: 15px;
|
||||
line-height: 1.8;
|
||||
margin: 20px auto auto auto;
|
||||
padding: 10px 20px 20px 20px;
|
||||
|
||||
|
|
@ -262,20 +236,19 @@
|
|||
}
|
||||
|
||||
&.text-bold {
|
||||
font-weight: bold;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
|
||||
&.text-green {
|
||||
color: lighten($nomad-green, 20%);
|
||||
color: lighten($nomad, 20%);
|
||||
}
|
||||
|
||||
&.text-blue {
|
||||
color: #71A4F5;
|
||||
color: #71a4f5;
|
||||
}
|
||||
|
||||
&.text-orange {
|
||||
color: #F5BF49;
|
||||
color: #f5bf49;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,33 +1,39 @@
|
|||
#inner {
|
||||
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 {
|
||||
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;
|
||||
@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;
|
||||
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.
|
||||
|
|
@ -65,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 {
|
||||
|
|
@ -79,16 +84,10 @@
|
|||
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%;
|
||||
h6 > code {
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
font-size: 90%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,17 +3,17 @@ svg.logo {
|
|||
opacity: 1.0;
|
||||
|
||||
path.top {
|
||||
fill: $nomad-green;
|
||||
fill: #25BA81;
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
path.left {
|
||||
fill: $nomad-green;
|
||||
fill: #25BA81;
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
path.right {
|
||||
fill: $nomad-green-dark;
|
||||
fill: #1F9967;
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
|
|
@ -50,7 +50,7 @@ svg.logo {
|
|||
}
|
||||
|
||||
path.n {
|
||||
fill: $nomad-green;
|
||||
fill: #25BA81;
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
|
|
|
|||
283
website/source/assets/stylesheets/_typography.scss
Normal file
283
website/source/assets/stylesheets/_typography.scss
Normal file
|
|
@ -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,34 +1,66 @@
|
|||
// Colors
|
||||
$white: #FFFFFF;
|
||||
$white: #ffffff;
|
||||
$black: #000000;
|
||||
$gray: #555555;
|
||||
$gray-light: #CCCCCC;
|
||||
$gray: #1d1e23;
|
||||
$gray-light: #cccccc;
|
||||
|
||||
$consul-pink: #D62783;
|
||||
$consul-pink-dark: #961D59;
|
||||
$nomad-green: #25BA81;
|
||||
$nomad-green-dark:#1F9967;
|
||||
$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-weight-reg: 400;
|
||||
$font-weight-bold: 600;
|
||||
$font-size-default: 16px;
|
||||
$font-weight-light: 300;
|
||||
$font-weight-book: $font-weight-light;
|
||||
$font-weight-reg: 400;
|
||||
$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;
|
||||
$body-link-color: $nomad-green;
|
||||
$body-link-color: $nomad;
|
||||
|
||||
// Home
|
||||
$home-header-background-color: transparent;
|
||||
|
|
@ -37,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: $nomad-green;
|
||||
$header-font-size: $font-size - 2;
|
||||
$header-background-color: $nomad;
|
||||
$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;
|
||||
|
||||
// Button
|
||||
$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: $nomad-green;
|
||||
$button-primary-background: $nomad;
|
||||
$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';
|
||||
|
||||
// Mega Nav
|
||||
@import 'hashicorp/mega-nav';
|
||||
|
|
@ -15,6 +16,9 @@
|
|||
// Sidebar
|
||||
@import 'hashicorp/sidebar';
|
||||
|
||||
// Typography
|
||||
@import '_typography';
|
||||
|
||||
//Global Site
|
||||
@import '_global';
|
||||
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ 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>
|
||||
|
|
|
|||
|
|
@ -10,12 +10,12 @@ description: |-
|
|||
<div class="row">
|
||||
<div class="col-md-offset-2 col-md-8">
|
||||
<div class="alert">
|
||||
<a href="https://www.hashicorp.com/blog/hashicorp-nomad-0-10-general-availability" class="g-alert nomad-green "><span>NEW</span><p>Announcing the general availability of Nomad 0.10. Read more<svg width="15" height="9" viewBox="0 0 15 9" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="0.5" y1="4.5" x2="13.5" y2="4.5" stroke="#000" stroke-linecap="round"></line><path d="M10.3536 0.646447C10.1583 0.451184 9.84171 0.451184 9.64645 0.646447C9.45118 0.841709 9.45118 1.15829 9.64645 1.35355L10.3536 0.646447ZM13.5 4.5L13.8536 4.85355L14.2071 4.5L13.8536 4.14645L13.5 4.5ZM9.64645 7.64645C9.45118 7.84171 9.45118 8.15829 9.64645 8.35355C9.84171 8.54882 10.1583 8.54882 10.3536 8.35355L9.64645 7.64645ZM9.64645 1.35355L13.1464 4.85355L13.8536 4.14645L10.3536 0.646447L9.64645 1.35355ZM13.1464 4.14645L9.64645 7.64645L10.3536 8.35355L13.8536 4.85355L13.1464 4.14645Z" fill="#000"></path></svg></p></a>
|
||||
<a href="https://www.hashicorp.com/blog/hashicorp-nomad-0-10-general-availability" class="g-alert nomad-green "><span class="g-type-tag-label">NEW</span><p class="g-type-body-small">Announcing the general availability of Nomad 0.10. Read more<svg width="15" height="9" viewBox="0 0 15 9" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="0.5" y1="4.5" x2="13.5" y2="4.5" stroke="#000" stroke-linecap="round"></line><path d="M10.3536 0.646447C10.1583 0.451184 9.84171 0.451184 9.64645 0.646447C9.45118 0.841709 9.45118 1.15829 9.64645 1.35355L10.3536 0.646447ZM13.5 4.5L13.8536 4.85355L14.2071 4.5L13.8536 4.14645L13.5 4.5ZM9.64645 7.64645C9.45118 7.84171 9.45118 8.15829 9.64645 8.35355C9.84171 8.54882 10.1583 8.54882 10.3536 8.35355L9.64645 7.64645ZM9.64645 1.35355L13.1464 4.85355L13.8536 4.14645L10.3536 0.646447L9.64645 1.35355ZM13.1464 4.14645L9.64645 7.64645L10.3536 8.35355L13.8536 4.85355L13.1464 4.14645Z" fill="#000"></path></svg></p></a>
|
||||
</div>
|
||||
|
||||
<%= inline_svg "logo-hashicorp.svg", height: 120, class: "logo" %>
|
||||
|
||||
<h1>Deploy and Manage Any Containerized, Legacy, or Batch Application</h1>
|
||||
<h1 class="g-type-display-3">Deploy and Manage Any Containerized, Legacy, or Batch Application</h1>
|
||||
|
||||
<a class="button primary" href="/intro/index.html">Get Started</a>
|
||||
<a class="button" href="/downloads.html">Download <%= latest_version %></a>
|
||||
|
|
@ -28,8 +28,8 @@ description: |-
|
|||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<h2>Simple and Lightweight</h2>
|
||||
<p class="lead">
|
||||
<h2 class="g-type-display-2">Simple and Lightweight</h2>
|
||||
<p class="g-type-body-large lead">
|
||||
Nomad is an easy-to-use, flexible, and performant workload orchestrator that can
|
||||
deploy a mix of microservice, batch, containerized, and non-containerized applications.
|
||||
Nomad is easy to operate and scale and has native Consul and Vault integrations.
|
||||
|
|
@ -38,20 +38,20 @@ description: |-
|
|||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<h3>1. Declare Jobs</h3>
|
||||
<p>
|
||||
<h3 class="g-type-display-4">1. Declare Jobs</h3>
|
||||
<p class="g-type-body">
|
||||
Users compose and submit high-level job files. Nomad handles the
|
||||
scheduling and upgrading of the applications over time.
|
||||
</p>
|
||||
<p>
|
||||
<p class="g-type-body">
|
||||
This flexibility makes it easy to deploy one container, dozens of
|
||||
containers, or even <a
|
||||
href="https://www.hashicorp.com/c1m/">millions</a>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<h3>2. Plan Changes</h3>
|
||||
<p>
|
||||
<h3 class="g-type-display-4">2. Plan Changes</h3>
|
||||
<p class="g-type-body">
|
||||
With built-in dry-run execution, Nomad shows what scheduling decisions
|
||||
it will take before it takes them. Operators can approve or deny these
|
||||
changes to create a safe and reproducible workflow.
|
||||
|
|
@ -60,16 +60,16 @@ description: |-
|
|||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<h3>3. Run Applications</h3>
|
||||
<p>
|
||||
<h3 class="g-type-display-4">3. Run Applications</h3>
|
||||
<p class="g-type-body">
|
||||
Nomad runs applications and ensures they keep running in failure
|
||||
scenarios. In addition to long-running services, Nomad can schedule
|
||||
batch jobs, distributed cron jobs, and parameterized jobs.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<h3>4. Monitor Progress</h3>
|
||||
<p>
|
||||
<h3 class="g-type-display-4">4. Monitor Progress</h3>
|
||||
<p class="g-type-body">
|
||||
Stream logs, send signals, and interact with the file system of
|
||||
scheduled applications. These operator-friendly commands bring the
|
||||
familiar debugging tools to a scheduled world.
|
||||
|
|
@ -83,9 +83,9 @@ description: |-
|
|||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<span class="callout">Combine</span>
|
||||
<h2>Hybrid & Multi Cloud</h2>
|
||||
<p class="lead">
|
||||
<span class="callout g-type-label">Combine</span>
|
||||
<h2 class="g-type-display-2">Hybrid & Multi Cloud</h2>
|
||||
<p class="g-type-body-large lead">
|
||||
As more organizations adopt cloud technologies, the desire to run in
|
||||
multiple datacenters and multiple regions becomes critical. Nomad can
|
||||
span public and private clouds and treat all your infrastructure as a
|
||||
|
|
@ -102,8 +102,8 @@ description: |-
|
|||
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<h3>Hybrid Cloud</h3>
|
||||
<p>
|
||||
<h3 class="g-type-display-4">Hybrid Cloud</h3>
|
||||
<p class="g-type-body">
|
||||
Nomad bridges the gap between the public and private cloud, creating a
|
||||
unified interface for developers to run any application on any
|
||||
infrastructure. Easily run services across your internal private cloud
|
||||
|
|
@ -111,8 +111,8 @@ description: |-
|
|||
</p>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<h3>Multi Cloud</h3>
|
||||
<p>
|
||||
<h3 class="g-type-display-4">Multi Cloud</h3>
|
||||
<p class="g-type-body">
|
||||
As more organizations adopt cloud technologies, the desire to run
|
||||
applications simultaneously across multiple clouds increases. Nomad
|
||||
combines the power of all cloud providers into a single, unified
|
||||
|
|
@ -127,9 +127,9 @@ description: |-
|
|||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<span class="callout">Maintain</span>
|
||||
<h2>Simplify Operations</h2>
|
||||
<p class="lead">
|
||||
<span class="callout g-type-label">Maintain</span>
|
||||
<h2 class="g-type-display-2">Simplify Operations</h2>
|
||||
<p class="g-type-body-large lead">
|
||||
Nomad simplifies operations by supporting several deployment
|
||||
strategies to safely upgrade jobs, automatically handling machine
|
||||
failures, and providing a single workflow to deploy applications.
|
||||
|
|
@ -139,7 +139,7 @@ description: |-
|
|||
|
||||
<div class="row">
|
||||
<div class="col-sm-offset-5 col-sm-6">
|
||||
<h3>Rolling Deploys</h3>
|
||||
<h3 class="g-type-display-4">Rolling Deploys</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
|
@ -147,7 +147,7 @@ description: |-
|
|||
<%= inline_svg "feature-rolling-deploys.svg" %>
|
||||
</div>
|
||||
<div class="col-sm-7">
|
||||
<p>
|
||||
<p class="g-type-body">
|
||||
In order to update an application while reducing downtime, Nomad
|
||||
provides a built-in mechanism for rolling upgrades. Operators specify
|
||||
the rate at which they would like to upgrade their service in the
|
||||
|
|
@ -162,12 +162,12 @@ description: |-
|
|||
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<h3>Blue/Green Deployments</h3>
|
||||
<h3 class="g-type-display-4">Blue/Green Deployments</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-7">
|
||||
<p>
|
||||
<p class="g-type-body">
|
||||
Nomad supports native blue/green and canary deployments through the
|
||||
declarative job file syntax. Instead of doing a rolling upgrade of the
|
||||
existing allocations, the new version of the group is deployed along
|
||||
|
|
@ -184,7 +184,7 @@ description: |-
|
|||
|
||||
<div class="row">
|
||||
<div class="col-sm-offset-5 col-sm-6">
|
||||
<h3>Automatic Machine Failures</h3>
|
||||
<h3 class="g-type-display-4">Automatic Machine Failures</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
|
@ -192,7 +192,7 @@ description: |-
|
|||
<%= inline_svg "feature-machine-failure.svg" %>
|
||||
</div>
|
||||
<div class="col-sm-7">
|
||||
<p>
|
||||
<p class="g-type-body">
|
||||
Because it knows the state of all nodes and applications, if a
|
||||
node becomes unhealthy, Nomad will automatically reschedule the
|
||||
applications that were previously running on the unhealthy host
|
||||
|
|
@ -209,9 +209,9 @@ description: |-
|
|||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<span class="callout">Support</span>
|
||||
<h2>Flexible Workloads</h2>
|
||||
<p class="lead">
|
||||
<span class="callout g-type-label">Support</span>
|
||||
<h2 class="g-type-display-2">Flexible Workloads</h2>
|
||||
<p class="g-type-body-large lead">
|
||||
In addition to supporting Linux, Windows, and Mac, Nomad has
|
||||
extensible support for containerized, virtualized, and standalone
|
||||
applications. Easily start Docker containers, VMs, or application
|
||||
|
|
@ -228,8 +228,8 @@ description: |-
|
|||
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<h3>Diverse Technologies</h3>
|
||||
<p>
|
||||
<h3 class="g-type-display-4">Diverse Technologies</h3>
|
||||
<p class="g-type-body">
|
||||
By supporting a wide range of technologies such as Docker, rkt, and
|
||||
LXC, Nomad does not force you into a single technology. Easily use
|
||||
multiple container or virtualization runtimes simultaneously.
|
||||
|
|
@ -238,8 +238,8 @@ description: |-
|
|||
</p>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<h3>Multi OS</h3>
|
||||
<p>
|
||||
<h3 class="g-type-display-4">Multi OS</h3>
|
||||
<p class="g-type-body">
|
||||
The Nomad client runs on Linux, Windows, and Mac OS. This diverse
|
||||
operating system support enables using the same application scheduler
|
||||
for all your scheduling and runtime needs.
|
||||
|
|
@ -254,9 +254,9 @@ description: |-
|
|||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<span class="callout">Maximize</span>
|
||||
<h2>Increase Utilization & Reduce Costs</h2>
|
||||
<p class="lead">
|
||||
<span class="callout g-type-label">Maximize</span>
|
||||
<h2 class="g-type-display-2">Increase Utilization & Reduce Costs</h2>
|
||||
<p class="g-type-body-large lead">
|
||||
Nomad uses bin packing to optimize application placement onto servers
|
||||
to maximize resource utilization, increase density, and help reduce
|
||||
costs.
|
||||
|
|
@ -272,8 +272,8 @@ description: |-
|
|||
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<h3>Increase Density</h3>
|
||||
<p>
|
||||
<h3 class="g-type-display-4">Increase Density</h3>
|
||||
<p class="g-type-body">
|
||||
Nomad places applications and services based on a bin packing
|
||||
algorithm, which is used to optimize the resource utilization and
|
||||
density of applications. Nomad automatically augments the bin-packing
|
||||
|
|
@ -282,8 +282,8 @@ description: |-
|
|||
</p>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<h3>Reduce Costs</h3>
|
||||
<p>
|
||||
<h3 class="g-type-display-4">Reduce Costs</h3>
|
||||
<p class="g-type-body">
|
||||
By maximizing resource utilization, Nomad can help remove unused or
|
||||
under-utilized machines in the cluster, reducing overall costs.
|
||||
Additionally, Nomad enables organizations to utilize larger, more
|
||||
|
|
@ -298,9 +298,9 @@ description: |-
|
|||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<h2>Examples</h2>
|
||||
<h3>Create and Submit Jobs</h3>
|
||||
<p>
|
||||
<h2 class="g-type-display-2">Examples</h2>
|
||||
<h3 class="g-type-display-4">Create and Submit Jobs</h3>
|
||||
<p class="g-type-body">
|
||||
Easily create, validate, submit, and check the status of jobs using
|
||||
the Nomad CLI.
|
||||
</p>
|
||||
|
|
@ -350,8 +350,8 @@ description: |-
|
|||
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<h3>Plan Changes</h3>
|
||||
<p>
|
||||
<h3 class="g-type-display-4">Plan Changes</h3>
|
||||
<p class="g-type-body">
|
||||
Perform a dry-run to check application placement, scheduling
|
||||
decisions, and visualize failures before they happen.
|
||||
</p>
|
||||
|
|
@ -398,8 +398,8 @@ description: |-
|
|||
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<h3>View Application Logs</h3>
|
||||
<p>
|
||||
<h3 class="g-type-display-4">View Application Logs</h3>
|
||||
<p class="g-type-body">
|
||||
Stream application logs directly in the terminal to help analyze and
|
||||
debug applications.
|
||||
</p>
|
||||
|
|
@ -424,9 +424,9 @@ description: |-
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row get-started">
|
||||
<div class="col-sm-12 col-lg-8 col-lg-offset-2">
|
||||
<p class="lead" align="center">
|
||||
<p class="g-type-body-large lead" align="center">
|
||||
The introduction contains a walkthrough guide, glossary, and a range
|
||||
of examples for learning and experimenting with Nomad.
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<% wrap_layout :layout do %>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div id="docs-sidebar" class="col-sm-4 col-md-3 col-xs-12 hidden-print" role="complementary">
|
||||
<div id="docs-sidebar" class="col-sm-4 col-md-3 col-xs-12 hidden-print g-type-body-small" role="complementary">
|
||||
<%= yield_content :sidebar %>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue