Tweaked article table of contents

css/style-toc.css

@@ -1,7 +1,6 @@
 .toc {
     background-color: var(--clr-quote-bg);
-    width: max-content;
+    max-width: max-content;
-    max-width: 95%;
     padding: 1rem 1.3rem 0.3rem 1.3rem;
     margin-top: 1rem;
     outline: 1px solid var(--clr-title-border);

shrines/starwarskotor/articles/faq-same-gender-romance-mods.html

@@ -57,7 +57,7 @@
                 </section>
 
                 <section class="qna-section">
-                    <h2 id="introduction">Introduction</h2>
+                    <h2>Introduction</h2>
 
                     <p>This article compiles the frequently asked questions I have received for my same-gender romance mods for <cite>Star Wars: Knights of the Old Republic</cite> (<cite>KotOR</cite>) series.</p>
 
@@ -82,7 +82,7 @@
                 </section>
                 
                 <section class="qna-section">
-                    <h2 id="technical-questions">Technical Questions</h2>
+                    <h2>Technical Questions</h2>
 
                     <details class="qna-accordion">
                         <summary class="qna-accordion__question">
@@ -216,7 +216,7 @@
                 </section>
                 
                 <section class="qna-section">
-                    <h2 id="mod-content-questions">Mod Content Questions</h2>
+                    <h2>Mod Content Questions</h2>
 
                     <details class="qna-accordion">
                         <summary class="qna-accordion__question">
@@ -259,9 +259,9 @@
                 </section>
 
                 <section class="qna-section">
-                    <h2 id="mod-specific-questions">Mod Specific Questions</h2>
+                    <h2>Mod Specific Questions</h2>
 
-                    <h3 id="arr-redux">Alternate Revan Romances REDUX</h3>
+                    <h3>Alternate Revan Romances REDUX</h3>
 
                     <details class="qna-accordion">
                         <summary class="qna-accordion__question">
@@ -282,7 +282,7 @@
                         </div>
                     </details>
 
-                    <h3 id="handmaid-disc-romanc">Handmaiden and Female Exile - Disciple and Male Exile Romances</h3>
+                    <h3>Handmaiden and Female Exile - Disciple and Male Exile Romances</h3>
 
                     <details class="qna-accordion">
                         <summary class="qna-accordion__question">

shrines/starwarskotor/guides/kotor-juhani-romance-guide.html

@@ -59,7 +59,7 @@
                 </section>
                 
                 <section class="article-section">
-                    <h2 id="Introduction">Introduction</h2>
+                    <h2>Introduction</h2>
 
                     <p>Since I could not find a solid and detailed guide for Juhani's romance anywhere, and many players (I used to be one of them as well) have troubles with triggering Juhani's final romance conversation, I have decided to write a guide myself. Even though there is very little content for Juhani's romance, if you want to experience the very first canon same-gender romance option in BioWare games first hand, this guide is for you.</p>
 
@@ -69,7 +69,7 @@
                 </section>
                 
                 <section class="article-section">
-                    <h2 id="Notes">Important Notes</h2>
+                    <h2>Important Notes</h2>
 
                     <p>First and foremost, since Juhani was written to be a lesbian, <strong>your player character must be female if you want to romance Juhani</strong>. The game activates Juhani's romance ONLY IF your player character is female.</p>
 
@@ -87,7 +87,7 @@
                 </section>
 
                 <section class="article-section">
-                    <h2 id="Walkthrough">Walkthrough</h2>
+                    <h2>Walkthrough</h2>
 
                     <p>There are two paths in Juhani's conversations: <span class="bold-text">History</span> and <span class="bold-text">Personal</span>. The History path explores Juhani's past and will lead to Juhani's personal quest "Threat from Xor", while the Personal path explores Juhani's relationship with the player character and will lead to Juhani's love confession if her romance is active.</p>
 
@@ -95,7 +95,7 @@
 
                     <p>In addition, you can check if Juhani's romance is still active by using KSE: look for Globals > Booleans, and make sure <code class="inline-code">T_JUHANIROM</code> is set to 1.</p>
 
-                    <h3 id="History">History Conversation Path</h3>
+                    <h3>History Conversation Path</h3>
 
                     <p><span class="juhani-history">History #1:</span> This conversation is available once Juhani joins your party, which happens after you collect your first Star Map on Dantooine, and you're tasked by the Jedi Council to search for the Star Forge. You can ask Juhani how did she become a Jedi. After this conversation, the global value of <code class="inline-code">G_JUHANIH_STATE</code> will be set to 1. <a href="https://youtu.be/cmY7dQJH93Y" target="_blank">[YouTube video]</a></p>
 
@@ -124,7 +124,7 @@
                         <li><strong>BUG WARNING:</strong> There is an infamous bug with the Xor quest that once you trigger the quest, even after completing it, you will not be able to encounter any other messengers for your other party members' personal quests, and for Mika Dorin's premium shop on Korriban. The fix for this bug is included in the <a href="https://deadlystream.com/files/file/1258-kotor-1-community-patch/" target="_blank">KOTOR 1 Community Patch</a> and the KotOR 1 Restoration (K1R) mod.</li>
                     </ul>
 
-                    <h3 id="Personal">Personal Conversation Path</h3>
+                    <h3>Personal Conversation Path</h3>
 
                     <p><span class="juhani-personal">Personal #1:</span> Available once Juhani joins your party. She apologizes again for attacking you back on Dantooine. Once you begin this conversation, if &mdash; and ONLY IF &mdash; your player character is female, the global boolean <code class="inline-code">T_JUHANIROM</code> will be set to 1, which means Juhani's romance will become active. After this conversation, the global value of <code class="inline-code">G_JUHANIP_STATE</code> will be set to 1. <a href="https://youtu.be/jzqfXoOvGrw" target="_blank">[YouTube video]</a></p>
 

shrines/starwarskotor/guides/kotor-redeeming-bastila-guide.html

@@ -57,7 +57,7 @@
                 </section>
                 
                 <section class="article-section">
-                    <h2 id="Introduction">Introduction</h2>
+                    <h2>Introduction</h2>
 
                     <p>In <cite>Star Wars: Knights of the Old Republic</cite>, towards the end of the game you will be provided the opportunity to determine which ending you will get, and there will be consequences of your choice there.</p>
 
@@ -71,7 +71,7 @@
                 </section>
                 
                 <section class="article-section">
-                    <h2 id="Mechanics">The Mechanics of Redeeming Bastila</h2>
+                    <h2>The Mechanics of Redeeming Bastila</h2>
 
                     <p>The game uses a point system to determine if you will succeed in redeeming Bastila based on the amount of points you earn throughout the conversations when you face Bastila on the Star Forge. Some dialogue options will earn you points to increase your chance in redeeming Bastila.</p>
 
@@ -84,7 +84,7 @@
                 </section>
 
                 <section class="article-section">
-                    <h2 id="Walkthrough">Dialogue Walkthrough</h2>
+                    <h2>Dialogue Walkthrough</h2>
 
                     <p>There are 4 phases in your conversation with Bastila in the Star Forge, as each phase will end with you and Bastila fight, and Bastila will initiate new dialogue each time you defeat her. There are dialogue options in each phase that will increase your points in your chance to save Bastila.</p>
 

shrines/starwarskotor/guides/kotor-sandral-matale-feud-guide.html

@@ -12,6 +12,7 @@
         <meta property="og:description" content="Walkthrogh of the different ways to resolve the Sandral-Matale Feud quest in Star Wars: Knights of the Old Republic">
 
         <link rel="stylesheet" href="/shrines/starwarskotor/css/style-starwarskotor.css" type="text/css" media="all">
+        <link rel="stylesheet" href="/css/style-toc.css">
         <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
 
         <link rel="apple-touch-icon" sizes="180x180" href="/shrines/starwarskotor/img/kotor-icon.png">
@@ -20,6 +21,7 @@
         <link rel="manifest" href="/assets/favicon/site.webmanifest">
 
         <script src="/shrines/starwarskotor/js/swkotor-components.js" defer></script>
+        <script src="/js/toc.js" defer></script>
 
         <title>Sandral-Matale Feud Ending Guide | Guides | Star Wars: Knights of the Old Republic Shrine | Leilukin's Hub</title>
     </head>
@@ -32,9 +34,11 @@
         </header>
         <nav class="navbar"></nav>
         <main>
-            <!-- <aside class="left-sidebar">
+            <aside class="left-sidebar">
-                Left sidebar content here
+                <div class="sidebar__toc">
-            </aside> -->
+                    <h3 class="sidebar__toc-title">Contents</h3>
+                </div>
+            </aside>
 
             <article>
                 <section class="article-section">
@@ -44,6 +48,12 @@
                         <p>First published on September 22, 2018</p>
                         <p>[This guide is also available on <a href="https://docs.google.com/document/d/1cHed1SQZym-F3_4rynL0BbxfGjUNmIPWANWgL0L9SR8/edit" target="_blank">Google Docs</a>]</p>
                     </div>
+
+                    <details class="toc" role=”doc-toc”>
+                        <summary class="toc-heading">
+                            Table Of Contents
+                        </summary>
+                    </details>
                 </section>
                 
                 <section class="article-section">