1 files changed, 126 insertions, 0 deletions
diff --git a/sass/parts/_quick_navigation_buttons.scss b/sass/parts/_quick_navigation_buttons.scss
new file mode 100644
index 0000000..768592f
--- /dev/null
+++ b/sass/parts/_quick_navigation_buttons.scss
@@ -0,0 +1,126 @@
+#button-container {
+    display: flex;
+    position: fixed;
+    right: 2rem;
+    bottom: 2rem;
+    flex-direction: column;
+    gap: 0.6rem;
+    z-index: 2; // Above "copy-code" buttons. Important for the ToC.
+
+    #toc-button,
+    #comments-button,
+    #top-button {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 2;
+        cursor: pointer;
+        border: none;
+        border-radius: 50%;
+        background-color: var(--bg-1);
+        padding: 0.4rem;
+        width: 1rem;
+        height: 1rem;
+        text-align: center;
+
+        &:hover {
+            background-color: var(--bg-3);
+
+            svg {
+                fill: var(--primary-color);
+            }
+
+            &::before {
+                background-color: transparent;
+            }
+        }
+
+        svg {
+            fill: var(--text-color);
+            width: 1rem;
+            height: 1rem;
+        }
+    }
+
+    #toc-floating-container {
+
+        $padding-vertical: 0.7rem;
+        $padding-horizontal: 1rem;
+
+        #toc-button {
+            position: relative;
+            z-index: 2;
+        }
+
+        .toc-container {
+            margin: 0;
+            margin-top: $padding-vertical;
+            max-width: 80vw;
+        }
+
+        .toc-content {
+            display: none;
+            position: absolute;
+            right: 0;
+            bottom: 100%;
+            z-index: 2;
+            margin-block-end: $padding-vertical;
+            box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
+            border: 1px solid var(--divider-color);
+            border-radius: 5px;
+            background-color: var(--background-color);
+            padding-inline-end: $padding-horizontal;
+            max-height: 70vh;
+            overflow-y: auto;
+            font-size: 0.8rem;
+            text-align: start;
+            white-space: nowrap; // Prevents wrapping, allowing content to define width.
+
+            ul {
+                padding-inline-start: $padding-horizontal;
+                list-style: none;
+            }
+        }
+
+        .toggle {
+            display: none;
+
+            &:checked {
+
+                + .overlay,
+                + .overlay + #toc-button + .toc-content {
+                    display: block;
+                }
+
+                + .overlay + #toc-button svg {
+                    fill: var(--primary-color); // Show the ToC icon as toggled.
+                }
+            }
+        }
+
+        .overlay {
+            display: none;
+            position: fixed;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            opacity: 40%;
+            z-index: 1; // Lower than the Table of Contents
+            background: var(--background-color);
+        }
+
+    }
+}
+
+@media (max-width: 700px) {
+    #button-container {
+        display: none !important;
+    }
+}
+
+@media print {
+    #button-container {
+        display: none;
+    }
+}