fix: theme a bit

assets/css/extended/custom.css

@@ -50,63 +50,118 @@
 }
 
 :root[data-theme="dark"] {
-  --theme: #181818;
-  --entry: rgb(46, 46, 51);
-  --primary: #fbf1c7;
-  --secondary: #ebdbb2;
-  --tertiary: rgb(65, 66, 68);
-  --content: rgb(196, 196, 197);
-  --code-block-bg: rgb(46, 46, 51);
-  --code-bg: rgb(55, 56, 62);
-  --border: rgb(151, 51, 51);
+  --theme: #1d2021;
+  --entry: #282828;
+  --primary: #ebdbb2;
+  --secondary: #a89984;
+  --tertiary: #3c3836;
+  --content: #ebdbb2;
+  --code-block-bg: #282828;
+  --code-bg: #3c3836;
+  --border: #3c3836;
   color-scheme: dark;
 
-  --post-entry-bg: #181818; /* bg1 */
+  --post-entry-bg: #282828;
   --post-entry-fg: #ebdbb2;
+
+  --green: #b8bb26;
+  --greenl: #8ec07c;
 }
 
 body {
   font-family: "Space Grotesk", monospace;
 }
 
-nav #menu span {
-  padding: 0px 2px;
-
-  text-decoration: underline;
-  text-decoration-thickness: 2px;
-  text-decoration-color: var(--green);
-}
-
 /* *
-* NAV SECTION
+* UNIVERSAL HOVER ANIMATION (Fill-up Effect)
+* Target: Nav spans, main links (except entries), social links, and share icons.
 * */
+nav #menu a span {
+  position: relative;
+  text-decoration: none !important;
+  color: inherit;
+  transition: color 0.3s ease;
+  z-index: 1;
+  display: inline-block;
+  padding: 0 8px; /* Reduced vertical padding */
+}
 
-nav #menu span:hover {
+main a:not(.entry-link, .anchor),
+.social-icons a,
+.share-buttons a,
+.note-item a {
+  position: relative;
+  text-decoration: none !important;
+  color: inherit;
+  transition: color 0.3s ease;
+  z-index: 1;
+  display: inline-block;
+}
+
+/* Note items are full-width flex containers */
+.note-item a {
+  display: flex;
+  width: 100%;
+  padding: 8px 12px;
+  margin: 0 -12px; /* Offset padding for full-row effect */
+}
+
+/* The fill background */
+nav #menu a span::before,
+main a:not(.entry-link, .anchor)::before,
+.social-icons a::before,
+.share-buttons a::before,
+.note-item a::before {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 2px; /* Static underline state */
   background-color: var(--green);
-  color: white;
+  z-index: -1;
+  transition: height 0.3s cubic-bezier(0.19, 1, 0.22, 1);
 }
 
-nav #menu .active {
-  border: 0px;
-  color: var(--green);
-
-  text-decoration: underline;
-  text-decoration-thickness: 2px;
-  text-decoration-color: var(--green);
+/* Notes list starts with 0 height to stay clean */
+.note-item a::before,
+.share-buttons a::before {
+  height: 0;
 }
 
-/* *
-* MAIN SECTION
-* */
-main a {
-  text-decoration: underline;
-  text-decoration-thickness: 2px;
-  text-decoration-color: var(--green);
+/* Hover state: Fill up the background */
+nav #menu a:hover span::before,
+main a:hover:not(.entry-link, .anchor)::before,
+.social-icons a:hover::before,
+.share-buttons a:hover::before,
+.note-item a:hover::before {
+  height: 100%;
 }
 
-main a:hover:not(.entry-link) {
-  background-color: var(--green);
-  color: white;
+/* CONTRAST FIX: Switch text/icon color on hover */
+nav #menu a:hover span,
+main a:hover:not(.entry-link, .anchor),
+.social-icons a:hover,
+.share-buttons a:hover,
+.note-item a:hover .note-title,
+.note-item a:hover .note-date {
+  color: var(--theme) !important;
+}
+
+/* Icon specific color switch */
+.social-icons a:hover svg,
+.share-buttons a:hover svg {
+  fill: var(--theme) !important;
+  stroke: var(--theme) !important;
+}
+
+/* Active Nav State - remain thick underline */
+nav #menu .active span::before {
+  height: 4px;
+}
+
+nav #menu .active a:hover span::before {
+  height: 100%;
 }
 
 main h1 {
@@ -117,6 +172,35 @@ main h1 {
 .toc,
 .post-tags a {
   border: 0px;
+  background: transparent;
+}
+
+.post-tags a {
+  background: var(--tertiary);
+  color: var(--primary);
+  padding: 4px 12px;
+  border-radius: var(--radius);
+  transition: all 0.3s ease;
+}
+
+.post-tags a:hover {
+  background: var(--green);
+  color: var(--theme);
+  transform: translateY(-2px);
+}
+
+.share-buttons {
+  margin-top: 40px;
+  padding: 20px 0;
+  border-top: 1px solid var(--tertiary);
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+}
+
+.share-buttons a {
+  padding: 10px;
+  border-radius: var(--radius);
 }
 
 .anchor {
@@ -134,10 +218,15 @@ main h1 {
 /* } */
 
 main .post-entry {
-  border: 0px;
+  border: 1px solid var(--tertiary);
   background-color: var(--post-entry-bg);
   color: var(--post-entry-fg);
-  border: 2px solid #383838;
+  transition: transform 0.2s ease, border-color 0.2s ease;
+}
+
+main .post-entry:hover {
+  transform: translateY(-2px);
+  border-color: var(--green);
 }
 
 /* *
@@ -158,18 +247,9 @@ main .post-entry {
   border-bottom: none;
 }
 
-.note-item a {
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-  text-decoration: none;
-  gap: 16px;
-}
-
-.note-item a:hover .note-title {
-  text-decoration: underline;
-  text-decoration-color: var(--green);
-  text-decoration-thickness: 2px;
+.note-item a:hover .note-title,
+.note-item a:hover .note-date {
+  color: var(--theme) !important;
 }
 
 .note-title {
@@ -186,7 +266,51 @@ main .post-entry {
 
 .note-summary {
   margin: 4px 0 0 0;
-  font-size: 0.9rem;
+  font-size: 0.96rem;
   color: var(--secondary);
-  line-height: 1.4;
+  line-height: 1.5;
+}
+
+/* *
+* POST CONTENT SPACINGS
+* */
+.post-content {
+  font-size: 1.1rem;
+  line-height: 1.7;
+  color: var(--primary);
+}
+
+.post-content p,
+.post-content ol,
+.post-content ul,
+.post-content dl {
+  margin-bottom: 1.6em;
+}
+
+.post-content h1,
+.post-content h2,
+.post-content h3,
+.post-content h4 {
+  margin-top: 1.8em;
+  margin-bottom: 0.8em;
+  color: var(--green);
+}
+
+.post-content blockquote {
+  margin: 2em 0;
+  padding: 0.5em 1.5em;
+  border-left: 4px solid var(--green);
+  background-color: var(--entry);
+  font-style: italic;
+  color: var(--secondary);
+}
+
+.post-content code {
+  background-color: var(--tertiary);
+  color: var(--primary);
+  border-radius: 4px;
+}
+
+.post-content pre code {
+  background-color: var(--entry) !important;
 }