Completed post page

_includes/header.html

@@ -3,8 +3,10 @@
   {% assign post = page %}
 {% endif %}
 
-<div id="home-header" class="container-fluid">
+<div id="header" class="container-fluid {% if page.is_post %}post-header{% endif %}">
+  {% if post.image != nil %}
   <div class="cover-image center-vertical"><img class="center-both img-center-fill" src="/images/posts/{{ post.image }}" alt=""></div>
+  {% endif %}
   <div class="cover center-both text-center">
     <h1 class="title">{{ post.title }}</h1>
   </div>
@@ -12,7 +14,7 @@
   <div class="left">
   {% if page.is_post and post.next %}
     <a class="center-both scroll-buttons" href="{{ post.next.url }}">
-        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
+        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
         <span class="sr-only">Next</span>
     </a>
   {% endif %}
@@ -21,7 +23,7 @@
   <div class="right">
   {% if page.is_post and post.next %}
     <a class="center-both scroll-buttons" href="{{ post.previous.url }}">
-        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
+        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
         <span class="sr-only">Previous</span>
     </a>
   {% endif %}

_layouts/post.html

@@ -1,12 +1,7 @@
 ---
 layout: layout
 ---
-<section class="post">
-
-	<h1>
-		<a href="{{ page.url }}">{{ page.title }}</a>
-	</h1>
-
+<section class="post container">
 	<section class="byline">
 		{{ page.date | date: "%B %e, %Y" }}
 	</section>
@@ -17,10 +12,21 @@ layout: layout
 
 </section>
 
-{% if page.isImageCover == false %}
-	{% if page.image %}
-		<div class="cover">
-			<img src="/images/posts/{{ page.image }}" alt="">
-		</div>
-	{% endif %}
-{% endif %}
+<div id="related-articles-container" class="container-fluid">
+  <section id="related-articles" class="row">
+
+  {% for post in site.related_posts limit: 4 %}
+    <div class="article col-sm-3">
+      <a href="{{ post.url }}">
+        <div class="center-fill-container img-container">
+          <img src="/images/posts/{{post.image}}" alt=""  class="img-center-fill {% if post.image == null %}hidden{% endif %}">
+        </div>
+        <div class="details text-center ">
+          <h3 class="title">{{ post.title | truncatewords: 4}}</h3>
+          <p class="tag">{{ post.tag }}</p>
+        </div>
+      </a>
+    </div>
+  {% endfor %}
+  </section>
+</div>

css/base.scss

@@ -140,7 +140,7 @@ body {
 
 // ============= HOME-HEADER ============= //
 
-#home-header {
+#header {
   position: relative;
   height: 500px;
   margin-bottom: -($new-article-img-height / 4);
@@ -197,7 +197,7 @@ body {
 // ============= /HOME-HEADER ============= //
 
 // ============= NEW-ARTICLES ============ //
-#new-articles {
+#new-articles, #related-articles {
   z-index: 10;
 
   .img-container {
@@ -389,12 +389,15 @@ blockquote {
 // ============== POST ============== //
 
 .post {
+  z-index: 10;
+  position: relative;
 	background: white;
 	padding: 10px 50px;
-	@include shadow();
+  margin-bottom: 20px;
 	font-size: 1.1em;
 	line-height: 1.5em;
 	color: #333332;
+  font-family: AvenirNext;
 
 	p img {
 		display: block;
@@ -408,8 +411,22 @@ blockquote {
   }
 }
 
+.post-header {
+  box-shadow: 0 100px 125px -100px;
+}
+
 // ============== /POST ============== //
 
+// ========= RELATED-ARTICLES ======== //
+
+#related-articles {
+  padding-top: 40px;
+  padding-bottom: 20px;
+  background: #f0f0f0;
+}
+
+// ========= /RELATED-ARTICLES ======= //
+
 // ============== FOOTER ============== //
 
 footer {

index.html

@@ -6,7 +6,7 @@ title: "Home"
   <section id="new-articles" class="row">
 
   {% for post in site.posts limit: 4 offset: 1 %}
-    <div class="new-article col-sm-3">
+    <div class="article col-sm-3">
       <a href="{{ post.url }}">
         <div class="center-fill-container img-container">
           <img src="/images/posts/{{post.image}}" alt=""  class="img-center-fill {% if post.image == null %}hidden{% endif %}">