use violet as Services main branding color

This commit is contained in:
Matthias Kretschmann 2018-04-12 12:50:15 +02:00
parent 7dca3989b2
commit 0ecccfaf47
Signed by: m
GPG Key ID: 606EEEF3C479A91F
7 changed files with 42 additions and 25 deletions

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 22 KiB

View File

@ -23,15 +23,13 @@
}
}
.feature__text {
opacity: .75;
}
.feature__icon {
margin-top: 0;
margin-bottom: $spacer / 6;
width: 2.2rem;
height: 2.2rem;
stroke: darken($brand-main-violet, 30%);
color: $brand-main-blue-light;
}
}
@ -56,13 +54,7 @@
}
.btn {
@extend .btn-secondary;
min-width: 220px;
&:first-of-type {
@extend .btn-primary;
margin-right: $spacer;
}
}
}
@ -71,7 +63,7 @@
text-align: center;
margin-top: $spacer * 2;
padding-top: $spacer * 2;
border-top: 1px solid darken($brand-main-green, 5%);
border-top: 1px solid darken($brand-main-violet, 5%);
}
}

View File

@ -9,12 +9,8 @@
margin-bottom: $spacer;
transform: scale(.8);
transform-origin: left;
}
.logo-services--text,
.logo-services .logo {
color: $brand-main-blue-light;
fill: $brand-main-blue-light;
color: darken($brand-main-violet, 25%);
fill: darken($brand-main-violet, 25%);
}
.section-header {
@ -23,9 +19,14 @@
.section-title {
text-align: left;
margin-bottom: $spacer * 2.5;
&:after {
display: none;
}
}
.btn {
color: #fff !important; // stylelint-disable-line
}
}

View File

@ -45,3 +45,7 @@
width: 100%;
height: auto;
}
.logo--services {
color: $brand-main-violet;
}

View File

@ -64,6 +64,26 @@
}
}
.background--violet {
background: $brand-main-violet;
&,
.section-description,
p {
color: darken($brand-main-violet, 35%);
}
.feature__title,
.section-title {
color: darken($brand-main-violet, 50%);
// the bottom line
&:after {
background: $brand-main-blue-light;
}
}
}
//
// Photo background

View File

@ -1,8 +1,8 @@
<section class="section section-cta section-cta--services background--green">
<section class="section section-cta section-cta--services background--violet">
<div class="row">
<header class="section-header">
<svg class="logo logo--services" aria-labelledby="title">
<svg class="logo logo--services logo--white" aria-labelledby="title">
<title>Logo BigchainDB Services</title>
<use xlink:href="/assets/img/sprite.svg#logo-services"></use>
</svg>

View File

@ -91,14 +91,14 @@ contact:
<h2 class="hero__subtitle">{{ page.hero.description }}</h2>
{% for cta in page.hero.cta %}
<a class="btn hero__action" href="{{ cta.link }}" {% if cta.scroll %}data-scroll{% endif %}>{{ cta.name }}</a>
<a class="btn btn-violet hero__action" href="{{ cta.link }}" {% if cta.scroll %}data-scroll{% endif %}>{{ cta.name }}</a>
{% endfor %}
</hgroup>
</div>
</header>
<section class="section section--servicesdetail background--green">
<section class="section section--servicesdetail background--violet">
<div class="row row--wide">
<div class="grid grid--full grid-small--third grid--gutters">