Merge pull request #1136 from ziburski/netlifycmsorg-tweaks
Website tweaks
This commit is contained in:
Mathias Biilmann
GitHub
commit
6b30761454
@ -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',
|
||||
|
||||
|
||||
@ -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"
|
||||
---
|
||||
|
||||
@ -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"
|
||||
|
||||
37
website/site/data/updates.yml
Normal file
37
website/site/data/updates.yml
Normal file
@ -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'
|
||||
@ -7,6 +7,7 @@
|
||||
<div class="hero-copy">
|
||||
<h1 class="headline">{{ .Site.Data.landing.hero.headline | markdownify }}</h1>
|
||||
<span class="subhead">{{ .Site.Data.landing.hero.subhead | markdownify }}</span>
|
||||
<span class="cta-header">{{ .Site.Data.landing.cta.button | markdownify }}</span>
|
||||
</div>
|
||||
<div class="hero-features">
|
||||
{{ range $index, $id := .Site.Data.landing.hero.devfeatures }}
|
||||
@ -16,9 +17,10 @@
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="hero-graphic">
|
||||
<img src="/img/screenshot-editor.png" class="responsive"/>
|
||||
</div>
|
||||
<a class="hero-graphic">
|
||||
<img src="/img/screenshot-editor.jpg" class="responsive"/>
|
||||
<div class="hero-videolink">▶</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
@ -29,6 +31,18 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="whatsnew">
|
||||
<div class="contained">
|
||||
<ol>
|
||||
{{ range .Site.Data.updates }}
|
||||
{{ range first 3 . }}
|
||||
<a href="{{ .url }}"><li><div class="update-metadata"><span class="update-version">{{ .version }}</span><span class="update-date">{{ dateFormat "January 2, 2006" .date }}</span></div><span class="update-description">{{ .description | markdownify }}</span></li></a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</ol>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="editors">
|
||||
<div class="contained">
|
||||
<h2>{{ .Site.Data.landing.editors.hook | markdownify }}</h2>
|
||||
@ -48,13 +62,15 @@
|
||||
<section class="communitysupport">
|
||||
<div class="contained">
|
||||
<h2>{{ .Site.Data.landing.community.hook | markdownify }}</h2>
|
||||
<div class="community-features">
|
||||
{{ range $index, $id := .Site.Data.landing.community.features }}
|
||||
<div class="feature">
|
||||
<h3>{{ .feature | markdownify }}</h3>
|
||||
<p>{{ .description | markdownify }}</p>
|
||||
<div class="community">
|
||||
<div class="community-features">
|
||||
{{ range $index, $id := .Site.Data.landing.community.features }}
|
||||
<div class="feature">
|
||||
<h3>{{ .feature | markdownify }}</h3>
|
||||
<p>{{ .description | markdownify }}</p>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="contributors feature">
|
||||
<h3>{{ .Site.Data.landing.community.contributors | markdownify }}</h3>
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
@ -24,5 +33,6 @@ debug: false // Set debug to true if you want to inspect the dropdown
|
||||
{{- if eq .Title "Widgets" -}} <!-- Check if is widgets page, if so, add the widget cloud js script -->
|
||||
<script src="/widgets.js"></script>
|
||||
{{- end -}}
|
||||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -27,14 +27,20 @@
|
||||
{{ end }}
|
||||
<header id="header" {{ if or (eq .Section "docs") (eq .Title "Docs") }}class="docs"{{ end }}>
|
||||
<div class="contained">
|
||||
<a href="/" class="logo"><img src="/img/netlify-cms-logo.svg"/></a>
|
||||
<a class="nav-link docs-link" href="/docs">Docs</a>
|
||||
<a class="nav-link contributing-link" href="/docs/contributor-guide">Contributing</a>
|
||||
<a class="nav-link" href="/community">Community</a>
|
||||
<a class="utility-input">
|
||||
<img src="/img/search.svg" />
|
||||
<input type="search" placeholder="Search the docs" class="algolia-search"/>
|
||||
</a>
|
||||
<span class="cta-header">{{ .Site.Data.landing.cta.button | markdownify }}</span>
|
||||
<div class="logo-container">
|
||||
<a href="/" class="logo"><img src="/img/netlify-cms-logo.svg"/></a>
|
||||
{{ if or (eq .Section "docs") (eq .Title "Docs") }}
|
||||
<a class="utility-input">
|
||||
<img src="/img/search.svg" />
|
||||
<input type="search" placeholder="Search the docs" class="algolia-search"/>
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="nav-container">
|
||||
<a class="nav-link docs-link" href="/docs">Docs</a>
|
||||
<a class="nav-link contributing-link" href="/docs/contributor-guide">Contributing</a>
|
||||
<a class="nav-link" href="/community">Community</a>
|
||||
<a id="ghstars" class="github-button" href="https://github.com/netlify/netlify-cms" data-icon="octicon-star" data-show-count="true" aria-label="Star netlify/netlify-cms on GitHub">Star</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
@media screen and (min-width: $desktop) {
|
||||
position: relative;
|
||||
top: -50px;
|
||||
top: -65px;
|
||||
width: 880px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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*/
|
||||
|
||||
64
website/src/css/imports/whatsnew.css
Normal file
64
website/src/css/imports/whatsnew.css
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -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";
|
||||
|
||||
1
website/src/img/feature-access.svg
Normal file
1
website/src/img/feature-access.svg
Normal 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 |
1
website/src/img/feature-editor.svg
Normal file
1
website/src/img/feature-editor.svg
Normal 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 |
1
website/src/img/feature-workflow.svg
Normal file
1
website/src/img/feature-workflow.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.1 KiB |
BIN
website/src/img/screenshot-editor.jpg
Normal file
BIN
website/src/img/screenshot-editor.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
@ -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 = '<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/p6h-rYSVX90?rel=0&showinfo=0&autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>';
|
||||
|
||||
$('.hero-graphic').click(function() {
|
||||
$('.hero-graphic img').replaceWith(embedcode);
|
||||
$('.hero-videolink').remove();
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user