From dd8c404cae33f73664fb288cb1a2e6f07c9a4389 Mon Sep 17 00:00:00 2001
From: Ruben <sneexy@disroot.org>
Date: Tue, 1 Oct 2024 00:52:27 -0500
Subject: [PATCH] add table of contents button

---
 fedi-guide/index.html | 12 ++++++
 index.html            | 30 +++++++++++++++
 script.js             | 20 ++++++++++
 style.css             | 86 +++++++++++++++++++++++++++++++++++++++++--
 4 files changed, 145 insertions(+), 3 deletions(-)

diff --git a/fedi-guide/index.html b/fedi-guide/index.html
index 7c90901..a4378c4 100644
--- a/fedi-guide/index.html
+++ b/fedi-guide/index.html
@@ -43,6 +43,18 @@
     <p aria-hidden="true" class="nav-base nav-systray"><i class="ph-bold ph-bell"></i> <i class="ph-bold ph-speaker-high"></i> <i class="ph-bold ph-network"></i> <i class="ph-bold ph-battery-full"></i> <i class="ph-bold ph-power"></i></p>
 </div>
 
+<!-- dedicated table of contents button -->
+<div class="toc">
+    <button onclick="tocDropdown()" class="toc-button" alt="Table of Contents" title="Table of Contents"><i style="pointer-events:none;" class="ph-bold ph-list-bullets"></i></button>
+    <div id="toc-dropdown" class="toc-content">
+        <ul>
+            <li>
+                <a href="#fedi-guide">welcome to... ruben's opinionated fediverse guide!</a>
+            </li>
+        </ul>
+    </div>
+</div>
+
 <!-- fedi guide introduction -->
 <div id="fedi-guide" class="terminal">
     <div aria-hidden="true" class="term-titlebar">
diff --git a/index.html b/index.html
index 2bba427..6922a75 100644
--- a/index.html
+++ b/index.html
@@ -44,6 +44,36 @@
     <p aria-hidden="true" class="nav-base nav-systray"><i class="ph-bold ph-bell"></i> <i class="ph-bold ph-speaker-high"></i> <i class="ph-bold ph-network"></i> <i class="ph-bold ph-battery-full"></i> <i class="ph-bold ph-power"></i></p>
 </div>
 
+<!-- dedicated table of contents button -->
+<div class="toc">
+    <button onclick="tocDropdown()" class="toc-button" alt="Table of Contents" title="Table of Contents"><i style="pointer-events:none;" class="ph-bold ph-list-bullets"></i></button>
+    <div id="toc-dropdown" class="toc-content">
+        <ul>
+            <li>
+                <a href="#sneexy">hey, i'm ruben!</a>
+            </li>
+            <li>
+                <a href="#about-me">about me</a>
+            </li>
+            <li>
+                <a href="#socials-and-contacts">socials n' contacts</a>
+            </li>
+            <li>
+                <a href="#fun-facts">"fun" facts</a>
+            </li>
+            <li>
+                <a href="#quotes">quotes</a>
+            </li>
+            <li>
+                <a href="#buttons">buttons</a>
+            </li>
+            <li>
+                <a href="#css">custom css</a>
+            </li>
+        </ul>
+    </div>
+</div>
+
 <!-- simple introduction -->
 <div id="sneexy" class="terminal">
     <!-- theres probably a much better way to do this instead of manually
diff --git a/script.js b/script.js
index 3720462..f11684c 100644
--- a/script.js
+++ b/script.js
@@ -19,6 +19,26 @@ window.onclick = function(event) {
     }
 } 
 
+// Same snippet as above, but for the Table of Contents of button.
+function tocDropdown() {
+    document.getElementById("toc-dropdown").classList.toggle("show-dropdown");
+}
+  
+// Close the dropdown menu if the user clicks outside of it
+window.onclick = function(event) {
+    if (!event.target.matches('.toc-button')) {
+        var dropdowns = document.getElementsByClassName("toc-content");
+        var i;
+        for (i = 0; i < dropdowns.length; i++) {
+            var openDropdown = dropdowns[i];
+            if (openDropdown.classList.contains('show-dropdown')) {
+                openDropdown.classList.remove('show-dropdown');
+            }
+        }
+    }
+}
+// TODO: Replace the above(s) with CSS?
+
 // snippet that copies the html for my button(s)
 function copyButtonRegular() {
     navigator.clipboard.writeText ('<a href="https://sneexy.pages.gay"><img src="https://sneexy.pages.gay/assets/buttons/sneexy.png" alt="Sneexy" title="Sneexy"></a>');
diff --git a/style.css b/style.css
index 71c4c98..d90c481 100644
--- a/style.css
+++ b/style.css
@@ -189,7 +189,7 @@ body {
         text-decoration: underline !important;
     }
     .nav-systray {
-        background-color: var(--crust);
+        background-color: var(--base);
         color: var(--text);
         margin-left: auto !important;
         margin-right: .5em !important;
@@ -206,6 +206,78 @@ body {
     }
 }
 
+/* table of contents button */
+
+.toc {
+    display: flex;
+    flex-direction: row;
+    position: fixed;
+    top: 2.5rem;
+    z-index: 10;
+    max-width: 10rem;
+    min-height: 1.8em !important;
+    max-height: 1.8em !important;
+    margin-top: .5em;
+    float: left;
+
+    font-family: "Lexend Deca";
+    align-content: center;
+    vertical-align: middle;
+    color: var(--text);
+
+    .toc-button {
+        padding: 0px .4em !important;
+        border-radius: 8px;
+        border: .1rem solid var(--green);
+        box-shadow: rgba(0, 0, 0, 0.35) 0px 3px 15px;
+        max-width: fit-content;
+        align-content: center;
+
+        background-color: var(--base);
+        text-decoration: unset !important;
+        color: var(--green);
+        margin-left: .5em !important;
+    }
+
+    .toc-content {
+        display: none;
+        position: absolute;
+        margin: 2.2em 0px 0px .4em !important;
+        background-color: var(--base);
+        min-width: 10em;
+        width: 30rem;
+        border-radius: 8px;
+        box-shadow: rgba(0, 0, 0, 0.35) 0px 3px 15px;
+        z-index: 1;
+        
+        ul li a {
+            display: inline-flex;
+            align-items: center;
+            color: var(--text);
+            padding: .2em .5em;
+            text-decoration: none;
+        }
+        
+        ul li a:hover {
+            color: var(--green);
+            text-decoration: underline;
+        }
+
+        ul li {
+            margin-left: -.5em;
+            padding-bottom: unset !important;
+        }
+        
+        i {
+            padding-right: .4em;
+        }
+    }
+
+    .show-dropdown {
+        display: block !important;
+    }
+}
+
 /* text formatting and config stuff
 font-family and <p> is set under .terminal */
 
@@ -322,8 +394,16 @@ details.styled[open] {
 
 /* padding above first terminal */
 
-.terminal:nth-child(2) {
-    margin-top: 3.8em;
+body:has(div.toc) {
+    .terminal:nth-child(3) {
+        margin-top: 4.8em;
+    }
+}
+
+body:not(:has(div.toc)) {
+    .terminal:nth-child(2) {
+        margin-top: 3.8em;
+    }
 }
 
 /* footer/credits */