chore: add code formatting and linting (#952)
This commit is contained in:
Caleb
Shawn Erquhart
@ -9,7 +9,7 @@ import Link from 'gatsby-link';
|
||||
*/
|
||||
class TableOfContents extends Component {
|
||||
state = {
|
||||
headings: []
|
||||
headings: [],
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
@ -19,12 +19,12 @@ class TableOfContents extends Component {
|
||||
contentHeadings.forEach(h => {
|
||||
headings.push({
|
||||
id: h.id,
|
||||
text: h.innerText
|
||||
text: h.innerText,
|
||||
});
|
||||
});
|
||||
|
||||
this.setState({
|
||||
headings
|
||||
headings,
|
||||
});
|
||||
}
|
||||
|
||||
@ -52,10 +52,7 @@ const DocsNav = ({ items, location }) => (
|
||||
<ul className="docs-nav-section-list">
|
||||
{item.group.edges.map(({ node }) => (
|
||||
<li className="docs-nav-item" key={node.fields.slug}>
|
||||
<Link
|
||||
to={node.fields.slug}
|
||||
className="nav-link"
|
||||
activeClassName="active">
|
||||
<Link to={node.fields.slug} className="nav-link" activeClassName="active">
|
||||
{node.frontmatter.title}
|
||||
</Link>
|
||||
{location.pathname === node.fields.slug && <TableOfContents />}
|
||||
|
||||
@ -4,7 +4,7 @@ import searchIcon from '../img/search.svg';
|
||||
|
||||
class DocSearch extends Component {
|
||||
state = {
|
||||
enabled: true
|
||||
enabled: true,
|
||||
};
|
||||
componentDidMount() {
|
||||
if (window.docsearch) {
|
||||
@ -12,7 +12,7 @@ class DocSearch extends Component {
|
||||
apiKey: '08d03dc80862e84c70c5a1e769b13019',
|
||||
indexName: 'netlifycms',
|
||||
inputSelector: '.algolia-search',
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
debug: false, // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
} else {
|
||||
this.setState({ enabled: false });
|
||||
@ -26,11 +26,7 @@ class DocSearch extends Component {
|
||||
return (
|
||||
<a className="utility-input">
|
||||
<img src={searchIcon} />
|
||||
<input
|
||||
type="search"
|
||||
placeholder="Search the docs"
|
||||
className="algolia-search"
|
||||
/>
|
||||
<input type="search" placeholder="Search the docs" className="algolia-search" />
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
@ -3,7 +3,8 @@ import React from 'react';
|
||||
const EditLink = ({ path }) => (
|
||||
<a
|
||||
className="edit-this-page"
|
||||
href={`https://github.com/netlify/netlify-cms/blob/master/website/content/${path}`}>
|
||||
href={`https://github.com/netlify/netlify-cms/blob/master/website/content/${path}`}
|
||||
>
|
||||
<svg
|
||||
version="1.1"
|
||||
id="pencil"
|
||||
@ -15,7 +16,8 @@ const EditLink = ({ path }) => (
|
||||
height="14px"
|
||||
viewBox="0 0 512 512"
|
||||
enableBackground="new 0 0 512 512"
|
||||
xmlSpace="preserve">
|
||||
xmlSpace="preserve"
|
||||
>
|
||||
<path
|
||||
d="M398.875,248.875L172.578,475.187l-22.625-22.625L376.25,226.265L398.875,248.875z M308.375,158.39L82.063,384.687
|
||||
l45.266,45.25L353.625,203.64L308.375,158.39z M263.094,113.125L36.828,339.437l22.625,22.625L285.75,135.765L263.094,113.125z
|
||||
|
||||
@ -4,7 +4,7 @@ import moment from 'moment';
|
||||
class EventWidget extends Component {
|
||||
state = {
|
||||
loading: false,
|
||||
eventDate: ''
|
||||
eventDate: '',
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
@ -14,7 +14,7 @@ class EventWidget extends Component {
|
||||
const url = `https://www.eventbriteapi.com/v3/events/search/?token=${eventbriteToken}&organizer.id=${eventbriteOrganiser}&expand=venue%27`;
|
||||
|
||||
this.setState({
|
||||
loading: true
|
||||
loading: true,
|
||||
});
|
||||
|
||||
fetch(url)
|
||||
@ -24,14 +24,14 @@ class EventWidget extends Component {
|
||||
|
||||
this.setState({
|
||||
loading: false,
|
||||
eventDate
|
||||
eventDate,
|
||||
});
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
// TODO: set state to show error message
|
||||
this.setState({
|
||||
loading: false
|
||||
loading: false,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@ -10,7 +10,7 @@ import '../css/imports/header.css';
|
||||
|
||||
class Header extends Component {
|
||||
state = {
|
||||
scrolled: false
|
||||
scrolled: false,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
@ -23,13 +23,12 @@ class Header extends Component {
|
||||
}
|
||||
|
||||
handleScroll = () => {
|
||||
const currentWindowPos =
|
||||
document.documentElement.scrollTop || document.body.scrollTop;
|
||||
const currentWindowPos = document.documentElement.scrollTop || document.body.scrollTop;
|
||||
|
||||
const scrolled = currentWindowPos > 0;
|
||||
|
||||
this.setState({
|
||||
scrolled
|
||||
scrolled,
|
||||
});
|
||||
};
|
||||
|
||||
@ -46,7 +45,7 @@ class Header extends Component {
|
||||
className={classnames({
|
||||
docs: isDocs,
|
||||
blog: isBlog,
|
||||
scrolled
|
||||
scrolled,
|
||||
})}
|
||||
>
|
||||
<div className="contained">
|
||||
@ -60,10 +59,7 @@ class Header extends Component {
|
||||
<Link className="nav-link docs-link" to="/docs/intro">
|
||||
Docs
|
||||
</Link>
|
||||
<Link
|
||||
className="nav-link contributing-link"
|
||||
to="/docs/contributor-guide"
|
||||
>
|
||||
<Link className="nav-link contributing-link" to="/docs/contributor-guide">
|
||||
Contributing
|
||||
</Link>
|
||||
<Link className="nav-link" to="/community">
|
||||
|
||||
@ -2,10 +2,7 @@ import React, { Fragment } from 'react';
|
||||
import Markdown from 'react-markdown';
|
||||
|
||||
const Markdownify = ({ source }) => (
|
||||
<Markdown
|
||||
source={source}
|
||||
renderers={{ root: Fragment, paragraph: Fragment }}
|
||||
/>
|
||||
<Markdown source={source} renderers={{ root: Fragment, paragraph: Fragment }} />
|
||||
);
|
||||
|
||||
export default Markdownify;
|
||||
|
||||
@ -14,10 +14,7 @@ class MobileNav extends Component {
|
||||
{items.map(item => (
|
||||
<optgroup label={item.title} key={item.title}>
|
||||
{item.group.edges.map(({ node }) => (
|
||||
<option
|
||||
value={node.fields.slug}
|
||||
key={node.fields.slug}
|
||||
className="nav-link">
|
||||
<option value={node.fields.slug} key={node.fields.slug} className="nav-link">
|
||||
{node.frontmatter.title}
|
||||
</option>
|
||||
))}
|
||||
|
||||
@ -4,11 +4,11 @@ import screenshotEditor from '../img/screenshot-editor.jpg';
|
||||
|
||||
class VideoEmbed extends Component {
|
||||
state = {
|
||||
toggled: false
|
||||
toggled: false,
|
||||
};
|
||||
toggleVideo = () => {
|
||||
this.setState({
|
||||
toggled: true
|
||||
toggled: true,
|
||||
});
|
||||
};
|
||||
render() {
|
||||
@ -25,9 +25,7 @@ class VideoEmbed extends Component {
|
||||
/>
|
||||
);
|
||||
|
||||
const imgPlaceholder = (
|
||||
<img src={screenshotEditor} className="responsive" />
|
||||
);
|
||||
const imgPlaceholder = <img src={screenshotEditor} className="responsive" />;
|
||||
|
||||
return (
|
||||
<a className="hero-graphic" onClick={this.toggleVideo}>
|
||||
|
||||
@ -5,28 +5,24 @@ import '../css/imports/widgets.css';
|
||||
|
||||
class Widgets extends Component {
|
||||
state = {
|
||||
currentWidget: null
|
||||
currentWidget: null,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
const { widgets } = this.props;
|
||||
|
||||
const hash = window.location.hash
|
||||
? window.location.hash.replace('#', '')
|
||||
: '';
|
||||
const hash = window.location.hash ? window.location.hash.replace('#', '') : '';
|
||||
|
||||
const widgetsContainHash = widgets.edges.some(
|
||||
w => w.node.frontmatter.target === hash
|
||||
);
|
||||
const widgetsContainHash = widgets.edges.some(w => w.node.frontmatter.target === hash);
|
||||
|
||||
if (widgetsContainHash) {
|
||||
return this.setState({
|
||||
currentWidget: hash
|
||||
currentWidget: hash,
|
||||
});
|
||||
}
|
||||
|
||||
this.setState({
|
||||
currentWidget: widgets.edges[0].node.frontmatter.target
|
||||
currentWidget: widgets.edges[0].node.frontmatter.target,
|
||||
});
|
||||
}
|
||||
|
||||
@ -34,11 +30,11 @@ class Widgets extends Component {
|
||||
event.preventDefault();
|
||||
this.setState(
|
||||
{
|
||||
currentWidget: target
|
||||
currentWidget: target,
|
||||
},
|
||||
() => {
|
||||
history.pushState(null, null, `#${target}`);
|
||||
}
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
@ -56,7 +52,7 @@ class Widgets extends Component {
|
||||
<button
|
||||
key={target}
|
||||
className={classnames('widgets__item', {
|
||||
widgets__item_active: currentWidget === target
|
||||
widgets__item_active: currentWidget === target,
|
||||
})}
|
||||
onClick={event => this.handleWidgetChange(event, target)}
|
||||
>
|
||||
@ -72,7 +68,7 @@ class Widgets extends Component {
|
||||
<div
|
||||
key={label}
|
||||
className={classnames('widget', {
|
||||
widget_open: currentWidget === target
|
||||
widget_open: currentWidget === target,
|
||||
})}
|
||||
>
|
||||
<h3>{label}</h3>
|
||||
|
||||
@ -1,4 +1,15 @@
|
||||
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,700,900|Roboto+Mono:400,700);
|
||||
@import url(
|
||||
https://fonts.googleapis.com/css?family=Roboto:400,
|
||||
100,
|
||||
100italic,
|
||||
300,
|
||||
300italic,
|
||||
400italic,
|
||||
500,
|
||||
700,
|
||||
900|Roboto+Mono:400,
|
||||
700
|
||||
);
|
||||
|
||||
body {
|
||||
background-color: $shadeBlue;
|
||||
@ -52,7 +63,8 @@ h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p, ul {
|
||||
p,
|
||||
ul {
|
||||
font-size: 18px;
|
||||
line-height: 26px;
|
||||
margin-top: 0;
|
||||
@ -79,7 +91,7 @@ ul {
|
||||
}
|
||||
}
|
||||
|
||||
*[class^="btn-"] {
|
||||
*[class^='btn-'] {
|
||||
border-radius: $borderRadius;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
@ -92,7 +104,7 @@ ul {
|
||||
overflow: hidden;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -40%;
|
||||
left: -210%;
|
||||
@ -100,13 +112,13 @@ ul {
|
||||
height: 200%;
|
||||
opacity: 0;
|
||||
transform: rotate(30deg);
|
||||
background: rgba(255,255,255,0.2);
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgba(255, 255, 255, 0.2) 0%,
|
||||
rgba(255, 255, 255, 0.2) 77%,
|
||||
rgba(255, 255, 255, 0.6) 92%,
|
||||
rgba(255, 255, 255, 0.0) 100%
|
||||
rgba(255, 255, 255, 0) 100%
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -49,9 +49,8 @@
|
||||
}
|
||||
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);
|
||||
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.25), 0 4px 12px 0 rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
.cta {
|
||||
|
||||
@media screen and (min-width: $desktop) {
|
||||
position: relative;
|
||||
top: -65px;
|
||||
@ -20,7 +19,7 @@
|
||||
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);
|
||||
box-shadow: 0 10px 30px 0 rgba(28, 30, 30, 0.1), 0 3px 9px 0 rgba(28, 30, 30, 0.15);
|
||||
border-radius: $largeBorderRadius;
|
||||
}
|
||||
|
||||
@ -42,15 +41,14 @@
|
||||
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(68,74,87,0.10), 0 1px 3px 0 rgba(68,74,87,0.20);
|
||||
background-image: linear-gradient(-180deg, #4a7fdd 0%, #3a69c7 100%);
|
||||
box-shadow: 0 4px 12px 0 rgba(68, 74, 87, 0.1), 0 1px 3px 0 rgba(68, 74, 87, 0.2);
|
||||
border-radius: $borderRadius;
|
||||
padding: 12px 18px 12px 18px;
|
||||
transition: .2s;
|
||||
transition: 0.2s;
|
||||
display: inline-block;
|
||||
margin-top: $tiny;
|
||||
|
||||
|
||||
@media screen and (min-width: $desktop) {
|
||||
flex-shrink: 0;
|
||||
margin: 0 0 0 $small;
|
||||
@ -58,14 +56,12 @@
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 4px 12px 0 rgba(68,74,87,0.20), 0 1px 3px 0 rgba(68,74,87,0.40);
|
||||
box-shadow: 0 4px 12px 0 rgba(68, 74, 87, 0.2), 0 1px 3px 0 rgba(68, 74, 87, 0.4);
|
||||
}
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -12,8 +12,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
.docs-nav {
|
||||
display: none;
|
||||
.docs-nav {
|
||||
display: none;
|
||||
|
||||
@media screen and (min-width: $tablet) {
|
||||
display: block;
|
||||
@ -30,7 +30,7 @@
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: " ";
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
right: 20px;
|
||||
@ -68,7 +68,7 @@
|
||||
margin: 10px 0;
|
||||
text-decoration: none;
|
||||
text-transform: capitalize;
|
||||
transition: color .2s ease;
|
||||
transition: color 0.2s ease;
|
||||
|
||||
&.active {
|
||||
color: $darkGreen;
|
||||
@ -111,64 +111,63 @@
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-size: 36px;
|
||||
line-height: 48px;
|
||||
h1,
|
||||
h2 {
|
||||
font-size: 36px;
|
||||
line-height: 48px;
|
||||
|
||||
&.intro-headline {
|
||||
padding: 0 $small;
|
||||
margin-bottom: 86px;
|
||||
}
|
||||
}
|
||||
&.intro-headline {
|
||||
padding: 0 $small;
|
||||
margin-bottom: 86px;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: $small;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: $grey;
|
||||
font-size: 20px;
|
||||
margin-top: $medium;
|
||||
h3 {
|
||||
color: $grey;
|
||||
font-size: 20px;
|
||||
margin-top: $medium;
|
||||
margin-bottom: $small;
|
||||
|
||||
&.inverse {
|
||||
color: white;
|
||||
}
|
||||
&.inverse {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.meta-info {
|
||||
font-size: $tiny;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
margin: 34px 0 $medium 0;
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: $micro;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
margin: 34px 0 $medium 0;
|
||||
|
||||
th {
|
||||
font-size: 18px;
|
||||
font-weight: $bold;
|
||||
}
|
||||
th,
|
||||
td {
|
||||
padding: $micro;
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
&:nth-child(odd) {
|
||||
background: #fdfdfd;
|
||||
}
|
||||
}
|
||||
th {
|
||||
font-size: 18px;
|
||||
font-weight: $bold;
|
||||
}
|
||||
|
||||
td {
|
||||
font-size: 14px;
|
||||
}
|
||||
tbody tr {
|
||||
&:nth-child(odd) {
|
||||
background: #fdfdfd;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.docs-content,
|
||||
.blog-content {
|
||||
font-size: 18px;
|
||||
@ -179,7 +178,7 @@
|
||||
}
|
||||
|
||||
#pencil {
|
||||
fill: #7CA511;
|
||||
fill: #7ca511;
|
||||
}
|
||||
|
||||
@media screen and (min-width: $tablet) {
|
||||
@ -204,9 +203,9 @@
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
table {
|
||||
background: #f7f7f7;
|
||||
@ -236,4 +235,4 @@
|
||||
.blog-list-item h2 {
|
||||
margin: 48px 0 0;
|
||||
line-height: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,7 +6,8 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, p {
|
||||
h2,
|
||||
p {
|
||||
max-width: $desktop;
|
||||
|
||||
@media screen and (min-width: $desktop) {
|
||||
@ -45,7 +46,6 @@
|
||||
@media screen and (max-width: $desktop) {
|
||||
margin-top: $large;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,7 +12,7 @@ footer {
|
||||
color: $grey;
|
||||
font-family: $roboto;
|
||||
font-size: 12px;
|
||||
opacity: .5;
|
||||
opacity: 0.5;
|
||||
}
|
||||
a {
|
||||
color: $grey;
|
||||
@ -39,5 +39,4 @@ footer {
|
||||
background-color: $darkerGreen;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -7,16 +7,16 @@
|
||||
letter-spacing: 0.5px;
|
||||
color: $grey;
|
||||
background-color: $green;
|
||||
box-shadow: 0 2px 16px 0 rgba(68,74,87,0.15), 0 1px 4px 0 rgba(68,74,87,0.30);
|
||||
box-shadow: 0 2px 16px 0 rgba(68, 74, 87, 0.15), 0 1px 4px 0 rgba(68, 74, 87, 0.3);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $lightGreen;
|
||||
box-shadow: 0 2px 16px 0 rgba(68,74,87,0.25), 0 1px 4px 0 rgba(68,74,87,0.50);
|
||||
box-shadow: 0 2px 16px 0 rgba(68, 74, 87, 0.25), 0 1px 4px 0 rgba(68, 74, 87, 0.5);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 6px 3px rgba(62,160,127,.6);
|
||||
box-shadow: 0 0 6px 3px rgba(62, 160, 127, 0.6);
|
||||
transition: none;
|
||||
}
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
.hero {
|
||||
@neat-row;
|
||||
background: $darkerGrey;
|
||||
background-image: linear-gradient(-180deg, #2A2C24 0%, $darkerGrey 20%);
|
||||
background-image: linear-gradient(-180deg, #2a2c24 0%, $darkerGrey 20%);
|
||||
color: $blueGrey;
|
||||
overflow: hidden;
|
||||
padding: calc($xl * 2.25) 0 0 0;
|
||||
@ -65,15 +65,15 @@
|
||||
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);
|
||||
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;
|
||||
transition: 0.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);
|
||||
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);
|
||||
@ -82,7 +82,6 @@
|
||||
}
|
||||
|
||||
.hero-features {
|
||||
|
||||
@media screen and (min-width: $tablet) {
|
||||
@neat-span-columns 5;
|
||||
}
|
||||
@ -90,7 +89,6 @@
|
||||
.feature {
|
||||
margin: 0 0 $medium 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.hero-graphic {
|
||||
@ -104,10 +102,11 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
img, iframe {
|
||||
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);
|
||||
box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.15), 0 3px 9px 0 rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.hero-videolink {
|
||||
@ -124,8 +123,8 @@
|
||||
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);
|
||||
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;
|
||||
}
|
||||
@ -134,7 +133,7 @@
|
||||
.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);
|
||||
box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.15), 0 2px 6px 0 rgba(0, 0, 0, 0.3);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
@ -146,108 +145,106 @@
|
||||
}
|
||||
}
|
||||
|
||||
/*COMMUNITY PAGE*/
|
||||
/*COMMUNITY PAGE*/
|
||||
|
||||
&.community {
|
||||
.hero-copy {
|
||||
text-align: left;
|
||||
@media screen and (min-width: $tablet) {
|
||||
@neat-span-columns 5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ctas {
|
||||
margin-bottom: $small;
|
||||
|
||||
@media screen and (min-width: $mobile) {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $green;
|
||||
font-weight: $semibold;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-cta {
|
||||
text-align: center;
|
||||
background: $darkerGrey;
|
||||
background-image: linear-gradient(-17deg, $darkerGrey 17%, $darkGrey 94%);
|
||||
border-radius: $largeBorderRadius;
|
||||
box-shadow: 0 $micro $small rgba(0,0,0,0.1);
|
||||
padding: $medium;
|
||||
box-sizing: border-box;
|
||||
|
||||
@media screen and (min-width: $tablet) {
|
||||
max-width: 446px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: $tablet) {
|
||||
@neat-span-columns 5;
|
||||
@neat-shift 1;
|
||||
display: inline-block;
|
||||
position: fixed;
|
||||
right: $medium;
|
||||
max-height: calc(100vh - ($xl * 1.5) - $medium);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1280px) {
|
||||
right: initial;
|
||||
left: calc(50% - $large);
|
||||
}
|
||||
|
||||
.calendar {
|
||||
border-radius: $largeBorderRadius;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 $micro $small rgba(0,0,0,0.5);
|
||||
margin: $small auto;
|
||||
max-width: 250px;
|
||||
|
||||
.month {
|
||||
background: $green;
|
||||
color: $grey;
|
||||
font-weight: $black;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 4px;
|
||||
font-size: $tiny;
|
||||
padding: $tiny;
|
||||
}
|
||||
|
||||
.day {
|
||||
font-size: $xl;
|
||||
font-weight: $black;
|
||||
color: white;
|
||||
border: 1px solid $grey;
|
||||
border-top: none;
|
||||
border-bottom-left-radius: $largeBorderRadius;
|
||||
border-bottom-right-radius: $largeBorderRadius;
|
||||
&.community {
|
||||
.hero-copy {
|
||||
text-align: left;
|
||||
@media screen and (min-width: $tablet) {
|
||||
@neat-span-columns 5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
strong {
|
||||
display: inline-block;
|
||||
}
|
||||
.ctas {
|
||||
margin-bottom: $small;
|
||||
|
||||
h2:not(:first-child) {
|
||||
font-weight: $light;
|
||||
}
|
||||
@media screen and (min-width: $mobile) {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.cal-cta {
|
||||
margin-top: $micro;
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $green;
|
||||
font-weight: $semibold;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-cta {
|
||||
text-align: center;
|
||||
background: $darkerGrey;
|
||||
background-image: linear-gradient(-17deg, $darkerGrey 17%, $darkGrey 94%);
|
||||
border-radius: $largeBorderRadius;
|
||||
box-shadow: 0 $micro $small rgba(0, 0, 0, 0.1);
|
||||
padding: $medium;
|
||||
box-sizing: border-box;
|
||||
|
||||
@media screen and (min-width: $tablet) {
|
||||
max-width: 446px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: $tablet) {
|
||||
@neat-span-columns 5;
|
||||
@neat-shift 1;
|
||||
display: inline-block;
|
||||
position: fixed;
|
||||
right: $medium;
|
||||
max-height: calc(100vh - ($xl * 1.5) - $medium);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1280px) {
|
||||
right: initial;
|
||||
left: calc(50% - $large);
|
||||
}
|
||||
|
||||
.calendar {
|
||||
border-radius: $largeBorderRadius;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 $micro $small rgba(0, 0, 0, 0.5);
|
||||
margin: $small auto;
|
||||
max-width: 250px;
|
||||
|
||||
.month {
|
||||
background: $green;
|
||||
color: $grey;
|
||||
font-weight: $black;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 4px;
|
||||
font-size: $tiny;
|
||||
padding: $tiny;
|
||||
}
|
||||
|
||||
.day {
|
||||
font-size: $xl;
|
||||
font-weight: $black;
|
||||
color: white;
|
||||
border: 1px solid $grey;
|
||||
border-top: none;
|
||||
border-bottom-left-radius: $largeBorderRadius;
|
||||
border-bottom-right-radius: $largeBorderRadius;
|
||||
}
|
||||
}
|
||||
|
||||
strong {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
h2:not(:first-child) {
|
||||
font-weight: $light;
|
||||
}
|
||||
|
||||
.cal-cta {
|
||||
margin-top: $micro;
|
||||
|
||||
a {
|
||||
color: $green;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@ -1,83 +1,83 @@
|
||||
@keyframes fadeInUp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.centered-text {
|
||||
text-align: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
@neat-outer-container;
|
||||
@neat-outer-container;
|
||||
}
|
||||
|
||||
.half,
|
||||
.third,
|
||||
.quarter {
|
||||
padding-bottom: $small;
|
||||
@neat-span-columns 12;
|
||||
padding-bottom: $small;
|
||||
@neat-span-columns 12;
|
||||
|
||||
@media screen and (min-width: $tablet) {
|
||||
@neat-span-columns 6;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
@neat-span-columns 6;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
&:nth-child(even) {
|
||||
@media screen and (min-width: $mobile) and (max-width: 767px) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
&:nth-child(even) {
|
||||
@media screen and (min-width: $mobile) and (max-width: 767px) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.third {
|
||||
@media screen and (min-width: $tablet) {
|
||||
@neat-span-columns 4;
|
||||
}
|
||||
@media screen and (min-width: $tablet) {
|
||||
@neat-span-columns 4;
|
||||
}
|
||||
}
|
||||
|
||||
.quarter {
|
||||
@media screen and (min-width: $tablet) {
|
||||
@neat-span-columns 3;
|
||||
}
|
||||
@media screen and (min-width: $tablet) {
|
||||
@neat-span-columns 3;
|
||||
}
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
&:after {
|
||||
content: ' ';
|
||||
width: 100%;
|
||||
display: table;
|
||||
}
|
||||
&:after {
|
||||
content: ' ';
|
||||
width: 100%;
|
||||
display: table;
|
||||
}
|
||||
}
|
||||
|
||||
.section-label {
|
||||
color: $grey;
|
||||
font-size: 12px;
|
||||
font-weight: $semibold;
|
||||
color: $grey;
|
||||
font-size: 12px;
|
||||
font-weight: $semibold;
|
||||
letter-spacing: 1.5px;
|
||||
text-transform: uppercase;
|
||||
|
||||
&:after {
|
||||
&:after {
|
||||
background: $darkGreen;
|
||||
content: ' ';
|
||||
display: block;
|
||||
height: 2px;
|
||||
margin-top: 5px;
|
||||
width: $small;
|
||||
}
|
||||
width: $small;
|
||||
}
|
||||
|
||||
&.inverse {
|
||||
color: white;
|
||||
&.inverse {
|
||||
color: white;
|
||||
|
||||
&.mono:after {
|
||||
background: $grey;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.extended {
|
||||
display: inline-block;
|
||||
@ -94,75 +94,75 @@
|
||||
}
|
||||
|
||||
img.responsive {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.img-bg-hero {
|
||||
color: white;
|
||||
background-size: 100% auto;
|
||||
background-size: cover !important;
|
||||
color: white;
|
||||
background-size: 100% auto;
|
||||
background-size: cover !important;
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
color: white;
|
||||
font-weight: $light;
|
||||
h1,
|
||||
h2 {
|
||||
color: white;
|
||||
font-weight: $light;
|
||||
|
||||
@media screen and (min-width: $tablet) {
|
||||
font-weight: $thin;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: $tablet) {
|
||||
font-weight: $thin;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
|
||||
@media screen and (min-width: $tablet) {
|
||||
@neat-span-columns 8;
|
||||
@neat-shift 2;
|
||||
}
|
||||
@media screen and (min-width: $tablet) {
|
||||
@neat-span-columns 8;
|
||||
@neat-shift 2;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: inline;
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: inline;
|
||||
|
||||
@media screen and (min-width: $tablet) {
|
||||
display: inline-block;
|
||||
}
|
||||
@media screen and (min-width: $tablet) {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&.active a,
|
||||
a[aria-label] {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
&.active a,
|
||||
a[aria-label] {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
font-weight: $light;
|
||||
color: $grey;
|
||||
width: 18px;
|
||||
font-size: $tiny;
|
||||
padding: $micro;
|
||||
border-radius: 99px;
|
||||
display: none;
|
||||
a {
|
||||
text-decoration: none;
|
||||
font-weight: $light;
|
||||
color: $grey;
|
||||
width: 18px;
|
||||
font-size: $tiny;
|
||||
padding: $micro;
|
||||
border-radius: 99px;
|
||||
display: none;
|
||||
|
||||
@media screen and (min-width: $tablet) {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: $tablet) {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.active a {
|
||||
color: white;
|
||||
background: $green;
|
||||
}
|
||||
.active a {
|
||||
color: white;
|
||||
background: $green;
|
||||
}
|
||||
|
||||
.disabled a {
|
||||
color: $lighterGrey;
|
||||
}
|
||||
.disabled a {
|
||||
color: $lighterGrey;
|
||||
}
|
||||
}
|
||||
|
||||
.unordered-list ul {
|
||||
@ -203,7 +203,6 @@ img.responsive {
|
||||
color: $grey;
|
||||
position: relative;
|
||||
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
position: absolute;
|
||||
|
||||
@ -42,7 +42,7 @@
|
||||
li {
|
||||
.update-metadata {
|
||||
font-size: 13px;
|
||||
color: rgba(255,255,255,0.6);
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
display: block;
|
||||
margin-bottom: $micro;
|
||||
.update-version {
|
||||
@ -60,5 +60,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -4,46 +4,45 @@
|
||||
* @author Rose Pritchard
|
||||
*/
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: #ccc;
|
||||
background: none;
|
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
code[class*='language-'],
|
||||
pre[class*='language-'] {
|
||||
color: #ccc;
|
||||
background: none;
|
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
padding: 1em;
|
||||
margin: .5em 0;
|
||||
overflow: auto;
|
||||
pre[class*='language-'] {
|
||||
padding: 1em;
|
||||
margin: 0.5em 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: #2d2d2d;
|
||||
:not(pre) > code[class*='language-'],
|
||||
pre[class*='language-'] {
|
||||
background: #2d2d2d;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*="language-"] {
|
||||
padding: .1em;
|
||||
border-radius: .3em;
|
||||
white-space: normal;
|
||||
:not(pre) > code[class*='language-'] {
|
||||
padding: 0.1em;
|
||||
border-radius: 0.3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
@ -51,35 +50,35 @@ pre[class*="language-"] {
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: #999;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #ccc;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.token.tag,
|
||||
.token.attr-name,
|
||||
.token.namespace,
|
||||
.token.deleted {
|
||||
color: #e2777a;
|
||||
color: #e2777a;
|
||||
}
|
||||
|
||||
.token.function-name {
|
||||
color: #6196cc;
|
||||
color: #6196cc;
|
||||
}
|
||||
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.function {
|
||||
color: #f08d49;
|
||||
color: #f08d49;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.class-name,
|
||||
.token.constant,
|
||||
.token.symbol {
|
||||
color: #f8c555;
|
||||
color: #f8c555;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
@ -87,7 +86,7 @@ pre[class*="language-"] {
|
||||
.token.atrule,
|
||||
.token.keyword,
|
||||
.token.builtin {
|
||||
color: #cc99cd;
|
||||
color: #cc99cd;
|
||||
}
|
||||
|
||||
.token.string,
|
||||
@ -95,27 +94,27 @@ pre[class*="language-"] {
|
||||
.token.attr-value,
|
||||
.token.regex,
|
||||
.token.variable {
|
||||
color: #7ec699;
|
||||
color: #7ec699;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url {
|
||||
color: #67cdcc;
|
||||
color: #67cdcc;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
font-weight: bold;
|
||||
}
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.token.inserted {
|
||||
color: green;
|
||||
color: green;
|
||||
}
|
||||
|
||||
@ -14,12 +14,7 @@ module.exports = class HTML extends React.Component {
|
||||
render() {
|
||||
let css;
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
css = (
|
||||
<style
|
||||
id="gatsby-inlined-css"
|
||||
dangerouslySetInnerHTML={{ __html: stylesStr }}
|
||||
/>
|
||||
);
|
||||
css = <style id="gatsby-inlined-css" dangerouslySetInnerHTML={{ __html: stylesStr }} />;
|
||||
}
|
||||
|
||||
return (
|
||||
@ -27,32 +22,11 @@ module.exports = class HTML extends React.Component {
|
||||
<head>
|
||||
<meta charSet="utf-8" />
|
||||
<meta httpEquiv="x-ua-compatible" content="ie=edge" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0"
|
||||
/>
|
||||
<link
|
||||
rel="apple-touch-icon"
|
||||
sizes="180x180"
|
||||
href="/img/favicon/apple-touch-icon.png"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
href="/img/favicon/favicon-32x32.png"
|
||||
sizes="32x32"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
href="/img/favicon/favicon-16x16.png"
|
||||
sizes="16x16"
|
||||
/>
|
||||
<link
|
||||
rel="mask-icon"
|
||||
href="/img/favicon/safari-pinned-tab.svg"
|
||||
color="#96cf05"
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-touch-icon.png" />
|
||||
<link rel="icon" type="image/png" href="/img/favicon/favicon-32x32.png" sizes="32x32" />
|
||||
<link rel="icon" type="image/png" href="/img/favicon/favicon-16x16.png" sizes="16x16" />
|
||||
<link rel="mask-icon" href="/img/favicon/safari-pinned-tab.svg" color="#96cf05" />
|
||||
<meta name="apple-mobile-web-app-title" content="NetlifyCMS" />
|
||||
<meta name="application-name" content="NetlifyCMS" />
|
||||
{this.props.headComponents}
|
||||
@ -64,15 +38,11 @@ module.exports = class HTML extends React.Component {
|
||||
</head>
|
||||
<body {...this.props.bodyAttributes}>
|
||||
{this.props.preBodyComponents}
|
||||
<div
|
||||
key={'body'}
|
||||
id="___gatsby"
|
||||
dangerouslySetInnerHTML={{ __html: this.props.body }}
|
||||
/>
|
||||
<div key={'body'} id="___gatsby" dangerouslySetInnerHTML={{ __html: this.props.body }} />
|
||||
{this.props.postBodyComponents}
|
||||
<Gitter room="netlify/NetlifyCMS" />
|
||||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||
<script src="//unpkg.com/docsearch.js@2.4.1/dist/cdn/docsearch.min.js"></script>
|
||||
<script async defer src="https://buttons.github.io/buttons.js" />
|
||||
<script src="//unpkg.com/docsearch.js@2.4.1/dist/cdn/docsearch.min.js" />
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
||||
@ -23,7 +23,7 @@ const Layout = ({ data, location, children }) => {
|
||||
key={i}
|
||||
href={node.url}
|
||||
className={classnames('notification', {
|
||||
'notification-loud': node.loud
|
||||
'notification-loud': node.loud,
|
||||
})}
|
||||
>
|
||||
{node.message}
|
||||
|
||||
@ -6,10 +6,7 @@ const Blog = ({ data }) => (
|
||||
<div className="blog page">
|
||||
<Helmet>
|
||||
<title>Blog</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Recent news and updates about Netlify CMS."
|
||||
/>
|
||||
<meta name="description" content="Recent news and updates about Netlify CMS." />
|
||||
</Helmet>
|
||||
<div className="container">
|
||||
<h1>Netlify CMS Blog</h1>
|
||||
|
||||
@ -15,7 +15,7 @@ const CommunityPage = ({ data }) => {
|
||||
primarycta,
|
||||
upcomingevent,
|
||||
howitworks,
|
||||
howtojoin
|
||||
howtojoin,
|
||||
} = data.markdownRemark.frontmatter;
|
||||
|
||||
return (
|
||||
|
||||
@ -68,17 +68,13 @@ const HomePage = ({ data }) => {
|
||||
<ol>
|
||||
{updates.updates.slice(0, 3).map(node => (
|
||||
<a
|
||||
href={`https://github.com/netlify/netlify-cms/releases/tag/${
|
||||
node.version
|
||||
}`}
|
||||
href={`https://github.com/netlify/netlify-cms/releases/tag/${node.version}`}
|
||||
key={node.version}
|
||||
>
|
||||
<li>
|
||||
<div className="update-metadata">
|
||||
<span className="update-version">{node.version}</span>
|
||||
<span className="update-date">
|
||||
{moment(node.date).format('MMMM D, YYYY')}
|
||||
</span>
|
||||
<span className="update-date">{moment(node.date).format('MMMM D, YYYY')}</span>
|
||||
</div>
|
||||
<span className="update-description">
|
||||
<Markdownify source={node.description} />
|
||||
@ -119,10 +115,7 @@ const HomePage = ({ data }) => {
|
||||
<div className="contributor-list">
|
||||
{contribs.contributors.map(user => (
|
||||
<a href={user.profile} title={user.name} key={user.login}>
|
||||
<img
|
||||
src={user.avatar_url.replace('v=4', 's=32')}
|
||||
alt={user.login}
|
||||
/>
|
||||
<img src={user.avatar_url.replace('v=4', 's=32')} alt={user.login} />
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@ -13,7 +13,7 @@ import '../css/imports/docs.css';
|
||||
const toMenu = (menu, nav) =>
|
||||
menu.map(group => ({
|
||||
title: group.title,
|
||||
group: nav.group.find(g => g.fieldValue === group.name)
|
||||
group: nav.group.find(g => g.fieldValue === group.name),
|
||||
}));
|
||||
|
||||
const DocPage = ({ data, location, history }) => {
|
||||
@ -87,10 +87,7 @@ export const pageQuery = graphql`
|
||||
}
|
||||
widgets: allMarkdownRemark(
|
||||
sort: { fields: [frontmatter___label], order: ASC }
|
||||
filter: {
|
||||
frontmatter: { label: { ne: null } }
|
||||
fields: { slug: { regex: "/widgets/" } }
|
||||
}
|
||||
filter: { frontmatter: { label: { ne: null } }, fields: { slug: { regex: "/widgets/" } } }
|
||||
) {
|
||||
edges {
|
||||
node {
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
// if you change these you must restart the server
|
||||
|
||||
module.exports = {
|
||||
|
||||
// colors
|
||||
lightestGrey: '#E6E6E6',
|
||||
lighterGrey: '#F7F8F8',
|
||||
@ -47,5 +46,5 @@ module.exports = {
|
||||
tablet: '768px',
|
||||
desktop: '960px',
|
||||
display: '1200px',
|
||||
xlarge: '1280px'
|
||||
}
|
||||
xlarge: '1280px',
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user