From a44cdf07825c10e16434f86a6a01be88963306a9 Mon Sep 17 00:00:00 2001
From: f0x <f0x@cthu.lu>
Date: Sun, 28 Jul 2024 22:54:31 +0200
Subject: [PATCH] about page table of contents sidebar

---
 web/assets/static-pages/about.html | 32 +++++++++++------------
 web/source/css/base/main.css       |  6 +++++
 web/source/css/layout/page.css     | 41 ++++++++++++++++++++++++++++++
 3 files changed, 63 insertions(+), 16 deletions(-)

diff --git a/web/assets/static-pages/about.html b/web/assets/static-pages/about.html
index d5c16aab4..e86c3fdd1 100644
--- a/web/assets/static-pages/about.html
+++ b/web/assets/static-pages/about.html
@@ -36,23 +36,23 @@
 		<aside>home to <span class="count">4</span> users who wrote <span class="count">20</span> posts, federating with
 			<span class="count">2</span> other instances</aside>
 	</header>
-	<div class="page-content">
+	<div class="page-content with-sidebar">
+		<nav class="sidebar" aria-labelledby="toc">
+			<h2 id="toc">Table of Contents</h2>
+			<div>
+				<ol>
+					<li><a href="#about">About</a></li>
+					<li><a href="#contact">Contact</a></li>
+					<li><a href="#features">Features</a></li>
+					<li><a href="#languages">Languages</a></li>
+					<li><a href="#signup">Register an Account</li>
+					<li><a href="#rules">Rules</a></li>
+					<li><a href="#terms">Terms and Conditions</a></li>
+					<li><a href="#moderated-servers">Moderated Servers</a></li>
+				</ol>
+			</div>
+		</nav>
 		<main class="single-page">
-			<nav class="sidebar" aria-labelledby="toc">
-				<h2 id="toc">Table of Contents</h2>
-				<div>
-					<ol>
-						<li><a href="#about">About GoToSocial Testrig Instance</a></li>
-						<li><a href="#contact">Contact</a></li>
-						<li><a href="#features">Features</a></li>
-						<li><a href="#languages">Languages</a></li>
-						<li><a href="#signup">Register an Account on GoToSocial Testrig Instance</li>
-						<li><a href="#rules">Rules</a></li>
-						<li><a href="#terms">Terms and Conditions</a></li>
-						<li><a href="#moderated-servers">Moderated Servers</a></li>
-					</ol>
-				</div>
-			</nav>
 			<section role="region" aria-labelledby="about">
 				<h2 id="about">About GoToSocial Testrig Instance</h2>
 				<div>
diff --git a/web/source/css/base/main.css b/web/source/css/base/main.css
index aa054e505..2f877bb57 100644
--- a/web/source/css/base/main.css
+++ b/web/source/css/base/main.css
@@ -27,6 +27,12 @@ html, body {
 	scrollbar-color: $orange1 $gray3;
 }
 
+@media (prefers-reduced-motion: no-preference) {
+	html {
+		scroll-behavior: smooth;
+	}
+}
+
 body {
 	line-height: 1.5em;
 	position: relative;
diff --git a/web/source/css/layout/page.css b/web/source/css/layout/page.css
index c751ba31b..b09bd985b 100644
--- a/web/source/css/layout/page.css
+++ b/web/source/css/layout/page.css
@@ -81,6 +81,47 @@
 .page-content {
 	grid-column: 2;
 	align-self: start;
+
+	&.with-sidebar {
+		grid-column: 1 / span 2;
+		display: grid;
+		grid-template-columns: 1fr minmax(auto, 50rem);
+		grid-template-columns: 1fr min(92%, 50rem);
+
+		.sidebar {
+			align-self: start;
+			position: sticky;
+			top: 0;
+			padding: 0 1.5rem;
+
+			h2 {
+				margin-top: 1.5rem;
+			}
+		}
+	}
+}
+
+@media screen and (max-width: 80rem) {
+	.page-content.with-sidebar {
+		grid-column: 2;
+		display: flex;
+		flex-direction: column;
+		background: $bg-accent;
+		box-shadow: $boxshadow;
+		border: $boxshadow-border;
+		border-radius: $br;
+
+		.sidebar {
+			position: static;
+		}
+
+		main.single-page {
+			background: initial;
+			box-shadow: initial;
+			border: initial;
+			border-radius: initial;
+		}
+	}
 }
 
 .page-footer {