From 30722020c80524829ac3333017a9fca2c8f5478d Mon Sep 17 00:00:00 2001
From: rubenwardy <rw@rubenwardy.com>
Date: Sat, 2 Sep 2023 22:05:11 +0100
Subject: [PATCH] Flatpages: Move table of contents to the top on mobile

Fixes #459
---
 app/scss/components.scss    |  9 +++------
 app/scss/custom.scss        |  6 ++----
 app/templates/base.html     |  2 +-
 app/templates/flatpage.html | 16 ++++++++--------
 4 files changed, 14 insertions(+), 19 deletions(-)

diff --git a/app/scss/components.scss b/app/scss/components.scss
index b709fecd..a7edf985 100644
--- a/app/scss/components.scss
+++ b/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 {
diff --git a/app/scss/custom.scss b/app/scss/custom.scss
index 9a215259..2db5184c 100644
--- a/app/scss/custom.scss
+++ b/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 {
diff --git a/app/templates/base.html b/app/templates/base.html
index d0f18147..6d01730e 100644
--- a/app/templates/base.html
+++ b/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 -%}
diff --git a/app/templates/flatpage.html b/app/templates/flatpage.html
index 692e167f..b4e0d207 100644
--- a/app/templates/flatpage.html
+++ b/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 %}