WIP on styling

content/blog/hello-world/index.md

@@ -3,7 +3,8 @@
     title: "Hello World",
     date: "2015-05-01T22:12:03.284Z",
     author: 'crutchcorn',
-    license: 'MIT'
+    license: 'MIT',
+    tags: ['pic', 'other']
 }
 ---
 

content/blog/hi-folks/index.md

@@ -2,7 +2,9 @@
 {
   title: "New Beginnings",
   description: "This is a custom description for SEO and Open Graph purposes, rather than the default generated excerpt. Simply add a description field to the frontmatter.",
-  author: 'joe'
+  author: 'joe',
+  date: "2015-05-06T23:46:37.121Z",
+  tags: ["new starts", "hi"]
 }
 ---
 

content/blog/my-second-post/index.md

@@ -8,7 +8,8 @@
         id: '123',
         file: 'file.txt'
     }
-  ]
+  ],
+  tags: ['second', 'post']
 }
 ---
 

gatsby-browser.js

@@ -1,3 +1 @@
-// custom typefaces
+
-import "typeface-montserrat"
-import "typeface-merriweather"

gatsby-config.js

@@ -26,18 +26,6 @@ module.exports = {
         path: `./src/data`,
       },
     },
-    {
-      resolve: `gatsby-plugin-prefetch-google-fonts`,
-      options: {
-        fonts: [
-          {
-            family: `Archivo`,
-            variants: [`400`, `700`],
-            subsets: [`latin`]
-          },
-        ],
-      },
-    },
     {
       resolve: `gatsby-transformer-remark`,
       options: {

gatsby-node.js

@@ -64,7 +64,7 @@ exports.createPages = ({ graphql, actions }) => {
       console.log(post.node.fields.slug);
 
       createPage({
-        path: `post${post.node.fields.slug}`,
+        path: `posts${post.node.fields.slug}`,
         component: blogPost,
         context: {
           slug: post.node.fields.slug,

src/components/layout/index.js

@@ -1,7 +1,6 @@
 import React from "react"
 import { Link } from "gatsby"
 import './style.css'
-import { rhythm, scale } from "../utils/typography"
 
 class Layout extends React.Component {
   render() {
@@ -13,8 +12,6 @@ class Layout extends React.Component {
       header = (
         <h1
           style={{
-            ...scale(1.5),
-            marginBottom: rhythm(1.5),
             marginTop: 0,
           }}
         >
@@ -56,8 +53,6 @@ class Layout extends React.Component {
         style={{
           marginLeft: `auto`,
           marginRight: `auto`,
-          maxWidth: rhythm(24),
-          padding: `${rhythm(1.5)} ${rhythm(3 / 4)}`,
         }}
       >
         <header>{header}</header>

src/components/layout/style.css

@@ -11,3 +11,7 @@
 p, h1, h2, h3, h4, h5, h6 {
     font-family: 'Archivo', sans-serif;
 }
+
+body {
+    background-color: var(--backgroundColor)
+}

src/components/post-card/index.js

@@ -1,36 +1,46 @@
 import React from "react"
 import { Link } from "gatsby"
-import cardStyles from "./style.css"
+import cardStyles from "./style.module.css"
+import Image from "gatsby-image"
 
 class PostCard extends React.Component {
   render() {
-    const { title, authorName, date, tags, excerpt } = this.props
+    const { title, author, date, tags, excerpt, description, className, slug } = this.props
 
     return (
-      <div className={cardStyles.card}>
+      <Link to={`posts/${slug}`} className={`${cardStyles.card} ${className}`}>
-        <img src={"https://pbs.twimg.com/profile_images/1137822889938317312/Z9Ci2LoS_400x400.jpg"}
+        <Image
-             alt={`Image of ${authorName}`}
+          fixed={author.profileImg.childImageSharp.fixed}
-         className={cardStyles.profilePic} style={{
+          alt={author.name}
+          className={cardStyles.profilePic}
+          style={{
           borderColor: "red",
-        }}/>
+          }}
+          imgStyle={{
+            borderRadius: `50%`,
+          }}
+        />
         <div className={cardStyles.cardContents}>
           <h2 className={cardStyles.header}>{title}</h2>
           <div className={cardStyles.authorSubheader}>
-            <p>by {authorName}</p>
+            <p>by {author.name}</p>
             <p className={cardStyles.date}>{date}</p>
+            <div>
             {
               tags.map(tag => (
-                <Link to={"/"} className={cardStyles.tag}>
+                <Link to={"/"} key={tag} className={cardStyles.tag}>
-                  {tag.name}
+                  {tag}
                 </Link>
               ))
             }
+            </div>
           </div>
-          <p className={cardStyles.excerpt}>
+          <p className={cardStyles.excerpt} dangerouslySetInnerHTML={{
-            {excerpt}
+            __html: description || excerpt,
-          </p>
+          }}
+          />
         </div>
-      </div>
+      </Link>
     )
   }
 }

src/components/post-card/style.module.css

@@ -3,11 +3,13 @@
     box-sizing: border-box;
     border-radius: 8px;
     position: relative;
+    color: inherit;
 }
 
 .profilePic {
-    height: 60px;
+    position: absolute !important;
-    width: 60px;
+    left: 12px;
+    top: 12px;
     border-radius: 50%;
     border-width: 2px;
     border-style: solid;
@@ -18,6 +20,7 @@
 }
 
 .header {
+    margin:0;
     font-size: 32px;
 }
 
@@ -26,7 +29,12 @@
     flex-direction: row;
     flex-grow: 0;
     flex-shrink: 0;
-    flex-wrap: nowrap;
+    flex-wrap: wrap;
+}
+
+.authorSubheader p {
+    margin-top: 0;
+    margin-bottom: 0;
 }
 
 .date {
@@ -37,18 +45,29 @@
     color: var(--darkPrimary);
 }
 
-.tag, .date {
+.tag:not(:first-child), .date {
     position: relative;
     margin-left: 12px;
 }
 
-.tag::before, .date::before {
+.tag:not(:first-child)::before, .date::before, .date::after {
+    --height: 20px;
+    --halfHeight: calc(var(--height) / 2);
     position: absolute;
-    top: 0;
+    top: 50%;
-    height: 100%;
+    margin-top: calc(0px - var(--halfHeight));
-    left: 0;
+    height: var(--height);
     width: 1px;
-    background: var(--darkPrimary)
+    background: var(--darkPrimary);
+    content: ' ';
+}
+
+.tag:not(:first-child)::before, .date::before {
+    left: -6px;
+}
+
+.date::after {
+    right: -6px;
 }
 
 .excerpt {
@@ -59,7 +78,8 @@
     position: absolute;
     top: 0;
     height: 100%;
-    left: 12px;
+    left: -12px;
     width: 2px;
-    background: var(--darkPrimary)
+    background: var(--darkPrimary);
+    content: ' ';
 }

src/pages/index.js

@@ -1,10 +1,9 @@
 import React from "react"
 import { Link, graphql } from "gatsby"
-
-import Bio from "../components/bio"
 import Layout from "../components/layout"
 import SEO from "../components/seo"
-import { rhythm } from "../utils/typography"
+import PostCard from "../components/post-card"
+import listStyle from './index.module.css'
 
 class BlogIndex extends React.Component {
   render() {
@@ -15,29 +14,24 @@ class BlogIndex extends React.Component {
     return (
       <Layout location={this.props.location} title={siteTitle}>
         <SEO title="All posts" />
+        <div className={listStyle.postsListContainer}>
         {posts.map(({ node }) => {
           const title = node.frontmatter.title || node.fields.slug
           return (
-            <div key={node.fields.slug}>
+            <PostCard
-              <h3
+              slug={node.fields.slug}
-                style={{
+              className={listStyle.postListItem}
-                  marginBottom: rhythm(1 / 4),
+              key={node.fields.slug}
-                }}
+              excerpt={node.excerpt}
-              >
+              title={title}
-                <Bio author={node.frontmatter.author} />
+              author={node.frontmatter.author}
-                <Link style={{ boxShadow: `none` }} to={`post/${node.fields.slug}`}>
+              date={node.frontmatter.date}
-                  {title}
+              tags={node.frontmatter.tags}
-                </Link>
+              description={node.frontmatter.description}
-              </h3>
+            />
-              <small>{node.frontmatter.date}</small>
-              <p
-                dangerouslySetInnerHTML={{
-                  __html: node.frontmatter.description || node.excerpt,
-                }}
-              />
-            </div>
           )
         })}
+        </div>
       </Layout>
     )
   }
@@ -62,7 +56,7 @@ export const query = graphql`
     }
     profileImg {
       childImageSharp {
-        fixed(width: 50, height: 50) {
+        fixed(width: 60, height: 60) {
           ...GatsbyImageSharpFixed
         }
       }
@@ -87,6 +81,7 @@ export const pageQuery = graphql`
           frontmatter {
             date(formatString: "MMMM DD, YYYY")
             title
+            tags
             author {
               ...AuthorInfo
             }

src/pages/index.module.css

@@ -0,0 +1,14 @@
+.postsListContainer {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    padding: 0 20px;
+}
+
+.postListItem {
+    flex-basis: calc(33% - 20px);
+    margin: 0 10px;
+    flex-grow: 0;
+    width: calc(33% - 20px);
+    max-width: calc(33% - 20px);
+}