Layout tweaks, updated illustrations, responsiveness

This commit is contained in:
Lennart Ziburski 2018-02-24 01:12:39 +01:00
parent 07a76c658a
commit 941cf44017
19 changed files with 126 additions and 111 deletions

View File

@ -10,7 +10,7 @@ module.exports = {
grey: '#313D3E',
darkGrey: '#2F3132',
darkerGrey: '#1E1F21',
blueGrey: '#D2D7E2',
blueGrey: '#BCC2CE',
lightGreen: '#97bf2f',
green: '#C9FA4B',
darkGreen: '#7CA511',

View File

@ -1,13 +1,8 @@
---
footer:
hook: |
Host faster.</br>
Manage easier.</br>
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"
---

View File

@ -1,6 +1,6 @@
---
hero:
headline: "Open source content management <br />for your Git&nbsp;workflow"
headline: "Open source content management for&nbsp;your Git&nbsp;workflow"
subhead: "Use Netlify CMS with any static site generator for a faster and more flexible web&nbsp;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&nbsp;account"
imgpath: "/img/feature-workflow.svg"
- feature: "Instant access without GitHub&nbsp;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 dont have a GitHub account. "
imgpath: "/img/screenshot-identity.png"
imgpath: "/img/feature-access.svg"
community:
hook: "Supported by a growing&nbsp;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"
---

View File

@ -17,7 +17,7 @@
{{ end }}
</div>
<div class="hero-graphic">
<img src="/img/screenshot-editor.png" class="responsive"/>
<img src="/img/screenshot-editor.jpg" class="responsive"/>
<a class="hero-videolink" href="https://www.youtube.com/watch?v=p6h-rYSVX90">&#x25b6; Watch how to get started in just over 2 minutes</a>
<p>
</div>
@ -71,11 +71,6 @@
</div>
{{ end }}
</div>
<div class="community-buttons">
{{ range $index, $id := .Site.Data.landing.community.buttons }}
<a href="{{ .url }}">{{ .name }}</a>
{{ end }}
</div>
</div>
<div class="contributors feature">
<h3>{{ .Site.Data.landing.community.contributors | markdownify }}</h3>

View File

@ -16,7 +16,7 @@
<div class="month"></div>
<div class="day"></div>
</div>
<h2><strong></strong> at <strong></strong></h2>
<h3><strong></strong> at <strong></strong></h3>
<div class="cal-cta">{{ .Params.primarycta | markdownify }}</div>
</div>

View File

@ -1,6 +1,15 @@
<footer>
<p class="contained"><a href="https://github.com/netlify/netlify-cms/blob/master/LICENSE" class="text-link">Distributed under MIT License</a> ·
<a href="https://github.com/netlify/netlify-cms/blob/master/CODE_OF_CONDUCT.md" class="text-link">Code of Conduct</a></p>
<div class="contained">
<div class="social-buttons">
{{ range $index, $id := .Site.Data.global.footer.buttons }}
<a href="{{ .url }}">{{ .name }}</a>
{{ end }}
</div>
<div class="footer-info">
<p><a href="https://github.com/netlify/netlify-cms/blob/master/LICENSE" class="text-link">Distributed under MIT License</a> ·
<a href="https://github.com/netlify/netlify-cms/blob/master/CODE_OF_CONDUCT.md" class="text-link">Code of Conduct</a></p>
</div>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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;
}
}

View File

@ -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;
}
}
}

View File

@ -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;

View File

@ -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*/

View File

@ -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);

View File

@ -0,0 +1 @@
<svg width="318" height="198" viewBox="0 0 318 198" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>access</title><defs><linearGradient x1="0%" y1="22.8125%" y2="76.1545%" id="c"><stop stop-color="#EBECEF" offset="0%"/><stop stop-color="#F5F5F5" offset="100%"/></linearGradient><rect id="b" width="300" height="180" rx="6"/><filter x="-6%" y="-7.8%" width="112%" filterUnits="objectBoundingBox" id="a"><feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.147843071 0" in="shadowBlurOuter1" result="shadowMatrixOuter1"/><feOffset dy="3" in="SourceAlpha" result="shadowOffsetOuter2"/><feGaussianBlur stdDeviation="4.5" in="shadowOffsetOuter2" result="shadowBlurOuter2"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0974298007 0" in="shadowBlurOuter2" result="shadowMatrixOuter2"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="shadowMatrixOuter2"/></feMerge></filter><rect id="e" x="94" y="35" width="100" height="110" rx="3"/><filter x="-18%" y="-12.7%" width="136%" height="132.7%" filterUnits="objectBoundingBox" id="d"><feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.147843071 0" in="shadowBlurOuter1" result="shadowMatrixOuter1"/><feOffset dy="3" in="SourceAlpha" result="shadowOffsetOuter2"/><feGaussianBlur stdDeviation="4.5" in="shadowOffsetOuter2" result="shadowBlurOuter2"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0974298007 0" in="shadowBlurOuter2" result="shadowMatrixOuter2"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="shadowMatrixOuter2"/></feMerge></filter></defs><g transform="translate(9 6)" fill="none"><use fill="#000" filter="url(#a)" xlink:href="#b"/><use fill="url(#c)" xlink:href="#b"/><use fill="#000" filter="url(#d)" xlink:href="#e"/><use fill="#FFF" xlink:href="#e"/><circle fill="#AEB1BD" cx="144" cy="54" r="9"/><path fill="#EFF0F4" d="M102 72h84v12h-84z"/><path fill="#D4D6DD" d="M108 76h26v4h-26z"/><path fill="#EFF0F4" d="M102 88h84v12h-84z"/><path fill="#D4D6DD" d="M108 92h38v4h-38z"/><path fill="#3A69C7" d="M102 104h84v12h-84z"/><path fill="#FFF" d="M134 108h20v4h-20z"/><path fill="#D4D6DD" d="M129 131h30v4h-30z"/></g></svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

View File

@ -0,0 +1 @@
<svg width="318" height="198" viewBox="0 0 318 198" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>editor</title><defs><rect id="b" width="300" height="180" rx="6"/><filter x="-6%" y="-7.8%" width="112%" filterUnits="objectBoundingBox" id="a"><feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.147843071 0" in="shadowBlurOuter1" result="shadowMatrixOuter1"/><feOffset dy="3" in="SourceAlpha" result="shadowOffsetOuter2"/><feGaussianBlur stdDeviation="4.5" in="shadowOffsetOuter2" result="shadowBlurOuter2"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0974298007 0" in="shadowBlurOuter2" result="shadowMatrixOuter2"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="shadowMatrixOuter2"/></feMerge></filter><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="c"><stop stop-color="#4779DD" offset="0%"/><stop stop-color="#3A69C7" offset="100%"/></linearGradient></defs><g transform="translate(9 6)" fill="none" fill-rule="evenodd"><use fill="#000" filter="url(#a)" xlink:href="#b"/><use fill="#FFF" xlink:href="#b"/><path d="M0 19h149v161H6c-3.3137 0-6-2.6863-6-6V19z" fill="#EFF0F4"/><path fill="#AEB1BD" d="M10 31h18v4H10z"/><path fill="#FFF" d="M10 39h129v12H10z"/><path fill="#D4D6DD" d="M16 43h44v4H16z"/><path fill="#AEB1BD" d="M10 59h10v4H10z"/><path fill="#FFF" d="M10 67h129v12H10z"/><path fill="#D4D6DD" d="M16 71h26v4H16z"/><path fill="#AEB1BD" d="M10 87h35v4H10z"/><path fill="#FFF9E5" d="M10 95h42v27.7686H10z"/><circle fill="#FFC500" cx="31" cy="110.4463" r="7.8099"/><path d="M10 110.1683c4.6101 2.4917 9.3585 3.7375 14.245 3.7375 7.33 0 10.2112-5.0507 15.7083-5.0507 3.6648 0 7.6803 1.5082 12.0467 4.5246v9.3889H10v-12.6003z" fill="#D4D6DD"/><path d="M10 115.257c4.6503-2.702 8.896-4.0531 12.7373-4.0531 5.7618 0 11.322 4.9766 15.525 4.9766 2.8018 0 7.3811-2.196 13.7377-6.588v13.1761H10v-7.5116z" fill="#9AA1AE"/><path fill="#AEB1BD" d="M10 131h10v4H10z"/><path fill="#FFF" d="M10 139h129v41H10z"/><path fill="#D4D6DD" d="M16 145h117v4H16zm0 6h117v4H16zm0 6h83v4H16zm0 10h117v4H16zm0 6h43v4H16z"/><path fill="#9AA1AE" d="M61 172h2v6h-2z"/><path fill="#AEB1BD" d="M179 31h91v8h-91z"/><path fill="#D4D6DD" d="M213 42h24v4h-24z"/><path fill="#FFF9E5" d="M164 56h121v80H164z"/><circle fill="#FFC500" cx="224.5" cy="100.5" r="22.5"/><path d="M164 99.6992c13.2815 7.1784 26.9613 10.7676 41.0393 10.7676 21.117 0 29.4178-14.5508 45.2548-14.5508 10.558 0 22.1266 4.345 34.7059 13.0352V136H164V99.6992z" fill="#D4D6DD"/><path d="M164 114.3594c13.3973-7.7845 25.6291-11.6768 36.6955-11.6768 16.5995 0 32.6183 14.3374 44.7266 14.3374 8.0722 0 21.2648-6.3266 39.5779-18.98V136H164v-21.6406z" fill="#9AA1AE"/><path fill="#D4D6DD" d="M164 145h121v4H164zm0 6h121v4H164zm0 6h85.8376v4H164zm0 10h121v4H164zm0 6h44.4701v4H164z"/><path fill="#9AA1AE" d="M210 172h2v6h-2z"/><path d="M6 0h288c3.3137 0 6 2.6863 6 6v13H0V6c0-3.3137 2.6863-6 6-6z" fill="url(#c)"/></g></svg>

After

Width:  |  Height:  |  Size: 3.0 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 8.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 100 KiB

View File

@ -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();