From aa4da0ec1eccc9afd2901a793599b11ca775ff3f Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Sat, 27 May 2023 17:10:32 +0200
Subject: [PATCH] style: simpler post list items, spacing adjustments

---
 _includes/head.html      |  42 +++++++++---
 _includes/post-item.html |  16 -----
 _layouts/post.html       |   6 +-
 assets/main.scss         | 138 +++++----------------------------------
 4 files changed, 53 insertions(+), 149 deletions(-)

diff --git a/_includes/head.html b/_includes/head.html
index c3d0f25..75a0698 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -2,8 +2,10 @@
   <title>
     {{page.title}} - Web Technologies and Productivity Hacks - {{site.title}}
   </title>
-  <meta name="description"
-    content="Learn how to use the best and latest web technologies to boost your productivity." />
+  <meta
+    name="description"
+    content="Learn how to use the best and latest web technologies to boost your productivity."
+  />
   <meta charset="utf-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -18,14 +20,23 @@
   {% else %}
   <meta property="og:type" content="website" />
   {% endif %} {% if page.layout == 'home' %}
-  <meta property="og:image" content="{{ '/assets/images/' | absolute_url }}ayo.png" />
+  <meta
+    property="og:image"
+    content="{{ '/assets/images/' | absolute_url }}ayo.png"
+  />
   {% elsif page.image %}
-  <meta property="og:image" content="{{ '/assets/images/' | absolute_url }}{{ page.image }}.jpg" />
+  <meta
+    property="og:image"
+    content="{{ '/assets/images/' | absolute_url }}{{ page.image }}.jpg"
+  />
   {% else %}
-  <meta property="og:image" content="{{ '/assets/images/' | absolute_url }}hello-world.jpg" />
+  <meta
+    property="og:image"
+    content="{{ '/assets/images/' | absolute_url }}ayo.png"
+  />
   {% endif %}
 
-  <meta property="og:site_name" content="Ayo Ayco's Blog" />
+  <meta property="og:site_name" content="{{site.title}}" />
 
   <!--meta property="article:published_time" content="2013-09-17T05:59:00+01:00" />
     <meta property="article:modified_time" content="2013-09-16T19:08:47+01:00" />
@@ -39,12 +50,23 @@
   <link rel="me" href="https://metapixl.com/@ayo" />
 
   <link rel="stylesheet" href="{{ '/assets/main.css' | relative_url }}" />
-  <link rel="alternate" type="application/rss+xml" title="{{ site.title | escape }}"
-    href="{{ '/feed.xml' | relative_url }}" />
-  <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato" />
+  <link
+    rel="alternate"
+    type="application/rss+xml"
+    title="{{ site.title | escape }}"
+    href="{{ '/feed.xml' | relative_url }}"
+  />
+  <link
+    rel="stylesheet"
+    type="text/css"
+    href="//fonts.googleapis.com/css?family=Lato"
+  />
   <link rel="shortcut icon" type="image/png" href="/favicon.ico" />
 
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=Source+Serif+Pro:wght@900&display=swap" rel="stylesheet" />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Source+Serif+Pro:wght@900&display=swap"
+    rel="stylesheet"
+  />
 </head>
diff --git a/_includes/post-item.html b/_includes/post-item.html
index 3178d7d..e0024fd 100644
--- a/_includes/post-item.html
+++ b/_includes/post-item.html
@@ -20,20 +20,4 @@
       <span>{{post.description}}</span>
     </div>
   </div>
-  <div class="blog-home__list-items__item__excerpt">
-    {% if post.image %}
-    <a href="{{post.url | relative_url}}"
-      ><img
-        class="blog-home__list-items__item__excerpt__thumb"
-        alt="{{ post.description | escape }}"
-        title="{{ post.description | escape }}"
-        src="../assets/images/{{ post.image }}.jpg"
-    /></a>
-    {% endif %} {{ post.excerpt }}
-  </div>
-  <div class="blog-home__list-items__item__readmore">
-    <a href="{{ post.url | relative_url }}" class="button"
-      >Continue Reading &raquo;</a
-    >
-  </div>
 </li>
diff --git a/_layouts/post.html b/_layouts/post.html
index fab8b30..5f6ad43 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -63,7 +63,7 @@ layout: default
 
   <div class="blog-post__after-content">
     <div id="reply-by-email">
-      <a href="mailto:blog@ayco.io?subject=Re: {{page.title}}&body=%0A%0AResponse to: {{site.url}}{{page.url}}">Thoughts? Reply to this post by email</a>
+      <a href="mailto:blog@ayco.io?subject=Re: {{page.title}}&body=%0A%0AResponse to: {{site.url}}{{page.url}}">Thoughts? Reply by email</a>
       <style>
         #reply-by-email {
           margin: 1em 0;
@@ -77,8 +77,8 @@ layout: default
           background-color: #f5f5f5;
           border: 1px solid #ccc;
           border-radius: 5px;
-          padding: 0.5em;
-          width: calc(100% - 1em);
+          padding: 1em;
+          width: 100%;
           text-align: center;
           display: inline-block;
           font-size: 24px;
diff --git a/assets/main.scss b/assets/main.scss
index d87a44c..29446c7 100644
--- a/assets/main.scss
+++ b/assets/main.scss
@@ -86,17 +86,12 @@ caption {
   font-size: 16px;
 }
 
-.page-content {
-  padding: 15px 0 !important;
-}
-
 .page-content-home {
   background-color: #e4e2dd;
 }
 
 .page-content .wrapper {
   margin: 0 auto;
-  max-width: calc(100% - 60px);
 }
 
 .desc-list {
@@ -187,23 +182,8 @@ caption {
   font-size: 14px;
 }
 
-#about-me::after {
-  content: "";
-  margin-left: -10px;
-  display: block;
-  width: 0;
-  height: 0;
-  position: absolute;
-  bottom: -10px;
-  left: 50%;
-  border-bottom: 0 inset transparent;
-  border-left: 10px inset transparent;
-  border-right: 10px inset transparent;
-  border-top: 10px solid #8dbf42;
-}
-
 #donate-form {
-  background-color: #80ae3c !important;
+  background-color: #90c049 !important;
   padding: 1em 0;
 }
 
@@ -235,17 +215,17 @@ caption {
   margin: 0 auto;
 }
 
+nav#side-nav,
 main.page-content {
-  width: calc(70% - 20px);
+  margin: 1em 0;
+}
+main.page-content {
+  padding: 0;
+  width: 70%;
 }
 
 nav#side-nav {
   width: calc(30% - 10px);
-  margin: 1em 0;
-  // box-shadow: 5px 25px 30px -25px rgba(34, 34, 34, 0.25);
-  // position: sticky;
-  // position: -webkit-sticky;
-  // top: 1em;
 }
 
 .side-panel-top {
@@ -257,7 +237,7 @@ nav#side-nav {
   border-bottom-right-radius: 5px;
 }
 .side-panel {
-  background-color: rgba(141, 191, 66, 0.97) !important;
+  background-color: #80ae3c !important;
   color: white;
   font-size: normal;
   padding: 0 15px;
@@ -306,8 +286,6 @@ table.image caption {
 
 .blog-post {
   &__header {
-    margin-bottom: 1em;
-
     &__category {
       span {
         a:hover {
@@ -365,6 +343,8 @@ table.image caption {
     }
   }
   &__content {
+    margin: 1em 0;
+
     h1,
     h2,
     h3 {
@@ -410,7 +390,7 @@ table.image caption {
   }
   &__after-content {
     #rss-sign-up {
-      color: rgba(141, 191, 66, 0.97);
+      color: #90c049;
       font-weight: bold;
       font-size: 24px;
       text-align: center;
@@ -420,7 +400,7 @@ table.image caption {
 
     // #rss-sign-up a,
     #rss-sign-up em {
-      color: rgba(141, 191, 66, 1);
+      color: #90c049;
     }
 
     #rss-sign-up a {
@@ -437,11 +417,13 @@ table.image caption {
 
     &__item {
       background-color: #fff;
-      padding-bottom: 40px;
+      border: 1px solid rgba(34, 34, 34, 0.25);
+      border-radius: 5px;
+      box-shadow: 5px 25px 10px -25px rgba(34, 34, 34, 0.25);
+      margin-bottom: 1em;
+      padding: 1em;
 
       &__header {
-        margin-bottom: 1em;
-
         &__title {
           margin: 10px 0;
           font-family: "Source Serif Pro", serif;
@@ -460,56 +442,6 @@ table.image caption {
           font-size: small;
         }
       }
-
-      &__excerpt {
-        &__thumb {
-          border-radius: 5px;
-        }
-        p {
-          margin: 15px 0 0;
-          --x-height-multiplier: 0.375;
-          --baseline-multiplier: 0.17;
-          font-family: medium-content-serif-font, Georgia, Cambria,
-            "Times New Roman", Times, serif;
-          letter-spacing: 0.01rem;
-          font-weight: 400;
-          font-style: normal;
-          font-size: 18px;
-          line-height: 1.58;
-          letter-spacing: -0.003em;
-        }
-        p:not(blockquote *):first-of-type::first-letter {
-          font-weight: 900;
-          font-size: 3em;
-          line-height: 60px;
-          float: left;
-          padding: 0px 3px;
-          color: #80ae3c;
-          margin-top: -4px;
-        }
-        /*
-        p:first-of-type::first-letter {
-          font-size: 75px;
-          line-height: 60px;
-          float: left;
-          padding: 0px 3px;
-          color: #8a2be2;
-        }
-        */
-      }
-
-      &__readmore {
-        margin-top: 1em;
-
-        a:hover {
-          color: #ee4a03;
-        }
-
-        a {
-          color: #bb4a03;
-          font-weight: bold;
-        }
-      }
     }
   }
 }
@@ -564,15 +496,6 @@ table.image caption {
     font-size: 12px;
   }
 
-  .jumbotron {
-    background: rgba(141, 191, 66, 0.97) !important;
-    width: 100%;
-  }
-
-  .jumbotron-content {
-    width: calc(100% - 120px);
-    padding: 80px 60px;
-  }
   .page-content .wrapper {
     max-width: 100%;
   }
@@ -589,27 +512,12 @@ table.image caption {
     // margin: 0 15px;
   }
 
-  .jumbotron {
-    background: rgba(141, 191, 66, 0.97) !important;
-    width: 100%;
-    box-shadow: 5px 25px 30px -25px rgba(34, 34, 34, 0.25);
-  }
-  .jumbotron-content {
-    padding: 1em 0;
-  }
   .post-list li h3 a {
     font-size: 31px;
   }
 
-  .jumbotron-content #logo-div {
-    width: 100%;
-  }
-
-  .jumbotron-content {
-    width: 100%;
-  }
   .site-nav {
-    background-color: rgba(141, 191, 66, 0.97) !important;
+    background-color: #90c049 !important;
     border: 1px solid hsla(0, 0%, 100%, 0.3) !important;
   }
   .site-nav .menu-icon {
@@ -619,13 +527,3 @@ table.image caption {
     fill: #ffffff;
   }
 }
-
-@media only screen and (min-width: 768px) and (max-width: 1024px) {
-  .jumbotron-content {
-    width: calc(100% - 100px);
-    padding: 60px 50px;
-  }
-  .jumbotron {
-    background: rgba(141, 191, 66, 0.97) !important;
-  }
-}