Ready for deployment

1 files changed, 108 insertions, 34 deletions

diff --git a/assets/css/main.css b/assets/css/main.css
index ce74245..c09c56d 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -5,16 +5,18 @@
     --border-radius: 50px;
     --font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
     --font-size-default: 1rem;
-    --font-size-large: 2rem;
-    --font-size-smaller: 0.9rem;
+    --font-size-h1: 2rem;
+    --font-size-small: 0.85rem;
     --gap-default: 1rem;
+    --gap-large: 2rem;
+    --gap-small: 0.5rem;
     --line-height-default: 1.5;
-    --line-height-larger: 2;
+    --line-height-heading: 1.2;
     --link-color: #996100;
     --link-hover: #704100;
-    --margin-padding-Y-default: 1rem 0;
-    --margin-padding-Y-big: 2rem 0;
-    --margin-padding-Y-small: 0.5rem 0;
+    --margin-padding-Y-default: 20px 0;
+    --margin-padding-Y-big: 40px 0;
+    --margin-padding-Y-small: 10px 0;
     --text-color: #1e1e1e;
 }
 
@@ -30,19 +32,19 @@
 html {
     font-family: var(--font-family);
     font-size: var(--font-size-default);
+    line-height: var(--line-height-default);
     scroll-behavior: smooth;
 
     & .theme-toggle .icon-moon {
         display: block;
     }
-
     & .theme-toggle .icon-sun {
         display: none;
     }
 
     /* DARK MODE */
     &[data-theme="dark"] {
-        --bg-main: #0a234a; /* #031636 */
+        --bg-main: #0a234a;
         --bg-special: #173d5a;
         --link-color: #4fc3f7;
         --link-hover: #039be5;
@@ -51,7 +53,6 @@ html {
         & .theme-toggle .icon-moon {
             display: none;
         }
-
         & .theme-toggle .icon-sun {
             display: block;
         }
@@ -63,18 +64,22 @@ body {
     color: var(--text-color);
     display: grid;
     grid-template-rows: auto auto 1fr auto; /* Ensure header & navmenu at top, main taking up main space, footer at bottom */
-    line-height: var(--line-height-default);
+    margin: 20px auto;
+    max-width: 80ch;
     min-height: 100vh;
+
+    @media (max-width 900px) {
+        margin: var(--margin-padding-Y-default);
+    }
 }
 
 main {
-    margin: 3rem;
-
-    @media (max-width: 768px) {
-        margin: 1rem;
+    @media (max-width: 900px) {
+        margin: 20px;
     }
 }
 
+/* TYPOGRAPHY & text elements */
 a {
     color: var(--link-color);
     font-weight: bold;
@@ -86,27 +91,60 @@ a {
 }
 
 blockquote {
-    line-height: 3;
+    border-left: 4px solid var(--bg-special);
+    font-style: italic;
+    margin: var(--gap-large);
+    padding-left: 1rem;
 }
 
-h1 {
-    margin-bottom: 1rem;
-}
+dl {
+    margin-left: 1rem;
 
-h2, h3, h4, h5, h6 {
-    margin-bottom: 0.5rem;
+    dt {
+        color: var(--link-color);
+        font-weight: bold;
+        padding: var(--margin-padding-Y-small);
+    }
+
+    dd {
+        line-height: var(--line-height-body);
+        padding-left: 1.5rem;
+    }
 }
 
-header {
-    margin: var(--margin-padding-Y-default);
+h1, h2, h3, h4, h5, h6 {
+    line-height: var(--line-height-heading);
+    margin: var(--gap-large) 0 var(--gap-small);
 }
 
+h1 { font-size: var(--font-size-h1); }
+h2 { font-size: 1.7rem; }
+h3 { font-size: 1.5rem; }
+h4 { font-size: 1.2rem; }
+h5 { font-size: 1.1rem; }
+h6 { font-size: var(--font-size-default); }
+
 hr {
-    color: var(--text-color);
+    border: none;
+    border-top: 2px solid var(--bg-special);
+    color: var(--bg-special);
+}
+
+p {
+    margin-bottom: var(--gap-default);
+}
+
+/* Lists generated from markdown text */
+ol, ul {
+    padding-left: 1.5rem;
+    margin-bottom: var(--gap-default);
 }
 
-ul {
+/* Lists for site navigation */
+ul[class$="list"] {
     list-style: none;
+    padding-left: 0;
+    margin-bottom: 0;
 }
 
 section {
@@ -154,7 +192,7 @@ time {
 
 .site-title {
     color: inherit !important;
-    font-size: var(--font-size-large);
+    font-size: var(--font-size-h1);
     font-weight: bold;
     text-decoration: none;
 }
@@ -180,13 +218,14 @@ time {
 /* SITE NAVMENU */
 .header__navigation {
     background-color: var(--bg-special);
+    border-radius: 5px;
     padding: var(--margin-padding-Y-small);
 }
 
 .header__navigation-list {
     display: flex;
     align-items: center;
-    justify-content: space-around;
+    justify-content: space-evenly;
 
     @media (max-width: 768px) {
         flex-direction: column;
@@ -203,6 +242,7 @@ time {
     display: flex;
     align-items: center;
     justify-content: space-around;
+    margin-top: 2rem;
 
     @media (max-width: 768px) {
         flex-direction: column;
@@ -228,7 +268,16 @@ time {
 
 /* POST CARD */
 .post-card {
-    margin-bottom: 1rem;
+    margin: 0 0 1rem 2rem;
+
+    & .post-card__title {
+        font-size: var(--font-size-default);
+    }
+
+    & .post-card__meta,
+    .post-card__summary {
+        font-size: var(--font-size-small);
+    }
 }
 
 .post-card__header {
@@ -245,7 +294,7 @@ time {
     align-items: center;
     justify-content: start;
     gap: var(--gap-default);
-    margin: var(--margin-padding-Y-default);
+    margin: var(--margin-padding-Y-default) !important;
 
     @media (max-width: 768px) {
         flex-direction: column;
@@ -257,19 +306,24 @@ time {
     background-color: var(--bg-special);
     border-radius: var(--border-radius);
     color: #fff;
-    font-size: var(--font-size-smaller);
+    font-size: var(--font-size-small);
     padding: 0.1rem 0.4rem;
 }
 
-/* PAGES */
+/* PAGES Content */
+/* Article */
+.article__header {
+    margin-bottom: var(--gap-large);
+}
+
 .article__navigation-list {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin: 3rem;
+    margin: 0 1rem !important;
 
     @media (max-width: 768px) {
-        margin: 0;
+        margin: 0 !important;
     }
 }
 
@@ -290,15 +344,35 @@ time {
     font-weight: normal;
 }
 
-.tags-index__list {
-    line-height: var(--line-height-larger);
+/* List navigation */
+.pagination {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.recent-posts__view-all-link,
+.tag-page__view-all-link {
+    display: block;
+    margin: 0 auto;
+    width: max-content;
 }
 
+.tags-index__list > li {
+    margin-bottom: var(--gap-small);
+}
+
+/* Search */
 .search-form__input {
     font-size: var(--font-size-default);
     border: 1px solid var(--bg-special);
     border-radius: 5px;
     padding: 0.2rem;
+    width: 50%;
+
+    @media (max-width: 768px) {
+        width: 90%;
+    }
 }
 
 .search-form__reset {