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
@@ -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
@@ -244,10 +244,10 @@ $ curl http://localhost:8500/v1/catalog/nodes?dc=dc2
-
Video
-
Twitch - Driving Towards a Modern Infrastructure
-
In this talk from HashiConf 2015, Tarrant Rollins discusses how Twitch uses HashiCorp Consul to overcome legacy infrastructure and solve complex problems.
-
Watch
+
Video
+
Twitch - Driving Towards a Modern Infrastructure
+
In this talk from HashiConf 2015, Tarrant Rollins discusses how Twitch uses HashiCorp Consul to overcome legacy infrastructure and solve complex problems.
+
Watch
@@ -255,10 +255,10 @@ $ curl http://localhost:8500/v1/catalog/nodes?dc=dc2
-
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
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) %>
<% arches.each do |arch, url| %>
<%= pretty_arch(arch) %>
diff --git a/website/source/index.html.erb b/website/source/index.html.erb
index 269d2a5851..3bbc704b96 100644
--- a/website/source/index.html.erb
+++ b/website/source/index.html.erb
@@ -6,32 +6,32 @@ description: |-
-
+
@@ -68,8 +68,8 @@ description: |-
-
Service-based networking for dynamic infrastructure
-
The shift from static infrastructure to dynamic
+
Service-based networking for dynamic infrastructure
+
The shift from static infrastructure to dynamic
infrastructure changes the approach to networking from host-based to
service-based. Connectivity moves from the use of static IPs to
dynamic service discovery, and security moves from static firewalls to
@@ -84,14 +84,14 @@ description: |-
-
Static
-
Host-based networking
+
Static
+
Host-based networking
-
Dynamic
-
Service-based networking
+
Dynamic
+
Service-based networking
<%= inline_svg 'consul-connect/svgs/dynamic.svg' %>
@@ -103,29 +103,29 @@ description: |-
-
Use Cases
-
Consul can be run as a platform to solve a range of use-cases
- in service networking.
+
Use Cases
+
Consul can be run as a platform to solve a range of use-cases
+ in service networking.
-
Service Discovery
-
Use the service registry to address and discover services across multiple runtime platforms, cloud providers and regions.
+
Service Discovery
+
Use the service registry to address and discover services across multiple runtime platforms, cloud providers and regions.
-
Service Mesh
-
Service discovery, identity-based authorization, and L7 traffic management abstracted from application code with proxies in the service mesh pattern.
+
Service Mesh
+
Service discovery, identity-based authorization, and L7 traffic management abstracted from application code with proxies in the service mesh pattern.
@@ -135,13 +135,13 @@ description: |-
-
Consul Principles
+ Consul Principles
-
API-Driven
-
Codify and automate service definitions, health checks, service
+
API-Driven
+
Codify and automate service definitions, health checks, service
authorization policies, failover logic, and more.
@@ -173,20 +173,20 @@ description: |-
-
Run and Connect Anywhere
-
Connect services across any runtime platform and public or private cloud. Connect services from Kubernetes to VMs, Containers to Serverless functions.
+
Run and Connect Anywhere
+
Connect services across any runtime platform and public or private cloud. Connect services from Kubernetes to VMs, Containers to Serverless functions.
-
-
+ /assets/images/consul-connect/grid_1/grid_1_1256.png 1256w' />
@@ -199,22 +199,22 @@ description: |-
-
Extend and Integrate
-
+
Extend and Integrate
+
Provision clusters on any infrastructure, connect to services over TLS via proxy integrations, and Serve TLS certificates with pluggable Certificate Authorities.
-
-
+ /assets/images/consul-connect/grid_2/grid_2_1256.png 1256w' />
@@ -225,7 +225,7 @@ description: |-
-
Companies that trust Consul
+ Companies that trust Consul
@@ -256,9 +256,9 @@ description: |-
<%= inline_svg 'consul-connect/logos/consul-logo.svg' %>
-
Consul Open Source addresses the technical complexity of connecting services across distributed infrastructure.
+
Consul Open Source addresses the technical complexity of connecting services across distributed infrastructure.
diff --git a/website/source/layouts/api.erb b/website/source/layouts/api.erb
index 19c8732d01..63f5172db4 100644
--- a/website/source/layouts/api.erb
+++ b/website/source/layouts/api.erb
@@ -1,6 +1,6 @@
<% wrap_layout :inner do %>
<% content_for :sidebar do %>
-
+
>
API Introduction
diff --git a/website/source/layouts/docs.erb b/website/source/layouts/docs.erb
index 6846de40c1..2bc52e54d0 100644
--- a/website/source/layouts/docs.erb
+++ b/website/source/layouts/docs.erb
@@ -1,6 +1,6 @@
<% wrap_layout :inner do %>
<% content_for :sidebar do %>
-
+
>
Installing Consul
diff --git a/website/source/layouts/downloads.erb b/website/source/layouts/downloads.erb
index 63c108984d..bf65d7dc19 100644
--- a/website/source/layouts/downloads.erb
+++ b/website/source/layouts/downloads.erb
@@ -1,6 +1,6 @@
<% wrap_layout :inner do %>
<% content_for :sidebar do %>
-
+
>
Download Consul
diff --git a/website/source/layouts/intro.erb b/website/source/layouts/intro.erb
index cc752de6f2..797dae7de8 100644
--- a/website/source/layouts/intro.erb
+++ b/website/source/layouts/intro.erb
@@ -1,6 +1,6 @@
<% wrap_layout :inner do %>
<% content_for :sidebar do %>
-
+
>
What is Consul?
diff --git a/website/source/mesh.html.erb b/website/source/mesh.html.erb
index b02550dfa3..d9ba4aa07c 100644
--- a/website/source/mesh.html.erb
+++ b/website/source/mesh.html.erb
@@ -7,16 +7,16 @@ description: |-
- Service Mesh made easy
- Service discovery, identity-based authorization, and L7 traffic management abstracted from application code with proxies in the service mesh pattern
+ Service Mesh made easy
+ Service discovery, identity-based authorization, and L7 traffic management abstracted from application code with proxies in the service mesh pattern
@@ -31,12 +31,12 @@ description: |-
-
The Challenge
-
Network appliances, like load balancers or firewalls with manual processes, don't scale in dynamic settings to support modern applications.
+
The Challenge
+
Network appliances, like load balancers or firewalls with manual processes, don't scale in dynamic settings to support modern applications.
<%= inline_svg 'consul-connect/svgs/segmentation-challenge.svg' %>
-
East-west firewalls use IP-based rules to secure ingress and
+
East-west firewalls use IP-based rules to secure ingress and
egress traffic. But in a dynamic world where services move across
machines and machines are frequently created and destroyed, this
perimeter-based approach is difficult to scale as it results in
@@ -45,12 +45,12 @@ description: |-
-
The Solution
-
Service mesh as an automated and distributed approach to networking and security that can operate across platforms and private and public cloud
+
The Solution
+
Service mesh as an automated and distributed approach to networking and security that can operate across platforms and private and public cloud
<%= inline_svg 'consul-connect/svgs/segmentation-solution.svg' %>
-
Service mesh is a new approach to secure the service itself
+
Service mesh is a new approach to secure the service itself
rather than relying on the network. Consul uses centrally
managed service policies and configuration to enable
dynamic routing and security based on service identity.
@@ -64,15 +64,15 @@ description: |-
-
Features
+ Features
-
Layer 7 Traffic Management
-
Service-to-service communication policy at Layer 7 can be managed centrally, enabling advanced traffic management patterns such as service failover, path-based routing, and traffic shifting that can be applied across public and private clouds, platforms, and networks.
+
Layer 7 Traffic Management
+
Service-to-service communication policy at Layer 7 can be managed centrally, enabling advanced traffic management patterns such as service failover, path-based routing, and traffic shifting that can be applied across public and private clouds, platforms, and networks.
- Learn more
+ Learn more
@@ -105,10 +105,10 @@ Splits = [
-
Layer 7 Observability
-
Centrally managed service observability at Layer 7 including detailed metrics on all service-to-service communication such as connections, bytes transferred, retries, timeouts, open circuits, and request rates, response codes.
+
Layer 7 Observability
+
Centrally managed service observability at Layer 7 including detailed metrics on all service-to-service communication such as connections, bytes transferred, retries, timeouts, open circuits, and request rates, response codes.
- Learn more
+ Learn more
@@ -131,10 +131,10 @@ Splits = [
-
Secure services across any runtime platform
-
Secure communication between legacy and modern workloads. Sidecar proxies allow applications to be integrated without code changes and Layer 4 support provides nearly universal protocol compatibility.
+
Secure services across any runtime platform
+
Secure communication between legacy and modern workloads. Sidecar proxies allow applications to be integrated without code changes and Layer 4 support provides nearly universal protocol compatibility.
- Learn more
+ Learn more
@@ -160,10 +160,10 @@ Splits = [
-
Certificate-Based Service Identity
-
TLS certificates are used to identify services and secure communications. Certificates use the SPIFFE format for interoperability with other platforms. Consul can be a certificate authority to simplify deployment, or integrate with external signing authorities like Vault.
+
Certificate-Based Service Identity
+
TLS certificates are used to identify services and secure communications. Certificates use the SPIFFE format for interoperability with other platforms. Consul can be a certificate authority to simplify deployment, or integrate with external signing authorities like Vault.
- Learn more
+ Learn more
@@ -182,10 +182,10 @@ Splits = [
-
Encrypted communication
-
All traffic between services is encrypted and authenticated with mutual TLS. Using TLS provides a strong guarantee of the identity of services communicating, and ensures all data in transit is encrypted.
+
Encrypted communication
+
All traffic between services is encrypted and authenticated with mutual TLS. Using TLS provides a strong guarantee of the identity of services communicating, and ensures all data in transit is encrypted.
- Learn more
+ Learn more
@@ -228,16 +228,16 @@ Secure Sockets Layer
-
Mesh Gateway
-
Connect between different cloud regions, VPCs and between overlay and underlay networks without complex network tunnels and NAT. Mesh Gateways solve routing at TLS layer while preserving end-to-end encryption and limiting attack surface area at the edge of each network.
+
Mesh Gateway
+
Connect between different cloud regions, VPCs and between overlay and underlay networks without complex network tunnels and NAT. Mesh Gateways solve routing at TLS layer while preserving end-to-end encryption and limiting attack surface area at the edge of each network.
- Learn more
+ Learn more
-
+
@@ -247,14 +247,14 @@ Secure Sockets Layer