From fb11aaa8a9e231f550615d7ab7aa24cad48ab4a4 Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Sat, 13 Apr 2024 03:08:56 +0800
Subject: [PATCH] Add table of contents style

---
 src/assets/css/main.css | 71 ++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 70 insertions(+), 1 deletion(-)

diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index 9fed3361..f21609ef 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -196,7 +196,7 @@ button:hover {
 }
 
 button:focus,
-detail:focus {
+details:focus {
     outline-offset: 0.2em;
 }
 
@@ -459,6 +459,75 @@ article, .content-container {
     gap: 0.5rem;
 }
 
+/* Article Table of Contents */
+.toc {
+    background-color: var(--clr-quote-bg);
+    max-width: max-content;
+    padding: 1rem 1.3rem 0.3rem 1.3rem;
+    margin-top: 1rem;
+    outline: 1px solid var(--clr-title-border);
+    position: relative;
+    border-radius: 0.4rem;
+}
+
+.toc-heading {
+    font-size: 1.1rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+    margin-right: 2rem;
+    cursor: pointer;
+}
+
+.toc ol {
+    border-top: 1px solid var(--clr-title-border);
+    padding: 0.8em 0 0 1em;
+    line-height: 1.8;
+}
+
+.toc ol ol {
+    list-style-type: disc;
+    line-height: 1.5;
+    padding-left: 1em;
+}
+
+.toc a {
+    font-size: 1.1rem;
+    padding-left: 0.4rem;
+}
+
+.toc ol ol a {
+    padding: 0;
+    font-size: 1rem;
+}
+
+/* Sidebar Table of Contents */
+.sidebar__toc {
+    position: sticky;
+    top: 4rem;
+}
+
+.sidebar__toc--title {
+    font-size: 1.3rem;
+    font-weight: bold;
+}
+
+.sidebar__toc ol {
+    list-style: none;
+    margin-left: 0;
+    padding-left: 0;
+    font-size: 1rem;
+}
+
+.sidebar__toc ol li {
+    margin-bottom: 0.5em;
+}
+
+.sidebar__toc ol ol {
+    padding-top: 0.5em;
+    padding-left: 1.25rem;
+    list-style-type: disc;
+}
+
 /* Pride flag backgrounds */
 .flag-ace {
 	background: repeating-linear-gradient(