From 0b0656c961643e184dacb4fcaed492d9f8e752fe Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Mon, 22 May 2023 16:07:10 +0200
Subject: [PATCH] style: add reset.css to fix inconsistencies

---
 _includes/message.html              |   6 +-
 _layouts/post.html                  |   7 +-
 _posts/2018-01-12-git-and-github.md |   4 +-
 assets/main.scss                    | 120 +++++-----------------------
 assets/reset.css                    |  69 ++++++++++++++++
 5 files changed, 98 insertions(+), 108 deletions(-)
 create mode 100644 assets/reset.css

diff --git a/_includes/message.html b/_includes/message.html
index 7d3a023..02e4936 100644
--- a/_includes/message.html
+++ b/_includes/message.html
@@ -7,8 +7,8 @@
     padding: 1em;
   "
 >
-  <h2 style="font-weight: bold">Dear fellow human,</h2>
-  <p>Welcome! I'm glad you are here.</p>
+  <h2 style="font-weight: bold">Hello there, fellow human!</h2>
+  <p>Welcome to my personal blog! Glad you are here.</p>
   <p>
     Like you, I have many areas of interest. And you will find here a collection
     of my posts on varying topics which are not confined to my "professional"
@@ -56,7 +56,7 @@
         y.innerHTML = "&laquo; Read less...";
       } else {
         x.style.display = "none";
-        y.innerHTML = "Read full message &raquo;";
+        y.innerHTML = "Read the full message &raquo;";
       }
     }
   </script>
diff --git a/_layouts/post.html b/_layouts/post.html
index 6453bbf..a251a1e 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -66,20 +66,19 @@ layout: default
       <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>
       <style>
         #reply-by-email {
-          margin: 2em 0;
+          margin: 1em 0;
         }
         #reply-by-email a:hover {
           color: #ee4a03;
           border: 1px solid #ee4a03;
         }
-
         #reply-by-email a {
           color: #bb4a03;
           background-color: #f5f5f5;
           border: 1px solid #ccc;
           border-radius: 5px;
-          padding: 10px 15px;
-          width: calc(100% - 30px);
+          padding: 0.5em;
+          width: calc(100% - 1em);
           text-align: center;
           display: inline-block;
           font-size: 24px;
diff --git a/_posts/2018-01-12-git-and-github.md b/_posts/2018-01-12-git-and-github.md
index 9daf59f..359e77c 100644
--- a/_posts/2018-01-12-git-and-github.md
+++ b/_posts/2018-01-12-git-and-github.md
@@ -59,6 +59,4 @@ To cut the long story short, Github is a good place to start learning how to be
 
 But before you hurry and join Github, there's another thing we need to talk about. You won't be able to get the most out of it without this... You actually need to learn how to use Git.
 
-But that's for another weekend.
-
-<!--a class="button up-next" href="#git-how-to">Up Next: Read How To Use Git</a-->
+But that's for another weekend.
\ No newline at end of file
diff --git a/assets/main.scss b/assets/main.scss
index eb7721a..4fba5bf 100644
--- a/assets/main.scss
+++ b/assets/main.scss
@@ -3,6 +3,7 @@
 ---
 
 @import "minima";
+@import url(reset.css);
 
 * {
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004) !important;
@@ -22,7 +23,7 @@ body {
   margin: 0;
   color: rgba(0, 0, 0, 0.84);
   font-size: 20px;
-  line-height: 1.4;
+  line-height: 1.5;
   font-family: medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont,
     "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
     sans-serif !important;
@@ -140,9 +141,6 @@ caption {
 
   .categories-card {
     width: 360px;
-    /*
-        margin-top: 450px;
-        */
     margin-top: 80px;
     border: 2px solid #ccc;
     border-radius: 5px !important;
@@ -189,28 +187,22 @@ caption {
 
 #about-me::after {
   content: "";
-  margin-left: -8px;
+  margin-left: -10px;
   display: block;
   width: 0;
   height: 0;
   position: absolute;
-  bottom: -8px;
+  bottom: -10px;
   left: 50%;
   border-bottom: 0 inset transparent;
-  border-left: 8px inset transparent;
-  border-right: 8px inset transparent;
-  border-top: 8px solid #8dbf42;
+  border-left: 10px inset transparent;
+  border-right: 10px inset transparent;
+  border-top: 10px solid #8dbf42;
 }
 
 #donate-form {
   background-color: #80ae3c !important;
-  height: 50px;
-  padding: 30px 0 15px;
-}
-
-#donate-form form {
-  width: 145px;
-  margin: 0 auto;
+  padding: 1em 0;
 }
 
 .float-left {
@@ -225,73 +217,6 @@ caption {
   clear: both;
 }
 
-.post-thumb {
-  width: 240px;
-  margin: 29px 0 25px 25px;
-}
-
-.up-next {
-  background-color: #ee4a03;
-  color: #ffffff !important;
-  padding: 15px;
-  display: inline-block;
-  width: calc(100% - 30px);
-  font-size: 16px;
-  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: 5px;
-  border: 1px solid #ee4a03;
-  text-align: center;
-}
-
-.subscription-message-text p {
-  margin: 15px 5px;
-  font-size: 16px;
-  line-height: 24px;
-  text-rendering: optimizelegibility !important;
-}
-
-.subscription-message-text {
-  width: 220px;
-  margin-left: 5px;
-}
-
-.subscription-message-div:after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 50%;
-  width: 0;
-  height: 0;
-  border: 20px solid transparent;
-  border-bottom-color: #80ae3c;
-  border-top: 0;
-  border-left: 0;
-  margin-left: -10px;
-  margin-top: -20px;
-}
-
-.subscription-message-div {
-  color: #ffffff;
-  background-color: #80ae3c;
-  width: 300px;
-  text-align: left;
-  margin: 50px auto 0;
-  position: relative;
-  border: 1px solid transparent;
-  border-bottom-left-radius: 2.5rem;
-  border-top-left-radius: 2.5rem;
-  border-bottom-right-radius: 2.5rem;
-  border-top-right-radius: 2.5rem;
-}
-
-.subscription-message-thumb {
-  width: 72px;
-}
-
-.subscription-message-thumb img,
 .ayo-thumb img {
   border-radius: 50%;
   border: 1px solid hsla(0, 0%, 100%, 0.3) !important;
@@ -314,11 +239,11 @@ main.page-content {
 
 nav#side-nav {
   width: calc(30% - 10px);
-  margin: 30px 0;
+  margin: 1em 0;
   box-shadow: 5px 25px 30px -25px rgba(34, 34, 34, 0.25);
   position: sticky;
   position: -webkit-sticky;
-  top: 30px;
+  top: 1em;
 }
 
 .side-panel-top {
@@ -342,7 +267,7 @@ nav#side-nav {
 
 .page-content .wrapper .post {
   background-color: white;
-  margin: 15px 0 30px;
+  margin: 1em 0;
 }
 
 .site-container {
@@ -379,8 +304,6 @@ table.image caption {
 
 .blog-post {
   &__header {
-    margin-bottom: 30px;
-
     &__category {
       span {
         a:hover {
@@ -489,7 +412,8 @@ table.image caption {
       font-weight: bold;
       font-size: 24px;
       text-align: center;
-      margin: 2em;
+      margin: 1em auto;
+      max-width: 350px;
     }
 
     // #rss-sign-up a,
@@ -531,7 +455,7 @@ table.image caption {
         }
         &__description {
           font-style: italic;
-          font-size: 18px;
+          font-size: small;
         }
       }
 
@@ -586,7 +510,7 @@ table.image caption {
           border: 1px solid #ccc;
           border-radius: 5px;
           padding: 10px 15px;
-          width: calc(100% - 30px);
+          width: calc(100% - 1em);
           text-align: center;
           display: inline-block;
           font-size: 18px;
@@ -667,24 +591,21 @@ table.image caption {
   }
   nav#side-nav {
     width: 100%;
-    margin: 0 0 30px;
+    margin: 0 0 1em;
     box-shadow: 5px 25px 30px -25px rgba(34, 34, 34, 0.25);
   }
   .side-panel {
-    width: calc(100%-30px) !important;
+    width: calc(100%-1em) !important;
     margin: 0 15px;
   }
-  .post-thumb {
-    width: 100%;
-    margin: 0 0 25px 25px;
-  }
+
   .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: 30px 0;
+    padding: 1em 0;
   }
   .post-list li h3 a {
     font-size: 31px;
@@ -701,6 +622,9 @@ table.image caption {
     background-color: rgba(141, 191, 66, 0.97) !important;
     border: 1px solid hsla(0, 0%, 100%, 0.3) !important;
   }
+  .site-nav .menu-icon {
+    width: 27px;
+  }
   .site-nav .menu-icon > svg path {
     fill: #ffffff;
   }
diff --git a/assets/reset.css b/assets/reset.css
new file mode 100644
index 0000000..2ad1ded
--- /dev/null
+++ b/assets/reset.css
@@ -0,0 +1,69 @@
+/*
+  1. Use a more-intuitive box-sizing model.
+*/
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+/*
+    2. Remove default margin
+  */
+* {
+  margin: 0;
+}
+/*
+    3. Allow percentage-based heights in the application
+  */
+html,
+body {
+  height: 100%;
+}
+/*
+    Typographic tweaks!
+    4. Add accessible line-height
+    5. Improve text rendering
+  */
+body {
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+/*
+    6. Improve media defaults
+  */
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+/*
+    7. Remove built-in form typography styles
+  */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+/*
+    8. Avoid text overflows
+  */
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}
+/*
+    9. Create a root stacking context
+  */
+#root,
+#__next {
+  isolation: isolate;
+}