From 479cdee5246535d4823b0698e7fec2c0aa1f8cd1 Mon Sep 17 00:00:00 2001 From: Lennart Ziburski Date: Thu, 7 Dec 2017 10:50:29 +0100 Subject: [PATCH] Size and spacing improvements, killed secondary CTA, changed contributor layout, other fixes --- website/site/data/landing.yaml | 15 ++++----- website/site/layouts/index.html | 22 ++++++------- website/src/css/imports/base.css | 19 +++++------ website/src/css/imports/community.css | 45 ++++++++++++++------------- website/src/css/imports/cta.css | 10 ++++-- website/src/css/imports/editors.css | 4 +-- website/src/css/imports/hero.css | 10 +++--- 7 files changed, 65 insertions(+), 60 deletions(-) diff --git a/website/site/data/landing.yaml b/website/site/data/landing.yaml index f038ba17..b5191c5e 100644 --- a/website/site/data/landing.yaml +++ b/website/site/data/landing.yaml @@ -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.
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" --- diff --git a/website/site/layouts/index.html b/website/site/layouts/index.html index 746c81e1..99a0c395 100755 --- a/website/site/layouts/index.html +++ b/website/site/layouts/index.html @@ -9,7 +9,6 @@ {{ .Site.Data.landing.hero.subhead | markdownify }}
-

{{ .Site.Data.landing.hero.devhook | markdownify }}

{{ range $index, $id := .Site.Data.landing.hero.devfeatures }}

{{ .feature | markdownify }}

@@ -28,7 +27,6 @@

{{ .Site.Data.landing.cta.primaryhook | markdownify }} {{ .Site.Data.landing.cta.primary | markdownify }}

{{ .Site.Data.landing.cta.button | markdownify }}
-

{{ .Site.Data.landing.cta.secondary | markdownify }} {{ .Site.Data.landing.cta.secondarylink | markdownify }}

@@ -57,16 +55,16 @@

{{ .description | markdownify }}

{{ end }} -
-

{{ .Site.Data.landing.community.contributors | markdownify }}

- {{ range .Site.Data.contributors }} -
- {{ range . }} - {{.login}} - {{ end }} -
- {{ end }} -
+
+
+

{{ .Site.Data.landing.community.contributors | markdownify }}

+ {{ range .Site.Data.contributors }} +
+ {{ range . }} + {{.login}} + {{ end }} +
+ {{ end }}
diff --git a/website/src/css/imports/base.css b/website/src/css/imports/base.css index fd523c4f..ffa68358 100755 --- a/website/src/css/imports/base.css +++ b/website/src/css/imports/base.css @@ -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; } diff --git a/website/src/css/imports/community.css b/website/src/css/imports/community.css index c563c370..a262d1ff 100644 --- a/website/src/css/imports/community.css +++ b/website/src/css/imports/community.css @@ -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; + } + } + + } } diff --git a/website/src/css/imports/cta.css b/website/src/css/imports/cta.css index 15479aaa..5359df2f 100644 --- a/website/src/css/imports/cta.css +++ b/website/src/css/imports/cta.css @@ -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; } } diff --git a/website/src/css/imports/editors.css b/website/src/css/imports/editors.css index 9c860d1b..e02bbd5a 100644 --- a/website/src/css/imports/editors.css +++ b/website/src/css/imports/editors.css @@ -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; diff --git a/website/src/css/imports/hero.css b/website/src/css/imports/hero.css index 3842f6c7..37cab5a4 100644 --- a/website/src/css/imports/hero.css +++ b/website/src/css/imports/hero.css @@ -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 {