Styling tweaks

1 files changed, 60 insertions, 46 deletions

diff --git a/assets/css/main.css b/assets/css/main.css
index cc046d5..ae16fea 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -1,11 +1,9 @@
 /* VARIABLES with default LIGHT MODE */
 :root {
     --bg-main: #fffff0;
-    --bg-special: #f4e3b2;
+    --bg-special: #e9d79f;
     --border-radius-max: 250px;
     --border-radius-minimal: 5px;
-    --breakpoint-laptop: 768px;
-    --breakpoint-tablet: 1024px;
     --font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
     --font-size-default: 1rem;
     --font-size-h1: 2rem;
@@ -16,7 +14,7 @@
     --line-height-default: 1.5;
     --line-height-heading: 1.2;
     --link-color: #996100;
-    --link-hover: #704100;
+    --link-hover: #b58900;
     --margin-padding-Y-default: 20px 0;
     --margin-padding-Y-big: 40px 0;
     --margin-padding-Y-small: 10px 0;
@@ -48,7 +46,7 @@ html {
     /* DARK MODE */
     &[data-theme="dark"] {
         --bg-main: #0a234a;
-        --bg-special: #173d5a;
+        --bg-special: #1e4a73;
         --link-color: #4fc3f7;
         --link-hover: #039be5;
         --text-color: #e0e0e0;
@@ -67,17 +65,29 @@ 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 */
-    margin: 20px auto;
+    margin: 1.5rem auto;
     max-width: 80ch;
     min-height: 100vh;
-
-    @media (max-width var(--breakpoint-laptop)) {
-        margin: var(--margin-padding-Y-default);
-    }
 }
 
 main {
-    @media (max-width: var(--breakpoint-laptop)) {
+    margin: 0.5rem 0;
+
+    p {
+        margin-bottom: var(--gap-default);
+    }
+
+    /* Avoid affecting icon imgs in header & footer */
+    & img {
+        border-radius: var(--border-radius-minimal);
+        max-width: 90%;
+
+        @media (max-width: 768px) {
+            max-width: 100%;
+        }
+    }
+
+    @media (max-width: 1024px) {
         margin: 20px;
     }
 }
@@ -97,7 +107,11 @@ blockquote {
     border-left: 4px solid var(--bg-special);
     font-style: italic;
     margin: var(--gap-large);
-    padding-left: 1rem;
+    padding-left: 0.8rem;
+
+    @media (max-width: 1024px) {
+        margin: var(--gap-large) 0;
+    }
 }
 
 dl {
@@ -138,18 +152,6 @@ hr {
     color: var(--bg-special);
 }
 
-img {
-    max-width: 90%;
-
-    @media (max-width: var(--breakpoint-tablet)) {
-        max-width: 100%;
-    }
-}
-
-p {
-    margin-bottom: var(--gap-default);
-}
-
 /* Lists generated from markdown text */
 ol, ul {
     padding-left: 1.5rem;
@@ -172,20 +174,20 @@ time {
 }
 
 ::selection {
-    background-color: var(--link-color);
+    background-color: var(--link-hover);
     color: var(--bg-main);
 }
 
 /* Code block */
 .highlight {
-    margin: 1rem;
-    width: fit-content;
+    margin: 1rem auto;
 
     & code {
         white-space: wrap;
     }
 
     & > pre {
+        border-radius: var(--border-radius-minimal);
         padding: 0.5rem;
     }
 }
@@ -195,7 +197,7 @@ time {
     display: flex;
     align-items: center;
     justify-content: space-around;
-    padding: var(--margin-padding-Y-default);
+    margin-bottom: 1.5rem;
 }
 
 .site-selections,
@@ -243,8 +245,9 @@ time {
     align-items: center;
     justify-content: space-evenly;
 
-    @media (max-width: var(--breakpoint-tablet)) {
+    @media (max-width: 768px) {
         flex-direction: column;
+        gap: 0.8rem;
     }
 }
 
@@ -258,9 +261,9 @@ time {
     display: flex;
     align-items: center;
     justify-content: space-around;
-    margin-top: 2rem;
+    margin-top: 1.5rem;
 
-    @media (max-width: var(--breakpoint-tablet)) {
+    @media (max-width: 768px) {
         flex-direction: column;
         gap: var(--gap-default);
     }
@@ -268,11 +271,11 @@ time {
 
 .follow-me-list {
     display: flex;
-    align-items: center;
+    align-items: start;
     justify-content: center;
     gap: var(--gap-default);
 
-    @media (max-width: var(--breakpoint-tablet)) {
+    @media (max-width: 768px) {
         flex-direction: column;
     }
 }
@@ -284,7 +287,8 @@ time {
 
 /* POST CARD */
 .post-card {
-    margin: 0 0 1rem 2rem;
+    margin: 0 auto;
+    width: 90%;
 
     & .post-card__title {
         font-size: var(--font-size-default);
@@ -312,7 +316,7 @@ time {
     gap: var(--gap-default);
     margin: var(--margin-padding-Y-default) !important;
 
-    @media (max-width: var(--breakpoint-tablet)) {
+    @media (max-width: 768px) {
         flex-direction: column;
         align-items: start;
     }
@@ -327,8 +331,12 @@ time {
 }
 
 /* PAGES Content */
+.page-not-found {
+    text-align: center;
+}
+
 /* Homepage */
-.homepage__header-title {
+.homepage__header {
     text-align: center;
 }
 
@@ -342,35 +350,35 @@ time {
 }
 
 /* Article */
-.article__header {
+.post__header {
     margin-bottom: var(--gap-large);
 }
 
-.article__navigation-list {
+.post__navigation-list {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin: 0 1rem !important;
 
-    @media (max-width: var(--breakpoint-tablet)) {
+    @media (max-width: 768px) {
         margin: 0 !important;
     }
 }
 
-.article__tags {
+.post__tags {
     margin: var(--margin-padding-Y-big);
 }
 
-.article__tags-list {
+.post__tags-list {
     display: flex;
     gap: var(--gap-default);
 
-    @media (max-width: var(--breakpoint-tablet)) {
+    @media (max-width: 768px) {
         flex-direction: column;
     }
 }
 
-.article__tags-link {
+.post__tags-link {
     font-weight: normal;
 }
 
@@ -400,7 +408,7 @@ time {
     padding: 0.2rem;
     width: 50%;
 
-    @media (max-width: var(--breakpoint-tablet)) {
+    @media (max-width: 768px) {
         width: 90%;
     }
 }
@@ -412,13 +420,19 @@ time {
     color: var(--text-color);
     font-size: var(--font-size-default);
     font-weight: bold;
-    padding: 0.2rem 0.5rem;
+    padding: 0.2rem 0.5rem 0.3rem 0.5rem;
+
+    &:hover {
+        background-color: var(--link-hover);
+        color: var(--bg-main);
+        cursor: pointer;
+    }
 }
 
 .search-input {
     width: 30vw;
 
-    @media (max-width: var(--breakpoint-tablet)) {
+    @media (max-width: 768px) {
         width: 100vw;
     }
 }