Layout improvs body, main, next-prev links & page nav

5 files changed, 57 insertions, 18 deletions

diff --git a/assets/css/list-navigation.css b/assets/css/list-navigation.css
index 2f8495c..64c3464 100644
--- a/assets/css/list-navigation.css
+++ b/assets/css/list-navigation.css
@@ -3,6 +3,11 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
+    margin: var(--margin-padding-Y-big);
+}
+
+.pagination__current {
+    margin-bottom: 0;
 }
 
 .recent-posts__view-all-link,
diff --git a/assets/css/main.css b/assets/css/main.css
index b531713..6a9d3c9 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -16,7 +16,7 @@
     --glow: 0 0 0 3px rgba(233, 215, 159, 0.24);
     --line-height-default: 1.5;
     --line-height-heading: 1.2;
-    --link-color: #996100;
+    --link-color: #996100; /* Slightly darker: #905914; more darker: #895700 */
     --link-hover: #b58900;
     --margin-padding-Y-default: 20px 0;
     --margin-padding-Y-big: 40px 0;
@@ -72,12 +72,17 @@ body {
     display: grid;
     grid-template-rows: auto auto 1fr auto; /* Ensure header & navmenu at top, main taking up main space, footer at bottom */
     margin: 1.5rem auto;
-    max-width: 740px;
+    max-width: 1080px;
     min-height: 100vh;
+
+    @media (max-width: 1024px) {
+        margin: 1.5rem 20px;
+    }
 }
 
 main {
-    margin: 0.5rem 0;
+    margin: 0.5rem auto;
+    max-width: 70ch;
 
     p {
         margin-bottom: var(--gap-default);
@@ -92,10 +97,6 @@ main {
             max-width: 100%;
         }
     }
-
-    @media (max-width: 1024px) {
-        margin: 20px;
-    }
 }
 
 /* TYPOGRAPHY & text elements */
diff --git a/assets/css/navmenu.css b/assets/css/navmenu.css
index d092e6c..e5307eb 100644
--- a/assets/css/navmenu.css
+++ b/assets/css/navmenu.css
@@ -13,7 +13,7 @@
     @media (max-width: 768px) {
         /* Grid items stretch to at least 100px or take up full width */
         display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
         justify-items: center;
         gap: var(--gap-medium) var(--gap-small);
     }
diff --git a/assets/css/post-card.css b/assets/css/post-card.css
index 687b33a..368f7a7 100644
--- a/assets/css/post-card.css
+++ b/assets/css/post-card.css
@@ -54,17 +54,14 @@
 }
 
 .post-card__tags-item {
-    background-color: var(--bg-special);
-    border-radius: var(--border-radius-max);
-    color: var(--text-color);
+    color: var(--link-color);
     font-size: var(--font-size-small);
-    padding: 0.1rem 0.4rem;
+    padding: 0.1rem 0.2rem;
 }
 
 .post-card__section-badge {
-    color: var(--link-color);
+    background-color: var(--bg-special);
+    border-radius: var(--border-radius-max);
     font-size: var(--font-size-small);
-    font-weight: bold;
     padding: 0.1rem 0.4rem;
 }
-
diff --git a/assets/css/post.css b/assets/css/post.css
index 2c7fcd5..7fcfd95 100644
--- a/assets/css/post.css
+++ b/assets/css/post.css
@@ -17,11 +17,16 @@
     margin-bottom: var(--gap-large);
 }
 
+.post__navigation-label {
+    color: var(--text-color);
+    opacity: 0.9;
+}
+
 .post__navigation-list {
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     justify-content: space-between;
-    margin: 0 1rem !important;
+    margin: 0 0.5rem !important;
 
     @media (max-width: 768px) {
         flex-direction: column;
@@ -30,6 +35,27 @@
     }
 }
 
+.post__navigation-link {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    text-decoration: none;
+
+    &:hover > .post__navigation-title {
+        color: var(--link-hover);
+        text-decoration: underline;
+    }
+}
+
+.post__navigation-next,
+.post__navigation-prev {
+    width: 45%;
+
+    @media (max-width: 768px) {
+        width: 100%;
+    }
+}
+
 .post__scroll-top {
     background-color: var(--bg-special);
     border-radius: var(--border-radius-max);
@@ -41,10 +67,14 @@
     height: 2.5rem;
     width: 2.5rem;
     position: absolute;
-    bottom: 6rem;
+    bottom: 9rem;
     right: 0;
     z-index: 1000;
 
+    @media (max-width: 768px) {
+        bottom: 14rem;
+    }
+
     & svg {
         height: 2rem;
         width: 2rem;
@@ -75,6 +105,7 @@
 
 .post__tags-list {
     display: flex;
+    flex-wrap: wrap;
     gap: var(--gap-default);
 
     @media (max-width: 768px) {
@@ -84,5 +115,10 @@
 
 .post__tags-link {
     font-weight: normal;
+    text-decoration: none;
+
+    &:hover {
+        text-decoration: underline;
+    }
 }