Modify styles and add pagination within posts

_config.yml

@@ -4,7 +4,7 @@ permalink:      pretty
 # Setup
 title:          Tale
 subtitle:       by Chester
-paginate:       2
+paginate:       5
 baseurl:        ""
 url:            "https://chesterhow.github.io/tale/"
 

_layouts/post.html

@@ -3,9 +3,20 @@ layout: default
 ---
 
 <div class="post">
-  <time class="post-time" datetime="{{ page.date }}">{{ page.date | date_to_string }}</time>
+  <time class="post-time" datetime="{{ page.date }}">{{ page.date | date_to_string | upcase }}</time>
   <h1 class="post-title">{{ page.title }}</h1>
 
   {{ content }}
 
 </div>
+
+<div class="pagination">
+  {% if page.next.url %}
+    <a href="{{ page.next.url | prepend: site.url }}" class="left arrow">&#8592;</a>
+  {% endif %}
+  {% if page.previous.url %}
+    <a href="{{ page.previous.url | prepend: site.url }}" class="right arrow">&#8594;</a>
+  {% endif %}
+
+  <a href="{{ site.baseurl }}/" class="home">home</a>
+</div>

_posts/2017-03-05-empty-post.md

@@ -0,0 +1,6 @@
+---
+layout: post
+title: "Empty Post"
+---
+
+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.

_posts/2017-03-06-empty-post.md

@@ -0,0 +1,6 @@
+---
+layout: post
+title: "Empty Post"
+---
+
+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.

_posts/2017-03-07-empty-post.md

@@ -0,0 +1,6 @@
+---
+layout: post
+title: "Empty Post"
+---
+
+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.

_posts/2017-03-09-example-content.md

@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Example content
+title: "Example content"
 ---
 
 Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. *Aenean eu leo quam.* Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.

_sass/_base.scss

@@ -26,10 +26,6 @@ h6 {
 a {
   color: $blue;
   text-decoration: none;
-
-  &:hover {
-    text-decoration: underline;
-  }
 }
 
 blockquote {

_sass/_home.scss

@@ -1,24 +1,6 @@
 .preview {
-  margin-bottom: 3rem;
+  &:not(:last-child) {
-  position: relative;
+    border-bottom: .5px solid $grey-2;
-}
-
-.post-link {
-  text-align: right;
-
-  a {
-    @include transition (all .3s ease-out);
-    color: $default-tint;
-    display: inline-block;
-    font-family: $sans-font;
-    font-size: 1.3rem;
-    font-weight: 500;
-    letter-spacing: .3px;
-
-    &:hover,
-    &:focus {
-      color: $default-color;
-    }
   }
 }
 
@@ -34,6 +16,22 @@
 
   a {
     @include transition(all .3s ease-out);
+  }
+
+  .home {
+    color: $default-color;
+    font-family: $sans-font;
+    font-size: 1.1rem;
+    font-weight: 700;
+
+    &:hover,
+    &:focus, {
+      color: $default-tint;
+      text-decoration: underline;
+    }
+  }
+
+  .arrow {
     color: $default-color;
     font-size: 1.3rem;
     position: absolute;
@@ -41,6 +39,7 @@
     &:hover,
     &:focus {
       color: $default-tint;
+      text-decoration: none;
     }
   }
 

_sass/_layout.scss

@@ -1,11 +1,11 @@
 .container {
   margin: 0 auto;
-  max-width: 1000px;
+  max-width: 800px;
   width: 80%;
 }
 
 header {
-  margin: 1.5rem 0;
+  margin: 1.5rem 0 0;
   text-align: center;
 
   * {
@@ -16,7 +16,7 @@ header {
     @include transition(all .3s ease-out);
     color: $default-color;
     display: inline-block;
-    font-size: 3rem;
+    font-size: 2.8rem;
 
     &:hover,
     &:focus {

_sass/_post.scss

@@ -1,19 +1,21 @@
 .post {
+  padding: 3rem 0;
+
   &-time {
     color: $default-tint;
     font-family: $sans-font;
-    font-size: 1.3rem;
     font-weight: 500;
-    letter-spacing: .3px;
+    letter-spacing: .5px;
   }
 
   &-title {
     color: $default-shade;
-    font-size: 2.5rem;
+    font-size: 2.7rem;
     margin: 0 0 .8rem;
 
-    @media (min-width: 600px) {
+    a {
-      font-size: 3.5rem;
+      color: $default-shade;
+      font-size: 2.7rem;
     }
   }
 
@@ -22,4 +24,8 @@
     margin: 0 0 1rem;
     text-align: justify;
   }
+
+  a:hover {
+    text-decoration: underline;
+  }
 }

_sass/_variables.scss

@@ -8,7 +8,7 @@ $blue: #4a9ae1;
 
 $serif-font: 'Libre Baskerville';
 $sans-font: 'Helvetica Neue';
-$default-font-size: 14px;
+$default-font-size: 16px;
 
 $monospaced-font: Menlo, Monaco, monospace;
 $code-color: #bf616a;

index.html

@@ -3,25 +3,24 @@ layout: default
 title: Home
 ---
 
-{% for post in paginator.posts %}
+<div>
+  {% for post in paginator.posts %}
     <div class="post preview">
-    <time class="post-time" datetime="{{ post.date }}">{{ post.date | date_to_string }}</time>
+      <time class="post-time" datetime="{{ post.date }}">{{ post.date | date_to_string | upcase }}</time>
-    <h1 class="post-title">{{ post.title }}</h1>
+      <h1 class="post-title"><a href="{{ post.url | prepend: site.url }}">{{ post.title }}</a></h1>
 
       {{ post.content | truncatewords: 70 }}
 
-    <div class="post-link">
-      <a href="{{ post.url | prepend: site.url }}">continue reading</a>
     </div>
-  </div>
+  {% endfor %}
-{% endfor %}
+</div>
 
 <div class="pagination">
   {% if paginator.previous_page %}
-    <a href="{{ paginator.previous_page_path | prepend: site.url }}" class="left">&#8592;</a>
+    <a href="{{ paginator.previous_page_path | prepend: site.url }}" class="left arrow">&#8592;</a>
   {% endif %}
   {% if paginator.next_page %}
-    <a href="{{ paginator.next_page_path | prepend: site.url }}" class="right">&#8594;</a>
+    <a href="{{ paginator.next_page_path | prepend: site.url }}" class="right arrow">&#8594;</a>
   {% endif %}
 
   <span>{{ paginator.page }}</span>