add excerpt and readmore buttons

_config.yml

@@ -43,6 +43,7 @@ defaults:
   values:
     layout: post
     author: Ayo
+    excerpt_separator: <!--more-->
 
 # this goes inside _config.yml. Change as required
 navigation:

_layouts/home.html

@@ -20,6 +20,14 @@ layout: default-home
           <h3>
             <a class="post-link" href="{{ post.url | relative_url }}">{{ post.title | escape }}</a>
           </h3>
+          <div class="float-left post-excerpt">
+              {{ post.excerpt }}
+          </div>
+          <img class="float-left post-thumb" src="../assets/images/{{ post.image }}" />
+          <div class="clear-both"></div>
+          <div class="post-readmore">
+            <a href="{{ post.url | relative_url }}" class="button">Continue Reading</a>
+          </div>
         </li>
       {% endfor %}
     </ul>

_posts/2018-01-02-hello-world.md

@@ -9,7 +9,7 @@ It's kind of getting old, I know.
 
 A new blog... *again?* What's this all about?
 
-Well, to put it simply, **Full Hacker** is like [Life Hacker](https://lifehacker.com), but for developers (and other IT professionals). This will be a place to share "Life Hacks" that we want to share to one another... like automation, new tech, tools, setups, and all sorts of time-saving tips and tricks.
+Well, to put it simply, **Full Hacker** is like [Life Hacker](https://lifehacker.com), but for developers (and other IT professionals). This will be a place to share "Life Hacks" that we want to share to one another... like automation, new tech, tools, setups, and all sorts of time-saving tips and tricks. <!--more-->
 
 Let me just clear this one thing upfront: This is not a place to ask coding questions. We got [Stack Overflow](https://stackoverflow.com) for that already. Instead, here, we just share secrets that make our work and life easier as developers.
 

assets/main.scss

@@ -155,6 +155,43 @@ article .post-content p {
     background-color: #ee4a03 !important;
 }
 
+.float-left {
+    float: left;
+}
+
+.clear-both {
+    clear: both;
+}
+
+.post-excerpt {
+    width: 70%;
+}
+
+.post-thumb {
+    width: 30%;
+}
+
+.post-readmore {
+    margin: 10px 0;
+}
+
+.post-readmore a:hover {
+    text-decoration: none;
+}
+
+.post-readmore a {
+    background-color: #ee4a03;
+    color: #ffffff;
+    padding: 15px;
+    display: inline-block;
+    width: calc(100% - 30px);
+    font-size: 16px;
+    font-weight: bold;
+    border-radius: 3.2px;
+    border: 1px solid #ee4a03;
+    text-align: center;
+}
+
 @media screen and (max-width: 600px) {
     .jumbotron {
         padding: 30px 0;