Tweaked header and hero area
This commit is contained in:
Lennart Ziburski
parent
c69e9b47ec
commit
eaf4380333
@ -1,6 +1,6 @@
|
||||
---
|
||||
hero:
|
||||
headline: "Open source content management for your Git workflow"
|
||||
headline: "Open source content management for your Git workflow"
|
||||
subhead: "Use Netlify CMS with any static site generator for a faster and more flexible web project"
|
||||
devfeatures:
|
||||
- feature: "Static + content management = ♥"
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
<div class="hero-copy">
|
||||
<h1 class="headline">{{ .Site.Data.landing.hero.headline | markdownify }}</h1>
|
||||
<span class="subhead">{{ .Site.Data.landing.hero.subhead | markdownify }}</span>
|
||||
<span class="cta-header">{{ .Site.Data.landing.cta.button | markdownify }}</span>
|
||||
</div>
|
||||
<div class="hero-features">
|
||||
{{ range $index, $id := .Site.Data.landing.hero.devfeatures }}
|
||||
@ -16,9 +17,9 @@
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
<a href="#" class="hero-graphic">
|
||||
<a class="hero-graphic">
|
||||
<img src="/img/screenshot-editor.jpg" class="responsive"/>
|
||||
<span class="hero-videolink">▶ Watch how to get started in just over 2 minutes</span>
|
||||
<div class="hero-videolink">▶</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
@ -29,15 +29,18 @@
|
||||
<div class="contained">
|
||||
<div class="logo-container">
|
||||
<a href="/" class="logo"><img src="/img/netlify-cms-logo.svg"/></a>
|
||||
<a class="github-button" href="https://github.com/netlify/netlify-cms" data-icon="octicon-star" data-show-count="true" aria-label="Star netlify/netlify-cms on GitHub">Star</a>
|
||||
{{ if or (eq .Section "docs") (eq .Title "Docs") }}
|
||||
<a class="utility-input">
|
||||
<img src="/img/search.svg" />
|
||||
<input type="search" placeholder="Search the docs" class="algolia-search"/>
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="nav-container">
|
||||
<a class="nav-link docs-link" href="/docs">Docs</a>
|
||||
<a class="nav-link contributing-link" href="/docs/contributor-guide">Contributing</a>
|
||||
<a class="nav-link" href="/community">Community</a>
|
||||
<a id="ghstars" class="github-button" href="https://github.com/netlify/netlify-cms" data-icon="octicon-star" data-show-count="true" aria-label="Star netlify/netlify-cms on GitHub">Star</a>
|
||||
</div>
|
||||
<a class="nav-link docs-link" href="/docs">Docs</a>
|
||||
<a class="nav-link contributing-link" href="/docs/contributor-guide">Contributing</a>
|
||||
<a class="nav-link" href="/community">Community</a>
|
||||
<a class="utility-input">
|
||||
<img src="/img/search.svg" />
|
||||
<input type="search" placeholder="Search the docs" class="algolia-search"/>
|
||||
</a>
|
||||
<span class="cta-header">{{ .Site.Data.landing.cta.button | markdownify }}</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user