add anchor headings #123

assets/css/main.css

@@ -341,7 +341,6 @@ article:not(:last-of-type) {
     padding-bottom: 2em;
 }
 
-
 article header h1 {
     font-size: 1.35em;
     line-height: 1.1em;
@@ -356,6 +355,57 @@ article header h1 a {
     text-decoration: none;
 }
 
+.post h1,
+.post h2,
+.post h3,
+.post h4,
+.post h5,
+.post h6 {
+    position: relative;
+}
+
+.post h1 a,
+.post h2 a,
+.post h3 a,
+.post h4 a,
+.post h5 a,
+.post h6 a {
+    opacity: 0;
+    position: absolute;
+    left: -0.7em;
+    color: var(--font-color);
+}
+
+.post h1:hover a,
+.post h2:hover a,
+.post h3:hover a,
+.post h4:hover a,
+.post h5:hover a,
+.post h6:hover a {
+    opacity: 1;
+}
+
+.post h1:hover a:hover, 
+.post h1:hover a:focus,
+.post h1:hover a:active,
+.post h2:hover a:hover, 
+.post h2:hover a:focus,
+.post h2:hover a:active,
+.post h3:hover a:hover, 
+.post h3:hover a:focus,
+.post h3:hover a:active,
+.post h4:hover a:hover, 
+.post h4:hover a:focus,
+.post h4:hover a:active,
+.post h5:hover a:hover, 
+.post h5:hover a:focus,
+.post h5:hover a:active,
+.post h6:hover a:hover, 
+.post h6:hover a:focus,
+.post h6:hover a:active {
+    color: var(--link-state-color);
+}
+
 .post-info {
     color: var(--post-info-color);
     font-size: 0.75em;

layouts/_default/_markup/render-heading.html

@@ -0,0 +1,3 @@
+<h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }}
+<span><a href="#{{ .Anchor }}">#</a></span>
+</h{{ .Level }}>