github
/
consul
mirror of https://github.com/hashicorp/consul
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

website - responsive heroes, hero bg bleed into header, header overrides

pull/4275/head
RJ Spiker 2018-06-15 15:50:19 -06:00 committed by Jack Pearkes
parent fa8e8964d0
commit 2aca074128
7 changed files with 126 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
website/source/assets/stylesheets/consul-connect/_index.scss
View File

@ -5,6 +5,7 @@
@import 'components/_button'; @import 'components/_button';
@import 'components/_container'; @import 'components/_container';
@import 'components/_cta-section'; @import 'components/_cta-section';
@import 'components/_header';
@import 'components/_hero'; @import 'components/_hero';
@import 'components/_logo-grid'; @import 'components/_logo-grid';
@import 'components/_section'; @import 'components/_section';

10
website/source/assets/stylesheets/consul-connect/_typography.scss
View File

@ -31,9 +31,17 @@
h1, h1,
.h1 { .h1 {
font-size: 3.5em; font-size: 3.2rem;
font-weight: 600; font-weight: 600;
line-height: 1.2em; line-height: 1.2em;
@media (min-width: 768px) {
font-size: 4rem;
}
@media (min-width: 992px) {
font-size: 5.6rem;
}
} }
h2, h2,

62
website/source/assets/stylesheets/consul-connect/components/_header.scss Normal file
View File

@ -0,0 +1,62 @@
// TODO - currently overriding the main header
// this will affect docs as well. is that ok?
#header {
background: transparent;
.navbar-toggle {
.icon-bar {
border: 1px solid $consul-black;
}
}
.navbar-brand {
a {
svg.logo {
opacity: 1;
path.text {
fill: $black;
opacity: 1;
}
path.center-c {
fill: $consul-red-dark;
opacity: 1;
}
path.circles {
fill: $consul-red;
opacity: 1;
}
path.c {
fill: $consul-red;
opacity: 1;
}
}
}
}
ul.nav {
li {
a {
color: $consul-black;
&:hover,
&:focus,
&:active {
background-color: transparent;
color: $black;
svg {
fill: $black;
}
}
svg {
fill: $consul-black;
}
}
}
}
}

30
website/source/assets/stylesheets/consul-connect/components/_hero.scss
View File

@ -1,18 +1,36 @@
.g-hero { .g-hero {
background: url("/assets/images/consul-connect/hero-bg.png") no-repeat center background: url("/assets/images/consul-connect/hero-bg.png") no-repeat top
center; center;
background-size: cover; background-size: cover;
padding: 121px 0; margin-top: -94px;
padding: 126px 40px 56px;
text-align: center; text-align: center;
@media (min-width: 768px) {
padding: 154px 56px 96px;
}
@media (min-width: 992px) {
padding-top: 214px;
padding-bottom: 120px;
}
h1 { h1 {
margin: 0 0 16px; margin: 0 0 16px;
} }
p { p {
font-size: 1.5em; font-size: 1.8rem;
max-width: 848px; max-width: 848px;
margin: 0 auto 40px; margin: 0 auto 40px;
@media (min-width: 768px) {
font-size: 2rem;
}
@media (min-width: 992px) {
font-size: 2.4rem;
}
} }
span { span {
@ -23,9 +41,13 @@
font-weight: 700; font-weight: 700;
letter-spacing: 0.5px; letter-spacing: 0.5px;
line-height: 20px; line-height: 20px;
margin-bottom: 16px; margin-bottom: 24px;
padding: 2px 9px; padding: 2px 9px;
text-transform: uppercase; text-transform: uppercase;
@media (min-width: 992px) {
margin-bottom: 16px;
}
} }
.g-btn { .g-btn {

20
website/source/configuration.html.erb
View File

@ -8,17 +8,15 @@ description: |-
<div class='consul-connect'> <div class='consul-connect'>
<section class='g-hero'> <section class='g-hero'>
<div class='g-container'> <h1>Service configuration made easy.</h1>
<h1>Service configuration made easy.</h1> <p>Feature rich key/value store lets you easily configure services.</p>
<p>Feature rich key/value store lets you easily configure services.</p> <a href="#" class="g-btn download">
<a href="#" class="g-btn download"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="22" viewBox="0 0 20 22">
<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"/>
<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>
</svg> Download
Download </a>
</a> <a href="#" class="g-btn dark-outline">Explore Docs</a>
<a href="#" class="g-btn dark-outline">Explore Docs</a>
</div>
</section> </section>
<section class='g-section'> <section class='g-section'>

20
website/source/discovery.html.erb
View File

@ -8,17 +8,15 @@ description: |-
<div class='consul-connect'> <div class='consul-connect'>
<section class='g-hero'> <section class='g-hero'>
<div class='g-container'> <h1>Service discovery made easy.</h1>
<h1>Service discovery made easy.</h1> <p>Service Registry enables services to register and discover each other in dymanic infrastructure.</p>
<p>Service Registry enables services to register and discover each other in dymanic infrastructure.</p> <a href="#" class="g-btn download">
<a href="#" class="g-btn download"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="22" viewBox="0 0 20 22">
<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"/>
<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>
</svg> Download
Download </a>
</a> <a href="#" class="g-btn dark-outline">Explore Docs</a>
<a href="#" class="g-btn dark-outline">Explore Docs</a>
</div>
</section> </section>
<section class='g-section'> <section class='g-section'>

22
website/source/segmentation.html.erb
View File

@ -8,18 +8,16 @@ description: |-
<div class='consul-connect'> <div class='consul-connect'>
<section class='g-hero'> <section class='g-hero'>
<div class='g-container'> <span>New Feature</span>
<span>New Feature</span> <h1>Service segmentation made easy.</h1>
<h1>Service segmentation made easy.</h1> <p>Secure service-to-service communication with automatic TLS encryption and identity-based authorization.</p>
<p>Secure service-to-service communication with automatic TLS encryption and identity-based authorization.</p> <a href="#" class="g-btn download">
<a href="#" class="g-btn download"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="22" viewBox="0 0 20 22">
<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"/>
<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>
</svg> Download
Download </a>
</a> <a href="#" class="g-btn dark-outline">Explore Docs</a>
<a href="#" class="g-btn dark-outline">Explore Docs</a>
</div>
</section> </section>
<section class='g-section'> <section class='g-section'>