Repos / hi.imnhan.com / 80621120ad
commit 80621120ad0f57017861116d44b03a9ef0166f1b
Author: Nhân <hi@imnhan.com>
Date:   Mon Feb 13 23:46:51 2023 +0700

    highlight targeted anchor too

diff --git a/nhanb-theme/static/css/main.css b/nhanb-theme/static/css/main.css
index c5c0623..2220e36 100644
--- a/nhanb-theme/static/css/main.css
+++ b/nhanb-theme/static/css/main.css
@@ -26,16 +26,6 @@ button {
   padding: 0.2rem;
 }
 
-a.headerlink {
-    margin-left: 0.5rem;
-    text-decoration: none;
-    visibility: hidden;
-}
-
-*:hover > a.headerlink {
-    visibility: visible;
-}
-
 a {
   color: var(--link-color);
   text-decoration-skip-ink: none;
@@ -145,6 +135,32 @@ pre {
   font-size: 0.9rem;
 }
 
+
+/* Python markdown's "toc" extension creates an <a class="headerlink"> inside
+ * each heading. The following styling makes the anchor only visible on hover
+ * and highlights the currently targeted heading.
+ */
+a.headerlink {
+    margin-left: 0.5rem;
+    text-decoration: none;
+    visibility: hidden;
+}
+:hover > a.headerlink {
+    visibility: visible;
+}
+h1:target,
+h2:target,
+h3:target,
+h4:target {
+    background-color: moccasin;
+    margin-left: -1rem;
+    padding-left: 1rem;
+}
+:target > a.headerlink:hover {
+    color: moccasin;
+}
+
+
 /* Pygments tweaks */
 .highlight {
   background-color: transparent;