From 6bd82c78716062a12dc1e0a1693c28b01d3cdb16 Mon Sep 17 00:00:00 2001
From: Chester How <chesterhow@gmail.com>
Date: Tue, 21 Mar 2017 17:49:46 +0800
Subject: [PATCH] Add super neat styling to posts

---
 _config.yml                            |  2 +-
 _layouts/default.html                  |  2 +-
 _layouts/post.html                     | 18 +++++++++------
 _posts/2017-03-05-empty-post.md        |  1 +
 _posts/2017-03-06-empty-post.md        |  1 +
 _posts/2017-03-07-empty-post.md        |  1 +
 _posts/2017-03-08-welcome-to-jekyll.md |  1 +
 _posts/2017-03-10-welcome-to-jekyll.md |  1 +
 _posts/2017-03-16-example-content.md   |  1 +
 _sass/_base.scss                       |  6 ++++-
 _sass/_post.scss                       | 31 ++++++++++++++------------
 _sass/_variables.scss                  |  1 -
 12 files changed, 41 insertions(+), 25 deletions(-)

diff --git a/_config.yml b/_config.yml
index c955a27..7dbf442 100644
--- a/_config.yml
+++ b/_config.yml
@@ -2,7 +2,7 @@
 permalink:      pretty
 
 # Setup
-title:          tale
+title:          Tale
 subtitle:       by Chester
 paginate:       5
 baseurl:        ""
diff --git a/_layouts/default.html b/_layouts/default.html
index cd5fb7d..14d2993 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -8,7 +8,7 @@
     <div class="container">
       <header>
         <a href="{{ site.baseurl }}/" title="Home">
-          <h2>{{ site.title }}</h2>
+          <h2>{{ site.title | downcase }}</h2>
         </a>
 
         <div class="line"></div>
diff --git a/_layouts/post.html b/_layouts/post.html
index 20e3df1..b920d5b 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -2,14 +2,18 @@
 layout: default
 ---
 
-<div>
-  <div class="post">
-    <time class="post-time" datetime="{{ page.date }}">{{ page.date | date_to_string | upcase }}</time>
-    <h1 class="post-title">{{ page.title }}</h1>
-
-    {{ content }}
-
+<div class="post">
+  <div class="post-info">
+    <span>Written by&nbsp;</span>{{ page.author }}
+    <br>
+    <span>on&nbsp;</span><time datetime="{{ page.date }}">{{ page.date | date: "%B %d, %Y" }}</time>
   </div>
+
+  <h1 class="post-title">{{ page.title }}</h1>
+  <div class="post-line"></div>
+
+  {{ content }}
+
 </div>
 
 <div class="pagination">
diff --git a/_posts/2017-03-05-empty-post.md b/_posts/2017-03-05-empty-post.md
index bd701e9..21af484 100644
--- a/_posts/2017-03-05-empty-post.md
+++ b/_posts/2017-03-05-empty-post.md
@@ -1,6 +1,7 @@
 ---
 layout: post
 title: "Empty Post"
+author: "Chester"
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu ipsum feugiat, condimentum est et, faucibus nulla. Praesent libero lectus, volutpat sed quam eget, volutpat viverra dui. Duis sapien nisi, posuere sit amet eros ac, blandit egestas odio. Sed elementum arcu ac ante sodales, ut molestie velit tempor. Nulla ultricies, tortor eu laoreet pharetra, velit turpis tempor lectus, nec cursus leo dui vel leo. Quisque vulputate eget dui et dapibus. Sed eu ornare leo, in mollis leo. Mauris sapien nisl, congue et diam eget, pretium iaculis nisl. In non ex posuere, volutpat neque ac, ultrices urna. Sed bibendum ipsum eget quam pellentesque, ut lacinia tortor placerat. Duis condimentum et ante nec tincidunt. Fusce interdum suscipit ipsum, sit amet mattis sem consequat quis.
diff --git a/_posts/2017-03-06-empty-post.md b/_posts/2017-03-06-empty-post.md
index bd701e9..21af484 100644
--- a/_posts/2017-03-06-empty-post.md
+++ b/_posts/2017-03-06-empty-post.md
@@ -1,6 +1,7 @@
 ---
 layout: post
 title: "Empty Post"
+author: "Chester"
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu ipsum feugiat, condimentum est et, faucibus nulla. Praesent libero lectus, volutpat sed quam eget, volutpat viverra dui. Duis sapien nisi, posuere sit amet eros ac, blandit egestas odio. Sed elementum arcu ac ante sodales, ut molestie velit tempor. Nulla ultricies, tortor eu laoreet pharetra, velit turpis tempor lectus, nec cursus leo dui vel leo. Quisque vulputate eget dui et dapibus. Sed eu ornare leo, in mollis leo. Mauris sapien nisl, congue et diam eget, pretium iaculis nisl. In non ex posuere, volutpat neque ac, ultrices urna. Sed bibendum ipsum eget quam pellentesque, ut lacinia tortor placerat. Duis condimentum et ante nec tincidunt. Fusce interdum suscipit ipsum, sit amet mattis sem consequat quis.
diff --git a/_posts/2017-03-07-empty-post.md b/_posts/2017-03-07-empty-post.md
index bd701e9..21af484 100644
--- a/_posts/2017-03-07-empty-post.md
+++ b/_posts/2017-03-07-empty-post.md
@@ -1,6 +1,7 @@
 ---
 layout: post
 title: "Empty Post"
+author: "Chester"
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu ipsum feugiat, condimentum est et, faucibus nulla. Praesent libero lectus, volutpat sed quam eget, volutpat viverra dui. Duis sapien nisi, posuere sit amet eros ac, blandit egestas odio. Sed elementum arcu ac ante sodales, ut molestie velit tempor. Nulla ultricies, tortor eu laoreet pharetra, velit turpis tempor lectus, nec cursus leo dui vel leo. Quisque vulputate eget dui et dapibus. Sed eu ornare leo, in mollis leo. Mauris sapien nisl, congue et diam eget, pretium iaculis nisl. In non ex posuere, volutpat neque ac, ultrices urna. Sed bibendum ipsum eget quam pellentesque, ut lacinia tortor placerat. Duis condimentum et ante nec tincidunt. Fusce interdum suscipit ipsum, sit amet mattis sem consequat quis.
diff --git a/_posts/2017-03-08-welcome-to-jekyll.md b/_posts/2017-03-08-welcome-to-jekyll.md
index a38d1d2..49adc73 100644
--- a/_posts/2017-03-08-welcome-to-jekyll.md
+++ b/_posts/2017-03-08-welcome-to-jekyll.md
@@ -1,6 +1,7 @@
 ---
 layout: post
 title:  "Introducing Tale 2"
+author: "Chester"
 ---
 
 You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.
diff --git a/_posts/2017-03-10-welcome-to-jekyll.md b/_posts/2017-03-10-welcome-to-jekyll.md
index 34b5cb5..c912512 100644
--- a/_posts/2017-03-10-welcome-to-jekyll.md
+++ b/_posts/2017-03-10-welcome-to-jekyll.md
@@ -1,6 +1,7 @@
 ---
 layout: post
 title:  "Welcome to Jekyll!"
+author: "Chester"
 ---
 
 You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.
diff --git a/_posts/2017-03-16-example-content.md b/_posts/2017-03-16-example-content.md
index a9e42de..af024c3 100644
--- a/_posts/2017-03-16-example-content.md
+++ b/_posts/2017-03-16-example-content.md
@@ -1,6 +1,7 @@
 ---
 layout: post
 title: "Example Content"
+author: "Chester"
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tincidunt ornare nibh, non elementum augue tempus eget. Pellentesque tempus scelerisque iaculis. Nullam interdum ultricies nibh quis sollicitudin. Donec ornare fermentum facilisis. Ut at sem ac sem imperdiet varius a eget tortor. Nam eu augue eget orci semper maximus in eget augue. Mauris ornare, nisl ut suscipit consectetur, mi quam interdum tellus, at rutrum quam eros ultrices mi.
diff --git a/_sass/_base.scss b/_sass/_base.scss
index 7870b4a..9622301 100644
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@@ -12,8 +12,11 @@ body {
 
 html {
   font-family: $baskerville;
-  font-size: $default-font-size;
+  font-size: 14px;
 
+  @media (min-width: 600px) {
+    font-size: 16px;
+  }
 }
 
 body {
@@ -26,6 +29,7 @@ h3,
 h4,
 h5,
 h6 {
+  color: $default-shade;
   font-family: $palatino;
   line-height: normal;
 }
diff --git a/_sass/_post.scss b/_sass/_post.scss
index 9823104..2886922 100644
--- a/_sass/_post.scss
+++ b/_sass/_post.scss
@@ -1,27 +1,30 @@
 .post {
   padding: 3rem 0;
 
-  &:not(:last-child) {
-    border-bottom: .5px solid $grey-2;
-  }
-
-  &-time {
+  &-info {
     color: $default-tint;
-    font-family: $sans-font;
-    font-weight: 700;
+    font-family: $palatino;
     letter-spacing: .5px;
+    text-align: center;
+
+    span {
+      font-style: italic;
+    }
   }
 
   &-title {
     color: $default-shade;
-    font-size: 2.7rem;
-    margin: 0 0 .8rem;
+    font-family: $sans-font;
+    font-size: 4rem;
+    margin: 1rem 0;
+    text-align: center;
+  }
 
-    a {
-      color: $default-shade;
-      font-size: 2.7rem;
-      line-height: normal;
-    }
+  &-line {
+    border-top: .4rem solid $default-color;
+    display: block;
+    margin: 0 auto 3rem;
+    width: 4rem;
   }
 
   p {
diff --git a/_sass/_variables.scss b/_sass/_variables.scss
index c93d84d..9cc00e6 100644
--- a/_sass/_variables.scss
+++ b/_sass/_variables.scss
@@ -10,7 +10,6 @@ $blue: #4a9ae1;
 $baskerville: 'Libre Baskerville', 'Times New Roman', Times, serif;
 $palatino: Palatino, 'Palatino LT STD', 'Palatino Linotype', 'Book Antiqua', 'Georgia', serif;
 $sans-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-$default-font-size: 16px;
 
 $monospaced-font: Menlo, Monaco, monospace;
 $code-color: #bf616a;