mirror of https://github.com/hashicorp/consul
website - responsive heroes, hero bg bleed into header, header overrides
RJ Spiker
Jack Pearkes
parent
fa8e8964d0
commit
2aca074128
|
|
@ -5,6 +5,7 @@
|
|||
@import 'components/_button';
|
||||
@import 'components/_container';
|
||||
@import 'components/_cta-section';
|
||||
@import 'components/_header';
|
||||
@import 'components/_hero';
|
||||
@import 'components/_logo-grid';
|
||||
@import 'components/_section';
|
||||
|
|
|
|||
|
|
@ -31,9 +31,17 @@
|
|||
|
||||
h1,
|
||||
.h1 {
|
||||
font-size: 3.5em;
|
||||
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,
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,18 +1,36 @@
|
|||
.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;
|
||||
background-size: cover;
|
||||
padding: 121px 0;
|
||||
margin-top: -94px;
|
||||
padding: 126px 40px 56px;
|
||||
text-align: center;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
padding: 154px 56px 96px;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
padding-top: 214px;
|
||||
padding-bottom: 120px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.5em;
|
||||
font-size: 1.8rem;
|
||||
max-width: 848px;
|
||||
margin: 0 auto 40px;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
|
|
@ -23,9 +41,13 @@
|
|||
font-weight: 700;
|
||||
letter-spacing: 0.5px;
|
||||
line-height: 20px;
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 24px;
|
||||
padding: 2px 9px;
|
||||
text-transform: uppercase;
|
||||
|
||||
@media (min-width: 992px) {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.g-btn {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@ description: |-
|
|||
<div class='consul-connect'>
|
||||
|
||||
<section class='g-hero'>
|
||||
<div class='g-container'>
|
||||
<h1>Service configuration made easy.</h1>
|
||||
<p>Feature rich key/value store lets you easily configure services.</p>
|
||||
<a href="#" class="g-btn download">
|
||||
|
|
@ -18,7 +17,6 @@ description: |-
|
|||
Download
|
||||
</a>
|
||||
<a href="#" class="g-btn dark-outline">Explore Docs</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class='g-section'>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@ description: |-
|
|||
<div class='consul-connect'>
|
||||
|
||||
<section class='g-hero'>
|
||||
<div class='g-container'>
|
||||
<h1>Service discovery made easy.</h1>
|
||||
<p>Service Registry enables services to register and discover each other in dymanic infrastructure.</p>
|
||||
<a href="#" class="g-btn download">
|
||||
|
|
@ -18,7 +17,6 @@ description: |-
|
|||
Download
|
||||
</a>
|
||||
<a href="#" class="g-btn dark-outline">Explore Docs</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class='g-section'>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@ description: |-
|
|||
<div class='consul-connect'>
|
||||
|
||||
<section class='g-hero'>
|
||||
<div class='g-container'>
|
||||
<span>New Feature</span>
|
||||
<h1>Service segmentation made easy.</h1>
|
||||
<p>Secure service-to-service communication with automatic TLS encryption and identity-based authorization.</p>
|
||||
|
|
@ -19,7 +18,6 @@ description: |-
|
|||
Download
|
||||
</a>
|
||||
<a href="#" class="g-btn dark-outline">Explore Docs</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class='g-section'>
|
||||
|
|
|
|||
Loading…
Reference in New Issue