website - font and brand updates (#6716)
* website - font and brand updates * sidebar font-size adjustments and scss cleanup * adjust nav and inline code styles
This commit is contained in:
RJ Spiker
Alvin Huang
parent
bc42074f57
commit
8c11e3a4fc
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -1,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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ body.layout-downloads {
|
|||
padding-left: 20px;
|
||||
|
||||
h2 {
|
||||
@extend .g-type-display-4;
|
||||
margin-top: 4px;
|
||||
border: none;
|
||||
}
|
||||
|
|
@ -46,7 +47,6 @@ body.layout-downloads {
|
|||
}
|
||||
|
||||
.os-name {
|
||||
font-size: 40px;
|
||||
margin-bottom: -3px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,74 @@
|
|||
/* Display Font (Gilmer) */
|
||||
@font-face {
|
||||
font-family: "gilmer-web";
|
||||
src: url("/assets/fonts/gilmer/gilmer-light.woff2") format("woff2"),
|
||||
url("/assets/fonts/gilmer/gilmer-light.woff") format("woff");
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "gilmer-web";
|
||||
src: url("/assets/fonts/gilmer/gilmer-regular.woff2") format("woff2"),
|
||||
url("/assets/fonts/gilmer/gilmer-regular.woff") format("woff");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "gilmer-web";
|
||||
src: url("/assets/fonts/gilmer/gilmer-medium.woff2") format("woff2"),
|
||||
url("/assets/fonts/gilmer/gilmer-medium.woff") format("woff");
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "gilmer-web";
|
||||
src: url("/assets/fonts/gilmer/gilmer-bold.woff2") format("woff2"),
|
||||
url("/assets/fonts/gilmer/gilmer-bold.woff") format("woff");
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* Body Font (Metro) */
|
||||
@font-face {
|
||||
font-family: "metro-web";
|
||||
src: url("/assets/fonts/metro/metro-sans-book.woff2") format("woff2"),
|
||||
url("/assets/fonts/metro/metro-sans-book.woff") format("woff");
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "metro-web";
|
||||
src: url("/assets/fonts/metro/metro-sans-regular.woff2") format("woff2"),
|
||||
url("/assets/fonts/metro/metro-sans-regular.woff") format("woff");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "metro-web";
|
||||
src: url("/assets/fonts/metro/metro-sans-semi-bold.woff2") format("woff2"),
|
||||
url("/assets/fonts/metro/metro-sans-semi-bold.woff") format("woff");
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "metro-web";
|
||||
src: url("/assets/fonts/metro/metro-sans-bold.woff2") format("woff2"),
|
||||
url("/assets/fonts/metro/metro-sans-bold.woff") format("woff");
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* Code Font (Deja Vu) */
|
||||
@font-face {
|
||||
font-family: "dejavu-sans-mono-web";
|
||||
src: url("/assets/fonts/dejavu/DejaVuSansMono.woff2") format("woff2"),
|
||||
url("/assets/fonts/dejavu/DejaVuSansMono.woff") format("woff");
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
a {
|
||||
color: $footer-link-color;
|
||||
font-size: $footer-font-size;
|
||||
font-family: $font-family-open-sans;
|
||||
font-family: $font-body;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover, &:focus, &:active {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
html {
|
||||
font-size: $font-size-default;
|
||||
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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,283 @@
|
|||
/* HashiCorp-style headings */
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: $font-display;
|
||||
font-weight: $font-weight-bold;
|
||||
font-kerning: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
pre,
|
||||
code,
|
||||
pre code,
|
||||
tt {
|
||||
@extend .g-type-code;
|
||||
}
|
||||
|
||||
/* Display 1 */
|
||||
.g-type-display-1 {
|
||||
font-family: $font-display;
|
||||
font-weight: $font-weight-bold;
|
||||
font-size: 2.125rem;
|
||||
letter-spacing: -0.008em;
|
||||
line-height: 1.265em;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
font-size: 2.625rem;
|
||||
letter-spacing: -0.01em;
|
||||
line-height: 1.19em;
|
||||
}
|
||||
|
||||
@media (min-width: 1120px) {
|
||||
font-size: 3.125rem;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
/* Display 2 */
|
||||
.g-type-display-2 {
|
||||
font-family: $font-display;
|
||||
font-weight: $font-weight-bold;
|
||||
font-size: 1.75rem;
|
||||
letter-spacing: -0.004em;
|
||||
line-height: 1.286em;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
font-size: 2.125rem;
|
||||
letter-spacing: -0.008em;
|
||||
line-height: 1.265em;
|
||||
}
|
||||
|
||||
@media (min-width: 1120px) {
|
||||
font-size: 2.5rem;
|
||||
letter-spacing: -0.01em;
|
||||
line-height: 1.25em;
|
||||
}
|
||||
}
|
||||
|
||||
/* Display 3 */
|
||||
.g-type-display-3 {
|
||||
font-family: $font-display;
|
||||
font-weight: $font-weight-bold;
|
||||
font-size: 1.5rem;
|
||||
letter-spacing: -0.004em;
|
||||
line-height: 1.375em;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
font-size: 1.75rem;
|
||||
line-height: 1.321em;
|
||||
}
|
||||
|
||||
@media (min-width: 1120px) {
|
||||
font-size: 2rem;
|
||||
letter-spacing: -0.006em;
|
||||
line-height: 1.313em;
|
||||
}
|
||||
}
|
||||
|
||||
/* Display 4 */
|
||||
.g-type-display-4 {
|
||||
font-family: $font-display;
|
||||
font-weight: $font-weight-bold;
|
||||
font-size: 1.313rem;
|
||||
line-height: 1.429em;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
font-size: 1.438rem;
|
||||
letter-spacing: -0.004em;
|
||||
line-height: 1.391em;
|
||||
}
|
||||
|
||||
@media (min-width: 1120px) {
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.417em;
|
||||
}
|
||||
}
|
||||
|
||||
/* Display 5 */
|
||||
.g-type-display-5 {
|
||||
font-family: $font-display;
|
||||
font-weight: $font-weight-bold;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.556em;
|
||||
}
|
||||
|
||||
/* Display 6 */
|
||||
.g-type-display-6 {
|
||||
font-family: $font-display;
|
||||
font-weight: $font-weight-bold;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
/* Body Large */
|
||||
.g-type-body-large {
|
||||
font-family: $font-body;
|
||||
font-weight: $font-weight-reg;
|
||||
font-size: 1.188rem;
|
||||
letter-spacing: 0.01em;
|
||||
line-height: 1.579em;
|
||||
|
||||
@media (min-width: 1120px) {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.55em;
|
||||
}
|
||||
}
|
||||
|
||||
/* Body */
|
||||
.g-type-body {
|
||||
font-family: $font-body;
|
||||
font-weight: $font-weight-reg;
|
||||
font-size: 1.063rem;
|
||||
letter-spacing: 0.01em;
|
||||
line-height: 1.647em;
|
||||
}
|
||||
|
||||
/* Body - Strong */
|
||||
.g-type-body-strong {
|
||||
font-family: $font-body;
|
||||
font-weight: $font-weight-semi-bold;
|
||||
font-size: 1.063rem;
|
||||
letter-spacing: 0.01em;
|
||||
line-height: 1.647em;
|
||||
}
|
||||
|
||||
/* Body - X Strong */
|
||||
.g-type-body-x-strong {
|
||||
font-family: $font-body;
|
||||
font-weight: $font-weight-bold;
|
||||
font-size: 1.063rem;
|
||||
letter-spacing: 0.01em;
|
||||
line-height: 1.647em;
|
||||
}
|
||||
|
||||
/* Body - Italic */
|
||||
.g-type-body-italic {
|
||||
font-family: $font-body;
|
||||
font-weight: $font-weight-reg;
|
||||
font-size: 1.063rem;
|
||||
letter-spacing: 0.01em;
|
||||
line-height: 1.647em;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Body Small */
|
||||
.g-type-body-small {
|
||||
font-family: $font-body;
|
||||
font-weight: $font-weight-reg;
|
||||
font-size: 0.938rem;
|
||||
letter-spacing: 0.01em;
|
||||
line-height: 1.667em;
|
||||
}
|
||||
|
||||
/* Body Small - Strong */
|
||||
.g-type-body-small-strong {
|
||||
font-family: $font-body;
|
||||
font-weight: $font-weight-semi-bold;
|
||||
font-size: 0.938rem;
|
||||
letter-spacing: 0.01em;
|
||||
line-height: 1.667em;
|
||||
}
|
||||
|
||||
/* Body Small - X Strong */
|
||||
.g-type-body-small-x-strong {
|
||||
font-family: $font-body;
|
||||
font-weight: $font-weight-bold;
|
||||
font-size: 0.938rem;
|
||||
letter-spacing: 0.01em;
|
||||
line-height: 1.667em;
|
||||
}
|
||||
|
||||
/* Body Small - Italic */
|
||||
.g-type-body-small-italic {
|
||||
font-family: $font-body;
|
||||
font-weight: $font-weight-reg;
|
||||
font-size: 0.938rem;
|
||||
letter-spacing: 0.01em;
|
||||
line-height: 1.667em;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Long Body */
|
||||
.g-type-long-body {
|
||||
font-family: $font-body;
|
||||
font-weight: $font-weight-reg;
|
||||
font-size: 1.063rem;
|
||||
letter-spacing: 0.01em;
|
||||
line-height: 1.765em;
|
||||
}
|
||||
|
||||
/* Long Body Strong */
|
||||
.g-type-long-body-strong {
|
||||
font-family: $font-body;
|
||||
font-weight: $font-weight-semi-bold;
|
||||
font-size: 1.063rem;
|
||||
letter-spacing: 0.01em;
|
||||
line-height: 1.765em;
|
||||
}
|
||||
|
||||
/* Long Body Italic */
|
||||
.g-type-long-body-italic {
|
||||
font-family: $font-body;
|
||||
font-weight: $font-weight-reg;
|
||||
font-size: 1.063rem;
|
||||
letter-spacing: 0.01em;
|
||||
line-height: 1.765em;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Buttons and standalone links */
|
||||
.g-type-buttons-and-standalone-links {
|
||||
font-family: $font-display;
|
||||
font-weight: $font-weight-medium;
|
||||
font-size: 0.938rem;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
/* Header Nav */
|
||||
.g-type-header-nav {
|
||||
font-family: $font-display;
|
||||
font-weight: $font-weight-medium;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.429em;
|
||||
}
|
||||
|
||||
/* Label */
|
||||
.g-type-label {
|
||||
font-family: $font-display;
|
||||
font-weight: $font-weight-medium;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.08em;
|
||||
line-height: 1.5em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* Label - Strong */
|
||||
.g-type-label-strong {
|
||||
font-family: $font-display;
|
||||
font-weight: $font-weight-bold;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.08em;
|
||||
line-height: 1.5em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* Tag Label */
|
||||
.g-type-tag-label {
|
||||
font-family: $font-body;
|
||||
font-weight: $font-weight-bold;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.333em;
|
||||
}
|
||||
|
||||
/* Code */
|
||||
.g-type-code {
|
||||
font-family: $font-monospace;
|
||||
font-weight: $font-weight-reg;
|
||||
font-size: 0.844rem;
|
||||
line-height: 1.63em;
|
||||
}
|
||||
|
|
@ -1,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;
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
.consul-connect {
|
||||
color: #252937;
|
||||
}
|
||||
|
|
@ -1,8 +1,6 @@
|
|||
@import '_variables';
|
||||
@import '_global';
|
||||
@import '_typography';
|
||||
|
||||
@import 'components/_button';
|
||||
@import 'components/_carousel';
|
||||
@import 'components/_container';
|
||||
@import 'components/_cta-section';
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
/* Grid/Layout Settings */
|
||||
$consul-black: #252937;
|
||||
|
||||
$site-gutter-padding: 15px;
|
||||
$site-max-width: 1170px;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.g-btn {
|
||||
.button {
|
||||
@media (min-width: 768px) {
|
||||
margin-top: 22px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -8,17 +8,17 @@ description: |-
|
|||
<div class='consul-connect'>
|
||||
|
||||
<section class='g-hero'>
|
||||
<h1>Service discovery made easy</h1>
|
||||
<p>Service registry, integrated health checks, and DNS and HTTP interfaces
|
||||
<h1 class="g-type-display-1">Service discovery made easy</h1>
|
||||
<p class="g-type-body-large">Service registry, integrated health checks, and DNS and HTTP interfaces
|
||||
enable any service to discover and be discovered by other services</p>
|
||||
<div>
|
||||
<a href="/downloads.html" class="g-btn download">
|
||||
<a href="/downloads.html" class="button download">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="22" viewBox="0 0 20 22">
|
||||
<path d="M9.292 15.706a1 1 0 0 0 1.416 0l3.999-3.999a1 1 0 1 0-1.414-1.414L11 12.586V1a1 1 0 1 0-2 0v11.586l-2.293-2.293a1 1 0 1 0-1.414 1.414l3.999 3.999zM20 16v3c0 1.654-1.346 3-3 3H3c-1.654 0-3-1.346-3-3v-3a1 1 0 1 1 2 0v3c0 .551.448 1 1 1h14c.552 0 1-.449 1-1v-3a1 1 0 1 1 2 0z"/>
|
||||
</svg>
|
||||
Download
|
||||
</a>
|
||||
<a href="https://learn.hashicorp.com/consul/getting-started/services" class="g-btn dark-outline">Explore Docs</a>
|
||||
<a href="https://learn.hashicorp.com/consul/getting-started/services" class="button secondary">Explore Docs</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -33,21 +33,21 @@ description: |-
|
|||
</svg>
|
||||
</span>
|
||||
<span class='dot'></span>
|
||||
<h3>The Challenge</h3>
|
||||
<span class='sub-heading'>Service load balancers aren't efficient in a dynamic world.</span>
|
||||
<h2 class="g-type-display-4">The Challenge</h2>
|
||||
<span class='sub-heading g-type-body-large'>Service load balancers aren't efficient in a dynamic world.</span>
|
||||
<div id='discovery-challenge-animation' class='g-animation-block'>
|
||||
<%= inline_svg 'consul-connect/svgs/discovery-challenge.svg' %>
|
||||
</div>
|
||||
<p>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.</p>
|
||||
<p class="g-type-body">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.</p>
|
||||
</div>
|
||||
<div>
|
||||
<span class='dot'></span>
|
||||
<h3>The Solution</h3>
|
||||
<span class='sub-heading'>Service discovery for dynamic infrastructure.</span>
|
||||
<h2 class="g-type-display-4">The Solution</h2>
|
||||
<span class='sub-heading g-type-body-large'>Service discovery for dynamic infrastructure.</span>
|
||||
<div id='discovery-solution-animation' class='g-animation-block'>
|
||||
<%= inline_svg 'consul-connect/svgs/discovery-solution.svg' %>
|
||||
</div>
|
||||
<p>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.</p>
|
||||
<p class="g-type-body">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.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -56,15 +56,15 @@ description: |-
|
|||
<section class='g-section border-top'>
|
||||
<div class='g-container'>
|
||||
<div class='intro'>
|
||||
<h2>Features</h2>
|
||||
<h2 class="g-type-display-2">Features</h2>
|
||||
</div>
|
||||
<div class='g-text-asset large'>
|
||||
<div>
|
||||
<div>
|
||||
<h3>Service Registry</h3>
|
||||
<p>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.</p>
|
||||
<h3 class="g-type-display-3">Service Registry</h3>
|
||||
<p class="g-type-body">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.</p>
|
||||
<p>
|
||||
<a class="learn-more" href="https://learn.hashicorp.com/consul/getting-started/services">Learn more<svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 6 10"><g fill="none" fill-rule="evenodd" transform="translate(-6 -3)"><mask id="a" fill="#fff"><path d="M7.138 3.529a.666.666 0 1 0-.942.942l3.528 3.53-3.529 3.528a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z"/></mask><g fill="#1563FF" mask="url(#a)"><path d="M0 0h16v16H0z"/></g></g></svg></a>
|
||||
<a class="learn-more g-type-buttons-and-standalone-links" href="https://learn.hashicorp.com/consul/getting-started/services">Learn more<svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 6 10"><g fill="none" fill-rule="evenodd" transform="translate(-6 -3)"><mask id="a" fill="#fff"><path d="M7.138 3.529a.666.666 0 1 0-.942.942l3.528 3.53-3.529 3.528a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z"/></mask><g fill="#1563FF" mask="url(#a)"><path d="M0 0h16v16H0z"/></g></g></svg></a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -90,10 +90,10 @@ description: |-
|
|||
<div class='g-text-asset reverse'>
|
||||
<div>
|
||||
<div>
|
||||
<h3>DNS Query Interface</h3>
|
||||
<p>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.</p>
|
||||
<h3 class="g-type-display-3">DNS Query Interface</h3>
|
||||
<p class="g-type-body">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.</p>
|
||||
<p>
|
||||
<a class="learn-more" href="https://learn.hashicorp.com/consul/getting-started/services#querying-services">Learn more<svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 6 10"><g fill="none" fill-rule="evenodd" transform="translate(-6 -3)"><mask id="a" fill="#fff"><path d="M7.138 3.529a.666.666 0 1 0-.942.942l3.528 3.53-3.529 3.528a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z"/></mask><g fill="#1563FF" mask="url(#a)"><path d="M0 0h16v16H0z"/></g></g></svg></a>
|
||||
<a class="learn-more g-type-buttons-and-standalone-links" href="https://learn.hashicorp.com/consul/getting-started/services#querying-services">Learn more<svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 6 10"><g fill="none" fill-rule="evenodd" transform="translate(-6 -3)"><mask id="a" fill="#fff"><path d="M7.138 3.529a.666.666 0 1 0-.942.942l3.528 3.53-3.529 3.528a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z"/></mask><g fill="#1563FF" mask="url(#a)"><path d="M0 0h16v16H0z"/></g></g></svg></a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -127,10 +127,10 @@ web-frontend.service.consul. 0 IN A <code class='keyword'>10.0.1.109</code></cod
|
|||
<div class='g-text-asset'>
|
||||
<div>
|
||||
<div>
|
||||
<h3>HTTP API with Edge Triggers</h3>
|
||||
<p>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.</p>
|
||||
<h3 class="g-type-display-3">HTTP API with Edge Triggers</h3>
|
||||
<p class="g-type-body">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.</p>
|
||||
<p>
|
||||
<a class="learn-more" href="https://learn.hashicorp.com/consul/getting-started/services#http-api">Learn more<svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 6 10"><g fill="none" fill-rule="evenodd" transform="translate(-6 -3)"><mask id="a" fill="#fff"><path d="M7.138 3.529a.666.666 0 1 0-.942.942l3.528 3.53-3.529 3.528a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z"/></mask><g fill="#1563FF" mask="url(#a)"><path d="M0 0h16v16H0z"/></g></g></svg></a>
|
||||
<a class="learn-more g-type-buttons-and-standalone-links" href="https://learn.hashicorp.com/consul/getting-started/services#http-api">Learn more<svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 6 10"><g fill="none" fill-rule="evenodd" transform="translate(-6 -3)"><mask id="a" fill="#fff"><path d="M7.138 3.529a.666.666 0 1 0-.942.942l3.528 3.53-3.529 3.528a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z"/></mask><g fill="#1563FF" mask="url(#a)"><path d="M0 0h16v16H0z"/></g></g></svg></a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -164,10 +164,10 @@ web-frontend.service.consul. 0 IN A <code class='keyword'>10.0.1.109</code></cod
|
|||
<div class='g-text-asset reverse'>
|
||||
<div>
|
||||
<div>
|
||||
<h3>Multi Datacenter</h3>
|
||||
<p>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.</p>
|
||||
<h3 class="g-type-display-3">Multi Datacenter</h3>
|
||||
<p class="g-type-body">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.</p>
|
||||
<p>
|
||||
<a class="learn-more" href='https://learn.hashicorp.com/consul/security-networking/datacenters'>Learn more<svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 6 10"><g fill="none" fill-rule="evenodd" transform="translate(-6 -3)"><mask id="a" fill="#fff"><path d="M7.138 3.529a.666.666 0 1 0-.942.942l3.528 3.53-3.529 3.528a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z"/></mask><g fill="#1563FF" mask="url(#a)"><path d="M0 0h16v16H0z"/></g></g></svg></a>
|
||||
<a class="learn-more g-type-buttons-and-standalone-links" href='https://learn.hashicorp.com/consul/security-networking/datacenters'>Learn more<svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 6 10"><g fill="none" fill-rule="evenodd" transform="translate(-6 -3)"><mask id="a" fill="#fff"><path d="M7.138 3.529a.666.666 0 1 0-.942.942l3.528 3.53-3.529 3.528a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z"/></mask><g fill="#1563FF" mask="url(#a)"><path d="M0 0h16v16H0z"/></g></g></svg></a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -208,10 +208,10 @@ $ curl http://localhost:8500/v1/catalog/nodes?<code class='keyword'>dc=dc2</code
|
|||
<div class='g-text-asset large'>
|
||||
<div>
|
||||
<div>
|
||||
<h3>Health Checks</h3>
|
||||
<p>Pairing service discovery with health checking prevents routing requests to unhealthy hosts and enables services to easily provide circuit breakers.</p>
|
||||
<h3 class="g-type-display-3">Health Checks</h3>
|
||||
<p class="g-type-body">Pairing service discovery with health checking prevents routing requests to unhealthy hosts and enables services to easily provide circuit breakers.</p>
|
||||
<p>
|
||||
<a class="learn-more" href="https://learn.hashicorp.com/consul/getting-started/services">Learn more<svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 6 10"><g fill="none" fill-rule="evenodd" transform="translate(-6 -3)"><mask id="a" fill="#fff"><path d="M7.138 3.529a.666.666 0 1 0-.942.942l3.528 3.53-3.529 3.528a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z"/></mask><g fill="#1563FF" mask="url(#a)"><path d="M0 0h16v16H0z"/></g></g></svg></a>
|
||||
<a class="learn-more g-type-buttons-and-standalone-links" href="https://learn.hashicorp.com/consul/getting-started/services">Learn more<svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 6 10"><g fill="none" fill-rule="evenodd" transform="translate(-6 -3)"><mask id="a" fill="#fff"><path d="M7.138 3.529a.666.666 0 1 0-.942.942l3.528 3.53-3.529 3.528a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z"/></mask><g fill="#1563FF" mask="url(#a)"><path d="M0 0h16v16H0z"/></g></g></svg></a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -235,7 +235,7 @@ $ curl http://localhost:8500/v1/catalog/nodes?<code class='keyword'>dc=dc2</code
|
|||
<section class='g-section bg-dark'>
|
||||
<div class='g-container'>
|
||||
<div class='intro'>
|
||||
<h2>Case Studies</h2>
|
||||
<h2 class="g-type-display-2">Case Studies</h2>
|
||||
</div>
|
||||
<div class='g-carousel'>
|
||||
<div class='siema'>
|
||||
|
|
@ -244,10 +244,10 @@ $ curl http://localhost:8500/v1/catalog/nodes?<code class='keyword'>dc=dc2</code
|
|||
<img src='/assets/images/consul-connect/case-studies/case-study_01.jpg' alt=''>
|
||||
</div>
|
||||
<div class='content'>
|
||||
<span class='tag video'>Video</span>
|
||||
<h4>Twitch - Driving Towards a Modern Infrastructure</h4>
|
||||
<p>In this talk from HashiConf 2015, Tarrant Rollins discusses how Twitch uses HashiCorp Consul to overcome legacy infrastructure and solve complex problems.</p>
|
||||
<span>Watch</span>
|
||||
<span class='tag video g-type-label'>Video</span>
|
||||
<h3 class="g-type-display-4">Twitch - Driving Towards a Modern Infrastructure</h3>
|
||||
<p class="g-type-body">In this talk from HashiConf 2015, Tarrant Rollins discusses how Twitch uses HashiCorp Consul to overcome legacy infrastructure and solve complex problems.</p>
|
||||
<span class="g-type-buttons-and-standalone-links">Watch</span>
|
||||
</div>
|
||||
</a>
|
||||
<a class='card' href='https://www.hashicorp.com/resources/jet-com-nomad-auto-proxy-consul-template-nginx'>
|
||||
|
|
@ -255,10 +255,10 @@ $ curl http://localhost:8500/v1/catalog/nodes?<code class='keyword'>dc=dc2</code
|
|||
<img src='/assets/images/consul-connect/case-studies/case-study_02.jpg' alt=''>
|
||||
</div>
|
||||
<div class='content'>
|
||||
<span class='tag video'>Video</span>
|
||||
<h4>Jet.com - Nomad Auto-Proxy with Consul-Template and NGINX</h4>
|
||||
<p>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.</p>
|
||||
<span>Watch</span>
|
||||
<span class='tag video g-type-label'>Video</span>
|
||||
<h3 class="g-type-display-4">Jet.com - Nomad Auto-Proxy with Consul-Template and NGINX</h3>
|
||||
<p class="g-type-body">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.</p>
|
||||
<span class="g-type-buttons-and-standalone-links">Watch</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -278,14 +278,14 @@ $ curl http://localhost:8500/v1/catalog/nodes?<code class='keyword'>dc=dc2</code
|
|||
|
||||
<section class='g-section g-cta-section'>
|
||||
<div>
|
||||
<h2>Ready to get started?</h2>
|
||||
<a href="/downloads.html" class="g-btn white download">
|
||||
<h2 class="g-type-display-2">Ready to get started?</h2>
|
||||
<a href="/downloads.html" class="button download white">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="22" viewBox="0 0 20 22">
|
||||
<path d="M9.292 15.706a1 1 0 0 0 1.416 0l3.999-3.999a1 1 0 1 0-1.414-1.414L11 12.586V1a1 1 0 1 0-2 0v11.586l-2.293-2.293a1 1 0 1 0-1.414 1.414l3.999 3.999zM20 16v3c0 1.654-1.346 3-3 3H3c-1.654 0-3-1.346-3-3v-3a1 1 0 1 1 2 0v3c0 .551.448 1 1 1h14c.552 0 1-.449 1-1v-3a1 1 0 1 1 2 0z"/>
|
||||
</svg>
|
||||
Download
|
||||
</a>
|
||||
<a href="https://learn.hashicorp.com/consul/getting-started/services" class="g-btn white-outline">Explore docs</a>
|
||||
<a href="https://learn.hashicorp.com/consul/getting-started/services" class="button secondary white">Explore docs</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ description: |-
|
|||
<div class="col-md-12 download">
|
||||
<div class="icon pull-left"><%= system_icon(os) %></div>
|
||||
<div class="details">
|
||||
<h2 class="os-name"><%= pretty_os(os) %></h2>
|
||||
<h2 class="os-name g-type-display-4"><%= pretty_os(os) %></h2>
|
||||
<ul>
|
||||
<% arches.each do |arch, url| %>
|
||||
<li><a href="<%= url %>"><%= pretty_arch(arch) %></a></li>
|
||||
|
|
|
|||
|
|
@ -6,32 +6,32 @@ description: |-
|
|||
|
||||
<div class='consul-connect'>
|
||||
<section id='home-hero'>
|
||||
<div class="g-container">
|
||||
<div class='g-container'>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<h1>Easy Service Networking</h1>
|
||||
<p>Consul is a service networking solution to connect and secure services across any runtime platform and public or private cloud</p>
|
||||
<a href='/downloads.html' class='g-btn download'>
|
||||
<h1 class='g-type-display-1'>Easy Service Networking</h1>
|
||||
<p class='g-type-body-large'>Consul is a service networking solution to connect and secure services across any runtime platform and public or private cloud.</p>
|
||||
<a href='/downloads.html' class='button download'>
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='20' height='22' viewBox='0 0 20 22'>
|
||||
<path d='M9.292 15.706a1 1 0 0 0 1.416 0l3.999-3.999a1 1 0 1 0-1.414-1.414L11 12.586V1a1 1 0 1 0-2 0v11.586l-2.293-2.293a1 1 0 1 0-1.414 1.414l3.999 3.999zM20 16v3c0 1.654-1.346 3-3 3H3c-1.654 0-3-1.346-3-3v-3a1 1 0 1 1 2 0v3c0 .551.448 1 1 1h14c.552 0 1-.449 1-1v-3a1 1 0 1 1 2 0z'/>
|
||||
</svg>
|
||||
Download
|
||||
</a>
|
||||
<a href="https://learn.hashicorp.com/consul/getting-started/install" class='g-btn dark-outline'>Get Started</a>
|
||||
<a href='https://learn.hashicorp.com/consul/getting-started/install' class='button secondary'>Get Started</a>
|
||||
<div>
|
||||
<a href='https://demo.consul.io/' class='secondary-link'>View demo of web UI</a>
|
||||
<a href='https://demo.consul.io/' class='secondary-link g-type-buttons-and-standalone-links'>View demo of web UI</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class='controls'>
|
||||
<div data-index='0'>
|
||||
<span>CLI</span>
|
||||
<span class='g-type-buttons-and-standalone-links'>CLI</span>
|
||||
<div class='progress-bar'><span></span></div>
|
||||
</div>
|
||||
<div data-index='1'>
|
||||
<span>UI</span>
|
||||
<span class='g-type-buttons-and-standalone-links'>UI</span>
|
||||
<div class='progress-bar'><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -68,8 +68,8 @@ description: |-
|
|||
<section id='static-dynamic' class='g-section bg-light'>
|
||||
<div class='g-container'>
|
||||
<div class='intro'>
|
||||
<h2>Service-based networking for dynamic infrastructure</h2>
|
||||
<p>The shift from static infrastructure to dynamic
|
||||
<h2 class="g-type-display-2">Service-based networking for dynamic infrastructure</h2>
|
||||
<p class="g-type-body-large">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: |-
|
|||
</svg>
|
||||
</span>
|
||||
<span class='dot'></span>
|
||||
<h3>Static</h3>
|
||||
<span class='sub-heading'>Host-based networking</span>
|
||||
<h3 class="g-type-display-3">Static</h3>
|
||||
<span class='sub-heading g-type-body'>Host-based networking</span>
|
||||
<img src='/assets/images/consul-connect/svgs/static.svg' alt='static, host-based networking' class='static-callout' />
|
||||
</div>
|
||||
<div>
|
||||
<span class='dot'></span>
|
||||
<h3>Dynamic</h3>
|
||||
<span class='sub-heading'>Service-based networking</span>
|
||||
<h3 class="g-type-display-3">Dynamic</h3>
|
||||
<span class='sub-heading g-type-body'>Service-based networking</span>
|
||||
<div id='index-dynamic-animation'>
|
||||
<%= inline_svg 'consul-connect/svgs/dynamic.svg' %>
|
||||
</div>
|
||||
|
|
@ -103,29 +103,29 @@ description: |-
|
|||
<section id='use-cases' class='g-section'>
|
||||
<div class='g-container'>
|
||||
<div class='intro'>
|
||||
<h2>Use Cases</h2>
|
||||
<p>Consul can be run as a platform to solve a range of use-cases
|
||||
in service networking.</p>
|
||||
<h2 class="g-type-display-2">Use Cases</h2>
|
||||
<p class="g-type-body-large">Consul can be run as a platform to solve a range of use-cases
|
||||
in service networking.</p>
|
||||
</div>
|
||||
<div class='g-use-cases'>
|
||||
<div>
|
||||
<div>
|
||||
<img src='/assets/images/consul-connect/svgs/discovery-simple.svg' alt='Service Discovery'>
|
||||
<h3>Service Discovery</h3>
|
||||
<p>Use the service registry to address and discover services across multiple runtime platforms, cloud providers and regions.</p>
|
||||
<h3 class="g-type-display-3">Service Discovery</h3>
|
||||
<p class="g-type-body">Use the service registry to address and discover services across multiple runtime platforms, cloud providers and regions.</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href='/discovery.html' class='g-btn dark-outline'>Learn more</a>
|
||||
<a href='/discovery.html' class='button secondary'>Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<img src='/assets/images/consul-connect/svgs/segmentation-simple.svg' alt='Service Mesh'>
|
||||
<h3>Service Mesh</h3>
|
||||
<p>Service discovery, identity-based authorization, and L7 traffic management abstracted from application code with proxies in the service mesh pattern.</p>
|
||||
<h3 class="g-type-display-3">Service Mesh</h3>
|
||||
<p class="g-type-body">Service discovery, identity-based authorization, and L7 traffic management abstracted from application code with proxies in the service mesh pattern.</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href='/mesh.html' class='g-btn dark-outline'>Learn more</a>
|
||||
<a href='/mesh.html' class='button secondary'>Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -135,13 +135,13 @@ description: |-
|
|||
<section class='g-section bg-light'>
|
||||
<div class='g-container'>
|
||||
<div class='intro'>
|
||||
<h2>Consul Principles</h2>
|
||||
<h2 class="g-type-display-2">Consul Principles</h2>
|
||||
</div>
|
||||
<div class='g-text-asset'>
|
||||
<div>
|
||||
<div>
|
||||
<h3>API-Driven</h3>
|
||||
<p>Codify and automate service definitions, health checks, service
|
||||
<h3 class='g-type-display-3'>API-Driven</h3>
|
||||
<p class='g-type-body'>Codify and automate service definitions, health checks, service
|
||||
authorization policies, failover logic, and more.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -173,20 +173,20 @@ description: |-
|
|||
<div class='g-text-asset reverse'>
|
||||
<div>
|
||||
<div>
|
||||
<h3>Run and Connect Anywhere</h3>
|
||||
<p>Connect services across any runtime platform and public or private cloud. Connect services from Kubernetes to VMs, Containers to Serverless functions.</p>
|
||||
<h3 class='g-type-display-3'>Run and Connect Anywhere</h3>
|
||||
<p class='g-type-body'>Connect services across any runtime platform and public or private cloud. Connect services from Kubernetes to VMs, Containers to Serverless functions.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<picture>
|
||||
<source type="image/webp" srcset="
|
||||
<source type='image/webp' srcset='
|
||||
/assets/images/consul-connect/grid_1/grid_1_300.webp 300w,
|
||||
/assets/images/consul-connect/grid_1/grid_1_715.webp 715w,
|
||||
/assets/images/consul-connect/grid_1/grid_1_1256.webp 1256w" />
|
||||
<source type="image/png" srcset="
|
||||
/assets/images/consul-connect/grid_1/grid_1_1256.webp 1256w' />
|
||||
<source type='image/png' srcset='
|
||||
/assets/images/consul-connect/grid_1/grid_1_300.png 300w,
|
||||
/assets/images/consul-connect/grid_1/grid_1_715.png 715w,
|
||||
/assets/images/consul-connect/grid_1/grid_1_1256.png 1256w" />
|
||||
/assets/images/consul-connect/grid_1/grid_1_1256.png 1256w' />
|
||||
<img src='/assets/images/consul-connect/grid_1/grid_1_1256.png' alt='Run and Connect Anywhere'>
|
||||
</picture>
|
||||
</div>
|
||||
|
|
@ -199,22 +199,22 @@ description: |-
|
|||
<div class='g-text-asset'>
|
||||
<div>
|
||||
<div>
|
||||
<h3>Extend and Integrate</h3>
|
||||
<p>
|
||||
<h3 class='g-type-display-3'>Extend and Integrate</h3>
|
||||
<p class='g-type-body'>
|
||||
Provision clusters on any infrastructure, connect to services over TLS via proxy integrations, and Serve TLS certificates with pluggable Certificate Authorities.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<picture>
|
||||
<source type="image/webp" srcset="
|
||||
<source type='image/webp' srcset='
|
||||
/assets/images/consul-connect/grid_2/grid_2_300.webp 300w,
|
||||
/assets/images/consul-connect/grid_2/grid_2_704.webp 704w,
|
||||
/assets/images/consul-connect/grid_2/grid_2_1256.webp 1256w" />
|
||||
<source type="image/png" srcset="
|
||||
/assets/images/consul-connect/grid_2/grid_2_1256.webp 1256w' />
|
||||
<source type='image/png' srcset='
|
||||
/assets/images/consul-connect/grid_2/grid_2_300.png 300w,
|
||||
/assets/images/consul-connect/grid_2/grid_2_704.png 704w,
|
||||
/assets/images/consul-connect/grid_2/grid_2_1256.png 1256w" />
|
||||
/assets/images/consul-connect/grid_2/grid_2_1256.png 1256w' />
|
||||
<img src='/assets/images/consul-connect/grid_2/grid_2_1256.png' alt='Extend and Integrate'>
|
||||
</picture>
|
||||
</div>
|
||||
|
|
@ -225,7 +225,7 @@ description: |-
|
|||
<section class='g-section'>
|
||||
<div class='g-container'>
|
||||
<div class='intro'>
|
||||
<h3>Companies that trust Consul</h3>
|
||||
<h2 class="g-type-display-3">Companies that trust Consul</h2>
|
||||
</div>
|
||||
<div class='g-logo-grid'>
|
||||
<div>
|
||||
|
|
@ -256,9 +256,9 @@ description: |-
|
|||
<div>
|
||||
<%= inline_svg 'consul-connect/logos/consul-logo.svg' %>
|
||||
</div>
|
||||
<p>Consul Open Source addresses the technical complexity of connecting services across distributed infrastructure.</p>
|
||||
<p class="g-type-body">Consul Open Source addresses the technical complexity of connecting services across distributed infrastructure.</p>
|
||||
<div>
|
||||
<a href='/downloads.html' class='g-btn white download'>
|
||||
<a href='/downloads.html' class='button white download'>
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='20' height='22' viewBox='0 0 20 22'>
|
||||
<path d='M9.292 15.706a1 1 0 0 0 1.416 0l3.999-3.999a1 1 0 1 0-1.414-1.414L11 12.586V1a1 1 0 1 0-2 0v11.586l-2.293-2.293a1 1 0 1 0-1.414 1.414l3.999 3.999zM20 16v3c0 1.654-1.346 3-3 3H3c-1.654 0-3-1.346-3-3v-3a1 1 0 1 1 2 0v3c0 .551.448 1 1 1h14c.552 0 1-.449 1-1v-3a1 1 0 1 1 2 0z'/>
|
||||
</svg>
|
||||
|
|
@ -272,9 +272,9 @@ description: |-
|
|||
<div>
|
||||
<%= inline_svg 'consul-connect/logos/consul-enterprise-logo.svg' %>
|
||||
</div>
|
||||
<p>Consul Enterprise addresses the organizational complexity of large user bases and compliance requirements with collaboration and governance features.</p>
|
||||
<p class="g-type-body">Consul Enterprise addresses the organizational complexity of large user bases and compliance requirements with collaboration and governance features.</p>
|
||||
<div>
|
||||
<a href='https://www.hashicorp.com/products/consul' class='g-btn white-outline'>Learn More</a>
|
||||
<a href='https://www.hashicorp.com/products/consul' class='button secondary white'>Learn More</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<% wrap_layout :inner do %>
|
||||
<% content_for :sidebar do %>
|
||||
<ul class="nav docs-sidenav">
|
||||
<ul class="nav docs-sidenav g-type-body-small">
|
||||
<li<%= sidebar_current("api-introduction") %>>
|
||||
<a href="/api/index.html">API Introduction</a>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<% wrap_layout :inner do %>
|
||||
<% content_for :sidebar do %>
|
||||
<ul class="nav docs-sidenav">
|
||||
<ul class="nav docs-sidenav g-type-body-small">
|
||||
<li<%= sidebar_current('docs-install') %>>
|
||||
<a href="/docs/install/index.html">Installing Consul</a>
|
||||
<ul class="nav">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<% wrap_layout :inner do %>
|
||||
<% content_for :sidebar do %>
|
||||
<ul class="nav docs-sidenav">
|
||||
<ul class="nav docs-sidenav g-type-body-small">
|
||||
<li<%= sidebar_current("downloads-consul") %>>
|
||||
<a href="/downloads.html">Download Consul</a>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<% wrap_layout :inner do %>
|
||||
<% content_for :sidebar do %>
|
||||
<ul class="nav docs-sidenav">
|
||||
<ul class="nav docs-sidenav g-type-body-small">
|
||||
<li<%= sidebar_current("what") %>>
|
||||
<a href="/intro/index.html">What is Consul?</a>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -7,16 +7,16 @@ description: |-
|
|||
<div class='consul-connect'>
|
||||
|
||||
<section class='g-hero'>
|
||||
<h1>Service Mesh made easy</h1>
|
||||
<p>Service discovery, identity-based authorization, and L7 traffic management abstracted from application code with proxies in the service mesh pattern</p>
|
||||
<h1 class="g-type-display-1">Service Mesh made easy</h1>
|
||||
<p class="g-type-body-large">Service discovery, identity-based authorization, and L7 traffic management abstracted from application code with proxies in the service mesh pattern</p>
|
||||
<div>
|
||||
<a href="/downloads.html" class="g-btn download">
|
||||
<a href="/downloads.html" class="button download">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="22" viewBox="0 0 20 22">
|
||||
<path d="M9.292 15.706a1 1 0 0 0 1.416 0l3.999-3.999a1 1 0 1 0-1.414-1.414L11 12.586V1a1 1 0 1 0-2 0v11.586l-2.293-2.293a1 1 0 1 0-1.414 1.414l3.999 3.999zM20 16v3c0 1.654-1.346 3-3 3H3c-1.654 0-3-1.346-3-3v-3a1 1 0 1 1 2 0v3c0 .551.448 1 1 1h14c.552 0 1-.449 1-1v-3a1 1 0 1 1 2 0z"/>
|
||||
</svg>
|
||||
Download
|
||||
</a>
|
||||
<a href="/docs/connect/index.html" class="g-btn dark-outline">Explore Docs</a>
|
||||
<a href="/docs/connect/index.html" class="button secondary">Explore Docs</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -31,12 +31,12 @@ description: |-
|
|||
</svg>
|
||||
</span>
|
||||
<span class='dot'></span>
|
||||
<h3>The Challenge</h3>
|
||||
<span class='sub-heading'>Network appliances, like load balancers or firewalls with manual processes, don't scale in dynamic settings to support modern applications.</span>
|
||||
<h2 class="g-type-display-4">The Challenge</h2>
|
||||
<span class='sub-heading g-type-body-large'>Network appliances, like load balancers or firewalls with manual processes, don't scale in dynamic settings to support modern applications.</span>
|
||||
<div id='segmentation-challenge-animation' class='g-animation-block'>
|
||||
<%= inline_svg 'consul-connect/svgs/segmentation-challenge.svg' %>
|
||||
</div>
|
||||
<p>East-west firewalls use IP-based rules to secure ingress and
|
||||
<p class="g-type-body">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: |-
|
|||
</div>
|
||||
<div>
|
||||
<span class='dot'></span>
|
||||
<h3>The Solution</h3>
|
||||
<span class='sub-heading'>Service mesh as an automated and distributed approach to networking and security that can operate across platforms and private and public cloud</span>
|
||||
<h2 class="g-type-display-4">The Solution</h2>
|
||||
<span class='sub-heading g-type-body-large'>Service mesh as an automated and distributed approach to networking and security that can operate across platforms and private and public cloud</span>
|
||||
<div id='segmentation-solution-animation' class='g-animation-block'>
|
||||
<%= inline_svg 'consul-connect/svgs/segmentation-solution.svg' %>
|
||||
</div>
|
||||
<p>Service mesh is a new approach to secure the service itself
|
||||
<p class="g-type-body">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: |-
|
|||
<section class='g-section border-top'>
|
||||
<div class='g-container'>
|
||||
<div class='intro'>
|
||||
<h2>Features</h2>
|
||||
<h2 class="g-type-display-2">Features</h2>
|
||||
</div>
|
||||
<div class='g-text-asset reverse'>
|
||||
<div>
|
||||
<div>
|
||||
<h3>Layer 7 Traffic Management</h3>
|
||||
<p>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.</p>
|
||||
<h3 class="g-type-display-3">Layer 7 Traffic Management</h3>
|
||||
<p class="g-type-body">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.</p>
|
||||
<p>
|
||||
<a class="learn-more" href='/docs/connect/l7-traffic-management.html'>Learn more<svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 6 10"><g fill="none" fill-rule="evenodd" transform="translate(-6 -3)"><mask id="a" fill="#fff"><path d="M7.138 3.529a.666.666 0 1 0-.942.942l3.528 3.53-3.529 3.528a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z"/></mask><g fill="#1563FF" mask="url(#a)"><path d="M0 0h16v16H0z"/></g></g></svg></a>
|
||||
<a class="learn-more g-type-buttons-and-standalone-links" href='/docs/connect/l7-traffic-management.html'>Learn more<svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 6 10"><g fill="none" fill-rule="evenodd" transform="translate(-6 -3)"><mask id="a" fill="#fff"><path d="M7.138 3.529a.666.666 0 1 0-.942.942l3.528 3.53-3.529 3.528a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z"/></mask><g fill="#1563FF" mask="url(#a)"><path d="M0 0h16v16H0z"/></g></g></svg></a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -105,10 +105,10 @@ Splits = [
|
|||
<div class='g-text-asset large'>
|
||||
<div>
|
||||
<div>
|
||||
<h3>Layer 7 Observability</h3>
|
||||
<p>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.</p>
|
||||
<h3 class="g-type-display-3">Layer 7 Observability</h3>
|
||||
<p class="g-type-body">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.</p>
|
||||
<p>
|
||||
<a class="learn-more" href='/docs/connect/observability.html'>Learn more<svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 6 10"><g fill="none" fill-rule="evenodd" transform="translate(-6 -3)"><mask id="a" fill="#fff"><path d="M7.138 3.529a.666.666 0 1 0-.942.942l3.528 3.53-3.529 3.528a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z"/></mask><g fill="#1563FF" mask="url(#a)"><path d="M0 0h16v16H0z"/></g></g></svg></a>
|
||||
<a class="learn-more g-type-buttons-and-standalone-links" href='/docs/connect/observability.html'>Learn more<svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 6 10"><g fill="none" fill-rule="evenodd" transform="translate(-6 -3)"><mask id="a" fill="#fff"><path d="M7.138 3.529a.666.666 0 1 0-.942.942l3.528 3.53-3.529 3.528a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z"/></mask><g fill="#1563FF" mask="url(#a)"><path d="M0 0h16v16H0z"/></g></g></svg></a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -131,10 +131,10 @@ Splits = [
|
|||
<div class='g-text-asset reverse'>
|
||||
<div>
|
||||
<div>
|
||||
<h3>Secure services across any runtime platform</h3>
|
||||
<p>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.</p>
|
||||
<h3 class="g-type-display-3">Secure services across any runtime platform</h3>
|
||||
<p class="g-type-body">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.</p>
|
||||
<p>
|
||||
<a class="learn-more" href='/docs/connect/proxies.html'>Learn more<svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 6 10"><g fill="none" fill-rule="evenodd" transform="translate(-6 -3)"><mask id="a" fill="#fff"><path d="M7.138 3.529a.666.666 0 1 0-.942.942l3.528 3.53-3.529 3.528a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z"/></mask><g fill="#1563FF" mask="url(#a)"><path d="M0 0h16v16H0z"/></g></g></svg></a>
|
||||
<a class="learn-more g-type-buttons-and-standalone-links" href='/docs/connect/proxies.html'>Learn more<svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 6 10"><g fill="none" fill-rule="evenodd" transform="translate(-6 -3)"><mask id="a" fill="#fff"><path d="M7.138 3.529a.666.666 0 1 0-.942.942l3.528 3.53-3.529 3.528a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z"/></mask><g fill="#1563FF" mask="url(#a)"><path d="M0 0h16v16H0z"/></g></g></svg></a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -160,10 +160,10 @@ Splits = [
|
|||
<div class='g-text-asset'>
|
||||
<div>
|
||||
<div>
|
||||
<h3>Certificate-Based Service Identity</h3>
|
||||
<p>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.</p>
|
||||
<h3 class="g-type-display-3">Certificate-Based Service Identity</h3>
|
||||
<p class="g-type-body">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.</p>
|
||||
<p>
|
||||
<a class="learn-more" href='/docs/connect/ca.html'>Learn more<svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 6 10"><g fill="none" fill-rule="evenodd" transform="translate(-6 -3)"><mask id="a" fill="#fff"><path d="M7.138 3.529a.666.666 0 1 0-.942.942l3.528 3.53-3.529 3.528a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z"/></mask><g fill="#1563FF" mask="url(#a)"><path d="M0 0h16v16H0z"/></g></g></svg></a>
|
||||
<a class="learn-more g-type-buttons-and-standalone-links" href='/docs/connect/ca.html'>Learn more<svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 6 10"><g fill="none" fill-rule="evenodd" transform="translate(-6 -3)"><mask id="a" fill="#fff"><path d="M7.138 3.529a.666.666 0 1 0-.942.942l3.528 3.53-3.529 3.528a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z"/></mask><g fill="#1563FF" mask="url(#a)"><path d="M0 0h16v16H0z"/></g></g></svg></a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -182,10 +182,10 @@ Splits = [
|
|||
<div class='g-text-asset reverse'>
|
||||
<div>
|
||||
<div>
|
||||
<h3>Encrypted communication</h3>
|
||||
<p>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.</p>
|
||||
<h3 class="g-type-display-3">Encrypted communication</h3>
|
||||
<p class="g-type-body">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.</p>
|
||||
<p>
|
||||
<a class="learn-more" href='/docs/connect/security.html'>Learn more<svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 6 10"><g fill="none" fill-rule="evenodd" transform="translate(-6 -3)"><mask id="a" fill="#fff"><path d="M7.138 3.529a.666.666 0 1 0-.942.942l3.528 3.53-3.529 3.528a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z"/></mask><g fill="#1563FF" mask="url(#a)"><path d="M0 0h16v16H0z"/></g></g></svg></a>
|
||||
<a class="learn-more g-type-buttons-and-standalone-links" href='/docs/connect/security.html'>Learn more<svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 6 10"><g fill="none" fill-rule="evenodd" transform="translate(-6 -3)"><mask id="a" fill="#fff"><path d="M7.138 3.529a.666.666 0 1 0-.942.942l3.528 3.53-3.529 3.528a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z"/></mask><g fill="#1563FF" mask="url(#a)"><path d="M0 0h16v16H0z"/></g></g></svg></a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -228,16 +228,16 @@ Secure Sockets Layer
|
|||
<div class='g-text-asset'>
|
||||
<div>
|
||||
<div>
|
||||
<h3>Mesh Gateway</h3>
|
||||
<p>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.</p>
|
||||
<h3 class="g-type-display-3">Mesh Gateway</h3>
|
||||
<p class="g-type-body">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.</p>
|
||||
<p>
|
||||
<a class="learn-more" href='/docs/connect/mesh_gateway.html'>Learn more<svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 6 10"><g fill="none" fill-rule="evenodd" transform="translate(-6 -3)"><mask id="a" fill="#fff"><path d="M7.138 3.529a.666.666 0 1 0-.942.942l3.528 3.53-3.529 3.528a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z"/></mask><g fill="#1563FF" mask="url(#a)"><path d="M0 0h16v16H0z"/></g></g></svg></a>
|
||||
<a class="learn-more g-type-buttons-and-standalone-links" href='/docs/connect/mesh_gateway.html'>Learn more<svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 6 10"><g fill="none" fill-rule="evenodd" transform="translate(-6 -3)"><mask id="a" fill="#fff"><path d="M7.138 3.529a.666.666 0 1 0-.942.942l3.528 3.53-3.529 3.528a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z"/></mask><g fill="#1563FF" mask="url(#a)"><path d="M0 0h16v16H0z"/></g></g></svg></a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<picture>
|
||||
<img src='/assets/images/consul-connect/mesh-gateway/gateway_1200.png' style='width:600px' alt='Mesh gateway diagram'>
|
||||
<img src='/assets/images/consul-connect/mesh-gateway/gateway_1200.png' alt='Mesh gateway diagram'>
|
||||
</picture>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -247,14 +247,14 @@ Secure Sockets Layer
|
|||
|
||||
<section class='g-section g-cta-section'>
|
||||
<div>
|
||||
<h2>Ready to get started?</h2>
|
||||
<a href="/downloads.html" class="g-btn white download">
|
||||
<h2 class="g-type-display-2">Ready to get started?</h2>
|
||||
<a href="/downloads.html" class="button white download">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="22" viewBox="0 0 20 22">
|
||||
<path d="M9.292 15.706a1 1 0 0 0 1.416 0l3.999-3.999a1 1 0 1 0-1.414-1.414L11 12.586V1a1 1 0 1 0-2 0v11.586l-2.293-2.293a1 1 0 1 0-1.414 1.414l3.999 3.999zM20 16v3c0 1.654-1.346 3-3 3H3c-1.654 0-3-1.346-3-3v-3a1 1 0 1 1 2 0v3c0 .551.448 1 1 1h14c.552 0 1-.449 1-1v-3a1 1 0 1 1 2 0z"/>
|
||||
</svg>
|
||||
Download
|
||||
</a>
|
||||
<a href="https://learn.hashicorp.com/consul/getting-started/connect" class="g-btn white-outline">Try it out</a>
|
||||
<a href="https://learn.hashicorp.com/consul/getting-started/connect" class="button white secondary">Try it out</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue