Post-Card new design, improved styling for codeblocks & search

1 files changed, 63 insertions, 6 deletions

diff --git a/assets/css/main.css b/assets/css/main.css
index 4aadd74..a17c9b3 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -3,6 +3,7 @@
     --bg-main: #fffff0;
     --bg-special: #e9d79f;
     --border-radius-max: 250px;
+    --border-radius-default: 12px;
     --border-radius-minimal: 5px;
     --font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
     --font-size-default: 1rem;
@@ -12,6 +13,7 @@
     --gap-medium: 1.5rem;
     --gap-large: 2rem;
     --gap-small: 0.5rem;
+    --glow: 0 0 0 3px rgba(233, 215, 159, 0.24);
     --line-height-default: 1.5;
     --line-height-heading: 1.2;
     --link-color: #996100;
@@ -19,6 +21,7 @@
     --margin-padding-Y-default: 20px 0;
     --margin-padding-Y-big: 40px 0;
     --margin-padding-Y-small: 10px 0;
+    --shadow-default: 0 2px 6px rgba(30, 30, 30, 0.15);
     --text-color: #1e1e1e;
 }
 
@@ -48,8 +51,10 @@ html {
     &[data-theme="dark"] {
         --bg-main: #0a234a;
         --bg-special: #1e4a73;
+	--glow: rgba(79, 195, 247, 0.24);
         --link-color: #4fc3f7;
         --link-hover: #039be5;
+        --shadow-default: 0 2px 6px rgba(224, 224, 224, 0.15);
         --text-color: #e0e0e0;
 
         & .theme-toggle .icon-moon {
@@ -80,7 +85,7 @@ main {
 
     /* Avoid affecting icon imgs in header & footer */
     & img {
-        border-radius: var(--border-radius-minimal);
+        border-radius: var(--border-radius-default);
         max-width: 90%;
 
         @media (max-width: 768px) {
@@ -108,7 +113,7 @@ blockquote {
     border-left: 4px solid var(--bg-special);
     font-style: italic;
     margin: var(--gap-large);
-    padding-left: 0.8rem;
+    padding-left: var(--gap-default);
 
     @media (max-width: 1024px) {
         margin: var(--gap-large) 0;
@@ -181,6 +186,14 @@ time {
 }
 
 /* SPECIAL ELEMENTS */
+/* Code line */
+p > code {
+    background-color: var(--bg-special);
+    border-radius: var(--border-radius-minimal);
+    font-size: 0.9rem;
+    padding: 0.2rem 0.4rem;
+}
+
 /* Code block */
 .highlight {
     margin: 1rem auto;
@@ -251,7 +264,7 @@ time {
 /* SITE NAVMENU */
 .header__navigation {
     background-color: var(--bg-special);
-    border-radius: var(--border-radius-minimal);
+    border-radius: var(--border-radius-default);
     padding: var(--margin-padding-Y-small);
 }
 
@@ -307,17 +320,35 @@ time {
 
 /* POST CARD */
 .post-card {
+    border: 3px solid var(--bg-special);
+    border-radius: var(--border-radius-default);
     margin: 0 auto 1.5rem;
+    padding: 0 var(--gap-default);
     width: 90%;
 
     & .post-card__title {
         font-size: var(--font-size-default);
+        margin-top: var(--gap-default);
+    }
+
+    & .post-card__meta {
+        display: flex;
+        align-items: center;
+        gap: var(--gap-small);
     }
 
     & .post-card__meta,
     .post-card__summary {
         font-size: var(--font-size-small);
     }
+
+    & .post-card__meta-info {
+        margin-bottom: 0;
+    }
+
+    @media (max-width: 768px) {
+        padding: 0 var(--gap-small);
+    }
 }
 
 .post-card__header {
@@ -350,6 +381,14 @@ time {
     padding: 0.1rem 0.4rem;
 }
 
+.post-card__section-badge {
+    background-color: var(--link-color);
+    border-radius: var(--border-radius-max);
+    color: var(--bg-main);
+    font-size: var(--font-size-small);
+    padding: 0.1rem 0.4rem;
+}
+
 /* PAGES Content */
 .page-not-found {
     text-align: center;
@@ -376,7 +415,7 @@ time {
 
 .post__content ol > li,
 .post__content ul > li {
-    margin-bottom: var(--gap-default);
+    margin-bottom: var(--gap-small);
 }
 
 .post__header {
@@ -404,7 +443,7 @@ time {
 .post__scroll-top {
     background-color: var(--bg-special);
     border-radius: var(--border-radius-max);
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+    box-shadow: var(--shadow-default);
     cursor: pointer;
     display: inline-flex;
     align-items: center;
@@ -422,6 +461,15 @@ time {
         padding-bottom: 0.2rem;
     }
 
+    /* Arrow up  */
+    & svg > path {
+        stroke: var(--text-color);
+
+        &:hover {
+            stroke: var(--bg-main);
+        }
+    }
+
     &:hover {
         background-color: var(--link-hover);
     }
@@ -471,9 +519,17 @@ time {
     font-size: var(--font-size-default);
     border: 1px solid var(--bg-special);
     border-radius: var(--border-radius-minimal);
+    margin-right: var(--gap-small);
     padding: 0.2rem;
+    height: var(--font-size-h1);
     width: 50%;
 
+    &:focus {
+        border-color: var(--link-color);
+        box-shadow: var(--glow);
+        outline: none;
+    }
+
     @media (max-width: 768px) {
         width: 90%;
     }
@@ -483,10 +539,11 @@ time {
     background-color: var(--bg-special);
     border: none;
     border-radius: var(--border-radius-max);
+    box-shadow: var(--shadow-default);
     color: var(--text-color);
     font-size: var(--font-size-default);
     font-weight: bold;
-    padding: 0.2rem 0.5rem 0.3rem 0.5rem;
+    padding: 0.1rem 0.5rem 0.3rem 0.5rem;
 
     &:hover {
         background-color: var(--link-hover);