From aaad2e271d8f26bf1618e30cf5fe15755f7cb29f Mon Sep 17 00:00:00 2001
From: Salt <rehashedsalt@cock.li>
Date: Sat, 22 Aug 2020 21:13:20 -0500
Subject: [PATCH] Style tables of contents

---
 matrix/index.php  | 34 ++++++++++++++++++----------------
 styles/styles.css |  9 +++++++++
 2 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/matrix/index.php b/matrix/index.php
index b455686..fcd343c 100644
--- a/matrix/index.php
+++ b/matrix/index.php
@@ -10,24 +10,26 @@
 		<div class="content">
 			<div class="section">
 				<h1>What is Matrix?</h1>
+				<div class="toc">
+					<h2>Contents</h2>
+					<ul>
+						<li><a href="#gettingstarted">Getting Started</a></li>
+						<li><a href="#darkmode">Dark Mode</a></li>
+						<li>Using Matrix</li>
+						<ul>
+							<li><a href="#voicechat">Voice Chat</a></li>
+							<li><a href="#communities">Communities</a></li>
+						</ul>
+						<li>Miscellaneous</li>
+						<ul>
+							<li><a href="#rules">Rules</a></li>
+							<li><a href="#federation">Federation</a></li>
+							<li><a href="#contact">Contact an Admin</a></li>
+						</ul>
+					</ul>
+				</div>
 				<p>Matrix is a communication platform. Think Discord, but hosted here and without <a href="https://cadence.moe/blog/2020-06-06-why-you-shouldnt-trust-discord">its problems</a>.</p>
 				<p>To get up and running, you only need to read the <a href="#gettingstarted">Getting Started</a> section. Everything else here is just in case you want or need it.</p>
-				<h2>On This Page:</h2>
-				<ul>
-					<li><a href="#gettingstarted">Getting Started</a></li>
-					<li><a href="#darkmode">Dark Mode</a></li>
-					<li>Using Matrix</li>
-					<ul>
-						<li><a href="#voicechat">Voice Chat</a></li>
-						<li><a href="#communities">Communities</a></li>
-					</ul>
-					<li>Miscellaneous</li>
-					<ul>
-						<li><a href="#rules">Rules</a></li>
-						<li><a href="#federation">Federation</a></li>
-						<li><a href="#contact">Contact an Admin</a></li>
-					</ul>
-				</ul>
 			</div>
 			<div class="section" id="gettingstarted">
 				<h1>Getting Started</h1>
diff --git a/styles/styles.css b/styles/styles.css
index bc1b212..503a584 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -138,6 +138,15 @@ img.bigimg {
 	margin: 1em 0;
 	padding: 1em;
 }
+.toc {
+	background: var(--background-bright);
+	border-radius: 4px;
+	box-shadow: 5px 5px var(--shadow);
+	display: inline-block;
+	margin: 0 1em 1em 1em;
+	padding: 0 1em;
+	width: auto;
+}
 
 /* FOOTER */
 .footer {