Major style change on home page

Added Palatino font

_config.yml

@@ -2,7 +2,7 @@
 permalink:      pretty
 
 # Setup
-title:          Tale
+title:          tale
 subtitle:       by Chester
 paginate:       5
 baseurl:        ""

_layouts/default.html

@@ -8,9 +8,20 @@
     <div class="container">
       <header>
         <a href="{{ site.baseurl }}/" title="Home">
-            <h2>{{ site.title }}</h2>
+          <h2>{{ site.title }}</h2>
         </a>
-        <h4>[ {{ site.subtitle }} ]</h4>
+
+        <div class="line"></div>
+
+        <h4>{{ site.subtitle | upcase }}</h4>
+
+        <div class="nav-container">
+          <nav>
+            <a href="#">about</a>
+            <a href="#">posts</a>
+            <a href="#">updates</a>
+          </nav>
+        </div>
       </header>
 
       <main>

_sass/_base.scss

@@ -11,8 +11,9 @@ body {
 }
 
 html {
-  font-family: $serif-font;
+  font-family: $baskerville;
   font-size: $default-font-size;
+
 }
 
 body {
@@ -25,7 +26,7 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: $sans-font;
+  font-family: $palatino;
   line-height: normal;
 }
 

_sass/_catalogue.scss

@@ -0,0 +1,30 @@
+.catalogue {
+  text-align: center;
+
+  &-item {
+    padding: 1.5rem 0;
+
+    &:first-child {
+      padding-top: 2.5rem;
+    }
+
+    &:last-child {
+      padding-bottom: 2.5rem;
+    }
+  }
+
+  &-title {
+    @include transition(all .3s ease-out);
+    border-bottom: 1px solid $white;
+    border-top: 1px solid $white;
+    color: $default-shade;
+    font-family: $palatino;
+    font-size: 1.5rem;
+    font-weight: 700;
+    padding: .5rem 1rem;
+
+    &:hover {
+      border-color: $default-tint;
+    }
+  }
+}

_sass/_layout.scss

@@ -5,7 +5,7 @@
 }
 
 header {
-  margin: 1.5rem 0 0;
+  padding: 2rem 0 0;
   text-align: center;
 
   * {
@@ -17,6 +17,7 @@ header {
     color: $default-color;
     display: inline-block;
     font-size: 2.8rem;
+    font-weight: 400;
 
     &:hover,
     &:focus {
@@ -26,14 +27,40 @@ header {
 
   h4 {
     color: $default-tint;
-    font-family: $serif-font;
+    font-size: .8rem;
     font-weight: 400;
+    letter-spacing: .1rem;
+  }
+
+  .line {
+    border-top: 1px solid $default-color;
+    display: block;
+    margin: 0 auto .8rem;
+    width: 1rem;
+  }
+
+  .nav-container {
+    border-bottom: .5px solid $grey-2;
+    border-top: .5px solid $grey-2;
+    margin-top: 1.5rem;
+  }
+
+  nav {
+    display: flex;
+    justify-content: space-around;
+    margin: .5rem auto;
+    max-width: 350px;
+
+    a {
+      color: $default-color;
+      font-family: $palatino;
+    }
   }
 }
 
 footer {
-  font-family: $sans-font;
-  margin: 1.5rem 0 3rem;
+  font-family: $palatino;
+  padding: 2rem 0;
   text-align: center;
 
   span {

_sass/_pagination.scss

@@ -1,7 +1,7 @@
 .pagination {
   border-bottom: .5px solid $grey-2;
   border-top: .5px solid $grey-2;
-  font-family: $serif-font;
+  font-family: $baskerville;
   padding: 1rem 0;
   position: relative;
   text-align: center;

_sass/_variables.scss

@@ -4,9 +4,11 @@ $default-tint: #aaa;
 $grey-1: #979797;
 $grey-2: #e5e5e5;
 $grey-3: #f9f9f9;
+$white: #fff;
 $blue: #4a9ae1;
 
-$serif-font: 'Libre Baskerville', 'Times New Roman', Times, serif;
+$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;
 

index.html

@@ -3,14 +3,10 @@ layout: default
 title: Home
 ---
 
-<div>
+<div class="catalogue">
   {% for post in paginator.posts %}
-    <div class="post">
-      <time class="post-time" datetime="{{ post.date }}">{{ post.date | date_to_string | upcase }}</time>
-      <h1 class="post-title"><a href="{{ post.url | prepend: site.url }}">{{ post.title }}</a></h1>
-
-      {{ post.content | truncatewords: 50 }}
-
+    <div class="catalogue-item">
+      <a href="{{ post.url | prepend: site.url }}" class="catalogue-title">{{ post.title }}</a>
     </div>
   {% endfor %}
 </div>

styles.scss

@@ -10,3 +10,4 @@
 @import 'syntax';
 @import 'layout';
 @import 'pagination';
+@import 'catalogue';