Flatpages: Move table of contents to the top on mobile

Fixes #459

app/scss/components.scss

@@ -172,13 +172,10 @@ blockquote {
 }
 
 .toc {
-	.nav-link {
-		color: #ADADAD;
-		padding: 0.25rem 0.5rem;
+	flex-basis: 25%;
 
-		&:hover, &.active {
-			color: #DDD;
-		}
+	.nav-link {
+		padding: 0.25rem 0.5rem;
 	}
 
 	.nav .nav {

app/scss/custom.scss

@@ -1,5 +1,7 @@
 :root {
+	--bs-link-color: rgb(99, 163, 230);
 	--bs-link-color-rgb: 99, 163, 230;
+	--bs-link-hover-color: rgb(88, 145, 204);
 	--bs-link-hover-color-rgb: 88, 145, 204;
 }
 
@@ -166,10 +168,6 @@ pre {
 	border-color: #00b05c;
 }
 
-.btn-download:focus, .btn-download.focus {
-	-webkit-box-shadow: 0 0 0 0.2rem rgba(231, 76, 60, 0.5);
-	box-shadow: 0 0 0 0.2rem rgba(231, 76, 60, 0.5);
-}
 
 .ranks-table tr {
 	th, td {

app/templates/base.html

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

app/templates/flatpage.html

@@ -11,14 +11,8 @@
 {% set html = page.html %}
 {% if page.meta.get("toc", True) %}
 	<div class="container mt-4">
-		<main class="row">
-			<article class="col-md-9 content">
-				<h1 class="mb-4">{{ page['title'] }}</h1>
-
-				{{ html | safe }}
-			</article>
-
-			<nav class="col-md-3 toc">
+		<main class="d-flex gap-5 flex-column flex-md-row-reverse">
+			<nav class="flex-grow-0 flex-shrink-0 toc" style="flex-basis: 25%;">
 				{% set headings = get_headings(html) %}
 				<ul class="nav flex-column" role="menu">
 					{% for item in headings recursive %}
@@ -35,6 +29,12 @@
 					{% endfor %}
 				</ul>
 			</nav>
+			<article class="flex-grow-1 content">
+				<h1 class="mb-4">{{ page['title'] }}</h1>
+
+				{{ html | safe }}
+			</article>
+
 		</main>
 	</div>
 {% else %}