Size and spacing improvements, killed secondary CTA, changed contributor layout, other fixes
This commit is contained in:
Lennart Ziburski
parent
49de2346a7
commit
479cdee524
@ -1,8 +1,7 @@
|
||||
---
|
||||
hero:
|
||||
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"
|
||||
devhook: "Built developer-first."
|
||||
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 = ♥"
|
||||
description: "Get the speed, security, and scalability of a static site, while still providing a convenient editing interface for content."
|
||||
@ -19,12 +18,10 @@ productvideo:
|
||||
cta:
|
||||
primaryhook: "Getting started is simple and free."
|
||||
primary: "Choose a template that’s pre-configured with a static site generator and deploys to a global CDN in one click."
|
||||
button: "[Get started →](/docs/start-with-a-template/)"
|
||||
secondary: "Or do you just want to add Netlify CMS to your existing site?"
|
||||
secondarylink: "[Read the setup guide.](/docs/quick-start)"
|
||||
button: "[Get started](/docs/start-with-a-template/)"
|
||||
|
||||
editors:
|
||||
hook: "A CMS that developers and content editors can agree on."
|
||||
hook: "A CMS that developers and content editors can agree on"
|
||||
intro: "You get to implement modern front end tools to deliver a faster, safer, and more scalable site.<br />Editors get a friendly UI and intuitive workflow that meets their content management requirements."
|
||||
features:
|
||||
- feature: "Editor-friendly user interface"
|
||||
@ -38,12 +35,12 @@ editors:
|
||||
imgpath: "/img/hero-graphic.jpg"
|
||||
|
||||
community:
|
||||
hook: "Supported by a growing community."
|
||||
hook: "Supported by a growing community"
|
||||
features:
|
||||
- feature: "Support when you need it"
|
||||
description: "Get up and running with comprehensive [documentation](/docs) and templates or work through difficult problems with help from the community on [Gitter](https://gitter.im/netlify/NetlifyCMS)."
|
||||
- feature: "A community-driven project you can help evolve"
|
||||
description: "Netlify CMS is built by a community of 60+ contributors — and you can help. Join our [bi-weekly planning sessions](/community) or read the [contributing guide](/docs/contributor-guide) to join in."
|
||||
contributors: "Thank you to our awesome contributors."
|
||||
contributors: "Thank you to our awesome contributors"
|
||||
|
||||
---
|
||||
|
||||
@ -9,7 +9,6 @@
|
||||
<span class="subhead">{{ .Site.Data.landing.hero.subhead | markdownify }}</span>
|
||||
</div>
|
||||
<div class="hero-features">
|
||||
<h2>{{ .Site.Data.landing.hero.devhook | markdownify }}</h2>
|
||||
{{ range $index, $id := .Site.Data.landing.hero.devfeatures }}
|
||||
<div class="feature">
|
||||
<h3>{{ .feature | markdownify }}</h3>
|
||||
@ -28,7 +27,6 @@
|
||||
<div class="cta-primary">
|
||||
<p><span class="hook">{{ .Site.Data.landing.cta.primaryhook | markdownify }}</span> {{ .Site.Data.landing.cta.primary | markdownify }}</p>{{ .Site.Data.landing.cta.button | markdownify }}
|
||||
</div>
|
||||
<p class="cta-secondary">{{ .Site.Data.landing.cta.secondary | markdownify }} {{ .Site.Data.landing.cta.secondarylink | markdownify }}</p>
|
||||
</section>
|
||||
|
||||
<section class="editors">
|
||||
@ -57,16 +55,16 @@
|
||||
<p>{{ .description | markdownify }}</p>
|
||||
</div>
|
||||
{{ end }}
|
||||
<div class="contributors feature">
|
||||
<h3>{{ .Site.Data.landing.community.contributors | markdownify }}</h3>
|
||||
{{ range .Site.Data.contributors }}
|
||||
<div class="contributor-list">
|
||||
{{ range . }}
|
||||
<a href="{{.profile}}" title="{{.name}}"><img src="{{.avatar_url}}" alt="{{.login}}" /></a>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="contributors feature">
|
||||
<h3>{{ .Site.Data.landing.community.contributors | markdownify }}</h3>
|
||||
{{ range .Site.Data.contributors }}
|
||||
<div class="contributor-list">
|
||||
{{ range . }}
|
||||
<a href="{{.profile}}" title="{{.name}}"><img src="{{.avatar_url}}" alt="{{.login}}" /></a>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user