feat: add settings page and text altering options

3 files changed, 65 insertions, 6 deletions

diff --git a/assets/css/_markdown.scss b/assets/css/_markdown.scss
index f7f4fbb8..e66ad2c1 100644
--- a/assets/css/_markdown.scss
+++ b/assets/css/_markdown.scss
@@ -1,5 +1,4 @@
 // Variables (can be moved to a separate variables file if needed)
-$font-size: var(--content-font-size);
 $link-color: var(--link-color);
 $secondary-text-color: var(--secondary-text-color);
 $border-color: var(--border-color);
@@ -9,7 +8,6 @@ $em-text-color: #889E73;
 
 // Main styles
 .markdown-body {
-  font-size: $font-size;
   max-width: 100%;
 
   // Nested styles for child elements
diff --git a/assets/css/utils/_variables.scss b/assets/css/utils/_variables.scss
index 4fd7a13e..1d70cd7a 100644
--- a/assets/css/utils/_variables.scss
+++ b/assets/css/utils/_variables.scss
@@ -11,10 +11,6 @@
 
     /* fonts */
     --serif-font-family: "Noto Serif", "Noto Serif SC", serif;
-    --content-font-size: 16px;
-    @media screen and (min-width: 768px) {
-        --content-font-size: 20px;
-    }
 
     --page-width: 650px;
     --page-margin-y: 5rem;
diff --git a/assets/js/settings.js b/assets/js/settings.js
new file mode 100644
index 00000000..08e7a1de
--- /dev/null
+++ b/assets/js/settings.js
@@ -0,0 +1,65 @@
+(() => {
+  /**
+   * ===========
+   * Font Size
+   * ===========
+   */
+
+   const setFontSize = (size) => {
+     if (size) localStorage.setItem('fontSize', size);
+     const fontSizeSelected = size || localStorage.getItem('fontSize') || 'medium';
+
+     const markdownBodies = document.querySelectorAll('.markdown-body');
+
+     const fontSizeClass = {
+       'small': ['text-size-sm', 'md:text-size-base'],
+       'medium': ['text-size-lg', 'md:text-size-xl'],
+       'large': ['text-size-xl', 'md:text-size-2xl']
+     }
+
+     markdownBodies.forEach((body) => {
+       // remove existing font size classes
+       body.classList.remove(...fontSizeClass['small'],
+         ...fontSizeClass['medium'],
+         ...fontSizeClass['large'])
+       // add required font classes
+       body.classList.add(...fontSizeClass[fontSizeSelected])
+     });
+   }
+   setFontSize();
+
+   /**
+    * ===========================
+    * Initialize Settings Page
+    * ===========================
+    */
+
+    // return if this is not the settings page
+    if (!document.getElementById('settings')) return;
+
+    const initializeSettingsPage = () => {
+      // initialize text altering buttons
+      function initTextAlterButtons() {
+        const textAlterButtons = document.querySelectorAll('#text-alter-buttons button');
+        textAlterButtons.forEach(button => {
+          // highlight selected button
+          if (button.dataset.textSize === localStorage.getItem('fontSize')) {
+            button.classList.add('bg-neutral-200/50');
+          }
+
+          // switch font size when clicked
+          button.addEventListener('click', () => {
+            setFontSize(button.dataset.textSize);
+            // highlight selected button
+            textAlterButtons.forEach(btn => btn.classList.remove('bg-neutral-200/50'));
+            button.classList.add('bg-neutral-200/50');
+          });
+        });
+      }
+      initTextAlterButtons()
+
+      //...
+    };
+
+    initializeSettingsPage();
+})();