Small tweaks + add an about page

examples/gatsbygram/components/post-detail.js

@@ -89,7 +89,8 @@ class PostDetail extends React.Component {
           width: `100%`,
           [presets.Tablet]: {
             flexDirection: `row-reverse`,
-          }
+            marginTop: rhythm(1),
+          },
         }}
       >
         <div

examples/gatsbygram/layouts/default.js

@@ -26,12 +26,17 @@ class DefaultLayout extends React.Component {
     // if we're changing to a non-homepage page, put things in
     // a modal (unless we're on mobile).
     if (nextProps.location.pathname !== `/` &&
+        nextProps.location.pathname !== `/about/` &&
         this.windowWidth > 750
        ) {
       // Freeze the background from scrolling.
       this.htmlElement.style.overflow = `hidden`
       this.bodyElement.style.overflow = `hidden`
 
+      // Always set overflow-y to scroll so the scrollbar stays visible avoiding
+      // weird jumping.
+      this.htmlElement.style.overflowY = `scroll`
+
       // Save the homepage if we haven't already.
       if (!this.modalBackgroundChildren) {
         this.modalBackgroundChildren = this.props.children
@@ -42,6 +47,10 @@ class DefaultLayout extends React.Component {
       delete this.modalBackgroundChildren
       this.htmlElement.style.overflow = `visible`
       this.bodyElement.style.overflow = `visible`
+
+      // Always set overflow-y to scroll so the scrollbar stays visible avoiding
+      // weird jumping.
+      this.htmlElement.style.overflowY = `scroll`
     }
   }
 
@@ -68,9 +77,17 @@ class DefaultLayout extends React.Component {
               paddingBottom: `calc(${rhythm(3/4)} - 1px)`,
               maxWidth: 960,
               margin: `0 auto`,
+              overflow: `hidden`,
             }}
           >
-            <Link to="/">
+            <Link
+              to="/"
+              css={{
+                display: `inline-block`,
+                float: `left`,
+                textDecoration: `none`,
+              }}
+            >
               <h1
                 css={{
                   ...scale(4/5),
@@ -98,6 +115,18 @@ class DefaultLayout extends React.Component {
                 </span>
               </h1>
             </Link>
+            <Link
+              to="/about/"
+              css={{
+                color: `inherit`,
+                display: `inline-block`,
+                float: `right`,
+                lineHeight: `35px`,
+                textDecoration: `none`,
+              }}
+            >
+              About
+            </Link>
           </div>
         </div>
         <div

examples/gatsbygram/pages/about.js

@@ -0,0 +1,15 @@
+import React from "react"
+
+class About extends React.Component {
+  render () {
+    return (
+      <div>
+        <h1>About Gatsbygram</h1>
+        <p>Gatsbygram is an example website built with the JavaScript web framework <a target="_blank" href="https://github.com/gatsbyjs/gatsby">Gatsby</a></p>
+        <p>The code for the site lives at <a href="https://github.com/gatsbyjs/gatsby/tree/1.0/examples/gatsbygram" target="_blank">https://github.com/gatsbyjs/gatsby/tree/1.0/examples/gatsbygram</a></p>
+      </div>
+    )
+  }
+}
+
+export default About

examples/gatsbygram/utils/typography.js

@@ -20,8 +20,11 @@ const options = {
   headerFontFamily: [`Space Mono`, `sans-serif`],
   bodyFontFamily: [`Space Mono`, `sans-serif`],
   overrideStyles: () => ({
+    html: {
+      overflowY: `scroll`,
+    },
     a: {
-      textDecoration: `none`,
+      color: `#3897f0`,
     }
   })
 }