From 4ea80a33f854d8a58f79abbefdcedd29f48ff635 Mon Sep 17 00:00:00 2001
From: Daniel Fichtinger <daniel@ficd.sh>
Date: Tue, 15 Jul 2025 18:35:13 -0400
Subject: [PATCH] improved styling of hover symbols

---
 src/zona/data/content/static/style.css | 83 +++++++-------------------
 1 file changed, 22 insertions(+), 61 deletions(-)

diff --git a/src/zona/data/content/static/style.css b/src/zona/data/content/static/style.css
index cd78efa..56644c3 100644
--- a/src/zona/data/content/static/style.css
+++ b/src/zona/data/content/static/style.css
@@ -62,11 +62,12 @@ header {
 
 .site-logo.hover-symbol::before {
   content: "@";
+  /*  color: var(--main-bullet-color);*/
 }
 
 .title.hover-symbol::before {
   content: ">";
-  color: var(--main-bullet-color);
+  /*  color: var(--main-bullet-color);*/
 }
 
 .hover-symbol {
@@ -74,6 +75,7 @@ header {
   position: relative;
   font-weight: bold;
   text-decoration: none;
+  transition: color 0.15s ease;
 }
 
 .hover-symbol::before {
@@ -85,20 +87,24 @@ header {
   top: 50%;
   transform: translateY(-50%);
   opacity: 0;
-  transition: opacity 0.2s ease;
+  transition: opacity 0.15s ease, color 0.15s ease;
+  color: var(--main-text-color);
 }
 
 .hover-symbol:hover::before {
   opacity: 1;
+  color: var(--main-placeholder-color); /* only the symbol changes color */
 }
 .hover-symbol:hover {
   background-color: transparent;
+  /*  color: var(--main-placeholder-color);*/
 }
 
 .toclink {
   position: relative;
   text-decoration: none;
   color: inherit;
+  transition: color 0.15s ease;
 }
 
 .toclink::before {
@@ -109,7 +115,16 @@ header {
   top: 50%;
   transform: translateY(-50%);
   opacity: 0;
-  transition: opacity 0.2s ease;
+  transition: opacity 0.15s ease, color 0.15s ease;
+  color: var(--main-link-color);
+}
+
+.toclink:hover::before {
+  opacity: 1;
+  color: var(--main-placeholder-color);
+}
+.toclink:hover {
+  background-color: transparent;
 }
 
 h1 .toclink::before {
@@ -128,13 +143,6 @@ h4 .toclink::before {
   content: "###";
 }
 
-.toclink:hover::before {
-  opacity: 1;
-}
-.toclink:hover {
-  background-color: transparent;
-}
-
 /* h1, */
 h2,
 h3,
@@ -206,53 +214,26 @@ h6 {
 
 ul {
   list-style-type: disc;
-  /* or any other list style */
 }
 
 li::marker {
   color: var(--main-bullet-color);
-  /* Change this to your desired color */
 }
 
-/*a {*/
-/*  color: var(--main-link-color);*/
-/*  text-decoration: none;*/
-/*  position: relative;*/
-/*}*/
-
-/*a::after {*/
-/*  content: "";*/
-/*  position: absolute;*/
-/*  left: 0;*/
-/*  bottom: -2px;*/
-/*  width: 100%;*/
-/*  height: 1px;*/
-/*  background-color: currentColor;*/
-/*  transform: scaleX(0);*/
-/*  transform-origin: center;*/
-/*  transition: transform 0.1s ease;*/
-/*}*/
-
-/*a:hover::after {*/
-/*  transform: scaleX(1);*/
-/*}*/
-/*a:has(> code)::after {*/
-/*  display: none;*/
-/*}*/
-
 a {
   color: var(--main-link-color);
   text-decoration: underline;
   text-decoration-color: rgba(0, 0, 0, 0);
-  text-underline-offset: 2px; /* Optional: tweak spacing */
+  text-underline-offset: 2px;
 }
 
 a {
-  transition: text-decoration-color 0.15s ease;
+  transition: color 0.15s ease, text-decoration-color 0.15s ease;
 }
 
 a:hover {
-  text-decoration-color: currentColor;
+  text-decoration-color: var(--main-placeholder-color);
+  color: var(--main-bullet-color);
 }
 
 max-width: 100%;
@@ -489,23 +470,3 @@ caption {
   font-size: 0.8rem;
   color: var(--main-small-text-color);
 }
-
-a > code {
-  text-decoration: none;
-  color: var(--main-link-color);
-  position: relative;
-}
-
-a:has(> code) {
-  text-decoration: none;
-  background: none;
-  /*  position: static;*/
-}
-
-a:hover > code {
-  text-decoration: underline;
-}
-
-a:hover:has(> code) {
-  background: none;
-}