✨ feat: add quick navigation buttons

💄 style(dark): change inline code background

♻️ refactor: simplify comment system logic

sass/main.scss

@@ -57,6 +57,7 @@
     --bg-0: #f0f0f0;
     --bg-1: #e7e7e7;
     --bg-2: #fefefe;
+    --bg-3: #d8dcdd;
     --hover-color: white;
     --primary-color: #087E96;
     --primary-color-dark: #10668b;
@@ -75,8 +76,9 @@
 [data-theme='dark'] {
     --background-color: #1f1f1f;
     --bg-0: #2f2f2f;
-    --bg-1: #4c4d4d;
+    --bg-1: #3c3c3c;
     --bg-2: #171717;
+    --bg-3: #535555;
     --hover-color: black;
     --primary-color: #91e0ee;
     --primary-color-dark: #69bace;

sass/parts/_misc.scss

@@ -148,3 +148,49 @@ a:not(.no-hover-padding):hover::before {
     border-radius: 10px;
     text-align: center;
 }
+
+#button-container {
+    position: fixed;
+    right: 2rem;
+    bottom: 2rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+
+    #comments-button, #top-button {
+        background-color: var(--bg-1);
+        padding: 0.4rem;
+        height: 1rem;
+        width: 1rem;
+        text-align: center;
+        border-radius: 50%;
+        border: none;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        &:hover {
+            background-color: var(--bg-3);
+
+            svg {
+                fill: var(--primary-color);
+            }
+
+            &::before {
+            background-color: transparent;
+            }
+        }
+
+        svg {
+            width: 1rem;
+            height: 1rem;
+            fill: var(--text-color);
+        }
+    }
+
+    @media (max-width: 700px) {
+        #comments-button, #top-button {
+            display: none;
+        }
+    }
+}