Improve header anchor link styling

app/markdown/__init__.py

@@ -58,7 +58,7 @@ def render_code(self, tokens: Sequence[Token], idx, options, env):
 
 gfm_like.make()
 md = MarkdownIt("gfm-like", {"highlight": highlight_code})
-md.use(anchors_plugin, permalink=True, permalinkSymbol="#", max_level=6)
+md.use(anchors_plugin, permalink=True, permalinkSymbol="🔗", max_level=6)
 md.add_render_rule("fence", render_code)
 init_mention(md)
 

app/scss/custom.scss

@@ -57,12 +57,19 @@ h1, h2, h3, h4, h5, h6 {
 		content: "";
 		clear: both;
 	}
+
+	.header-anchor {
+		transition: opacity 0.15s ease-in-out;
+		opacity: 0.25;
+		margin: 0 0 0 0.25em;
+		font-size: 60%;
+	}
+
+	&:hover .header-anchor {
+		opacity: 0.9;
+	}
 }
 
-.header-anchor {
-	float: right;
-	opacity: 0.8;
-}
 
 .badge-notify {
 	background:yellow; /* #00bc8c;*/

app/templates/base.html

@@ -16,7 +16,7 @@
 	{%- endif %}
 
 	<link rel="stylesheet" type="text/css" href="/static/libs/bootstrap.min.css?v=4">
-	<link rel="stylesheet" type="text/css" href="/static/custom.css?v=55">
+	<link rel="stylesheet" type="text/css" href="/static/custom.css?v=56">
 	<link rel="search" type="application/opensearchdescription+xml" href="/static/opensearch.xml" title="ContentDB" />
 
 	{% if noindex -%}