From d01a303cb914ec2f358bb7f7c0a7e331f405e192 Mon Sep 17 00:00:00 2001
From: Kyle Mathews <mathews.kyle@gmail.com>
Date: Thu, 2 Mar 2017 15:59:21 -0800
Subject: [PATCH 1/2] Small tweaks

---
 examples/gatsbygram/components/post-detail.js |  3 +-
 examples/gatsbygram/layouts/default.js        | 31 ++++++++++++++++++-
 examples/gatsbygram/utils/typography.js       |  5 ++-
 3 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/examples/gatsbygram/components/post-detail.js b/examples/gatsbygram/components/post-detail.js
index 3cd3da112f34a..83a8c0b8926f5 100644
--- a/examples/gatsbygram/components/post-detail.js
+++ b/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
diff --git a/examples/gatsbygram/layouts/default.js b/examples/gatsbygram/layouts/default.js
index b448ee439a07b..aeddb1189c329 100644
--- a/examples/gatsbygram/layouts/default.js
+++ b/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
diff --git a/examples/gatsbygram/utils/typography.js b/examples/gatsbygram/utils/typography.js
index f094dae8c8d68..522f910ee2f8a 100644
--- a/examples/gatsbygram/utils/typography.js
+++ b/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`,
     }
   })
 }

From 8fadf4db7c5aea32e9069f4894e46fea9a3cdd70 Mon Sep 17 00:00:00 2001
From: Kyle Mathews <mathews.kyle@gmail.com>
Date: Thu, 2 Mar 2017 16:00:20 -0800
Subject: [PATCH 2/2] Add about page

---
 examples/gatsbygram/pages/about.js | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 examples/gatsbygram/pages/about.js

diff --git a/examples/gatsbygram/pages/about.js b/examples/gatsbygram/pages/about.js
new file mode 100644
index 0000000000000..ef56aa639aa76
--- /dev/null
+++ b/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