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;