Enable smooth scrolling

sass/style.scss

@@ -28,6 +28,8 @@
 	color: #000;
 }
 
+html { scroll-behavior: smooth }
+
 .wrap {
 	max-width: 55rem;
 	margin: 0 auto;
@@ -81,6 +83,9 @@ nav {
 	align-self: start;
 	top: 2em;
 	margin-bottom: 4rem;
+	max-height: calc(100vh - 2em);
+	box-sizing: border-box;
+	overflow-y: auto;
 
 	span.title {
 		display: block;
@@ -94,7 +99,8 @@ nav {
 		li a {
 			color: #000;
 			display: block;
-			padding: 0 .5em;
+			line-height: 1;
+			padding: .25em .5em;
 
 			&:hover {
 				color: #fff;
@@ -103,6 +109,35 @@ nav {
 			}
 		}
 	}
+	ul.table-of-contents li {
+		a {
+			color: #e1140a;
+			position: relative;
+
+			&::before, &::after {
+				content: "";
+				background-color: #bbb;
+				position: absolute;
+				left: 0;
+				top: 0;
+			}
+			&::before {
+				height: 2px;
+				width: .5em;
+			}
+			&::after {
+				width: 2px;
+				height: .5em;
+			}
+			&:hover { color: #fff }
+			&:hover::before, &:hover::after { display: none }
+		}
+
+		li {
+			padding: 0 .5em;
+			&>a::before, &>a::after { display: none }
+		}
+	}
 }
 
 main {
@@ -253,14 +288,19 @@ a {
 		color: inherit;
 	}
 
-	nav ul li a {
+	nav ul li a, nav ul.table-of-contents li a {
 		color: inherit;
-
 		&:hover {
 			color: #131516;
 			background-color: #cdcdcd;
 		}
 	}
+	nav ul.table-of-contents li a {
+		color: #ff6e67;
+		&::before, &::after {
+			background-color: #383838;
+		}
+	}
 
 	main {
 		.info, input.search { border-color: #383838 }

templates/index.html

@@ -29,6 +29,10 @@
 					<li><a href="{{ get_url(path=item.path, trailing_slash=true) }}">{{ item.title }}</a></li>
 				{% endfor %}
 			</ul>
+			{% if page.toc and not page.extra.notoc %}
+				<span class="title">Table of Contents</span>
+				{{ macros::toc() }}
+			{% endif %}
 			<span class="title">Categories</span>
 			{{ macros::list_taxonomy(kind="categories") }}
 		</nav>

templates/macros.html

@@ -48,8 +48,7 @@
 {% endmacro %}
 
 {% macro toc() %}
-	{% if page.toc and not page.extra.notoc %}
+	<ul class="table-of-contents">
-		<ul>
 	{% for h1 in page.toc %}
 		<li>
 			<a href="{{ h1.permalink | safe }}">{{ h1.title }}</a>
@@ -65,7 +64,6 @@
 		</li>
 	{% endfor %}
 	</ul>
-	{% endif %}
 {% endmacro %}
 
 {% macro list_taxonomy(kind, page=false, prepend="") %}

templates/page.html

@@ -6,7 +6,6 @@
 
 {% block content %}
 	<h1>{{ page.title }}</h1>
-	{{ macros::toc() }}
 	{{ page.content | safe }}
 	{{ macros::page_info(page=page) }}
 	{{ macros::page_updates(page=page) }}