diff --git a/website/config/variables.js b/website/config/variables.js index 7ed9569c..1e94420a 100644 --- a/website/config/variables.js +++ b/website/config/variables.js @@ -10,7 +10,7 @@ module.exports = { grey: '#313D3E', darkGrey: '#2F3132', darkerGrey: '#1E1F21', - blueGrey: '#D2D7E2', + blueGrey: '#BCC2CE', lightGreen: '#97bf2f', green: '#C9FA4B', darkGreen: '#7CA511', diff --git a/website/site/data/global.yaml b/website/site/data/global.yaml index 58255cc0..4313f631 100644 --- a/website/site/data/global.yaml +++ b/website/site/data/global.yaml @@ -1,13 +1,8 @@ --- footer: - hook: | - Host faster.
- Manage easier.
- Smile bigger. - headline: "Netlify is your one-stop web dev solution." - body: "Vestibulum rutrum quam vitae fringilla tincidunt. Suspendisse nec tortor urna. Ut laoreet sodales nisi, quis iaculis nulla iaculis vitae. Donec sagittis faucibu." - cta: - secondarycta: - copy: "Try it now FREE" - link: "/intro" + buttons: + - name: "Twitter" + url: "https://twitter.com/netlifycms" + - name: "GitHub" + url: "https://github.com/netlify/netlify-cms" --- diff --git a/website/site/data/landing.yaml b/website/site/data/landing.yaml index b3a2f525..47350a93 100644 --- a/website/site/data/landing.yaml +++ b/website/site/data/landing.yaml @@ -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 = ♥" @@ -21,35 +21,23 @@ editors: features: - feature: "Editor-friendly user interface" description: "The web-based app includes rich-text editing, real-time preview, and drag-and-drop media uploads." - imgpath: "/img/screenshot-editor.png" + imgpath: "/img/feature-editor.svg" - 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/screenshot-editorial.png" - - feature: "Instant access, without a GitHub account" + imgpath: "/img/feature-workflow.svg" + - feature: "Instant access without 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/screenshot-identity.png" + imgpath: "/img/feature-access.svg" community: hook: "Supported by a growing community" features: - feature: "Built on the JAMstack" - description: "Netlify CMS is based on client-side JavaScript, reusable APIs and prebuilt Markup. Compared to server-side CMS like WordPress, this means better performance, higher security, lower cost of scaling, and a better developer experience. You can learn more about the JAMstack movement on [jamstack.org](https://jamstack.org)." + description: "Netlify CMS is based on client-side JavaScript, reusable APIs and prebuilt Markup. Compared to server-side CMS like WordPress, this means better performance, higher security, lower cost of scaling, and a better developer experience. You can learn more about the JAMstack on [jamstack.org](https://jamstack.org)." - 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." - featurese: - - feature: "Built on the JAMstack" - description: "Netlify CMS is based on client-side JavaScript, reusable APIs and prebuilt Markup. Compared to server-side CMS like WordPress, this means better performance, higher security, lower cost of scaling, and a better developer experience. You can learn more about the JAMstack movement on [jamstack.org](https://jamstack.org)." - - 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." - buttons: - - name: "Twitter" - url: "https://twitter.com/netlifycms" - - name: "GitHub" - url: "https://github.com/netlify/netlify-cms" contributors: "Made possible by awesome contributors" --- diff --git a/website/site/layouts/index.html b/website/site/layouts/index.html index 67639fea..8e0ec5a3 100755 --- a/website/site/layouts/index.html +++ b/website/site/layouts/index.html @@ -17,7 +17,7 @@ {{ end }}
- + ▶ Watch how to get started in just over 2 minutes

@@ -71,11 +71,6 @@ {{ end }} -
- {{ range $index, $id := .Site.Data.landing.community.buttons }} - {{ .name }} - {{ end }} -

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

diff --git a/website/site/layouts/pages/community.html b/website/site/layouts/pages/community.html index 6dbd5015..8908ca73 100644 --- a/website/site/layouts/pages/community.html +++ b/website/site/layouts/pages/community.html @@ -16,7 +16,7 @@
-

at

+

at

{{ .Params.primarycta | markdownify }}
diff --git a/website/site/layouts/partials/footer.html b/website/site/layouts/partials/footer.html index 00092f41..29a8e890 100755 --- a/website/site/layouts/partials/footer.html +++ b/website/site/layouts/partials/footer.html @@ -1,6 +1,15 @@ diff --git a/website/src/css/imports/base.css b/website/src/css/imports/base.css index 8a32143a..6f002a6b 100755 --- a/website/src/css/imports/base.css +++ b/website/src/css/imports/base.css @@ -33,10 +33,10 @@ h1 { h2 { font-family: $roboto; - font-size: 32px; + font-size: 36px; font-weight: $bold; color: $darkGrey; - margin: 0 auto $tiny auto; + margin-bottom: $tiny; &.subhead { font-weight: $regular; @@ -46,8 +46,8 @@ h2 { h3 { font-family: $roboto; font-size: 18px; - font-weight: $semibold; - line-height: 30px; + font-weight: $bold; + line-height: 26px; padding-bottom: $micro; margin: 0; } diff --git a/website/src/css/imports/community.css b/website/src/css/imports/community.css index 9d7aebce..984d013f 100644 --- a/website/src/css/imports/community.css +++ b/website/src/css/imports/community.css @@ -6,7 +6,7 @@ @media screen and (min-width: $desktop) { h2 { text-align: center; - margin-bottom: $medium; + margin-bottom: $large; } } @@ -23,32 +23,13 @@ .community-features { .feature { - margin-top: $small; - } - } - - .community-buttons { - margin-top: $small; - padding-top: $medium; - border-top: 1px solid $lightestGrey; - a { - padding: $micro $tiny $micro $tiny; - margin-right: $micro; - background-color: $lightishGrey; - color: white; - border-radius: $borderRadius; - } - a:hover { - background-color: $darkGreen; - } - a:active { - background-color: $darkerGreen; + margin-top: $medium; } } .contributors { @neat-span-columns 12; - margin-top: $small; + margin-top: $medium; @media screen and (min-width: $tablet) { @neat-span-columns 10; @@ -62,7 +43,7 @@ margin-top: 4px; img { width: 32px; - margin: 0 $micro $micro 0; + margin: 0 4px 4px 0; border-radius: 16px; transition: 0.1s; } diff --git a/website/src/css/imports/editors.css b/website/src/css/imports/editors.css index 82610f2a..18a471bf 100644 --- a/website/src/css/imports/editors.css +++ b/website/src/css/imports/editors.css @@ -1,7 +1,6 @@ .editors { @neat-row; - margin-top: calc($large * 1.5); - margin-bottom: $xxl; + margin: $xxl 0 $xxl 0; @media screen and (min-width: $desktop) { text-align: center; @@ -22,8 +21,8 @@ .editors-features { display: flex; - justify-content: space-evenly; - margin-top: $large; + justify-content: space-between; + margin-top: calc($large * 2); @media screen and (max-width: $desktop) { justify-content: flex-start; @@ -32,18 +31,19 @@ } .feature { - max-width: 340px; + min-width: 260px; + width: 320px; + text-align: left; + margin-right: $medium; img { - max-width: 280px; + max-width: 300px; margin-bottom: $tiny; - border-radius: $borderRadius; - box-shadow: 0 4px 12px 0 rgba(68,74,87,0.10), 0 1px 3px 0 rgba(68,74,87,0.20); + margin-left: -9px; } @media screen and (max-width: $desktop) { margin-top: $large; - margin-right: $medium; } } diff --git a/website/src/css/imports/footer.css b/website/src/css/imports/footer.css index 3680e335..c740de5a 100644 --- a/website/src/css/imports/footer.css +++ b/website/src/css/imports/footer.css @@ -1,14 +1,43 @@ footer { background: white; - padding: $medium 0; + padding: $medium 0 $large 0; + text-align: center; - p { - color: $grey; - font-family: $roboto; - font-size: 12px; - opacity: .5; + .footer-info { + @media screen and (min-width: $tablet) { + float: left; + margin-right: $small; + } + p { + color: $grey; + font-family: $roboto; + font-size: 12px; + opacity: .5; + } + a { + color: $grey; + } } - a { - color: $grey; + + .social-buttons { + margin-bottom: $small; + @media screen and (min-width: $tablet) { + float: left; + margin-right: $small; + } + a { + padding: $micro $tiny $micro $tiny; + margin-right: $micro; + background-color: $lightishGrey; + color: white; + border-radius: $borderRadius; + } + a:hover { + background-color: $darkGreen; + } + a:active { + background-color: $darkerGreen; + } } + } diff --git a/website/src/css/imports/header.css b/website/src/css/imports/header.css index 847a709e..9a8b7671 100644 --- a/website/src/css/imports/header.css +++ b/website/src/css/imports/header.css @@ -192,7 +192,7 @@ header { line-height: 24px; transition: all .2s ease-in-out; - @media screen and (min-width: 968px) { + @media screen and (min-width: 1024px) { display: inline; } @@ -228,10 +228,16 @@ header { float: left; } } + iframe { + @media screen and (max-width: 820px) { + display: none; + opacity: 0; + } + } } .cta-header { - margin-left: $micro; + margin-left: $tiny; } .cta-header a { display: inline-block; diff --git a/website/src/css/imports/hero.css b/website/src/css/imports/hero.css index a0c8255c..2e3676f8 100644 --- a/website/src/css/imports/hero.css +++ b/website/src/css/imports/hero.css @@ -16,17 +16,14 @@ } &.landing { - @media screen and (min-width: $tablet) { - padding-bottom: 165px; + padding-bottom: 100px; + @media screen and (min-width: $desktop) { + padding-bottom: 200px; } } .hero-copy { - margin: $large auto $medium auto; - - @media screen and (min-width: $desktop) { - /* text-align: center; */ - } + margin: $medium auto $xl auto; } .subhead { @@ -47,6 +44,7 @@ h1 { color: $green; margin-bottom: 0; + max-width: 800px; } h2 { @@ -55,8 +53,6 @@ h3 { color: white; - font-size: $tiny; - padding-bottom: 0; } .hero-features { @@ -66,18 +62,23 @@ } .feature { - margin-top: $medium; + margin: 0 0 $medium 0; } } .hero-graphic { - transform: scale(1.1) rotate(2deg); @media screen and (min-width: $tablet) { @neat-span-columns 6; float: right; - margin-bottom: 0; + margin: 0; + transform: scale(1.1) rotate(2deg); + } + + img { + 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); } a.hero-videolink { @@ -97,11 +98,6 @@ a.hero-videolink:active { background-color: rgba(255,255,255,0.4); } - - img { - 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); - } } /*COMMUNITY PAGE*/ diff --git a/website/src/css/imports/utilities.css b/website/src/css/imports/utilities.css index 58a651b3..c1dce614 100644 --- a/website/src/css/imports/utilities.css +++ b/website/src/css/imports/utilities.css @@ -256,4 +256,4 @@ img.responsive { line-height: 28px; color: $lightGrey; } -} \ No newline at end of file +} diff --git a/website/src/css/imports/whatsnew.css b/website/src/css/imports/whatsnew.css index 0700ca80..cdb844f3 100644 --- a/website/src/css/imports/whatsnew.css +++ b/website/src/css/imports/whatsnew.css @@ -1,32 +1,45 @@ .whatsnew { - margin-top: -98px; - padding: 75px 0 $medium 0; + padding: $medium 0 $medium 0; background-color: $lightishGrey; color: white; + @media screen and (min-width: $desktop) { + margin-top: -98px; + padding-top: 75px; + } ol { display: flex; justify-content: space-between; - margin-left: auto; - margin-right: auto; list-style: none; padding-left: 0; + @media screen and (max-width: $desktop) { + flex-wrap: wrap; + } a { color: white; font-weight: $regular; + min-width: 250px; + max-width: 320px; + margin-right: $medium; + @media screen and (max-width: $desktop) { + max-width: 100%; + min-width: 100%; + padding: 16px 0 16px 0; + } } a:hover { padding: 16px 24px 16px 24px; - margin: -16px -24px -16px -24px; + margin: -16px calc($medium - 24px) -16px -24px; background-color: $darkGrey; border-radius: $borderRadius; + @media screen and (max-width: $desktop) { + margin: 0 -24px 0 -24px; + } } a:active { background-color: $darkerGrey; } li { - min-width: 250px; - max-width: 350px; .update-metadata { font-size: 13px; color: rgba(255,255,255,0.6); diff --git a/website/src/img/feature-access.svg b/website/src/img/feature-access.svg new file mode 100644 index 00000000..ba1dbffb --- /dev/null +++ b/website/src/img/feature-access.svg @@ -0,0 +1 @@ +access \ No newline at end of file diff --git a/website/src/img/feature-editor.svg b/website/src/img/feature-editor.svg new file mode 100644 index 00000000..e6a5d793 --- /dev/null +++ b/website/src/img/feature-editor.svg @@ -0,0 +1 @@ +editor \ No newline at end of file diff --git a/website/src/img/feature-workflow.svg b/website/src/img/feature-workflow.svg new file mode 100644 index 00000000..b8e9fc6a --- /dev/null +++ b/website/src/img/feature-workflow.svg @@ -0,0 +1 @@ +workflowDRAFT SIN REVIEWREADY \ No newline at end of file diff --git a/website/src/img/screenshot-editor.jpg b/website/src/img/screenshot-editor.jpg new file mode 100644 index 00000000..f3323d9f Binary files /dev/null and b/website/src/img/screenshot-editor.jpg differ diff --git a/website/src/js/app.js b/website/src/js/app.js index 30a1c63f..f8ede71a 100755 --- a/website/src/js/app.js +++ b/website/src/js/app.js @@ -113,8 +113,8 @@ var eventInfoLoad = function() { function updateDate(eventDate) { $('.month').append(moment(eventDate).format('MMMM')); $('.day').append(moment(eventDate).format('DD')); - $('.calendar-cta h2 strong:first-child()').append(moment(eventDate).format('dddd, MMMM Do')); - $('.calendar-cta h2 strong:last-child()').append(`${moment(eventDate).utcOffset(-8).format('h a')} PT`); + $('.calendar-cta h3 strong:first-child()').append(moment(eventDate).format('dddd, MMMM Do')); + $('.calendar-cta h3 strong:last-child()').append(`${moment(eventDate).utcOffset(-8).format('h a')} PT`); } eventRequest.send();