Enable smooth scrolling

sass/style.scss

@@ -3,24 +3,24 @@
 	font-style: normal;
 	font-weight: 400;
 	src: url("/fonts/spectral-regular.woff2") format("woff2"),
-	     url("/fonts/spectral-regular.woff")  format("woff"),
-	     url("/fonts/spectral-regular.ttf")   format("truetype");
+	url("/fonts/spectral-regular.woff")	format("woff"),
+	url("/fonts/spectral-regular.ttf")	 format("truetype");
 }
 @font-face {
 	font-family: spectral;
 	font-style: normal;
 	font-weight: 700;
 	src: url("/fonts/spectral-bold.woff2") format("woff2"),
-	     url("/fonts/spectral-bold.woff")  format("woff"),
-	     url("/fonts/spectral-bold.ttf")   format("truetype");
+	url("/fonts/spectral-bold.woff")	format("woff"),
+	url("/fonts/spectral-bold.ttf")	 format("truetype");
 }
 @font-face {
 	font-family: spectral;
 	font-style: italic;
 	font-weight: 400;
 	src: url("/fonts/spectral-italic.woff2") format("woff2"),
-	     url("/fonts/spectral-italic.woff")  format("woff"),
-	     url("/fonts/spectral-italic.ttf")   format("truetype");
+	url("/fonts/spectral-italic.woff")	format("woff"),
+	url("/fonts/spectral-italic.ttf")	 format("truetype");
 }
 
 ::selection{
@@ -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 {
@@ -211,9 +246,9 @@ a {
 }
 
 .profile-picture {
-  float: right;
-  width: 15rem;
-  margin-left: 3em;
+	float: right;
+	width: 15rem;
+	margin-left: 3em;
 }
 
 @media screen and (max-width: 50rem) {
@@ -236,10 +271,10 @@ a {
 		span.title { display: none }
 	}
 
-  .profile-picture {
-    width: 10rem;
-    margin-left: 1em;
-  }
+	.profile-picture {
+		width: 10rem;
+		margin-left: 1em;
+	}
 }
 
 @media (prefers-color-scheme: dark) {
@@ -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,24 +48,22 @@
 {% endmacro %}
 
 {% macro toc() %}
-	{% if page.toc and not page.extra.notoc %}
-		<ul>
-		{% for h1 in page.toc %}
-			<li>
-				<a href="{{ h1.permalink | safe }}">{{ h1.title }}</a>
-				{% if h1.children %}
-					<ul>
-						{% for h2 in h1.children %}
-							<li>
-								<a href="{{ h2.permalink | safe }}">{{ h2.title }}</a>
-							</li>
-						{% endfor %}
-					</ul>
-				{% endif %}
-			</li>
-		{% endfor %}
-		</ul>
-	{% endif %}
+	<ul class="table-of-contents">
+	{% for h1 in page.toc %}
+		<li>
+			<a href="{{ h1.permalink | safe }}">{{ h1.title }}</a>
+			{% if h1.children %}
+				<ul>
+					{% for h2 in h1.children %}
+						<li>
+							<a href="{{ h2.permalink | safe }}">{{ h2.title }}</a>
+						</li>
+					{% endfor %}
+				</ul>
+			{% endif %}
+		</li>
+	{% endfor %}
+	</ul>
 {% 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) }}