chore: add code formatting and linting (#952)

This commit is contained in:
Caleb
2018-08-07 14:46:54 -06:00
committed by Shawn Erquhart
parent 32e0a9b2b5
commit f801b19221
265 changed files with 5988 additions and 4481 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -15,7 +15,7 @@ const CommunityPage = ({ data }) => {
primarycta,
upcomingevent,
howitworks,
howtojoin
howtojoin,
} = data.markdownRemark.frontmatter;
return (

View File

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

View File

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

View File

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