Initial design finished for post header

gatsby-config.js

@@ -37,7 +37,10 @@ module.exports = {
             family: `Archivo`,
             variants: [`400`, `700`],
             subsets: [`latin`]
-          },
+          }, {
+            family: 'Oswald',
+            variants: [`400`, `700`],
+          }
         ],
       },
     },

src/components/layout/index.js

@@ -11,7 +11,7 @@ class Layout extends React.Component {
     let header
 
     const isBase = location.pathname === rootPath;
-    const isBlogPost = location.pathname.startsWith(`${rootPath}/posts`);
+    const isBlogPost = location.pathname.startsWith(`${rootPath}posts`);
 
     return (
       <div
@@ -20,11 +20,11 @@ class Layout extends React.Component {
           marginRight: `auto`,
         }}
       >
-        <header>
+        <header className={layoutStyles.header}>
           {!isBase && <Link className={`${layoutStyles.backBtn} baseBtn`} to={`/`}><BackIcon/></Link>}
           {header}
         </header>
-        <main className={!isBlogPost && 'listViewContent'}>{children}</main>
+        <main className={!isBlogPost ? 'listViewContent' : 'postViewContent'}>{children}</main>
         <footer>
           © {new Date().getFullYear()}, Built with
           {` `}
@@ -56,7 +56,10 @@ export const authorFragmentQuery = graphql`
     }
     profileImg {
       childImageSharp {
-        smallPic: fixed(width: 60, height: 60) {
+        smallPic: fixed(width: 60) {
+          ...GatsbyImageSharpFixed
+        }
+        mediumPic: fixed(width: 85) {
           ...GatsbyImageSharpFixed
         }
         bigPic: fixed(width: 300, quality: 100) {

src/components/layout/layout.module.css

@@ -10,7 +10,9 @@
     width: 30px;
 }
 
-
+.header {
-
+    max-width: 1200px;
-
+    padding: 0 15px;
+    margin: 0 auto;
+}
 

src/components/layout/style.css

@@ -7,6 +7,7 @@
     --darkGrey: rgba(0, 0, 0, 0.64);
     --highImpactBlack: rgba(0, 0, 0, 0.87);
     --midImpactBlack: rgba(0, 0, 0, 0.64);
+    --lowImpactBlack: rgba(0, 0, 0, 0.58);
     --backgroundColor: #E4F4FF;
     --cardActiveBackground: rgb(235, 246, 252);
     --cardActiveBoxShadow: 0px 2px 4px rgba(11, 37, 104, 0.27), inset 0px 1px 0px #FFFFFF;
@@ -17,6 +18,8 @@
     --filterBarIconSize: 22px;
     --filterBarFontSize: 20px;
     --listViewPadding: 10px;
+    --archivo: 'Archivo', sans-serif;
+    --oswald: 'Oswald', 'Archivo', sans-serif;
 }
 
 @media screen and (min-width: 600px) {
@@ -31,9 +34,21 @@
     padding: 0 var(--listViewPadding)
 }
 
+.postViewContent {
+    padding: 20px;
+}
+
+.postViewContent > * {
+    margin: 0 auto;
+}
+
 body {
     background-color: var(--backgroundColor);
-    font-family: 'Archivo', sans-serif;
+    font-family: var(--archivo);
+}
+
+h1, h2, h3 {
+    font-family: var(--oswald);
 }
 
 /* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility */

src/components/post-view/post-metadata/index.js

@@ -0,0 +1,25 @@
+import React from "react"
+import Image from "gatsby-image"
+import styles from "./style.module.css"
+
+const PostMetadata = ({ post }) => {
+
+  const { frontmatter } = post
+  const { author } = frontmatter
+
+  return (
+    <div className={styles.container}>
+      <Image className={styles.img} fixed={author.profileImg.childImageSharp.mediumPic}/>
+      <div className={styles.textDiv}>
+        <h2 className={styles.authorName}>{author.name}</h2>
+        <div className={styles.belowName}>
+          <p className={styles.date}>{frontmatter.date}</p>
+          <p className={styles.wordCount}>{post.wordCount.words} words</p>
+        </div>
+      </div>
+    </div>
+  )
+
+}
+
+export default PostMetadata

src/components/post-view/post-metadata/style.module.css

@@ -0,0 +1,44 @@
+.container {
+    display: flex;
+    flex-wrap: nowrap;
+    margin-bottom: 25px;
+    max-width: 768px;
+}
+
+.img {
+    flex-shrink: 0;
+    flex-grow: 0;
+    border-radius: 50%;
+}
+
+.textDiv {
+    margin-left: 24px;
+}
+
+.belowName > * {
+    font-weight: 400;
+    display: inline-block;
+    margin: 0 24px 0 0;
+    color: var(--lowImpactBlack);
+    font-size: 36px;
+    line-height: 36px;
+    position: relative;
+}
+
+.belowName > *:not(:last-child)::after {
+    position: absolute;
+    content: ' ';
+    right: -12px;
+    height: 100%;
+    width: 2px;
+    background: var(--darkPrimary);
+}
+
+.authorName {
+    font-size: 36px;
+    line-height: 36px;
+    color: var(--highImpactBlack);
+    margin: 0;
+}
+.date {}
+.wordCount {}

src/components/post-view/post-title-header/index.js

@@ -0,0 +1,18 @@
+import React from "react"
+import styles from "./style.module.css"
+
+const PostTitleHeader = ({ post }) => {
+  const { frontmatter: {title, subtitle: a, tags} } = post
+
+  const subtitle = 'Research suggests the feature is overhyped as an accessibility tool'
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.tags}>{tags.map(tag => <p key={tag}>{tag}</p>)}</div>
+      <h1 className={styles.title}>{title}</h1>
+      {subtitle && <h2 className={styles.subtitle}>{subtitle}</h2>}
+    </div>
+  )
+}
+
+export default PostTitleHeader

src/components/post-view/post-title-header/style.module.css

@@ -0,0 +1,34 @@
+.container {
+    max-width: 768px;
+}
+
+.tags > * {
+    font-weight: 700;
+    position: relative;
+    display: inline-block;
+    font-size: 26px;
+    color: var(--darkPrimary);
+    text-transform: uppercase;
+    margin: 0 24px 18px 0;
+}
+
+.tags > *:not(:last-child)::after {
+    position: absolute;
+    content: ' ';
+    right: -12px;
+    height: 100%;
+    width: 2px;
+    background: var(--darkPrimary);
+}
+
+.title {
+    color: var(--highImpactBlack);
+    font-size: 64px;
+    margin: 0 0 50px 0;
+}
+
+.subtitle {
+    font-family: var(--archivo);
+    font-size: 32px;
+    margin-bottom: 35px;
+}

src/templates/blog-post/index.js

@@ -1,5 +1,5 @@
 import React from "react"
-import { Link, graphql } from "gatsby"
+import { graphql } from "gatsby"
 import GitHubIcon from "../../assets/icons/github.svg"
 import ShareIcon from "../../assets/icons/share.svg"
 import CommentsIcon from "../../assets/icons/message.svg"
@@ -7,6 +7,8 @@ import Disqus from "disqus-react"
 
 import Layout from "../../components/layout"
 import SEO from "../../components/seo"
+import PostMetadata from "../../components/post-view/post-metadata"
+import PostTitleHeader from "../../components/post-view/post-title-header"
 
 class BlogPostTemplate extends React.Component {
   render() {
@@ -14,7 +16,6 @@ class BlogPostTemplate extends React.Component {
     const siteData = this.props.data.site.siteMetadata
     const siteTitle = siteData.title
     const slug = post.fields.slug;
-    const { previous, next } = this.props.pageContext;
 
     const disqusConfig = {
       url: `${siteData.siteUrl}posts/${slug}`,
@@ -30,16 +31,8 @@ class BlogPostTemplate extends React.Component {
           title={post.frontmatter.title}
           description={post.frontmatter.description || post.excerpt}
         />
-        {post.frontmatter.tags.map(tag => <p key={tag}>{tag}</p>)}
+        <PostTitleHeader post={post}/>
-        <h1>{post.frontmatter.title}</h1>
+        <PostMetadata post={post}/>
-        {post.frontmatter.subtitle && <h1>{post.frontmatter.subtitle}</h1>}
-        <p
-          style={{
-            display: `block`,
-          }}
-        >
-          {post.frontmatter.date}
-        </p>
         <div className="post-body" dangerouslySetInnerHTML={{ __html: post.html }}/>
         <div className="post-lower-area">
           <div style={{