From 9879835fd97c78637d4be119a452a253d30760b4 Mon Sep 17 00:00:00 2001 From: RJ Spiker Date: Fri, 15 Jun 2018 11:01:18 -0600 Subject: [PATCH] website - some button and section updates, add home hero start --- .../consul-connect/components/_button.scss | 7 +- .../consul-connect/components/_hero.scss | 9 ++- .../consul-connect/components/_section.scss | 22 +++--- .../consul-connect/pages/_home.scss | 70 +++++++++++++++++++ website/source/index.html.erb | 40 +++++++++-- 5 files changed, 124 insertions(+), 24 deletions(-) diff --git a/website/source/assets/stylesheets/consul-connect/components/_button.scss b/website/source/assets/stylesheets/consul-connect/components/_button.scss index 815967887e..46d126e9a8 100644 --- a/website/source/assets/stylesheets/consul-connect/components/_button.scss +++ b/website/source/assets/stylesheets/consul-connect/components/_button.scss @@ -1,5 +1,6 @@ .g-btn { background-color: $consul-red; + border: 2px solid $consul-red; border-radius: 3px; box-sizing: border-box; color: $white; @@ -9,7 +10,7 @@ letter-spacing: 0; line-height: 24px; outline: 0; - padding: 12px 30px; + padding: 10px 28px; position: relative; text-align: center; transition: all 0.25s ease; @@ -17,6 +18,7 @@ &:focus, &:hover { background-color: #ce4a86; + border-color: #ce4a86; color: $white; text-decoration: none; transform: translateY(-1px); @@ -30,7 +32,6 @@ background: $white; border: 2px solid $white; color: $consul-black; - padding: 10px 28px; /* subtracting the border, so sizes are even */ &:hover { background: $consul-black; @@ -50,7 +51,6 @@ &.dark-outline { background: none; border: 2px solid $consul-black; - padding: 10px 28px; /* subtracting the border, so sizes are even */ color: $consul-black; &:hover { @@ -62,7 +62,6 @@ &.white-outline { background: none; border: 2px solid $white; - padding: 10px 28px; /* subtracting the border, so sizes are even */ color: $white; &:hover { diff --git a/website/source/assets/stylesheets/consul-connect/components/_hero.scss b/website/source/assets/stylesheets/consul-connect/components/_hero.scss index 4aabe5c20f..c638e32f5d 100644 --- a/website/source/assets/stylesheets/consul-connect/components/_hero.scss +++ b/website/source/assets/stylesheets/consul-connect/components/_hero.scss @@ -28,7 +28,12 @@ text-transform: uppercase; } - .g-btn + .g-btn { - margin-left: 20px; + .g-btn { + min-width: 144px; + padding: 10px; + + & + .g-btn { + margin-left: 20px; + } } } diff --git a/website/source/assets/stylesheets/consul-connect/components/_section.scss b/website/source/assets/stylesheets/consul-connect/components/_section.scss index 9b461337ae..d66eba4e97 100644 --- a/website/source/assets/stylesheets/consul-connect/components/_section.scss +++ b/website/source/assets/stylesheets/consul-connect/components/_section.scss @@ -2,17 +2,6 @@ overflow: hidden; padding: 96px 0; - & .intro { - margin: 0 auto 64px; - max-width: 784px; - text-align: center; - - & h2, - & h3 { - margin: 0 0 24px; - } - } - &.bg-light { background: #f7f8fa !important; //TODO - !important is to override the `#page-home section` #fff background; } @@ -26,6 +15,17 @@ border-top: 1px solid #e5e6eb; } + & .intro { + margin: 0 auto 64px; + max-width: 784px; + text-align: center; + + & h2, + & h3 { + margin: 0 0 24px; + } + } + li { list-style-type: none; margin: 16px 0; diff --git a/website/source/assets/stylesheets/consul-connect/pages/_home.scss b/website/source/assets/stylesheets/consul-connect/pages/_home.scss index 9b723366e6..c1dfbd32dd 100644 --- a/website/source/assets/stylesheets/consul-connect/pages/_home.scss +++ b/website/source/assets/stylesheets/consul-connect/pages/_home.scss @@ -1,4 +1,73 @@ #page-home { + .home-hero { + overflow: hidden; + padding-top: 96px; + + .g-container > div { + display: flex; + margin: 0 (-$site-gutter-padding); + + & > div { + padding: 0 ($site-gutter-padding); + width: 50%; + + &:first-child { + align-items: center; + display: flex; + justify-content: center; + } + + .notification { + background: #fce2ee; + border-radius: 3px; + color: #650d34; + display: inline-block; + font-size: 1.4rem; + padding: 12px; + + span { + background: $consul-red; + border-radius: 3px; + color: #fff; + font-size: 1.2rem; + font-weight: 700; // TODO - don't have access to this weight yet + margin-right: 8px; + padding: 2px 9px; + text-transform: uppercase; + } + + svg { + margin-left: 4px; + } + } + + h1 { + font-size: 4.8rem; + margin: 40px 0 16px; + } + + p { + font-size: 2.4rem; + font-weight: 100; // TODO - don't have access to this weight yet + margin: 16px 0 40px; + } + + img { + box-shadow: 0 40px 24px -10px rgba(63, 68, 85, 0.4); + } + + .g-btn { + min-width: 144px; + padding: 10px; + + & + .g-btn { + margin-left: 20px; + } + } + } + } + } + .home-cta-section { color: $white; display: flex; @@ -22,6 +91,7 @@ max-width: 564px; padding: 96px 0; text-align: center; + width: 100%; div:first-child { height: 50px; diff --git a/website/source/index.html.erb b/website/source/index.html.erb index 584e62a28c..d14caea0c1 100644 --- a/website/source/index.html.erb +++ b/website/source/index.html.erb @@ -7,6 +7,32 @@ description: |-
+
+
+
+
+
+ + New Consul 1.0 release. Get the details + +

Service Mesh Made Easy

+

Connect, configure, and secure services in dynamic infrastructure.

+ + + + + Download + + Get Started +
+
+
+ Service Registry +
+
+
+
+
@@ -22,8 +48,8 @@ description: |-
- - + + @@ -90,7 +116,7 @@ description: |-
Code Sample -
+
$ curl \ --request POST \ --data \ @@ -180,9 +206,9 @@ description: |-

Consul Open Source addresses the technical complexity of connecting services across distributed infrastructure.

Consul Enterprise addresses the organizational complexity of large user bases and compliance requirements with collaboration and governance features.