gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Tweaked header and hero area

Browse Source
This commit is contained in:
Lennart Ziburski
2018-02-27 14:08:26 +01:00
parent c69e9b47ec
commit eaf4380333
7 changed files with 100 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
website/src/css/imports/base.css
View File

@ -26,8 +26,8 @@ h1 {
margin: 0 0 $small 0;
@media screen and (min-width: $tablet) {
font-size: 46px;
line-height: 64px;
font-size: 42px;
line-height: 56px;
}
}

13
website/src/css/imports/docs.css
View File

@ -18,14 +18,6 @@
display: block;
}
@media screen and (min-width: $desktop) {
position: fixed;
top: 158px;
bottom: 0;
overflow-y: auto;
padding-right: 1em;
}
&.mobile {
display: block;
position: relative;
@ -117,11 +109,6 @@
@neat-shift 1 24;
}
@media screen and (min-width: $desktop) {
@neat-shift 7 24;
}
h2:not(:first-child) {
margin-top: $large;
}

69
website/src/css/imports/header.css
View File

@ -115,17 +115,28 @@ header {
}*/
}
.nav-link {
color: white;
display: inline-block;
vertical-align: middle;
-webkit-vertical-align: middle !important;
margin-left: $tiny;
.nav-container {
padding-top: $micro;
&:hover {
color: $green;
.nav-link {
color: white;
display: inline-block;
vertical-align: middle;
-webkit-vertical-align: middle !important;
margin-left: $tiny;
&:hover {
color: $green;
}
}
.nav-link + iframe {
margin-left: $small;
vertical-align: middle;
@media screen and (max-width: $mobile) {
margin-top: $tiny;
}
}
}
img {
@ -144,13 +155,12 @@ header {
}
input {
padding-left: 0;
padding: -5px 0 0 0;
border: none;
border-radius: 0;
appearance: none;
background: none;
color: $lightGrey;
padding: 2px $micro $micro 0;
display: inline-block;
font-size: $tiny;
font-weight: $regular;
@ -179,11 +189,14 @@ header {
.utility-input {
display: none;
padding: $micro;
position: relative;
top: -4px;
width: auto;
border-radius: 4px;
background-color: rgba(255,255,255,0.1);
color: white;
margin: 0 0 0 $tiny;
padding-top: -5px;
padding-bottom: 9px;
text-align: left;
text-decoration: none;
@ -228,41 +241,5 @@ header {
float: left;
}
}
iframe {
@media screen and (max-width: 820px) {
display: none;
opacity: 0;
}
}
}
.cta-header {
margin-left: $tiny;
}
.cta-header a {
display: inline-block;
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(0,0,0,0.3), 0 1px 3px 0 rgba(0,0,0,0.6);
border-radius: $borderRadius;
padding: 10px 14px 8px 14px;
transition: .2s;
@media screen and (max-width: $mobile) {
margin-top: $tiny;
}
&:hover {
transform: scale(1.05);
box-shadow: 0 4px 12px 0 rgba(0,0,0,0.5), 0 1px 3px 0 rgba(0,0,0,1);
}
&:active {
transform: scale(0.95);
box-shadow: none;
}
}
}

77
website/src/css/imports/hero.css
View File

@ -44,7 +44,6 @@
h1 {
color: $green;
margin-bottom: 0;
max-width: 800px;
}
h2 {
@ -55,6 +54,33 @@
color: white;
}
.cta-header {
display: block;
margin-top: $small;
}
.cta-header a {
display: inline-block;
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(0,0,0,0.3), 0 1px 3px 0 rgba(0,0,0,0.6);
border-radius: $borderRadius;
padding: 10px 14px 8px 14px;
transition: .2s;
&:hover {
transform: scale(1.05);
box-shadow: 0 4px 12px 0 rgba(0,0,0,0.5), 0 1px 3px 0 rgba(0,0,0,1);
}
&:active {
transform: scale(0.95);
box-shadow: none;
}
}
.hero-features {
@media screen and (min-width: $tablet) {
@ -68,6 +94,10 @@
}
.hero-graphic {
@neat-span-columns 12;
position: relative;
cursor: pointer;
@media screen and (min-width: $tablet) {
@neat-span-columns 6;
float: right;
@ -81,27 +111,38 @@
}
.hero-videolink {
display: block;
text-align: center;
margin-top: $micro;
padding: $micro 0 $micro 0;
font-size: 14px;
position: absolute;
margin: auto;
padding: 10px 0 0 10px;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 90px;
height: 90px;
font-size: 64px;
font-weight: $semibold;
color: white;
background-color: rgba(255,255,255,0.1);
border-radius: $borderRadius;
text-align: center;
color: $blue;
background-color: rgba(255,255,255,0.85);
box-shadow: 0 3px 9px 0 rgba(0,0,0,0.05), 0 1px 3px 0 rgba(0,0,0,0.15);
border-radius: 100px;
transition: 0.1s;
}
}
.hero-graphic:hover {
.hero-videolink {
background-color: rgba(255,255,255,0.2);
transform: scale(1.03);
&:hover {
.hero-videolink {
color: white;
background-color: $blue;
box-shadow: 0 6px 18px 0 rgba(0,0,0,0.15), 0 2px 6px 0 rgba(0,0,0,0.30);
transform: scale(1.1);
}
}
}
.hero-graphic:active {
.hero-videolink {
background-color: rgba(255,255,255,0.4);
&:active {
.hero-videolink {
transform: scale(0.9);
}
}
}