diff --git a/website/config/variables.js b/website/config/variables.js index f349585f..1e94420a 100644 --- a/website/config/variables.js +++ b/website/config/variables.js @@ -9,11 +9,12 @@ module.exports = { lightishGrey: '#51555D', grey: '#313D3E', darkGrey: '#2F3132', - darkerGrey: '#1C1E1E', - blueGrey: '#9AA1AE', + darkerGrey: '#1E1F21', + blueGrey: '#BCC2CE', lightGreen: '#97bf2f', green: '#C9FA4B', darkGreen: '#7CA511', + darkerGreen: '#628013', shadeBlue: '#EFF0F4', blue: '#3A69C7', 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 00309950..c5f1395b 100644 --- a/website/site/data/landing.yaml +++ b/website/site/data/landing.yaml @@ -21,17 +21,19 @@ 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 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" diff --git a/website/site/data/updates.yml b/website/site/data/updates.yml new file mode 100644 index 00000000..ea886120 --- /dev/null +++ b/website/site/data/updates.yml @@ -0,0 +1,37 @@ +updates: + - date: 2018-02-21 + version: '1.2.2' + description: Fixes ES5 transpiling. + url: 'https://github.com/netlify/netlify-cms/releases/tag/1.2.2' + - date: 2018-02-21 + version: '1.2.1' + description: Allows label_singular config for collections and lists and distinct frontmatter delimiters. + url: 'https://github.com/netlify/netlify-cms/releases/tag/1.2.1' + - date: 2018-02-13 + version: '1.2' + description: Adds support for multiple frontmatter formats and custom delimiters, UI improvements. + url: 'https://github.com/netlify/netlify-cms/releases/tag/1.2.0' + - date: 2018-01-25 + version: '1.1' + description: You can now register external backends and we improved metadata handling. + url: 'https://github.com/netlify/netlify-cms/releases/tag/1.1.0' + - date: 2018-01-23 + version: '1.0.4' + description: Fixes various UI bugs and adds expand / collapse functionality to the object widget. + url: 'https://github.com/netlify/netlify-cms/releases/tag/1.0.4' + - date: 2018-12-19 + version: '1.0.3' + description: Small bug fix release. + url: 'https://github.com/netlify/netlify-cms/releases/tag/1.0.3' + - date: 2018-12-07 + version: '1.0.2' + description: Small bug fix release. + url: 'https://github.com/netlify/netlify-cms/releases/tag/1.0.2' + - date: 2018-12-07 + version: '1.0.1' + description: Small bug fix release. + url: 'https://github.com/netlify/netlify-cms/releases/tag/1.0.1' + - date: 2018-12-07 + version: '1.0.0' + description: The first major release of Netlify CMS with an all-new UI, revamped documentation and much more. + url: 'https://github.com/netlify/netlify-cms/releases/tag/1.0.0' diff --git a/website/site/layouts/index.html b/website/site/layouts/index.html index 59bba34c..50734057 100755 --- a/website/site/layouts/index.html +++ b/website/site/layouts/index.html @@ -7,6 +7,7 @@

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

{{ .Site.Data.landing.hero.subhead | markdownify }} + {{ .Site.Data.landing.cta.button | markdownify }}
{{ range $index, $id := .Site.Data.landing.hero.devfeatures }} @@ -16,9 +17,10 @@
{{ end }} -
- -
+ + +
▶
+ @@ -29,6 +31,18 @@ +
+
+
    + {{ range .Site.Data.updates }} + {{ range first 3 . }} +
  1. {{ .version }}{{ dateFormat "January 2, 2006" .date }}
    {{ .description | markdownify }}
    2.  + {{ end }} + {{ end }} +
+
+
+

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

@@ -48,13 +62,15 @@

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

-
- {{ range $index, $id := .Site.Data.landing.community.features }} -
-

{{ .feature | markdownify }}

-

{{ .description | markdownify }}

+
+
+ {{ range $index, $id := .Site.Data.landing.community.features }} +
+

{{ .feature | markdownify }}

+

{{ .description | markdownify }}

+
+ {{ end }}
- {{ 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 09af0b72..29a8e890 100755 --- a/website/site/layouts/partials/footer.html +++ b/website/site/layouts/partials/footer.html @@ -1,6 +1,15 @@ @@ -24,5 +33,6 @@ debug: false // Set debug to true if you want to inspect the dropdown {{- if eq .Title "Widgets" -}} {{- end -}} + diff --git a/website/site/layouts/partials/header.html b/website/site/layouts/partials/header.html index 0327620f..0226b568 100755 --- a/website/site/layouts/partials/header.html +++ b/website/site/layouts/partials/header.html @@ -27,14 +27,20 @@ {{ end }} diff --git a/website/src/css/imports/base.css b/website/src/css/imports/base.css index 5c486757..4e3728c1 100755 --- a/website/src/css/imports/base.css +++ b/website/src/css/imports/base.css @@ -27,16 +27,16 @@ h1 { @media screen and (min-width: $tablet) { font-size: 42px; - line-height: 60px; + line-height: 56px; } } 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 1fbe8085..984d013f 100644 --- a/website/src/css/imports/community.css +++ b/website/src/css/imports/community.css @@ -6,11 +6,11 @@ @media screen and (min-width: $desktop) { h2 { text-align: center; - margin-bottom: $medium; + margin-bottom: $large; } } - .community-features { + .community { @neat-span-columns 12; @media screen and (min-width: $tablet) { @@ -19,16 +19,17 @@ @media screen and (min-width: $desktop) { @neat-span-columns 6; } + } + .community-features { .feature { - margin-top: $small; - + margin-top: $medium; } } .contributors { @neat-span-columns 12; - margin-top: $small; + margin-top: $medium; @media screen and (min-width: $tablet) { @neat-span-columns 10; @@ -42,8 +43,13 @@ margin-top: 4px; img { width: 32px; - margin: 0 $micro $micro 0; + margin: 0 4px 4px 0; border-radius: 16px; + transition: 0.1s; + } + img:hover { + transform: scale(1.3); + box-shadow: 0 2px 6px 0 rgba(0,0,0,0.25), 0 4px 12px 0 rgba(0,0,0,0.25); } } diff --git a/website/src/css/imports/cta.css b/website/src/css/imports/cta.css index 0677e111..b1e717f3 100644 --- a/website/src/css/imports/cta.css +++ b/website/src/css/imports/cta.css @@ -2,7 +2,7 @@ @media screen and (min-width: $desktop) { position: relative; - top: -50px; + top: -65px; width: 880px; margin: auto; } 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 1493bc7d..b74d8987 100644 --- a/website/src/css/imports/header.css +++ b/website/src/css/imports/header.css @@ -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; @@ -192,7 +205,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; } @@ -213,44 +226,20 @@ header { } } - .logo { - display: block; - margin: 0 auto $tiny auto; - width: 100%; - + .logo-container { @media screen and (min-width: $tablet) { + margin-top: 10px; float: left; - margin: -4px 0 -6px 0; - width: initial; } - } - .cta-header { - margin-left: $micro; - } - .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; + .logo { + display: block; + margin: 0 auto $tiny auto; + width: 100%; + @media screen and (min-width: $tablet) { + margin: -14px 20px -6px 0; + width: initial; + float: left; + } } } } diff --git a/website/src/css/imports/hero.css b/website/src/css/imports/hero.css index d451689e..1ac692e2 100644 --- a/website/src/css/imports/hero.css +++ b/website/src/css/imports/hero.css @@ -1,7 +1,7 @@ .hero { @neat-row; background: $darkerGrey; - background-image: linear-gradient(-180deg, #323B3B 0%, $darkerGrey 20%); + background-image: linear-gradient(-180deg, #2A2C24 0%, $darkerGrey 20%); color: $blueGrey; overflow: hidden; padding: calc($xl * 2.25) 0 0 0; @@ -16,17 +16,14 @@ } &.landing { - @media screen and (min-width: $tablet) { - padding-bottom: $xxl; + padding-bottom: 100px; + @media screen and (min-width: $desktop) { + padding-bottom: 200px; } } .hero-copy { margin: $medium auto $xl auto; - - @media screen and (min-width: $desktop) { - text-align: center; - } } .subhead { @@ -45,7 +42,7 @@ } h1 { - color: white; + color: $green; margin-bottom: 0; } @@ -54,8 +51,34 @@ } h3 { - color: $green; - font-size: 20px; + 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 { @@ -65,24 +88,62 @@ } .feature { - margin-top: $medium; + margin: 0 0 $medium 0; } } .hero-graphic { - margin: $large auto $large auto; + @neat-span-columns 12; + position: relative; + cursor: pointer; @media screen and (min-width: $tablet) { @neat-span-columns 6; float: right; - margin-bottom: 0; + margin: 0; } - img { + img, iframe { + width: 100%; 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); } + + .hero-videolink { + 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; + 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; + } + + &: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); + } + } + + &:active { + .hero-videolink { + transform: scale(0.9); + } + } } /*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 new file mode 100644 index 00000000..cdb844f3 --- /dev/null +++ b/website/src/css/imports/whatsnew.css @@ -0,0 +1,64 @@ +.whatsnew { + 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; + 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 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 { + .update-metadata { + font-size: 13px; + color: rgba(255,255,255,0.6); + display: block; + margin-bottom: $micro; + .update-version { + font-weight: $bold; + background-color: $shadeBlue; + color: $darkGrey; + padding: 0 4px 0 4px; + margin-right: 8px; + border-radius: 2px; + } + } + .update-description { + font-size: 15px; + line-height: 20px; + } + } + } + +} diff --git a/website/src/css/main.css b/website/src/css/main.css index 2632ede0..e0d85365 100755 --- a/website/src/css/main.css +++ b/website/src/css/main.css @@ -3,6 +3,7 @@ @import "imports/header.css"; @import "imports/hero.css"; @import "imports/cta.css"; +@import "imports/whatsnew.css"; @import "imports/editors.css"; @import "imports/community.css"; @import "imports/collab.css"; 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..87aa61a0 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(); @@ -122,3 +122,12 @@ var eventInfoLoad = function() { } eventInfoLoad(); + + +// Load inline YouTube video +var embedcode = ''; + +$('.hero-graphic').click(function() { + $('.hero-graphic img').replaceWith(embedcode); + $('.hero-videolink').remove(); +});