Size and spacing improvements, killed secondary CTA, changed contributor layout, other fixes

This commit is contained in:
Lennart Ziburski
2017-12-07 10:50:29 +01:00
parent 49de2346a7
commit 479cdee524
7 changed files with 65 additions and 60 deletions

View File

@ -21,20 +21,21 @@ body {
h1 {
font-weight: $bold;
font-size: $medium;
line-height: $large;
font-size: 36px;
line-height: 48px;
margin: 0 0 $small 0;
@media screen and (min-width: $tablet) {
font-size: 36px;
line-height: 48px;
font-size: 42px;
line-height: 60px;
}
}
h2 {
font-family: $roboto;
font-size: $small;
font-weight: $regular;
font-size: 32px;
font-weight: $bold;
color: $darkGrey;
margin: 0 auto $tiny auto;
&.subhead {
@ -44,9 +45,9 @@ h2 {
h3 {
font-family: $roboto;
font-size: $tiny;
font-weight: $bold;
line-height: 32px;
font-size: 18px;
font-weight: $semibold;
line-height: 40px;
margin: 0;
}

View File

@ -4,32 +4,35 @@
padding: $xl 0 $large 0;
.community-features {
@neat-span-columns 8;
@media screen and (min-width: $desktop) {
@neat-span-columns 6;
}
.feature {
margin-top: $small;
@media screen and (min-width: $tablet) {
@neat-span-columns 6;
}
&.contributors {
@media screen and (min-width: $tablet) {
@neat-span-columns 8;
}
.contributor-list {
margin-top: $micro;
img {
width: 32px;
margin: 0 $micro $micro 0;
border-radius: 16px;
}
}
}
}
}
.contributors {
@neat-span-columns 10;
margin-top: $small;
@media screen and (min-width: $desktop) {
@neat-span-columns 5;
float: right;
}
.contributor-list {
margin-top: $micro;
img {
width: 32px;
margin: 0 $micro $micro 0;
border-radius: 16px;
}
}
}
}

View File

@ -38,23 +38,27 @@
color: white;
text-transform: uppercase;
font-size: $tiny;
letter-spacing: 0.5px;
background-color: $blue;
background-image: linear-gradient(-180deg, #4A7FDD 0%, #3A69C7 100%);
box-shadow: 0 4px 12px 0 rgba(68,74,87,0.10), 0 1px 3px 0 rgba(68,74,87,0.20);
border-radius: $borderRadius;
padding: 12px 18px 12px 18px;
transition: .2s;
text-align: center;
@media screen and (min-width: $desktop) {
min-width: 122px;
min-width: 120px;
margin: 0 0 0 $small;
}
&:hover {
margin-right: -4px;
transform: scale(1.05);
box-shadow: 0 4px 12px 0 rgba(68,74,87,0.20), 0 1px 3px 0 rgba(68,74,87,0.40);
}
&:active {
transform: scale(0.9);
transform: scale(0.95);
box-shadow: none;
}
}

View File

@ -5,7 +5,7 @@
text-align: center;
h2, p {
max-width: 800px;
max-width: $desktop;
margin-left: auto;
margin-right: auto;
}
@ -21,7 +21,7 @@
}
.feature {
max-width: 320px;
max-width: 340px;
img {
max-width: 280px;

View File

@ -43,11 +43,12 @@
.subhead {
display: inline-block;
margin: $tiny auto;
margin: $micro auto;
font-size: 18px;
line-height: 26px;
@media screen and (min-width: $mobile) {
display: block;
margin: calc($micro * 0.5) 0 $small 0;
@media screen and (min-width: $desktop) {
font-size: 20px;
}
}
@ -66,6 +67,7 @@
h3 {
color: $green;
font-size: 20px;
}
.hero-features {