More style changes

Author: kyleect

src/pages/blog.js

@@ -5,6 +5,7 @@ import Layout from '../layouts';
 import { Helmet } from 'react-helmet';
 import moment from 'moment';
 import PostTags from '../components/post-tags';
+import styled from 'styled-components';
 
 export default function Index({ data }) {
   const { siteMetadata } = data.site;
@@ -23,33 +24,42 @@ export default function Index({ data }) {
         />
       </Helmet>
 
-      {posts
-        .filter(post => post.node.frontmatter.title.length > 0)
-        .map(({ node: post }) => {
-          const formattedDate = moment(post.frontmatter.date).format(
-            'MMMM Do YYYY'
-          );
+      <PostList>
+        {posts
+          .filter(post => post.node.frontmatter.title.length > 0)
+          .map(({ node: post }) => {
+            const formattedDate = moment(post.frontmatter.date).format(
+              'MMMM Do YYYY'
+            );
 
-          return (
-            <div key={post.id} style={{ marginBottom: '2em' }}>
-              <h2>
-                <Link to={post.frontmatter.path}>{post.frontmatter.title}</Link>
-              </h2>
+            return (
+              <div key={post.id} style={{ marginBottom: '2em' }}>
+                <h2 style={{ fontSize: '1.2em', marginBottom: '1em' }}>
+                  <Link to={post.frontmatter.path}>
+                    {post.frontmatter.title}
+                  </Link>
+                </h2>
 
-              <p>
-                <span style={{ fontStyle: 'italic' }}>{formattedDate}</span>{' '}
-                &mdash; {post.excerpt}
-              </p>
+                <p style={{ marginBottom: '1em' }}>
+                  <span style={{ fontStyle: 'italic' }}>{formattedDate}</span>{' '}
+                  &mdash; {post.excerpt}
+                </p>
 
-              {post.frontmatter.tags && (
-                <PostTags tags={post.frontmatter.tags} />
-              )}
-            </div>
-          );
-        })}
+                {post.frontmatter.tags && (
+                  <PostTags tags={post.frontmatter.tags} />
+                )}
+              </div>
+            );
+          })}
+      </PostList>
     </Layout>
   );
 }
+
+const PostList = styled.div`
+  margin-top: 1em;
+`;
+
 export const pageQuery = graphql`
   query IndexQuery {
     allMarkdownRemark(sort: { order: DESC, fields: [frontmatter___date] }) {

src/templates/post.js

@@ -118,5 +118,6 @@ const Divider = styled.hr`
 
 const PostTitle = styled.h1`
   margin-bottom: 1em;
-  font-size: 2em;
+  font-size: 2.1em;
+  letter-spacing: -0.05em;
 `;

src/templates/tag.js

@@ -3,6 +3,7 @@ import { Link, graphql } from 'gatsby';
 import Helmet from 'react-helmet';
 import moment from 'moment';
 import Layout from '../layouts';
+import PostTags from '../components/post-tags';
 
 export default function TagTemplate({ pageContext, data }) {
   const { tag, posts } = pageContext;
@@ -18,20 +19,36 @@ export default function TagTemplate({ pageContext, data }) {
         <title>{`Tag: ${tag} - ${siteMetadata.title}`}</title>
       </Helmet>
 
-      <h1>Posts tagged “{tag}”</h1>
-
-      <ul style={{ listStyle: 'none', padding: 0 }}>
-        {postData.map(({ frontmatter, excerpt, fields, html }) => (
-          <li key={frontmatter.path} style={{ marginBottom: '2rem' }}>
-            <h2>
-              <Link to={frontmatter.path}>{frontmatter.title}</Link>
-            </h2>
-            <p style={{ fontStyle: 'italic' }}>
-              {moment(frontmatter.date).format('MMMM Do YYYY')}
-            </p>
-            <p>{excerpt}</p>
-          </li>
-        ))}
+      <h1
+        style={{
+          fontSize: '1.25em',
+          border: '1px dotted #333',
+          padding: '0.5em',
+          marginBottom: '2em',
+        }}
+      >
+        Posts tagged “{tag}”
+      </h1>
+
+      <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
+        {postData.map(({ frontmatter, excerpt, fields, html, id }) => {
+          const formattedDate = moment(frontmatter.date).format('MMMM Do YYYY');
+
+          return (
+            <li key={id} style={{ marginBottom: '2em' }}>
+              <h2 style={{ fontSize: '1.2em', marginBottom: '1em' }}>
+                <Link to={frontmatter.path}>{frontmatter.title}</Link>
+              </h2>
+
+              <p style={{ marginBottom: '1em' }}>
+                <span style={{ fontStyle: 'italic' }}>{formattedDate}</span>{' '}
+                &mdash; {excerpt}
+              </p>
+
+              {frontmatter.tags && <PostTags tags={frontmatter.tags} />}
+            </li>
+          );
+        })}
       </ul>
     </Layout>
   );
@@ -52,6 +69,7 @@ export const pageQuery = graphql`
             title
             path
             date
+            tags
           }
           excerpt(pruneLength: 140)
         }