diff --git a/website/source/assets/fonts/dejavu/DejaVuSansMono.woff b/website/source/assets/fonts/dejavu/DejaVuSansMono.woff new file mode 100644 index 0000000000..b896d1d76a Binary files /dev/null and b/website/source/assets/fonts/dejavu/DejaVuSansMono.woff differ diff --git a/website/source/assets/fonts/dejavu/DejaVuSansMono.woff2 b/website/source/assets/fonts/dejavu/DejaVuSansMono.woff2 new file mode 100644 index 0000000000..bfd9b06e59 Binary files /dev/null and b/website/source/assets/fonts/dejavu/DejaVuSansMono.woff2 differ diff --git a/website/source/assets/fonts/gilmer/gilmer-bold.woff b/website/source/assets/fonts/gilmer/gilmer-bold.woff new file mode 100644 index 0000000000..9ac3a190e8 Binary files /dev/null and b/website/source/assets/fonts/gilmer/gilmer-bold.woff differ diff --git a/website/source/assets/fonts/gilmer/gilmer-bold.woff2 b/website/source/assets/fonts/gilmer/gilmer-bold.woff2 new file mode 100644 index 0000000000..22793f9a19 Binary files /dev/null and b/website/source/assets/fonts/gilmer/gilmer-bold.woff2 differ diff --git a/website/source/assets/fonts/gilmer/gilmer-light.woff b/website/source/assets/fonts/gilmer/gilmer-light.woff new file mode 100644 index 0000000000..c04be8c6e3 Binary files /dev/null and b/website/source/assets/fonts/gilmer/gilmer-light.woff differ diff --git a/website/source/assets/fonts/gilmer/gilmer-light.woff2 b/website/source/assets/fonts/gilmer/gilmer-light.woff2 new file mode 100644 index 0000000000..5dab907f5d Binary files /dev/null and b/website/source/assets/fonts/gilmer/gilmer-light.woff2 differ diff --git a/website/source/assets/fonts/gilmer/gilmer-medium.woff b/website/source/assets/fonts/gilmer/gilmer-medium.woff new file mode 100644 index 0000000000..e248e37d6a Binary files /dev/null and b/website/source/assets/fonts/gilmer/gilmer-medium.woff differ diff --git a/website/source/assets/fonts/gilmer/gilmer-medium.woff2 b/website/source/assets/fonts/gilmer/gilmer-medium.woff2 new file mode 100644 index 0000000000..3ebe650a75 Binary files /dev/null and b/website/source/assets/fonts/gilmer/gilmer-medium.woff2 differ diff --git a/website/source/assets/fonts/gilmer/gilmer-regular.woff b/website/source/assets/fonts/gilmer/gilmer-regular.woff new file mode 100644 index 0000000000..c66fc56140 Binary files /dev/null and b/website/source/assets/fonts/gilmer/gilmer-regular.woff differ diff --git a/website/source/assets/fonts/gilmer/gilmer-regular.woff2 b/website/source/assets/fonts/gilmer/gilmer-regular.woff2 new file mode 100644 index 0000000000..e92be881e2 Binary files /dev/null and b/website/source/assets/fonts/gilmer/gilmer-regular.woff2 differ diff --git a/website/source/assets/fonts/metro/metro-sans-bold.woff b/website/source/assets/fonts/metro/metro-sans-bold.woff new file mode 100644 index 0000000000..4c0afc9a8d Binary files /dev/null and b/website/source/assets/fonts/metro/metro-sans-bold.woff differ diff --git a/website/source/assets/fonts/metro/metro-sans-bold.woff2 b/website/source/assets/fonts/metro/metro-sans-bold.woff2 new file mode 100644 index 0000000000..c951fb5ecc Binary files /dev/null and b/website/source/assets/fonts/metro/metro-sans-bold.woff2 differ diff --git a/website/source/assets/fonts/metro/metro-sans-book.woff b/website/source/assets/fonts/metro/metro-sans-book.woff new file mode 100644 index 0000000000..588b6f9b6f Binary files /dev/null and b/website/source/assets/fonts/metro/metro-sans-book.woff differ diff --git a/website/source/assets/fonts/metro/metro-sans-book.woff2 b/website/source/assets/fonts/metro/metro-sans-book.woff2 new file mode 100644 index 0000000000..2c6caaa2a5 Binary files /dev/null and b/website/source/assets/fonts/metro/metro-sans-book.woff2 differ diff --git a/website/source/assets/fonts/metro/metro-sans-regular.woff b/website/source/assets/fonts/metro/metro-sans-regular.woff new file mode 100644 index 0000000000..54dc8b8aff Binary files /dev/null and b/website/source/assets/fonts/metro/metro-sans-regular.woff differ diff --git a/website/source/assets/fonts/metro/metro-sans-regular.woff2 b/website/source/assets/fonts/metro/metro-sans-regular.woff2 new file mode 100644 index 0000000000..068be635be Binary files /dev/null and b/website/source/assets/fonts/metro/metro-sans-regular.woff2 differ diff --git a/website/source/assets/fonts/metro/metro-sans-semi-bold.woff b/website/source/assets/fonts/metro/metro-sans-semi-bold.woff new file mode 100644 index 0000000000..87a27bd4f1 Binary files /dev/null and b/website/source/assets/fonts/metro/metro-sans-semi-bold.woff differ diff --git a/website/source/assets/fonts/metro/metro-sans-semi-bold.woff2 b/website/source/assets/fonts/metro/metro-sans-semi-bold.woff2 new file mode 100644 index 0000000000..49346e532c Binary files /dev/null and b/website/source/assets/fonts/metro/metro-sans-semi-bold.woff2 differ diff --git a/website/source/assets/stylesheets/_buttons.scss b/website/source/assets/stylesheets/_buttons.scss index e1037e818b..ea0fc0880b 100755 --- a/website/source/assets/stylesheets/_buttons.scss +++ b/website/source/assets/stylesheets/_buttons.scss @@ -1,37 +1,117 @@ .button { - background: $button-background; - border: 1px solid $button-font-color; - box-shadow: 3px 4px 0 rgba(0,0,0,0.1); - color: $button-font-color; + background: $consul; + border-radius: 1px; + box-sizing: border-box; + color: $white; display: inline-block; - font-family: $button-font-family; - font-size: $button-font-size; - font-weight: $button-font-weight; - letter-spacing: 1px; + font-family: $font-display; + font-size: 0.938rem; + font-weight: $font-weight-medium; + line-height: 1.6em; margin-bottom: 4px; - padding: 10px 30px; - text-transform: uppercase; + padding: 14px 20px; text-decoration: none; &:hover, &:active, &:focus { + color: $white; text-decoration: none; } - &:hover { - background: $button-font-color; - border: 1px solid $button-font-color; - color: $button-background; + &:focus { + border: 3px solid $consul-l1; + outline: none; + padding: 11px 17px; } - &.primary { - background: $button-primary-background; - border: 1px solid darken($button-primary-background, 5%); - color: $button-primary-font-color; + &:hover { + background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), + $consul; + border: none; + padding: 14px 20px; + } + + &:active { + background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), + $consul; + border: none; + } + + &.white { + background: $white; + color: $black; + + path { + fill: black; + } &:hover { - background: lighten($button-primary-background, 5%); + background: $consul-l3; + } + + &:active { + background: $consul-l2; } } + + &.secondary { + background: transparent; + border: 1px solid rgba($gray-1, 0.2); + color: $black; + padding: 13px 19px; + + &:focus { + border: 3px solid $consul-l1; + padding: 11px 17px; + } + + &:hover { + background: rgba($gray-1, 0.1); + border: none; + padding: 14px 20px; + } + + &:active { + background: rgba($gray-1, 0.16); + } + + &.white { + border: 1px solid rgba($white, 0.24); + color: $white; + + &:focus { + border: 3px solid $consul-l1; + padding: 11px 17px; + } + + &:hover { + background: rgba($white, 0.14); + border: none; + padding: 14px 20px; + } + + &:active { + background: rgba($white, 0.08); + } + } + } + + &.download { + svg { + margin: 0 4px -4px 0; + + path { + transition: fill 0.25s ease; + } + } + } + + &.inline { + padding: 8px 14px; + } + + path { + fill: $white; + } } diff --git a/website/source/assets/stylesheets/_docs.scss b/website/source/assets/stylesheets/_docs.scss index 03b80da365..164c9a092f 100755 --- a/website/source/assets/stylesheets/_docs.scss +++ b/website/source/assets/stylesheets/_docs.scss @@ -9,15 +9,12 @@ 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; left: 0; - line-height: 100%; opacity: 0.4; position: absolute; diff --git a/website/source/assets/stylesheets/_downloads.scss b/website/source/assets/stylesheets/_downloads.scss index 97a4dfc66b..6b8bf6e846 100644 --- a/website/source/assets/stylesheets/_downloads.scss +++ b/website/source/assets/stylesheets/_downloads.scss @@ -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; } } diff --git a/website/source/assets/stylesheets/_fonts.scss b/website/source/assets/stylesheets/_fonts.scss new file mode 100644 index 0000000000..2f57998bd6 --- /dev/null +++ b/website/source/assets/stylesheets/_fonts.scss @@ -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; +} diff --git a/website/source/assets/stylesheets/_footer.scss b/website/source/assets/stylesheets/_footer.scss index ae34a057a4..17143350f3 100644 --- a/website/source/assets/stylesheets/_footer.scss +++ b/website/source/assets/stylesheets/_footer.scss @@ -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 { diff --git a/website/source/assets/stylesheets/_global.scss b/website/source/assets/stylesheets/_global.scss index 3f8bf49df8..d77b92795f 100755 --- a/website/source/assets/stylesheets/_global.scss +++ b/website/source/assets/stylesheets/_global.scss @@ -1,4 +1,5 @@ html { + font-size: $font-size-default; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: hidden; @@ -8,17 +9,21 @@ 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; overflow-x: hidden; } -h1, h2, h3, h4, h5 { - font-family: $font-family-klavika; - -webkit-font-smoothing: antialiased; -} - h1 { margin-bottom: 24px; } + +code { + color: $body-font-color; + background: $consul-l3; +} + +.sidebar .sidebar-nav li a { + line-height: 18px; +} \ No newline at end of file diff --git a/website/source/assets/stylesheets/_header.scss b/website/source/assets/stylesheets/_header.scss index f14606cc00..ef0448e817 100755 --- a/website/source/assets/stylesheets/_header.scss +++ b/website/source/assets/stylesheets/_header.scss @@ -1,6 +1,11 @@ #header { background: $header-background-color; + .navbar-nav > li > a { + padding-left: 12px; + padding-right: 12px; + } + // Kind of gnarly override for bootstrap's nav toggle behavior @media (max-width: 991px) { .navbar-header { @@ -80,9 +85,9 @@ ul.nav { li { - color: $consul-black; + color: $gray-1; font-size: $header-font-size; - font-family: $font-family-open-sans; + font-family: $font-body; font-weight: $font-weight-bold; height: $header-height; margin: 0; @@ -139,10 +144,10 @@ visibility: hidden; opacity: 0; transition: all 0.5s ease; - min-width: 22rem; + min-width: 220px; box-shadow: 0px 4px 12px -2px rgba(63, 68, 85, 0.5); border-radius: 3px; - padding: 2rem; + padding: 20px; position: absolute; height: 124px; z-index: 1; @@ -158,7 +163,7 @@ clear: both; width: 100%; display: block; - padding: 1rem; + padding: 10px; position: relative; height: 44px; diff --git a/website/source/assets/stylesheets/_home.scss b/website/source/assets/stylesheets/_home.scss index 4358f7ed4a..dc1d9b9c93 100755 --- a/website/source/assets/stylesheets/_home.scss +++ b/website/source/assets/stylesheets/_home.scss @@ -67,7 +67,7 @@ section.marketing { h2 { - font-family: $font-family-klavika; + font-family: $font-display; font-size: 36px; font-weight: $font-weight-bold; line-height: 1.25; @@ -77,7 +77,7 @@ } p { - font-family: $font-family-open-sans; + font-family: $font-body; font-size: 16px; letter-spacing: 0.01em; line-height: 1.8; @@ -88,7 +88,7 @@ background: $black; color: $white; display: inline-block; - font-family: $font-family-klavika; + font-family: $font-display; font-size: 18px; font-weight: $font-weight-bold; line-height: 1; @@ -99,7 +99,7 @@ } &.pink { - background: $consul-red; + background: $consul; h2 { color: $white; @@ -117,7 +117,7 @@ } &.pink-dark { - background: $consul-red-dark; + background: $consul-d1; h2 { color: $white; @@ -181,7 +181,7 @@ background-color: $black; box-sizing: border-box; color: $white; - font-family: $font-family-monospace; + font-family: $font-monospace; font-size: 15px; line-height: 1.8; margin: 20px auto auto auto; @@ -201,7 +201,7 @@ } &.text-pink { - color: lighten($consul-red, 20%); + color: lighten($consul, 20%); } } } @@ -210,7 +210,7 @@ &:before { content: '\25CF'; color: $white; - font-family: $font-family-monospace; + font-family: $font-monospace; font-size: 30px; line-height: 1; margin: 0 0 0 -4px; diff --git a/website/source/assets/stylesheets/_inner.scss b/website/source/assets/stylesheets/_inner.scss index 68dacc4bdb..a1aac5da0c 100644 --- a/website/source/assets/stylesheets/_inner.scss +++ b/website/source/assets/stylesheets/_inner.scss @@ -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: 35px; - margin-bottom: $font-size; - line-height: 1.3; + margin-bottom: $font-size-default; } h2 { @@ -74,16 +83,9 @@ 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 { color: inherit; + font-size: 90%; } table { diff --git a/website/source/assets/stylesheets/_logos.scss b/website/source/assets/stylesheets/_logos.scss index 4fe958f200..7d14bad212 100644 --- a/website/source/assets/stylesheets/_logos.scss +++ b/website/source/assets/stylesheets/_logos.scss @@ -8,17 +8,17 @@ svg.logo { } path.center-c { - fill: $consul-red-dark; + fill: $consul-d1; opacity: 1.0; } path.circles { - fill: $consul-red; + fill: $consul; opacity: 1.0; } path.c { - fill: $consul-red; + fill: $consul; opacity: 1.0; } } diff --git a/website/source/assets/stylesheets/_typography.scss b/website/source/assets/stylesheets/_typography.scss new file mode 100644 index 0000000000..cd8ef8752c --- /dev/null +++ b/website/source/assets/stylesheets/_typography.scss @@ -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; +} diff --git a/website/source/assets/stylesheets/_variables.scss b/website/source/assets/stylesheets/_variables.scss index efdd309a54..f0925f5059 100755 --- a/website/source/assets/stylesheets/_variables.scss +++ b/website/source/assets/stylesheets/_variables.scss @@ -1,65 +1,95 @@ // Colors $white: #ffffff; $black: #000000; -$gray-darker: #555555; -$consul-black: #252937; +$gray-7: #f7f7f9; +$gray-6: #dcdde0; +$gray-5: #bdbec2; +$gray-4: #7f7f86; +$gray-3: #4c4c53; +$gray-2: #323339; +$gray-1: #1d1e23; -$consul-red: #c62a71; -$consul-red-dark: #8c1c59; -$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: $consul-red; +$body-font-color: $gray-1; +$body-link-color: $consul; // Home $home-header-background-color: transparent; -$home-header-link-color: $gray-darker; +$home-header-link-color: $gray-1; $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: $consul-red; -$header-font-size: $font-size - 2; +$header-background-color: $consul; +$header-font-size: 0.9375rem; $header-height: 92px; $header-link-color: rgba($black, 0.85); $header-link-color-hover: $black; -$header-font-family: $font-family-klavika; +$header-font-family: $font-display; // 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-weight: $font-weight-bold; -$button-primary-background: $consul-red; -$button-primary-font-color: $white; diff --git a/website/source/assets/stylesheets/application.scss b/website/source/assets/stylesheets/application.scss index 4b8ff18201..4ea8e1a210 100644 --- a/website/source/assets/stylesheets/application.scss +++ b/website/source/assets/stylesheets/application.scss @@ -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'; @@ -18,6 +19,9 @@ // Sidebar @import 'hashicorp/sidebar'; +// Typography +@import '_typography'; + //Global Site @import '_global'; diff --git a/website/source/assets/stylesheets/consul-connect/_global.scss b/website/source/assets/stylesheets/consul-connect/_global.scss deleted file mode 100644 index c94c86bcd3..0000000000 --- a/website/source/assets/stylesheets/consul-connect/_global.scss +++ /dev/null @@ -1,3 +0,0 @@ -.consul-connect { - color: #252937; -} diff --git a/website/source/assets/stylesheets/consul-connect/_index.scss b/website/source/assets/stylesheets/consul-connect/_index.scss index 0e510c4e91..634b8648b1 100644 --- a/website/source/assets/stylesheets/consul-connect/_index.scss +++ b/website/source/assets/stylesheets/consul-connect/_index.scss @@ -1,8 +1,6 @@ @import '_variables'; -@import '_global'; @import '_typography'; -@import 'components/_button'; @import 'components/_carousel'; @import 'components/_container'; @import 'components/_cta-section'; diff --git a/website/source/assets/stylesheets/consul-connect/_typography.scss b/website/source/assets/stylesheets/consul-connect/_typography.scss index 493465548b..59a0b52241 100644 --- a/website/source/assets/stylesheets/consul-connect/_typography.scss +++ b/website/source/assets/stylesheets/consul-connect/_typography.scss @@ -1,98 +1,25 @@ .consul-connect { - // TODO - root is set to 10px - ul, p { - font-size: 1.6rem; - line-height: 1.75; margin: 1rem 0; - - @media (min-width: 992px) { - font-size: 1.8rem; - } } a:hover { text-decoration: none; } - h3, - h2, - h1 { - font-family: $font-family-klavika; - font-kerning: normal; - font-weight: 500; - } - - h1, - .h1 { - font-size: 3.2rem; - font-weight: 600; - line-height: 1.2em; - - @media (min-width: 768px) { - font-size: 4rem; - } - - @media (min-width: 992px) { - font-size: 5.6rem; - } - } - h2, .h2 { - font-size: 2.5em; - font-weight: 600; margin: 1em 0; - line-height: 1.3em; - @media (max-width: 700px) { - font-size: 2.2em; - } } h3, .h3 { - font-family: $font-family-open-sans; - font-weight: 600; - font-size: 1.8rem; - line-height: 1.5em; margin: 1em 0; - - @media (min-width: 768px) { - font-size: 2rem; - } - - @media (min-width: 992px) { - font-size: 2.4rem; - } - - &.lighter { - font-weight: 100; - } - } - - h6, - .h6 h5, - .h5 h4, - .h4 { - font-family: $font-family-open-sans; - font-weight: 600; - } - - h4, - .h4 { - font-size: 2.2rem; - font-weight: 600; - } - - h5, - .h5 { - font-size: 1.25em; } h6, .h6 { - font-size: 1.125em; margin: 1em 0; } } diff --git a/website/source/assets/stylesheets/consul-connect/_variables.scss b/website/source/assets/stylesheets/consul-connect/_variables.scss index 31022e15ab..6992f222f3 100644 --- a/website/source/assets/stylesheets/consul-connect/_variables.scss +++ b/website/source/assets/stylesheets/consul-connect/_variables.scss @@ -1,5 +1,3 @@ /* Grid/Layout Settings */ -$consul-black: #252937; - $site-gutter-padding: 15px; $site-max-width: 1170px; diff --git a/website/source/assets/stylesheets/consul-connect/components/_button.scss b/website/source/assets/stylesheets/consul-connect/components/_button.scss deleted file mode 100644 index feeed2a9f3..0000000000 --- a/website/source/assets/stylesheets/consul-connect/components/_button.scss +++ /dev/null @@ -1,89 +0,0 @@ -.g-btn { - background-color: $consul-red; - border: 2px solid $consul-red; - border-radius: 3px; - box-sizing: border-box; - color: $white; - display: inline-block; - font-size: 1.4rem; - font-weight: 600; - letter-spacing: 0; - line-height: 24px; - min-width: 129px; - outline: 0; - padding: 6px 5px; - position: relative; - text-align: center; - transition: all 0.25s ease; - - @media (min-width: 768px) { - font-size: 1.6rem; - min-width: 144px; - padding: 10px 28px; - } - - &:focus, - &:hover { - background-color: #ce4a86; - border-color: #ce4a86; - color: $white; - text-decoration: none; - transform: translateY(-1px); - } - - path { - fill: $white; - } - - &.white { - background: $white; - border: 2px solid $white; - color: $consul-black; - - &:hover { - background: $consul-black; - border-color: $consul-black; - color: $white; - - path { - fill: $white; - } - } - - path { - fill: $consul-black; - } - } - - &.dark-outline { - background: none; - border: 2px solid $consul-black; - color: $consul-black; - - &:hover { - background: $consul-black; - color: $white; - } - } - - &.white-outline { - background: none; - border: 2px solid $white; - color: $white; - - &:hover { - background-color: $white; - color: $consul-black; - } - } - - &.download { - svg { - margin: 0 4px -4px 0; - - path { - transition: fill 0.25s ease; - } - } - } -} diff --git a/website/source/assets/stylesheets/consul-connect/components/_carousel.scss b/website/source/assets/stylesheets/consul-connect/components/_carousel.scss index 11c59e28e6..4662cbf282 100644 --- a/website/source/assets/stylesheets/consul-connect/components/_carousel.scss +++ b/website/source/assets/stylesheets/consul-connect/components/_carousel.scss @@ -90,7 +90,7 @@ .card { background: #fff; - color: $consul-black; + color: $gray-1; display: block; height: 100%; text-align: left; @@ -152,6 +152,7 @@ span { display: inline-block; + line-height: 20px; position: relative; &:first-child { @@ -170,7 +171,6 @@ } &:last-child { - font-weight: 600; margin-top: 16px; @media (min-width: 650px) { @@ -204,10 +204,6 @@ margin-top: 32px; } } - - p { - font-size: 1.6rem; - } } } } diff --git a/website/source/assets/stylesheets/consul-connect/components/_cta-section.scss b/website/source/assets/stylesheets/consul-connect/components/_cta-section.scss index e0b813b7d8..ba966eda67 100644 --- a/website/source/assets/stylesheets/consul-connect/components/_cta-section.scss +++ b/website/source/assets/stylesheets/consul-connect/components/_cta-section.scss @@ -1,6 +1,6 @@ .g-cta-section.g-section { align-items: center; - background: $consul-red; + background: $consul; display: flex; justify-content: center; padding-left: 15px; @@ -30,7 +30,7 @@ margin-top: 0; } - .g-btn + .g-btn { + .button + .button { margin-left: 18px; } } diff --git a/website/source/assets/stylesheets/consul-connect/components/_header.scss b/website/source/assets/stylesheets/consul-connect/components/_header.scss index cafc5d0e82..84a5edb4dd 100644 --- a/website/source/assets/stylesheets/consul-connect/components/_header.scss +++ b/website/source/assets/stylesheets/consul-connect/components/_header.scss @@ -5,7 +5,7 @@ .navbar-toggle { .icon-bar { - border: 1px solid $consul-black; + border: 1px solid $gray-1; } } @@ -20,17 +20,17 @@ } path.center-c { - fill: $consul-red-dark; + fill: $consul-d1; opacity: 1; } path.circles { - fill: $consul-red; + fill: $consul; opacity: 1; } path.c { - fill: $consul-red; + fill: $consul; opacity: 1; } } @@ -40,7 +40,7 @@ ul.nav { li { a { - color: $consul-black; + color: $gray-1; &:hover, &:focus, @@ -54,7 +54,7 @@ } svg { - fill: $consul-black; + fill: $gray-1; } } } diff --git a/website/source/assets/stylesheets/consul-connect/components/_hero.scss b/website/source/assets/stylesheets/consul-connect/components/_hero.scss index e869b84021..4c50da2826 100644 --- a/website/source/assets/stylesheets/consul-connect/components/_hero.scss +++ b/website/source/assets/stylesheets/consul-connect/components/_hero.scss @@ -21,27 +21,14 @@ } p { - font-size: 1.8rem; max-width: 848px; margin: 0 auto 35px; - - @media (min-width: 768px) { - font-size: 2rem; - } - - @media (min-width: 992px) { - font-size: 2.4rem; - } } span { border: 1px solid #ca2171; border-radius: 2px; display: inline-block; - font-size: 12px; - font-weight: 600; - letter-spacing: 0.5px; - line-height: 20px; margin-bottom: 24px; padding: 2px 9px; text-transform: uppercase; @@ -54,7 +41,7 @@ & > div { margin: 0 -30px; - .g-btn { + .button { min-width: 129px; margin: 5px; diff --git a/website/source/assets/stylesheets/consul-connect/components/_text-asset.scss b/website/source/assets/stylesheets/consul-connect/components/_text-asset.scss index 106b7f3a17..f1db03c1cb 100644 --- a/website/source/assets/stylesheets/consul-connect/components/_text-asset.scss +++ b/website/source/assets/stylesheets/consul-connect/components/_text-asset.scss @@ -129,7 +129,6 @@ .code { background: #1e212a; - font-size: 1.4rem; overflow: auto; padding: 16px 24px 32px; width: 100%; @@ -138,13 +137,8 @@ background: #1e212a; border-radius: 0; color: $white; - font-size: 1.2rem; white-space: pre; - @media (min-width: 992px) { - font-size: 1.4rem; - } - &.keyword { color: #be5580; } @@ -182,7 +176,6 @@ } li { - font-size: 1.6rem; list-style-type: none; margin: 16px; text-align: left; @@ -191,10 +184,6 @@ margin: 16px 0; } - @media (min-width: 992px) { - font-size: 1.8rem; - } - &:before { background-position: center; background-repeat: no-repeat; diff --git a/website/source/assets/stylesheets/consul-connect/components/_timeline.scss b/website/source/assets/stylesheets/consul-connect/components/_timeline.scss index f15670a7ee..215de95571 100644 --- a/website/source/assets/stylesheets/consul-connect/components/_timeline.scss +++ b/website/source/assets/stylesheets/consul-connect/components/_timeline.scss @@ -103,17 +103,15 @@ } } - h3 { + h2 { margin: 0 0 8px; } .sub-heading { display: block; - font-size: 1.6rem; margin-bottom: 24px; @media (min-width: 992px) { - font-size: 1.8rem; margin-bottom: 40px; } } @@ -144,7 +142,6 @@ } p { - font-size: 1.6rem; margin-top: 40px; } } diff --git a/website/source/assets/stylesheets/consul-connect/components/_use-cases.scss b/website/source/assets/stylesheets/consul-connect/components/_use-cases.scss index adc3c7ffae..373d0c6a10 100644 --- a/website/source/assets/stylesheets/consul-connect/components/_use-cases.scss +++ b/website/source/assets/stylesheets/consul-connect/components/_use-cases.scss @@ -54,7 +54,7 @@ } } - .g-btn { + .button { @media (min-width: 768px) { margin-top: 22px; } diff --git a/website/source/assets/stylesheets/consul-connect/pages/_home.scss b/website/source/assets/stylesheets/consul-connect/pages/_home.scss index bcd1152d11..47099eda62 100644 --- a/website/source/assets/stylesheets/consul-connect/pages/_home.scss +++ b/website/source/assets/stylesheets/consul-connect/pages/_home.scss @@ -43,27 +43,21 @@ } h1 { - font-size: 2.4rem; margin: 24px 0 16px; @media (min-width: 768px) { - font-size: 3.2rem; margin-top: 32px; } @media (min-width: 992px) { - font-size: 4.8rem; margin-top: 40px; } } p { - font-size: 1.6rem; - font-weight: 300; margin: 16px 0 32px; @media (min-width: 768px) { - font-size: 2.4rem; margin-bottom: 40px; } } @@ -73,9 +67,7 @@ border-radius: 3px; color: #650d34; display: inline-block; - font-size: 1.4rem; padding: 16px; - line-height: 1.7; @media (min-width: 992px) { line-height: 1.4; @@ -85,11 +77,9 @@ span { &:first-child { - background: $consul-red; + background: $consul; border-radius: 3px; color: #fff; - font-size: 1.2rem; - font-weight: 700; margin-right: 4px; padding: 2px 9px; text-transform: uppercase; @@ -110,8 +100,7 @@ } } - .g-btn { - min-width: 129px; + .button { margin: 0 5px 10px; @media (min-width: 400px) { @@ -126,11 +115,7 @@ margin: 0; } - @media (min-width: 992px) { - min-width: 144px; - } - - & + .g-btn { + & + .button { @media (min-width: 768px) { margin-left: 10px; } @@ -142,17 +127,14 @@ } .secondary-link { - border-bottom: 1px dashed $consul-red; - color: $consul-black; + border-bottom: 1px dashed $consul; + color: $gray-1; display: inline-block; - font-size: 1.4rem; - font-weight: 600; margin: 24px 0 48px; padding-bottom: 4px; transition: all 0.25s ease; @media (min-width: 992px) { - font-size: 1.6rem; margin-top: 32px; margin-bottom: 0; } @@ -195,19 +177,17 @@ cursor: pointer; display: flex; flex-direction: column; - font-size: 1.2rem; - font-weight: 600; justify-content: center; margin: 0 25px; text-transform: uppercase; &:hover, &.active { - color: $consul-black; + color: $gray-1; } &.playing { - color: $consul-black; + color: $gray-1; } & > span { @@ -223,7 +203,7 @@ width: 64px; span { - background: $consul-red; + background: $consul; height: 2px; left: 0; position: absolute; @@ -304,7 +284,7 @@ } span { - background: $consul-black; + background: $gray-1; border-radius: 50%; display: block; height: 5px; @@ -371,7 +351,6 @@ } #static-dynamic { - @media (max-width: 991px) { padding-top: 212px; } @@ -421,7 +400,7 @@ } &:first-child { - background: $consul-red; + background: $consul; position: relative; &:after { @@ -439,7 +418,7 @@ } &:last-child { - background: $consul-black; + background: $gray-1; } & > div { diff --git a/website/source/discovery.html.erb b/website/source/discovery.html.erb index 278a190687..26548c9ed7 100644 --- a/website/source/discovery.html.erb +++ b/website/source/discovery.html.erb @@ -8,17 +8,17 @@ description: |-
-

Service discovery made easy

-

Service registry, integrated health checks, and DNS and HTTP interfaces +

Service discovery made easy

+

Service registry, integrated health checks, and DNS and HTTP interfaces enable any service to discover and be discovered by other services

- + Download - Explore Docs + Explore Docs
@@ -33,21 +33,21 @@ description: |- -

The Challenge

- Service load balancers aren't efficient in a dynamic world. +

The Challenge

+ Service load balancers aren't efficient in a dynamic world.
<%= inline_svg 'consul-connect/svgs/discovery-challenge.svg' %>
-

Load balancers are often used to front a service tier and provide a static IP. These load balancers add cost, increase latency, introduce single points of failure, and must be updated as services scale up/down.

+

Load balancers are often used to front a service tier and provide a static IP. These load balancers add cost, increase latency, introduce single points of failure, and must be updated as services scale up/down.

-

The Solution

- Service discovery for dynamic infrastructure. +

The Solution

+ Service discovery for dynamic infrastructure.
<%= inline_svg 'consul-connect/svgs/discovery-solution.svg' %>
-

Instead of load balancers, connectivity in dynamic infrastructure is best solved with service discovery. Service discovery uses a registry to keep a real-time list of services, their location, and their health. Services query the registry to discover the location of upstream services and then connect directly. This allows services to scale up/down and gracefully handle failure without a load balancer intermediary.

+

Instead of load balancers, connectivity in dynamic infrastructure is best solved with service discovery. Service discovery uses a registry to keep a real-time list of services, their location, and their health. Services query the registry to discover the location of upstream services and then connect directly. This allows services to scale up/down and gracefully handle failure without a load balancer intermediary.

@@ -56,15 +56,15 @@ description: |-
-

Features

+

Features

-

Service Registry

-

Consul provides a registry of all the running nodes and services, along with their current health status. This allows operators to understand the environment, and applications and automation tools to interact with dynamic infrastructure using an HTTP API.

+

Service Registry

+

Consul provides a registry of all the running nodes and services, along with their current health status. This allows operators to understand the environment, and applications and automation tools to interact with dynamic infrastructure using an HTTP API.

- Learn more + Learn more

@@ -90,10 +90,10 @@ description: |-
-

DNS Query Interface

-

Consul enables service discovery using a built-in DNS server. This allows existing applications to easily integrate, as almost all applications support using DNS to resolve IP addresses. Using DNS instead of a static IP address allows services to scale up/down and route around failures easily.

+

DNS Query Interface

+

Consul enables service discovery using a built-in DNS server. This allows existing applications to easily integrate, as almost all applications support using DNS to resolve IP addresses. Using DNS instead of a static IP address allows services to scale up/down and route around failures easily.

- Learn more + Learn more

@@ -127,10 +127,10 @@ web-frontend.service.consul. 0 IN A 10.0.1.109
-

HTTP API with Edge Triggers

-

Consul provides an HTTP API to query the service registry for nodes, services, and health check information. The API also supports blocking queries, or long-polling for any changes. This allows automation tools to react to services being registered or health status changes to change configurations or traffic routing in real time.

+

HTTP API with Edge Triggers

+

Consul provides an HTTP API to query the service registry for nodes, services, and health check information. The API also supports blocking queries, or long-polling for any changes. This allows automation tools to react to services being registered or health status changes to change configurations or traffic routing in real time.

- Learn more + Learn more

@@ -164,10 +164,10 @@ web-frontend.service.consul. 0 IN A 10.0.1.109
-

Multi Datacenter

-

Consul supports multiple datacenters out of the box with no complicated configuration. Look up services in other datacenters or keep the request local. Advanced features like Prepared Queries enable automatic failover to other datacenters.

+

Multi Datacenter

+

Consul supports multiple datacenters out of the box with no complicated configuration. Look up services in other datacenters or keep the request local. Advanced features like Prepared Queries enable automatic failover to other datacenters.

- Learn more + Learn more

@@ -208,10 +208,10 @@ $ curl http://localhost:8500/v1/catalog/nodes?dc=dc2
-

Health Checks

-

Pairing service discovery with health checking prevents routing requests to unhealthy hosts and enables services to easily provide circuit breakers.

+

Health Checks

+

Pairing service discovery with health checking prevents routing requests to unhealthy hosts and enables services to easily provide circuit breakers.

- Learn more + Learn more

@@ -235,7 +235,7 @@ $ curl http://localhost:8500/v1/catalog/nodes?dc=dc2
-

Case Studies

+

Case Studies

- Video -

Jet.com - Nomad Auto-Proxy with Consul-Template and NGINX

-

Justen Walker explains how Jet.com uses HashiCorp Consul and Nomad to allow hundreds of developers to have self-service access, despite relying on NGINX static configs—and with a remarkably small DevOps team.

- Watch + Video +

Jet.com - Nomad Auto-Proxy with Consul-Template and NGINX

+

Justen Walker explains how Jet.com uses HashiCorp Consul and Nomad to allow hundreds of developers to have self-service access, despite relying on NGINX static configs—and with a remarkably small DevOps team.

+ Watch
@@ -278,14 +278,14 @@ $ curl http://localhost:8500/v1/catalog/nodes?dc=dc2
-

Ready to get started?

- +

Ready to get started?

+
Download - Explore docs + Explore docs
diff --git a/website/source/downloads.html.erb b/website/source/downloads.html.erb index 6c79b43e22..9058d4bf30 100644 --- a/website/source/downloads.html.erb +++ b/website/source/downloads.html.erb @@ -40,7 +40,7 @@ description: |-
<%= system_icon(os) %>
-

<%= pretty_os(os) %>

+

<%= pretty_os(os) %>