Style updates for posts

Author: kyleect

src/components/post-tags.js

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import InlineList from './inline-list';
 
 const PostTagsStyle = styled(InlineList)`
-  margin-left: 0;
+  margin: 0;
   padding: 0;
 
   &:before {

src/pages/blog/bash-script-before-reading-code.md

@@ -7,7 +7,7 @@ tags: ['git', 'tools', 'bash']
 
 I saw this awesome blog post [The Git Commands I Run Before Reading Any Code](https://piechowski.io/post/git-commands-before-reading-code/) detailing some git commands to help you navigate a new code base. Well, I decided to make a wrapper bash script around those commands.
 
-<h2 id="the-script">The Script <a href="#the-script">🔗</a></h2>
+## The Script
 
 Create a file `git-investigate` (no extension), mark it as executable (`chmod +x git-investigate`), and then add `git-investigate` to your `PATH`.
 
@@ -84,7 +84,7 @@ fi
 
 ```
 
-<h2 id="usage">Usage <a href="#usage">🔗</a></h2>
+## Usage
 
 ```bash
 cd myproject

src/templates/post.js

@@ -4,14 +4,43 @@ import { Helmet } from 'react-helmet';
 import Layout from '../layouts';
 import moment from 'moment';
 import PostTags from '../components/post-tags';
+import styled from 'styled-components';
 
 export default function Template({ data }) {
   const { siteMetadata } = data.site;
-  const { frontmatter, html, excerpt } = data.markdownRemark;
+  const { frontmatter, html, excerpt, tableOfContents } = data.markdownRemark;
   const { title, date, tags } = frontmatter;
 
   const formattedDate = moment(date).format('MMMM Do YYYY');
 
+  const dateAndTags = (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        margin: '1em 0 1em 0',
+      }}
+    >
+      <p
+        style={{
+          fontSize: '0.9em',
+          margin: 0,
+        }}
+      >
+        <span style={{ fontWeight: 'bold' }}>Published: </span>{' '}
+        <span
+          style={{
+            fontStyle: 'italic',
+          }}
+        >
+          {formattedDate}
+        </span>
+      </p>
+
+      {tags && <PostTags tags={tags} />}
+    </div>
+  );
+
   return (
     <Layout>
       <Helmet>
@@ -31,28 +60,18 @@ export default function Template({ data }) {
         <div className="blog-post">
           <h1 style={{ marginBottom: tags ? 0 : '0.5em' }}>{title}</h1>
 
-          {tags && <PostTags tags={tags} />}
+          {dateAndTags}
 
-          <p
-            style={{
-              fontSize: '1.1em',
-              marginBottom: '2em',
-            }}
-          >
-            <span>📅</span>{' '}
-            <span
-              style={{
-                fontStyle: 'italic',
-              }}
-            >
-              {formattedDate}
-            </span>
-          </p>
+          <hr style={{ margin: '2.5em 0' }} />
 
           <div
             className="blog-post-content"
             dangerouslySetInnerHTML={{ __html: html }}
           />
+
+          <hr style={{ margin: '2.5em 0' }} />
+
+          {dateAndTags}
         </div>
       </div>
     </Layout>