[1.0] New design + new home page 🎉 (#1170)

* First iteration on new website * Purpleize * Start to new homepage * New Container component so can do full width bleeds + move sidebars to left. * SVG icon * Lighten mobile tab bar background purple more * Update the theme_color to our purple * Use presets * Use latest node * Use generated colors * remove nvmrc * Add missing colors module + argyle background pattern * Try debugging why things not building * Don't pull in presets * Simple grid front page + first draft for copy * Slip in a joinPath fix * More replacing of static colors with our autogenerated colors * Label color columns * Add index label * Add index label
gatsbyjs · Jun 15, 2017 · 0f72739 · 0f72739
1 parent abf6fd9
commit 0f72739
Show file tree

Hide file tree

Showing 27 changed files with 484 additions and 130 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -1,4 +1,6 @@
-# How to contribute
+---
+title: How to contribute
+---
 
 ## Filing an issue
 

diff --git a/docs/docs/api-specification.md b/docs/docs/api-specification.md
@@ -1,4 +1,6 @@
-# API specification
+---
+title: API specification
+---
 
 Gatsby's APIs are tailored conceptually to some extent after React.js which
 makes sense as users of Gatsby will necessarily also be users of React.js. I

diff --git a/packages/gatsby/src/utils/webpack.config.js b/packages/gatsby/src/utils/webpack.config.js
@@ -293,7 +293,7 @@ module.exports = async (
       modulesDirectories: [
         joinPath(directory, `node_modules`),
         `node_modules`,
-        `node_modules/gatsby/node_modules`,
+        joinPath(directory, `node_modules`, `gatsby`, `node_modules`),
       ],
     }
   }

diff --git a/www/gatsby-config.js b/www/gatsby-config.js
@@ -31,7 +31,7 @@ module.exports = {
             resolve: `gatsby-remark-responsive-image`,
             options: {
               maxWidth: 690,
-              backgroundColor: `#f7f0eb`,
+              backgroundColor: `#ffffff`,
             },
           },
           {
@@ -63,7 +63,7 @@ module.exports = {
         short_name: `GatsbyJS`,
         start_url: `/`,
         background_color: `#f7f0eb`,
-        theme_color: `#a2466c`,
+        theme_color: `#5c2965`,
         display: `minimal-ui`,
       },
     },

diff --git a/www/src/argyle.png b/www/src/argyle.png
diff --git a/www/src/components/container.js b/www/src/components/container.js
@@ -0,0 +1,23 @@
+import React from "react"
+import presets from "../utils/presets"
+
+import { rhythm, scale } from "../utils/typography"
+
+export default ({ children, className, hasSideBar = true }) =>
+  <div
+    css={{
+      maxWidth: hasSideBar
+        ? rhythm(presets.maxWidthWithSidebar)
+        : rhythm(presets.maxWidth),
+      margin: `0 auto`,
+      padding: `${rhythm(1.5)} ${rhythm(3 / 4)}`,
+      paddingBottom: rhythm(3.5),
+      position: `relative`,
+      [presets.Tablet]: {
+        paddingBottom: rhythm(1.5),
+      },
+    }}
+    className={className}
+  >
+    {children}
+  </div>
diff --git a/www/src/components/sidebar-body.js b/www/src/components/sidebar-body.js
@@ -15,7 +15,12 @@ class SidebarBody extends React.Component {
       ? scale(2 / 5).fontSize
       : scale(1 / 5).fontSize
     return (
-      <div css={{ marginBottom: rhythm(1) }}>
+      <div
+        css={{
+          marginBottom: rhythm(1),
+          padding: this.props.inline ? 0 : rhythm(3 / 4),
+        }}
+      >
         {menu.map(section =>
           <div
             key={section.title}

diff --git a/www/src/components/tutorial-sidebar.js b/www/src/components/tutorial-sidebar.js
@@ -15,7 +15,7 @@ class TutorialSidebarBody extends React.Component {
       ? scale(2 / 5).fontSize
       : scale(1 / 5).fontSize
     return (
-      <div css={{ marginBottom: rhythm(1) }}>
+      <div css={{ marginBottom: rhythm(1), padding: rhythm(3 / 4) }}>
         {menu.map(section =>
           <div
             key={section.title}

diff --git a/www/src/css/prism-coy.css b/www/src/css/prism-coy.css
@@ -4,46 +4,46 @@
  * @author Tim  Shedor
  */
 
-.token.comment,
-.token.block-comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: #52ad9f;
-}
+/* .token.comment, */
+/* .token.block-comment, */
+/* .token.prolog, */
+/* .token.doctype, */
+/* .token.cdata { */
+  /* color: #52ad9f; */
+/* } */
 
-.token.punctuation {
-  color: #5F6364;
-}
+/* .token.punctuation { */
+  /* color: #5F6364; */
+/* } */
 
-.token.property,
-.token.tag,
-.token.boolean,
-.token.number,
-.token.function-name,
-.token.constant,
-.token.symbol,
-.token.deleted {
-  color: #a285d8;
-}
+/* .token.property, */
+/* .token.tag, */
+/* .token.boolean, */
+/* .token.number, */
+/* .token.function-name, */
+/* .token.constant, */
+/* .token.symbol, */
+/* .token.deleted { */
+  /* color: #a285d8; */
+/* } */
 
-.token.selector,
-.token.attr-name,
-.token.string,
-.token.char,
-.token.function,
-.token.builtin,
-.token.inserted {
-  color: #a2466c;
-}
+/* .token.selector, */
+/* .token.attr-name, */
+/* .token.string, */
+/* .token.char, */
+/* .token.function, */
+/* .token.builtin, */
+/* .token.inserted { */
+  /* color: #a2466c; */
+/* } */
 
-.token.operator, .token.entity, .token.url, .token.variable {
-  color: #c18b99;
-}
+/* .token.operator, .token.entity, .token.url, .token.variable { */
+  /* color: #c18b99; */
+/* } */
 
-.token.atrule, .token.attr-value, .token.keyword, .token.class-name {
-  color: #a285d8;
-}
+/* .token.atrule, .token.attr-value, .token.keyword, .token.class-name { */
+  /* color: #a285d8; */
+/* } */
 
 .token.regex, .token.important {
   color: #d88489;

diff --git a/www/src/gatsby-negative.svg b/www/src/gatsby-negative.svg
diff --git a/www/src/gatsby-positive.svg b/www/src/gatsby-positive.svg
diff --git a/www/src/layouts/index.js b/www/src/layouts/index.js
@@ -6,11 +6,12 @@ import PencilIcon from "react-icons/lib/go/pencil"
 import PersonIcon from "react-icons/lib/md/person"
 import Helmet from "react-helmet"
 
-import logo from "../../static/images/gatsby-monogram.jpg"
+import logo from "../gatsby-negative.svg"
 import typography, { rhythm, scale } from "../utils/typography"
 import SidebarBody from "../components/sidebar-body"
 import TutorialSidebarBody from "../components/tutorial-sidebar"
 import presets from "../utils/presets"
+import colors from "../utils/colors"
 
 import "../css/prism-coy.css"
 
@@ -53,13 +54,14 @@ module.exports = React.createClass({
         />
         <div
           css={{
-            background: `#f4dfc6`,
-            marginBottom: rhythm(1.5),
+            borderBottom: this.props.location.pathname !== `/`
+              ? `1px solid ${presets.purple}`
+              : ``,
           }}
         >
           <div
             css={{
-              maxWidth: rhythm(36),
+              maxWidth: rhythm(presets.maxWidth),
               margin: `0 auto`,
               padding: `${rhythm(1 / 3)} ${rhythm(3 / 4)}`,
               fontFamily: typography.options.headerFontFamily.join(`,`),
@@ -215,9 +217,6 @@ module.exports = React.createClass({
         <div
           className={`main-body`}
           css={{
-            maxWidth: rhythm(36),
-            margin: `${rhythm(-1 / 2)} auto ${rhythm(1.75)} auto`,
-            padding: `${rhythm(1.5)} ${rhythm(3 / 4)}`,
             paddingTop: 0,
             [presets.Tablet]: {
               margin: `0 auto`,
@@ -229,13 +228,13 @@ module.exports = React.createClass({
           <div
             css={{
               float: `left`,
-              marginTop: rhythm(-3 / 4),
-              width: rhythm(8),
+              width: rhythm(10),
               display: `none`,
               [presets.Tablet]: {
+                borderRight: `1px solid ${presets.purple}`,
                 position: `fixed`,
                 overflowY: `scroll`,
-                height: `calc(100vh - 73px)`,
+                height: `calc(100vh - 55px)`,
                 display: this.props.location.pathname.slice(0, 6) === `/docs/`
                   ? `block`
                   : `none`,
@@ -249,10 +248,10 @@ module.exports = React.createClass({
           <div
             css={{
               float: `left`,
-              marginTop: rhythm(-3 / 4),
-              width: rhythm(8),
+              width: rhythm(10),
               display: `none`,
               [presets.Tablet]: {
+                borderRight: `1px solid ${presets.purple}`,
                 position: `fixed`,
                 display: this.props.location.pathname.slice(0, 10) ===
                   `/tutorial/`
@@ -289,7 +288,8 @@ module.exports = React.createClass({
             left: 0,
             right: 0,
             height: rhythm(2.5),
-            background: `#f4dfc6`,
+            // borderTop: `1px solid ${presets.purple}`,
+            background: presets.veryLightPurple,
             fontFamily: typography.options.headerFontFamily.join(`,`),
             [presets.Tablet]: {
               display: `none`,
@@ -299,7 +299,7 @@ module.exports = React.createClass({
           <Link
             to="/docs/"
             css={{
-              color: typography.options.bodyColor,
+              color: presets.purple,
               marginBottom: 2,
               textDecoration: `none`,
               textAlign: `center`,
@@ -319,7 +319,7 @@ module.exports = React.createClass({
           <Link
             to="/tutorial/"
             css={{
-              color: typography.options.bodyColor,
+              color: presets.purple,
               marginBottom: 2,
               textDecoration: `none`,
               textAlign: `center`,
@@ -339,7 +339,7 @@ module.exports = React.createClass({
           <Link
             to="/community/"
             css={{
-              color: typography.options.bodyColor,
+              color: presets.purple,
               marginBottom: 2,
               textDecoration: `none`,
               textAlign: `center`,
@@ -373,7 +373,7 @@ module.exports = React.createClass({
           <Link
             to="/blog/"
             css={{
-              color: typography.options.bodyColor,
+              color: presets.purple,
               marginBottom: 2,
               textDecoration: `none`,
               textAlign: `center`,

diff --git a/www/src/pages/blog/index.js b/www/src/pages/blog/index.js
@@ -1,26 +1,19 @@
 import React from "react"
 import Link from "gatsby-link"
+import colors from "../../utils/colors"
 
 import { rhythm, scale } from "../../utils/typography"
 import presets from "../../utils/presets"
+import Container from "../../components/container"
 
 class BlogPostsIndex extends React.Component {
   render() {
     const blogPosts = this.props.data.allMarkdownRemark.edges.map(
       edge => edge.node
     )
     return (
-      <div
-        css={{
-          margin: 0,
-          maxWidth: `100%`,
-          [presets.Tablet]: {
-            margin: `0 auto`,
-            maxWidth: rhythm(26),
-          },
-        }}
-      >
-        <h1>Blog</h1>
+      <Container>
+        <h1 css={{ marginTop: 0 }}>Blog</h1>
         {blogPosts.map(post => {
           const avatar =
             post.frontmatter.author.avatar.childImageSharp.responsiveResolution
@@ -36,7 +29,7 @@ class BlogPostsIndex extends React.Component {
                 </h2>
                 <p
                   css={{
-                    color: `#696861`,
+                    color: colors.c[13],
                   }}
                 >
                   {post.excerpt}
@@ -64,15 +57,15 @@ class BlogPostsIndex extends React.Component {
                 >
                   <div
                     css={{
-                      color: `#696861`,
+                      color: colors.c[11],
                       lineHeight: 1.1,
                     }}
                   >
                     <small>{post.frontmatter.author.id}</small>
                   </div>
                   <div
                     css={{
-                      color: `#696861`,
+                      color: colors.c[11],
                       lineHeight: 1.1,
                     }}
                   >
@@ -83,7 +76,7 @@ class BlogPostsIndex extends React.Component {
             </div>
           )
         })}
-      </div>
+      </Container>
     )
   }
 }