remove UI

gatsby-config.js

@@ -43,11 +43,5 @@ module.exports = {
     },
     `gatsby-plugin-offline`,
     `gatsby-plugin-react-helmet`,
-    {
-      resolve: "gatsby-plugin-typography",
-      options: {
-        pathToConfigModule: "src/utils/typography",
-      },
-    },
   ],
 }

package.json

@@ -15,7 +15,6 @@
     "gatsby-plugin-preact": "^1.0.3",
     "gatsby-plugin-react-helmet": "^1.0.3",
     "gatsby-plugin-sharp": "^1.6.2",
-    "gatsby-plugin-typography": "^1.7.6",
     "gatsby-remark-copy-linked-files": "^1.5.2",
     "gatsby-remark-images": "^1.5.4",
     "gatsby-remark-prismjs": "^1.2.1",
@@ -24,11 +23,7 @@
     "gatsby-source-filesystem": "^1.4.3",
     "gatsby-transformer-remark": "^1.7.1",
     "gatsby-transformer-sharp": "^1.6.1",
-    "lodash": "^4.15.0",
-    "react-responsive-grid": "^0.3.3",
-    "typeface-merriweather": "^0.0.35",
-    "typeface-montserrat": "^0.0.37",
-    "typography-theme-wordpress-2016": "^0.15.1"
+    "lodash": "^4.15.0"
   },
   "devDependencies": {
     "gh-pages": "^0.12.0",

src/components/Bio.js

@@ -1,30 +1,14 @@
 import React from 'react'
 
-// Import typefaces
-import 'typeface-montserrat'
-import 'typeface-merriweather'
-
 import profilePic from './profile-pic.jpg'
-import { rhythm } from '../utils/typography'
 
 class Bio extends React.Component {
   render() {
     return (
-      <p
-        style={{
-          marginBottom: rhythm(2.5),
-        }}
-      >
+      <p>
         <img
           src={profilePic}
           alt={`Kyle Mathews`}
-          style={{
-            float: 'left',
-            marginRight: rhythm(1 / 4),
-            marginBottom: 0,
-            width: rhythm(2),
-            height: rhythm(2),
-          }}
         />
         Written by <strong>Kyle Mathews</strong> who lives and works in San
         Francisco building useful things.{' '}

src/layouts/index.js

@@ -1,66 +1,32 @@
 import React from 'react'
 import Link from 'gatsby-link'
-import { Container } from 'react-responsive-grid'
-
-import { rhythm, scale } from '../utils/typography'
 
 class Template extends React.Component {
   render() {
     const { location, children } = this.props
     let header
     if (location.pathname === '/') {
       header = (
-        <h1
-          style={{
-            ...scale(1.5),
-            marginBottom: rhythm(1.5),
-            marginTop: 0,
-          }}
-        >
-          <Link
-            style={{
-              boxShadow: 'none',
-              textDecoration: 'none',
-              color: 'inherit',
-            }}
-            to={'/'}
-          >
+        <h1>
+          <Link to={'/'} >
             Gatsby Starter Blog
           </Link>
         </h1>
       )
     } else {
       header = (
-        <h3
-          style={{
-            fontFamily: 'Montserrat, sans-serif',
-            marginTop: 0,
-            marginBottom: rhythm(-1),
-          }}
-        >
-          <Link
-            style={{
-              boxShadow: 'none',
-              textDecoration: 'none',
-              color: 'inherit',
-            }}
-            to={'/'}
-          >
+        <h3>
+          <Link to={'/'}>
             Gatsby Starter Blog
           </Link>
         </h3>
       )
     }
     return (
-      <Container
-        style={{
-          maxWidth: rhythm(24),
-          padding: `${rhythm(1.5)} ${rhythm(3 / 4)}`,
-        }}
-      >
+      <div>
         {header}
         {children()}
-      </Container>
+      </div>
     )
   }
 }

src/pages/index.js

@@ -4,7 +4,6 @@ import get from 'lodash/get'
 import Helmet from 'react-helmet'
 
 import Bio from '../components/Bio'
-import { rhythm } from '../utils/typography'
 
 class BlogIndex extends React.Component {
   render() {
@@ -20,15 +19,8 @@ class BlogIndex extends React.Component {
             const title = get(post, 'node.frontmatter.title') || post.node.path
             return (
               <div key={post.node.frontmatter.path}>
-                <h3
-                  style={{
-                    marginBottom: rhythm(1 / 4),
-                  }}
-                >
-                  <Link
-                    style={{ boxShadow: 'none' }}
-                    to={post.node.frontmatter.path}
-                  >
+                <h3>
+                  <Link to={post.node.frontmatter.path} >
                     {post.node.frontmatter.title}
                   </Link>
                 </h3>

src/templates/blog-post.js

@@ -4,7 +4,6 @@ import Link from 'gatsby-link'
 import get from 'lodash/get'
 
 import Bio from '../components/Bio'
-import { rhythm, scale } from '../utils/typography'
 
 class BlogPostTemplate extends React.Component {
   render() {
@@ -15,22 +14,11 @@ class BlogPostTemplate extends React.Component {
       <div>
         <Helmet title={`${post.frontmatter.title} | ${siteTitle}`} />
         <h1>{post.frontmatter.title}</h1>
-        <p
-          style={{
-            ...scale(-1 / 5),
-            display: 'block',
-            marginBottom: rhythm(1),
-            marginTop: rhythm(-1),
-          }}
-        >
+        <p>
           {post.frontmatter.date}
         </p>
         <div dangerouslySetInnerHTML={{ __html: post.html }} />
-        <hr
-          style={{
-            marginBottom: rhythm(1),
-          }}
-        />
+        <hr />
         <Bio />
       </div>
     )