diff --git a/website/site/data/landing.yaml b/website/site/data/landing.yaml index b5191c5e..65bc5a07 100644 --- a/website/site/data/landing.yaml +++ b/website/site/data/landing.yaml @@ -17,12 +17,12 @@ 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." + 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/)" editors: 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." + 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" description: "The web-based app includes rich-text editing, real-time preview, and drag-and-drop media uploads." @@ -30,7 +30,7 @@ editors: - feature: "Intuitive workflow for content teams" description: "Writers and editors can easily manage content from draft to review to publish across any number of custom content types." imgpath: "/img/hero-graphic.jpg" - - feature: "Instant access, without a GitHub account" + - feature: "Instant access, without a GitHub account" description: "With [Git Gateway](/docs/authentication-backends/#git-gateway-with-netlify-identity), you can add CMS access for any team member — even if they don’t have a GitHub account. " imgpath: "/img/hero-graphic.jpg" diff --git a/website/site/layouts/index.html b/website/site/layouts/index.html index 99a0c395..acf23578 100755 --- a/website/site/layouts/index.html +++ b/website/site/layouts/index.html @@ -32,7 +32,7 @@

{{ .Site.Data.landing.editors.hook | markdownify }}

-

{{ .Site.Data.landing.editors.intro | markdownify }}

+

{{ .Site.Data.landing.editors.intro | markdownify }}

{{ range $index, $id := .Site.Data.landing.editors.features }}
diff --git a/website/site/layouts/partials/header.html b/website/site/layouts/partials/header.html index 7965a0dd..0327620f 100755 --- a/website/site/layouts/partials/header.html +++ b/website/site/layouts/partials/header.html @@ -35,6 +35,6 @@ - Fork me on GitHub + {{ .Site.Data.landing.cta.button | markdownify }}
diff --git a/website/src/css/imports/base.css b/website/src/css/imports/base.css index ffa68358..91c97770 100755 --- a/website/src/css/imports/base.css +++ b/website/src/css/imports/base.css @@ -47,10 +47,14 @@ h3 { font-family: $roboto; font-size: 18px; font-weight: $semibold; - line-height: 40px; + line-height: 30px; + padding-bottom: $micro; margin: 0; } +h3 > p { +} + p, ul { font-size: $tiny; line-height: 26px; diff --git a/website/src/css/imports/community.css b/website/src/css/imports/community.css index a262d1ff..2c1d57d6 100644 --- a/website/src/css/imports/community.css +++ b/website/src/css/imports/community.css @@ -4,8 +4,11 @@ padding: $xl 0 $large 0; .community-features { - @neat-span-columns 8; + @neat-span-columns 12; + @media screen and (min-width: $tablet) { + @neat-span-columns 8; + } @media screen and (min-width: $desktop) { @neat-span-columns 6; } @@ -17,9 +20,12 @@ } .contributors { - @neat-span-columns 10; + @neat-span-columns 12; margin-top: $small; + @media screen and (min-width: $tablet) { + @neat-span-columns 10; + } @media screen and (min-width: $desktop) { @neat-span-columns 5; float: right; diff --git a/website/src/css/imports/cta.css b/website/src/css/imports/cta.css index 5359df2f..f944f463 100644 --- a/website/src/css/imports/cta.css +++ b/website/src/css/imports/cta.css @@ -9,11 +9,16 @@ .cta-primary { background-color: white; - padding: $small $medium $small $medium; + padding: $medium $small $medium $small; + + @media screen and (min-width: $tablet) { + padding: $medium; + } @media screen and (min-width: $desktop) { display: flex; align-items: center; + justify-content: space-between; box-shadow: 0 10px 30px 0 rgba(28,30,30,0.10), 0 3px 9px 0 rgba(28,30,30,0.15); border-radius: $largeBorderRadius; } @@ -23,9 +28,6 @@ line-height: 25px; color: $lightishGrey; - @media screen and (min-width: $desktop) { - } - .hook { font-weight: $bold; color: $darkGrey; @@ -33,8 +35,6 @@ } a { - display: inline-block; - margin-top: $tiny; color: white; text-transform: uppercase; font-size: $tiny; @@ -45,10 +45,12 @@ border-radius: $borderRadius; padding: 12px 18px 12px 18px; transition: .2s; - text-align: center; + display: inline-block; + margin-top: $tiny; + @media screen and (min-width: $desktop) { - min-width: 120px; + flex-shrink: 0; margin: 0 0 0 $small; } @@ -64,13 +66,4 @@ } - .cta-secondary { - font-size: 15px; - text-align: center; - width: 100%; - display: inline-block; - margin-top: $tiny; - color: $lightishGrey; - } - } diff --git a/website/src/css/imports/docs.css b/website/src/css/imports/docs.css index f2af395f..4d3e7791 100644 --- a/website/src/css/imports/docs.css +++ b/website/src/css/imports/docs.css @@ -119,7 +119,7 @@ h2:not(:first-child) { - margin-top: 86px; + margin-top: $large; } a { diff --git a/website/src/css/imports/editors.css b/website/src/css/imports/editors.css index e02bbd5a..a99195ac 100644 --- a/website/src/css/imports/editors.css +++ b/website/src/css/imports/editors.css @@ -2,12 +2,22 @@ @neat-row; margin-top: $xl; margin-bottom: $xxl; - text-align: center; + + @media screen and (min-width: $desktop) { + text-align: center; + } h2, p { max-width: $desktop; - margin-left: auto; - margin-right: auto; + + @media screen and (min-width: $desktop) { + margin-left: auto; + margin-right: auto; + } + } + + p#editor-intro { + max-width: 710px; } .editors-features { @@ -16,8 +26,8 @@ margin-top: $large; @media screen and (max-width: $desktop) { - align-items: center; - flex-direction: column; + justify-content: flex-start; + flex-wrap: wrap; } .feature { @@ -31,7 +41,8 @@ } @media screen and (max-width: $desktop) { - margin-top: $medium; + margin-top: $large; + margin-right: $medium; } } diff --git a/website/src/css/imports/header.css b/website/src/css/imports/header.css index a7134d67..dad47be3 100644 --- a/website/src/css/imports/header.css +++ b/website/src/css/imports/header.css @@ -75,13 +75,13 @@ header { width: 100%; z-index: 100; - @media screen and (min-width: $mobile) { + @media screen and (min-width: $tablet) { text-align: right; position: fixed; } &.scrolled { - @media screen and (min-width: $mobile) { + @media screen and (min-width: $tablet) { background: $darkerGrey; padding: $small 0; } @@ -91,23 +91,18 @@ header { background: $darkerGrey; padding: $small 0; - @media screen and (max-width: $mobile) { + @media screen and (max-width: $tablet) { position: static; } - .nav-link { + /*.nav-link { @media screen and (min-width: 487px) and (max-width: 767px) { margin-top: $micro; } - } + }*/ - .github-btn { - @media screen and (max-width: 767px) { - display: none; - } - } - .utility-input { + /*.utility-input { @media screen and (max-width: 767px) { display: block; height: $small; @@ -117,7 +112,7 @@ header { @media screen and (min-width: 487px) and (max-width: 767px) { margin-top: 32px; } - } + }*/ } a { @@ -125,46 +120,12 @@ header { display: inline-block; vertical-align: middle; -webkit-vertical-align: middle !important; - margin-left: $micro; - - @media screen and (min-width: $mobile) { - margin-left: 4px; - } - - @media screen and (min-width: $tablet) { - margin-left: $tiny; - } - - &.nav-link:nth-child(4) { - margin-right: $tiny; - } - - /*&.nav-link:not(:nth-child(2)):before { - content: '•'; - padding-right: $tiny; - color: $green; - - @media screen and (min-width: $mobile) { - padding-right: $micro; - } - - @media screen and (min-width: $tablet) { - padding-right: $tiny; - } - }*/ + margin-left: $tiny; &:hover { color: $green; } - &.github-btn { - margin-top: $tiny; - margin-left: $micro; - - @media screen and (min-width: 688px) { - margin-top: 0; - } - } } img { @@ -222,7 +183,7 @@ header { border-radius: 4px; background-color: rgba(255,255,255,0.1); color: white; - margin: 0 $micro 0 10px; + margin: 0 $micro 0 $tiny; padding-bottom: 9px; text-align: left; text-decoration: none; @@ -256,10 +217,36 @@ header { margin: 0 auto $tiny auto; width: 100%; - @media screen and (min-width: $mobile) { + @media screen and (min-width: $tablet) { float: left; margin: -4px 0 -6px 0; width: initial; } } + .cta-header a { + /*display: none;*/ + 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; + } + } } diff --git a/website/src/css/imports/hero.css b/website/src/css/imports/hero.css index 37cab5a4..bcad349a 100644 --- a/website/src/css/imports/hero.css +++ b/website/src/css/imports/hero.css @@ -15,18 +15,6 @@ padding-top: calc($xl * 1.5); } - /*&:before { - background: url('/img/bow.svg') no-repeat bottom center; - background-size: contain; - bottom: -1px; - content: ''; - height: $xl; - left: -$xl; - position: absolute; - right: -$xl; - width: calc(100% + ($xl * 2)); - }*/ - &.landing { @media screen and (min-width: $tablet) { padding-bottom: $xxl; @@ -36,7 +24,7 @@ .hero-copy { margin: $medium auto $xl auto; - @media screen and (min-width: $tablet) { + @media screen and (min-width: $desktop) { text-align: center; } } @@ -91,28 +79,9 @@ margin-bottom: 0; } - &:before { - border: 1px solid white; - border-bottom: none; - border-radius: $largeBorderRadius $largeBorderRadius 0 0; - box-sizing: border-box; - content: '•••'; - display: block; - font-size: $small; - height: $small; - line-height: 22px; - padding-left: 6px; - text-align: left; - width: 100%; - } - img { - border: 1px solid white; - border-radius: 0 0 $largeBorderRadius $largeBorderRadius; - box-sizing: border-box; - overflow: hidden; - width: 100%; - height: auto; + border-radius: $largeBorderRadius; + box-shadow: 0 10px 30px 0 rgba(0,0,0,0.15), 0 3px 9px 0 rgba(0,0,0,0.30); } }