diff --git a/website/source/index.html.erb b/website/source/index.html.erb index 6b2c1aa4d..8cf86e815 100644 --- a/website/source/index.html.erb +++ b/website/source/index.html.erb @@ -18,63 +18,36 @@ -
+
-
+
-
-
- -
-
-

Service Discovery

-

- Terraform makes it simple for services to register themselves - and to discover other services via a DNS or HTTP interface. - Register external services such as SaaS providers as well.

-
-
+

Automatically build infrastructure from code

-
-
- -
-
-

Failure Detection

-

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

-
-
-
+

$ terraform apply

+
- -
-
-
-
- -
-
-

Multi Datacenter

-

Terraform scales to multiple datacenters out of the box with no complicated configuration. Look up services in other datacenters, or keep the request local.

-
-
-
-
-
-
- -
-
-

Key/Value Storage

-

Flexible key/value store for dynamic configuration, feature flagging, coordination, leader election and more. Long poll for near-instant notification of configuration changes.

-
-
-
-
-
-
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+

Iterate on infrastructure safely

+
+
+
+
diff --git a/website/source/stylesheets/_global.less b/website/source/stylesheets/_global.less index e8af8823e..1c19e5649 100755 --- a/website/source/stylesheets/_global.less +++ b/website/source/stylesheets/_global.less @@ -8,8 +8,10 @@ }*/ body { - font-size: 15px; color: @black; + background-color: @black; + font-size: 15px; + font-family: @font-family-lato; font-weight: 300; } diff --git a/website/source/stylesheets/_header.less b/website/source/stylesheets/_header.less index 2c528e709..2823b1b46 100755 --- a/website/source/stylesheets/_header.less +++ b/website/source/stylesheets/_header.less @@ -45,8 +45,6 @@ body.page-sub{ line-height: 56px; font-size: 24px; .lato-light(); - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; text-transform: uppercase; background: url(../images/consul-header-logo.png) 0 0 no-repeat; .img-retina("../images/header-logo.png", "../images/header-logo@2x.png", 50px, 56px); diff --git a/website/source/stylesheets/_home.less b/website/source/stylesheets/_home.less index 138110ba2..8d8d30739 100755 --- a/website/source/stylesheets/_home.less +++ b/website/source/stylesheets/_home.less @@ -1,58 +1,24 @@ // // Home // -------------------------------------------------- -body.page-home{ +/*body.page-home{ background-color: #f8f8f8; -} +}*/ -#features{ - .anti-alias(); - padding: 130px 0 0 0; - //background: #f8f8f8 url(../images/hero-dots-below@2x.png) center top no-repeat; - background: #f8f8f8; - background-size: 1280px 49px; - - -webkit-transform: skewY(-5deg); - -moz-transform: skewY(-5deg); - -ms-transform: skewY(-5deg); - -o-transform: skewY(-5deg); - transform: skewY(-5deg); - - /*transform: rotate(358deg) scale(1) skew(-2deg) translate(0px); - -webkit-transform: rotate(358deg) scale(1) skew(-2deg) translate(0px); - -moz-transform: rotate(358deg) scale(1) skew(-2deg) translate(0px); - -o-transform: rotate(358deg) scale(1) skew(-2deg) translate(0px); - -ms-transform: rotate(358deg) scale(1) skew(-2deg) translate(0px);*/ - - >.container{ - -webkit-transform: skewY(5deg); - -moz-transform: skewY(5deg); - -ms-transform: skewY(5deg); - -o-transform: skewY(5deg); - transform: skewY(5deg); - - /*transform: rotate(2deg) scale(1) skew(3deg) translate(0px); - -webkit-transform: rotate(2deg) scale(1) skew(3deg) translate(0px); - -moz-transform: rotate(2deg) scale(1) skew(3deg) translate(0px); - -o-transform: rotate(2deg) scale(1) skew(3deg) translate(0px); - -ms-transform: rotate(2deg) scale(1) skew(3deg) translate(0px);*/ - } - - .double-row{ - padding: 0 0 50px 0; - } - - h2{ - font-size: 24px; +.feature{ + h2{ + text-align: right; + font-size: 44px; + line-height: 54px; letter-spacing: 2px; color: @purple; - font-family: @font-family-lato; - font-weight: @font-weight-lato-xb; + .lato-light() } + p{ font-size: 16px; letter-spacing: 1px; - line-height: 1.5em; + line-height: 1.5em; color: @consul-gray; font-family: @font-family-lato; font-weight: @font-weight-lato-sb; @@ -66,92 +32,42 @@ body.page-home{ background-position: center 0; background-repeat: no-repeat; } - - .discovery{ - background-image: url( ../images/feature-discovery@2x.png); - background-size: 181px 181px; - } - .health{ - background-image: url( ../images/feature-health@2x.png); - background-size: 125px 179px; - } - .multi{ - background-image: url( ../images/feature-multi@2x.png); - background-size: 182px 184px; - } - .config{ - background-image: url( ../images/feature-config@2x.png); - background-size: 157px 179px; - } } -#trusted{ - background-color: @black; - padding: 140px 0; +#feature-auto{ + .anti-alias(); + margin-top: -36px; + padding: 200px 0; + background: #f8f8f8 url(../images/white-wireframe.png) center top no-repeat; + background-size: cover; - h3{ - margin-bottom: 60px; - color: @white; - text-transform: uppercase; - font-size: 18px; + -webkit-transform: skewY(-2deg); + -moz-transform: skewY(-2deg); + -ms-transform: skewY(-2deg); + -o-transform: skewY(-2deg); + transform: skewY(-2deg); + + >.container{ + -webkit-transform: skewY(2deg); + -moz-transform: skewY(2deg); + -ms-transform: skewY(2deg); + -o-transform: skewY(2deg); + transform: skewY(2deg); + } + + .terminal-text{ + color: black; + line-height: 88px; text-align: center; - } - - .trusted-items{ - width: 800px; - margin: 0 auto; - - ul { - padding: 0; - > li{ - display: inline-block; - float: left; - width: 25%; - height: 80px; - margin: 12px 0; - background: url( ../images/trusted-sprite.png ) 0 0 no-repeat; - - &#i0{ - background-position: 0 0; - } - &#i1{ - background-position: 0 -80px; - } - &#i2{ - background-position: 0 -160px; - } - &#i3{ - background-position: 0 -240px; - } - &#i4{ - background-position: 0 -320px; - } - &#i5{ - background-position: 0 -400px; - } - &#i6{ - background-position: 0 -480px; - } - &#i7{ - background-position: 0 -560px; - } - &#i8{ - background-position: 0 -640px; - } - &#i9{ - background-position: 0 -720px; - } - &#i10{ - background-position: 0 -800px; - } - &#i11{ - background-position: 0 -880px; - } - } - } + font-size: 35px; + font-family: "Courier New", Monaco, Menlo, Consolas, monospace; + .opt-text(); } } +#feature-iterate{ + +} #footer{ diff --git a/website/source/stylesheets/_jumbotron.less b/website/source/stylesheets/_jumbotron.less index 1354dbdb8..6ddacfbe3 100755 --- a/website/source/stylesheets/_jumbotron.less +++ b/website/source/stylesheets/_jumbotron.less @@ -7,6 +7,7 @@ width: 100%; height: @jumbotron-total-height; margin-top: @negative-hero-margin; + background-color: black; } #jumbotron { @@ -31,6 +32,10 @@ height: 100%; margin-top: @header-height; + > div{ + display: none; + } + .jumbo-logo-wrap{ margin-top: 135px; diff --git a/website/source/stylesheets/_utilities.less b/website/source/stylesheets/_utilities.less index 7b36b75a7..8c4fc0e38 100755 --- a/website/source/stylesheets/_utilities.less +++ b/website/source/stylesheets/_utilities.less @@ -26,4 +26,9 @@ .lato-light(){ font-family: @font-family-lato; font-weight: 100; +} + +.opt-text(){ + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; } \ No newline at end of file diff --git a/website/source/stylesheets/_variables.less b/website/source/stylesheets/_variables.less index 5d0e64b5f..b19dd8de4 100755 --- a/website/source/stylesheets/_variables.less +++ b/website/source/stylesheets/_variables.less @@ -28,7 +28,7 @@ @tan: #f0f0e5; @consul-gray: #909090; @consul-footer-gray: #d7d4d7; -@purple: #69499a; +@purple: #822ff7; @light-purple: #f7f3f9; @btn-color: #4592C5; diff --git a/website/source/stylesheets/main.css b/website/source/stylesheets/main.css index 9642cfe7f..4baf93d81 100644 --- a/website/source/stylesheets/main.css +++ b/website/source/stylesheets/main.css @@ -19,8 +19,10 @@ -webkit-font-smoothing: antialiased; }*/ body { - font-size: 15px; color: #242424; + background-color: #242424; + font-size: 15px; + font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; } h1 { @@ -132,8 +134,6 @@ body.page-sub #header { font-size: 24px; font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 100; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; text-transform: uppercase; background: url(../images/consul-header-logo.png) 0 0 no-repeat; background-image: url("../images/header-logo.png"); @@ -247,7 +247,7 @@ body.page-sub #header { #footer { height: 650px; text-align: center; - color: #69499a; + color: #822ff7; } #footer .main-links.navbar-nav { float: none; @@ -255,13 +255,13 @@ body.page-sub #header { padding-top: 155px; } #footer .main-links.navbar-nav .li-under a::after { - background-color: #69499a; + background-color: #822ff7; } #footer .footer-hashi { padding-top: 110px; } #footer a { - color: #69499a; + color: #822ff7; } #footer .buttons.navbar-nav { float: none; @@ -423,6 +423,7 @@ body.page-sub #header { width: 100%; height: 804px; margin-top: -90px; + background-color: black; } #jumbotron { position: relative; @@ -444,6 +445,9 @@ body.page-sub #header { height: 100%; margin-top: 90px; } +#jumbotron .container > div { + display: none; +} #jumbotron .container .jumbo-logo-wrap { margin-top: 135px; } @@ -483,8 +487,8 @@ body.page-sub #header { transition: background-color 0.3s ease-in-out; } .outline-btn.purple { - color: #69499a; - border: 2px solid #69499a; + color: #822ff7; + border: 2px solid #822ff7; } .outline-btn:hover { color: #ffffff; @@ -521,49 +525,19 @@ body.page-sub #header { -moz-transform: translateY(0px); transform: translateY(0px); } -body.page-home { - background-color: #f8f8f8; -} -#features { - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - padding: 130px 0 0 0; - background: #f8f8f8; - background-size: 1280px 49px; - -webkit-transform: skewY(-5deg); - -moz-transform: skewY(-5deg); - -ms-transform: skewY(-5deg); - -o-transform: skewY(-5deg); - transform: skewY(-5deg); - /*transform: rotate(358deg) scale(1) skew(-2deg) translate(0px); - -webkit-transform: rotate(358deg) scale(1) skew(-2deg) translate(0px); - -moz-transform: rotate(358deg) scale(1) skew(-2deg) translate(0px); - -o-transform: rotate(358deg) scale(1) skew(-2deg) translate(0px); - -ms-transform: rotate(358deg) scale(1) skew(-2deg) translate(0px);*/ -} -#features > .container { - -webkit-transform: skewY(5deg); - -moz-transform: skewY(5deg); - -ms-transform: skewY(5deg); - -o-transform: skewY(5deg); - transform: skewY(5deg); - /*transform: rotate(2deg) scale(1) skew(3deg) translate(0px); - -webkit-transform: rotate(2deg) scale(1) skew(3deg) translate(0px); - -moz-transform: rotate(2deg) scale(1) skew(3deg) translate(0px); - -o-transform: rotate(2deg) scale(1) skew(3deg) translate(0px); - -ms-transform: rotate(2deg) scale(1) skew(3deg) translate(0px);*/ -} -#features .double-row { - padding: 0 0 50px 0; -} -#features h2 { - font-size: 24px; +/*body.page-home{ + background-color: #f8f8f8; +}*/ +.feature h2 { + text-align: right; + font-size: 44px; + line-height: 54px; letter-spacing: 2px; - color: #69499a; + color: #822ff7; font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: 700; + font-weight: 100; } -#features p { +.feature p { font-size: 16px; letter-spacing: 1px; line-height: 1.5em; @@ -571,7 +545,7 @@ body.page-home { font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 500; } -#features .icn { +.feature .icn { display: block; width: 186px; height: 272px; @@ -579,83 +553,34 @@ body.page-home { background-position: center 0; background-repeat: no-repeat; } -#features .discovery { - background-image: url(../images/feature-discovery@2x.png); - background-size: 181px 181px; +#feature-auto { + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + margin-top: -36px; + padding: 200px 0; + background: #f8f8f8 url(../images/white-wireframe.png) center top no-repeat; + background-size: cover; + -webkit-transform: skewY(-2deg); + -moz-transform: skewY(-2deg); + -ms-transform: skewY(-2deg); + -o-transform: skewY(-2deg); + transform: skewY(-2deg); } -#features .health { - background-image: url(../images/feature-health@2x.png); - background-size: 125px 179px; +#feature-auto > .container { + -webkit-transform: skewY(2deg); + -moz-transform: skewY(2deg); + -ms-transform: skewY(2deg); + -o-transform: skewY(2deg); + transform: skewY(2deg); } -#features .multi { - background-image: url(../images/feature-multi@2x.png); - background-size: 182px 184px; -} -#features .config { - background-image: url(../images/feature-config@2x.png); - background-size: 157px 179px; -} -#trusted { - background-color: #242424; - padding: 140px 0; -} -#trusted h3 { - margin-bottom: 60px; - color: #ffffff; - text-transform: uppercase; - font-size: 18px; +#feature-auto .terminal-text { + color: black; + line-height: 88px; text-align: center; -} -#trusted .trusted-items { - width: 800px; - margin: 0 auto; -} -#trusted .trusted-items ul { - padding: 0; -} -#trusted .trusted-items ul > li { - display: inline-block; - float: left; - width: 25%; - height: 80px; - margin: 12px 0; - background: url(../images/trusted-sprite.png ) 0 0 no-repeat; -} -#trusted .trusted-items ul > li#i0 { - background-position: 0 0; -} -#trusted .trusted-items ul > li#i1 { - background-position: 0 -80px; -} -#trusted .trusted-items ul > li#i2 { - background-position: 0 -160px; -} -#trusted .trusted-items ul > li#i3 { - background-position: 0 -240px; -} -#trusted .trusted-items ul > li#i4 { - background-position: 0 -320px; -} -#trusted .trusted-items ul > li#i5 { - background-position: 0 -400px; -} -#trusted .trusted-items ul > li#i6 { - background-position: 0 -480px; -} -#trusted .trusted-items ul > li#i7 { - background-position: 0 -560px; -} -#trusted .trusted-items ul > li#i8 { - background-position: 0 -640px; -} -#trusted .trusted-items ul > li#i9 { - background-position: 0 -720px; -} -#trusted .trusted-items ul > li#i10 { - background-position: 0 -800px; -} -#trusted .trusted-items ul > li#i11 { - background-position: 0 -880px; + font-size: 35px; + font-family: "Courier New", Monaco, Menlo, Consolas, monospace; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; } #footer { background-color: #d7d4d7; @@ -732,7 +657,7 @@ body.page-home { font-size: 16px; text-transform: uppercase; letter-spacing: 3px; - color: #69499a; + color: #822ff7; } #cta a:hover { text-decoration: none; @@ -831,7 +756,7 @@ body.page-home { } #demos .terminals .terminal-item .terminal .terminal-window .txt-p { font-weight: bold; - color: #9073bd; + color: #ae79fa; } #demos .terminals .terminal-item .terminal .terminal-window p { margin-bottom: 2px; @@ -912,7 +837,7 @@ body.layout-intro > .container .col-md-8[role=main] > div { border-radius: 6px; } .docs-sidebar a { - color: #69499a; + color: #822ff7; } .docs-sidebar .docs-sidenav { padding-top: 15px; @@ -925,7 +850,7 @@ body.layout-intro > .container .col-md-8[role=main] > div { position: relative; } .docs-sidebar .docs-sidenav li > a { - color: #69499a; + color: #822ff7; -webkit-transition: color 0.5s ease; transition: color 0.5s ease; } @@ -955,7 +880,7 @@ body.layout-intro > .container .col-md-8[role=main] > div { position: absolute; width: 8px; height: 8px; - background-color: #69499a; + background-color: #822ff7; border-radius: 4px; top: 26px; left: -10px; @@ -1012,7 +937,7 @@ body.layout-intro > .container .col-md-8[role=main] > div { margin: 0 0 18px; } .bs-docs-section a { - color: #69499a; + color: #822ff7; } .bs-docs-section a:hover { text-decoration: underline; @@ -1023,7 +948,7 @@ body.layout-intro > .container .col-md-8[role=main] > div { margin-bottom: 25px; } .bs-docs-section h1 { - color: #69499a; + color: #822ff7; text-transform: uppercase; padding-bottom: 24px; margin-top: 40px;