From 0d252101b11ceb5a40cf13985f42ff600b6f8613 Mon Sep 17 00:00:00 2001
From: Ayo Ayco <ramon.aycojr@gmail.com>
Date: Sat, 26 Jun 2021 00:26:33 +0800
Subject: [PATCH] feat: layout and style improvements

---
 _layouts/default.html |  6 +++---
 assets/main.scss      | 47 ++++++++++++++++++++++++++++++-------------
 2 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/_layouts/default.html b/_layouts/default.html
index 71181f0..fc97a95 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -60,7 +60,7 @@
                                     <img src="../assets/images/ayo.jpg" alt="Free exclusive web development tips!" />
                                 </div>
                                 <div class="subscription-message-text float-left">
-                                    <p>Get newsletters on life and personal growth.</p>
+                                    <p>Get my newsletters on life and personal growth.</p>
                                 </div>
                                 <div class="clear-both"></div>
                             </div>
@@ -79,7 +79,7 @@
                 </div>
             </main>
             <nav id="side-nav" class="float-left">
-                <div class="side-panel" id="about-me">
+                <div class="side-panel side-panel-top" id="about-me">
                     <div class="ayo-thumb">
                         <img src="../assets/images/ayo.jpg" alt="Free exclusive web development tips!" />
                     </div>
@@ -88,7 +88,7 @@
                     <p>Want to give me a tip?</p>
                     <!--div class="post-readmore"><a target="_blank" class="button" href="https://docs.google.com/forms/d/e/1FAIpQLScinfuT_8-4q5Yk16nGUMxWxVpQgWZwyAaJ5oFY5_0NsRMjMw/viewform?usp=sf_link">Get FREE Consultation</a></div-->
                 </div>
-                <div class="side-panel" id="donate-form">
+                <div class="side-panel side-panel-bottom" id="donate-form">
                     <!--form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
                         <input type="hidden" name="cmd" value="_s-xclick">
                         <input type="hidden" name="hosted_button_id" value="5JY6XQBB35E5E">
diff --git a/assets/main.scss b/assets/main.scss
index e66a202..444ffd9 100644
--- a/assets/main.scss
+++ b/assets/main.scss
@@ -147,7 +147,7 @@ caption {
         */
     margin-top: 80px;
     border: 2px solid #ccc;
-    border-radius: 3.2px !important;
+    border-radius: 5px !important;
     box-shadow: 5px 25px 30px -25px rgba(34, 34, 34, 0.25);
     background: white;
 
@@ -236,7 +236,7 @@ caption {
   font-size: 16px !important;
   font-weight: bold;
   height: 60px !important;
-  border-radius: 3.2px !important;
+  border-radius: 5px !important;
 }
 
 #mc_embed_signup .button {
@@ -275,7 +275,7 @@ caption {
   font-family: medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont,
     "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
     sans-serif !important;
-  border-radius: 3.2px;
+  border-radius: 5px;
   border: 1px solid #ee4a03;
   text-align: center;
 }
@@ -355,6 +355,14 @@ nav#side-nav {
   top: 30px;
 }
 
+.side-panel-top {
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+.side-panel-bottom {
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
 .side-panel {
   background-color: rgba(141, 191, 66, 0.97) !important;
   color: white;
@@ -543,6 +551,9 @@ table.image caption {
         font-weight: bold;
       }
     }
+    &__image {
+      border-radius: 5px;
+    }
     &__image-caption {
       font-size: small;
       text-align: center;
@@ -595,7 +606,8 @@ table.image caption {
 
     &__item {
       background-color: #fff;
-      margin-bottom: 35px;
+      padding-bottom: 40px;
+
       &__header {
         margin-bottom: 15px;
         &__title {
@@ -618,8 +630,11 @@ table.image caption {
       }
 
       &__excerpt {
+        &__thumb {
+          border-radius: 5px;
+        }
         p {
-          margin-top: 21px;
+          margin: 15px 0 0;
           --x-height-multiplier: 0.375;
           --baseline-multiplier: 0.17;
           font-family: medium-content-serif-font, Georgia, Cambria,
@@ -643,24 +658,28 @@ table.image caption {
       }
 
       &__readmore {
-        margin: 10px 0;
+        margin-top: 15px;
+
         a:hover {
           text-decoration: none;
+          color: #ee4a03;
+          border: 1px solid #ee4a03;
         }
+
         a {
-          background-color: #ee4a03;
-          color: #ffffff !important;
-          padding: 15px;
-          display: inline-block;
+          color: #bb4a03;
+          background-color: #f5f5f5;
+          border: 1px solid #ccc;
+          border-radius: 5px;
+          padding: 10px 15px;
           width: calc(100% - 30px);
-          font-size: 16px;
+          text-align: center;
+          display: inline-block;
+          font-size: 18px;
           font-weight: bold;
           font-family: medium-content-sans-serif-font, -apple-system,
             BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
             "Open Sans", "Helvetica Neue", sans-serif !important;
-          border-radius: 3.2px;
-          border: 1px solid #ee4a03;
-          text-align: center;
         }
       }
     }