feat: add settings page and text altering options

10 files changed, 114 insertions, 12 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();
+})();
diff --git a/content/settings.md b/content/settings.md
new file mode 100644
index 00000000..deee25b8
--- /dev/null
+++ b/content/settings.md
@@ -0,0 +1,4 @@
+---
+title: 设置
+layout: settings
+---
diff --git a/i18n/en.yml b/i18n/en.yml
index 9f5937e2..f9f0e045 100644
--- a/i18n/en.yml
+++ b/i18n/en.yml
@@ -13,8 +13,8 @@ searchInstruction: '⌘+K to search'
 postNav:
   latest: 'Latest'
   categories: 'Categories'
-  tags: 'Tags'
   featured: 'Featured'
+  settings: 'Settings'
 moreLinks:
   posts: 'All Posts'
   cards: 'All Cards'
@@ -35,3 +35,8 @@ termFilterButton:
 homePageQuote:
   content: 'To labor in the arts for any reason other than **love** is prostitution.'
   source: '——《The War of Art》'
+settings:
+  title: Settings
+  fontSize: Font Size
+  loremIpsum: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+  sampleText: Aa
diff --git a/i18n/zh.yml b/i18n/zh.yml
index 9150bdaa..f20b61d0 100644
--- a/i18n/zh.yml
+++ b/i18n/zh.yml
@@ -14,6 +14,7 @@ postNav:
   latest: '最新'
   categories: '搜寻'
   featured: '精选'
+  settings: '设置'
 cards: 最近在学
 moreLinks:
   posts: '所有文章'
@@ -35,3 +36,7 @@ termFilterButton:
 homePageQuote:
   content: '除了**爱**，出于任何其他原因而从事艺术创作，都是**卖淫**。'
   source: '——《[一生之敌](/library/2025/一生之敌/)》'
+settings:
+  fontSize: 字体大小
+  loremIpsum: 对我个人而言，科学和人文谁更有意义不仅仅是一个重大的事件，还可能会改变我的人生。 我们都知道，只要有意义，那么就必须慎重考虑。问题的关键究竟为何？ 在这种不可避免的冲突下，我们必须解决这个问题。 这样看来，我们一般认为，抓住了问题的关键，其他一切则会迎刃而解。从这个角度来看，生活中，若科学和人文谁更有意义出现了，我们就不得不考虑它出现了的事实。 塞内加曾经提到过，勇气通往天堂，怯懦通往地狱。这句话看似简单，但其中的阴郁不禁让人深思。所谓科学和人文谁更有意义，关键是科学和人文谁更有意义需要如何写。 那么，我们一般认为，抓住了问题的关键，其他一切则会迎刃而解。
+  sampleText: 字。
diff --git a/layouts/_partials/home/home-nav.html b/layouts/_partials/home/home-nav.html
index d6e8960e..32d32644 100644
--- a/layouts/_partials/home/home-nav.html
+++ b/layouts/_partials/home/home-nav.html
@@ -19,6 +19,11 @@
                     (strings.HasPrefix $.Page.RelPermalink "/categories/")
                     (strings.HasPrefix $.Page.RelPermalink "/tags/"))
             ) }}
+            {{ partial "home/home-nav-item" (dict
+                "text" (T "postNav.settings")
+                "link" "settings"
+                "active" (strings.HasPrefix $.Page.RelPermalink "/settings/")
+            ) }}
         {{ end }}
 
         <li class="absolute right-0 dark:invert">
diff --git a/layouts/_partials/scripts.html b/layouts/_partials/scripts.html
index 7c000323..414b4216 100644
--- a/layouts/_partials/scripts.html
+++ b/layouts/_partials/scripts.html
@@ -1,3 +1,11 @@
+{{ with resources.Get "js/settings.js" }}
+<script>{{ .Content | safeJS }}</script>
+{{ end }}
+
+{{ with resources.Get "js/tooltip.js" }}
+<script>{{ .Content | safeJS }}</script>
+{{ end }}
+
 {{- range .Site.Params.externalJSFiles }}
   <script src="{{ $.Site.Params.staticPrefix }}{{ . | relURL }}"></script>
 {{- end }}
@@ -10,7 +18,3 @@
 {{ if .File }}
     {{ partial "scripts/action-menu-js" (.File.UniqueID | urlize) }}
 {{ end }}
-
-{{ with resources.Get "js/tooltip.js" }}
-<script>{{ .Content | safeJS }}</script>
-{{ end }}
diff --git a/layouts/settings.html b/layouts/settings.html
new file mode 100644
index 00000000..862fd64e
--- /dev/null
+++ b/layouts/settings.html
@@ -0,0 +1,20 @@
+{{ define "main" }}
+    <article id="settings">
+        {{ partial "header" . }}
+        {{ partial "home/home-nav" . }}
+
+        <h2>{{ T "settings.fontSize" . }}</h2>
+        <section class="shadow">
+            <div id="text-alter-buttons" class="grid grid-cols-3">
+                {{ $buttonClass := "font-extrabold bg-neutral-100 hover:bg-neutral-200/50 rounded py-5" }}
+                <button data-text-size="small" class="{{ $buttonClass }} text-sm md:text-base">{{ T "settings.sampleText" }}</button>
+                <button data-text-size="medium" class="{{ $buttonClass }} text-base md:text-lg">{{ T "settings.sampleText" }}</button>
+                <button data-text-size="large" class="{{ $buttonClass }} text-lg md:text-xl">{{ T "settings.sampleText" }}</button>
+            </div>
+            <div class="leading-relaxed bg-neutral-200/50 py-1 px-4 rounded">
+                <p class="markdown-body">{{ T "settings.loremIpsum" . }}</p>
+            </div>
+        </section>
+    </article>
+{{ partial "footer.html" . }}
+{{ end }}
diff --git a/uno.config.js b/uno.config.js
index 959514bd..ad8f2f0b 100644
--- a/uno.config.js
+++ b/uno.config.js
@@ -44,7 +44,7 @@ export default defineConfig({
   },
   safelist: [
     'text-sm', 'text-md', 'text-lg', 'text-xl', 'text-2xl', 'text-3xl', 'text-4xl', 'text-5xl',
-    'text-base!',
+    'text-base!', 'md:text-size-lg', 'md:text-size-xl', 'md:text-size-2xl',
 
     'animate-heart-beat', 'animate-fade-in',
     ...'absolute bottom-full left-1/2 transform -translate-x-1/2 translate-y-1 bg-black/80 text-white px-2.5 py-1.5 rounded text-xs whitespace-nowrap opacity-0 invisible transition-all duration-300 pointer-events-none mb-2 z-1000 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 dark:bg-white/90 dark:text-black'.split(' '),