luxolus
/
open-consul
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity

website - some button sizing adjustments, hero and cta-section padding adjustments

This commit is contained in:
RJ Spiker 2018-06-15 16:49:09 -06:00 committed by Jack Pearkes
parent eda1079989
commit 9344a17bec
6 changed files with 61 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
website/source/assets/stylesheets/consul-connect/components/_button.scss
View File

@ -5,16 +5,23 @@
box-sizing: border-box;
color: $white;
display: inline-block;
font-size: 1.6rem;
font-size: 1.4rem;
font-weight: 600;
letter-spacing: 0;
line-height: 24px;
min-width: 129px;
outline: 0;
padding: 10px 28px;
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;

13
website/source/assets/stylesheets/consul-connect/components/_cta-section.scss
View File

@ -1,8 +1,10 @@
.g-cta-section {
.g-cta-section.g-section {
align-items: center;
background: $consul-red;
display: flex;
justify-content: center;
padding-left: 15px;
padding-right: 15px;
position: relative;
text-align: center;
@ -28,12 +30,7 @@
margin-top: 0;
}
.g-btn {
width: 144px;
padding: 10px 0;
& + .g-btn {
margin-left: 18px;
}
.g-btn + .g-btn {
margin-left: 18px;
}
}

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

@ -22,7 +22,7 @@
p {
font-size: 1.8rem;
max-width: 848px;
margin: 0 auto 40px;
margin: 0 auto 35px;
@media (min-width: 768px) {
font-size: 2rem;
@ -50,12 +50,25 @@
}
}
.g-btn {
min-width: 144px;
padding: 10px;
& > div {
margin: 0 -30px;
& + .g-btn {
margin-left: 20px;
.g-btn {
min-width: 129px;
margin: 5px;
@media (min-width: 400px) {
margin: 5px 10px;
}
@media (max-width: 767px) {
padding: 6px 5px;
}
@media (min-width: 768px) {
margin: 0 10px;
min-width: 144px;
}
}
}
}

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

@ -10,13 +10,15 @@ description: |-
<section class='g-hero'>
<h1>Service configuration made easy.</h1>
<p>Feature rich key/value store lets you easily configure services.</p>
<a href="#" class="g-btn 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="#" class="g-btn dark-outline">Explore Docs</a>
<div>
<a href="#" class="g-btn 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="#" class="g-btn dark-outline">Explore Docs</a>
</div>
</section>
<section class='g-section'>

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

@ -10,13 +10,15 @@ description: |-
<section class='g-hero'>
<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">
<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="#" class="g-btn dark-outline">Explore Docs</a>
<div>
<a href="#" class="g-btn 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="#" class="g-btn dark-outline">Explore Docs</a>
</div>
</section>
<section class='g-section'>

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

@ -11,13 +11,15 @@ description: |-
<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>
<a href="#" class="g-btn 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="#" class="g-btn dark-outline">Explore Docs</a>
<div>
<a href="#" class="g-btn 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="#" class="g-btn dark-outline">Explore Docs</a>
</div>
</section>
<section class='g-section'>