add about me side panel

_layouts/default.html

@@ -18,7 +18,6 @@
 
         {% include header.html %}
 
-        <div class="site-body">
         {% if page.type == "home" %}
         <div class="jumbotron">
             <!-- Begin MailChimp Signup Form -->
@@ -45,11 +44,27 @@
         </div>
 
         {% endif %}
-            <main class="page-content" aria-label="Content">
+
+
+        <div class="site-body">
+            <main class="page-content float-left" aria-label="Content">
               <div class="wrapper">
                 {{ content }}
               </div>
             </main>
+            <nav id="side-nav" class="float-left">
+                {% if page.type != "about" %}
+                <div class="side-panel" id="about-me">
+                    <div class="ayo-thumb">
+                        <img src="../assets/images/ayo.jpg" alt="Free exclusive web development tips!" />
+                    </div>
+                    <h2 style="font-weight: bold; text-align: center">Hi! I'm Ayo!</h2>
+                    <p>Thanks for dropping by! I started this website with the hope of having a place to share things I think will be helpful to developers such as myself. I hope you come by more often and find some interesting stuff!</p>
+                    <div class="post-readmore"><a class="button" href="/about/">About The Author</a></div>
+                </div>
+                {% endif %}
+            </nav>
+            <div class="clear-both"></div>
         </div>
 
         {% include footer.html %}

about.md

@@ -2,6 +2,7 @@
 layout: page
 title: "About the Author"
 permalink: /about/
+type: about
 ---
 
 Let me introduce myself...

assets/main.scss

@@ -71,7 +71,7 @@ article .post-content p {
 
 .page-content .wrapper {
     margin: 0 auto;
-    max-width: calc(700px - 60px);
+    max-width: calc(100% - 60px);
 }
    
 .post-title {
@@ -239,13 +239,65 @@ article .post-content p {
     width: 72px;
 }
 
-.subscription-message-thumb img {
+.subscription-message-thumb img,
+.ayo-thumb img {
     border-radius: 50%;
     border: 1px solid hsla(0, 0%, 100%, .3) !important;
     margin: 2px;
 }
 
+.ayo-thumb {
+    width: 100px;
+    margin: 0 auto;
+}
+
+.site-body {
+    max-width: 1000px;
+    margin: 0 auto;
+}
+
+main.page-content {
+    width: 70%;
+}
+
+nav#side-nav {
+    width: calc(30% - 30px);
+    margin: 45px 0 30px;
+}
+
+.side-panel {
+    background-color: rgba(141, 191, 66, 0.97) !important;
+    color: white;
+    font-size: normal;
+    padding: 15px;
+}
+
+.page-content .wrapper .home {
+    background-color: white;
+}
+
+.page-content .wrapper .post {
+    padding: 30px;
+    background-color: white;
+    margin-top: 15px;
+}
+
+.site-container {
+    background-color: #e4e2dd;
+}
+
 @media screen and (max-width: 600px) {
+
+    main.page-content {
+        width: 100%;
+    }
+
+    nav#side-nav {
+        width: calc(100% - 30px);
+        margin: 30px 0 30px;
+        padding: 15px;
+    }
+
     .post-thumb {
         width: 100%;
     }