From 4850bf9612cfca94d3429cfb75898af746fba254 Mon Sep 17 00:00:00 2001
From: Chester How <chesterhow@gmail.com>
Date: Tue, 21 Mar 2017 12:49:35 +0800
Subject: [PATCH] Major style change on home page

Added Palatino font
---
 _config.yml                                 |  2 +-
 _layouts/default.html                       | 15 +++++++--
 _sass/_base.scss                            |  5 +--
 _sass/_catalogue.scss                       | 30 ++++++++++++++++++
 _sass/_layout.scss                          | 35 ++++++++++++++++++---
 _sass/{pagination.scss => _pagination.scss} |  2 +-
 _sass/_variables.scss                       |  4 ++-
 index.html                                  | 10 ++----
 styles.scss                                 |  1 +
 9 files changed, 86 insertions(+), 18 deletions(-)
 create mode 100644 _sass/_catalogue.scss
 rename _sass/{pagination.scss => _pagination.scss} (95%)

diff --git a/_config.yml b/_config.yml
index 7dbf442..c955a27 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 fef9d8b..cd5fb7d 100644
--- a/_layouts/default.html
+++ b/_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>
diff --git a/_sass/_base.scss b/_sass/_base.scss
index 0043fff..7870b4a 100644
--- a/_sass/_base.scss
+++ b/_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;
 }
 
diff --git a/_sass/_catalogue.scss b/_sass/_catalogue.scss
new file mode 100644
index 0000000..0b582d7
--- /dev/null
+++ b/_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;
+    }
+  }
+}
diff --git a/_sass/_layout.scss b/_sass/_layout.scss
index 4c3eee6..91c9da1 100644
--- a/_sass/_layout.scss
+++ b/_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 {
diff --git a/_sass/pagination.scss b/_sass/_pagination.scss
similarity index 95%
rename from _sass/pagination.scss
rename to _sass/_pagination.scss
index 0252f4e..a655e11 100644
--- a/_sass/pagination.scss
+++ b/_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;
diff --git a/_sass/_variables.scss b/_sass/_variables.scss
index cb997c2..c93d84d 100644
--- a/_sass/_variables.scss
+++ b/_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;
 
diff --git a/index.html b/index.html
index f42afc1..87338fa 100644
--- a/index.html
+++ b/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>
diff --git a/styles.scss b/styles.scss
index 1502d94..776bd2e 100644
--- a/styles.scss
+++ b/styles.scss
@@ -10,3 +10,4 @@
 @import 'syntax';
 @import 'layout';
 @import 'pagination';
+@import 'catalogue';