[THEME] Add anchor to titles

Add an anchor for each title, display a '#' at left of the titles
and make them clickable links

layouts/_default/_markup/render-heading.html

@@ -0,0 +1,7 @@
+<h{{ .Level }} id="{{ .Anchor | safeURL }}">
+	<a class="anchor" href="#{{ .Anchor | safeURL }}">
+		#
+		<!-- {{ strings.Repeat .Level "#" }} -->
+	</a>
+	{{ .Text | safeHTML }}
+</h{{ .Level }}>

layouts/shortcodes/table_of_contents.html

@@ -0,0 +1,3 @@
+<div class="toc">
+	{{ .Page.TableOfContents }}
+</div>

static/css/style.css

@@ -40,24 +40,24 @@ p, ul, ol {
 }
 
 /******************* Links *******************/
-a {
+a:not(.anchor) {
 	text-decoration: none;
 	color: var(--font-color);
 	border-bottom: 1px dotted;
 	transition: box-shadow 0.2s ease, outline-offset 0.2s ease, transform 0.2s ease, background 0.4s ease;
 }
-a:visited {
+a:not(.anchor):visited {
 	color: var(--font-color);
 }
-a:hover {
+a:not(.anchor):hover {
 	outline: 1px solid;
 	outline-offset: .3em;
 	border-bottom: 1px dashed;
 }
-a:active {
+a:not(.anchor):active {
 	border-bottom: 1px solid;
 }
-a:focus {
+a.not(.anchor):focus {
 	outline-offset: .3em;
 	outline: 1px solid;
 }
@@ -398,6 +398,7 @@ a:focus {
 /******************* Article Body *******************/
 .article-body {
 	margin-bottom: 2em;
+	position: relative;
 }
 .article-body img {
 	max-width: 100%;
@@ -453,6 +454,36 @@ a:focus {
 	}
 }
 
+.anchor {
+	content: '#';
+	position: absolute;
+	opacity: 0%;
+	left: -1em;
+	width: 80%;
+	max-width: 600px;
+	border: none;
+	color: var(--font-color-em);
+	text-decoration: none;
+}
+@media only screen and (max-width: 500px) {
+	.anchor {
+		left: -0.8em;
+	}
+}
+
+.anchor:hover {
+	opacity: 100%;
+	outline: none;
+	border: none;
+	cursor: pointer;
+}
+
+@media only screen and (max-width: 320px) {
+	.anchor:hover {
+		opacity: 0%;
+	}
+}
+
 /******************* Article Footer *******************/
 .article-footer {
 	font-style: italic;