Add configurable text size

src/app.css

@@ -1065,7 +1065,7 @@ body:has(.status-deck) .media-post-link {
 .szh-menu {
   padding: 8px 0;
   margin: 0;
-  font-size: 16px;
+  font-size: var(--text-size);
   background-color: var(--bg-color);
   border: 1px solid var(--outline-color);
   border-radius: 8px;

src/app.jsx

@@ -74,6 +74,13 @@ function App() {
         .querySelector('meta[name="color-scheme"]')
         .setAttribute('content', theme === 'auto' ? 'dark light' : theme);
     }
+    const textSize = store.local.get('textSize');
+    if (textSize) {
+      document.documentElement.style.setProperty(
+        '--text-size',
+        `${textSize}px`,
+      );
+    }
   }, []);
 
   useEffect(() => {

src/index.css

@@ -2,6 +2,7 @@
 @custom-media --viewport-medium (min-width: 40em);
 
 :root {
+  --text-size: 16px;
   --main-width: 40em;
   text-size-adjust: none;
   --hairline-width: 1px;
@@ -90,7 +91,7 @@ html {
 
 body {
   font-family: ui-rounded, system-ui;
-  font-size: 16px;
+  font-size: var(--text-size);
   word-wrap: break-word;
   overflow-wrap: break-word;
 }

src/pages/settings.css

@@ -105,3 +105,12 @@
 #settings-container .radio-group label:has(input:checked) input:checked + span {
   color: inherit;
 }
+
+#settings-container .range-group {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+#settings-container .range-group input[type='range'] {
+  flex-grow: 1;
+}

src/pages/settings.jsx

@@ -11,6 +11,9 @@ import localeCode2Text from '../utils/localeCode2Text';
 import states from '../utils/states';
 import store from '../utils/store';
 
+const DEFAULT_TEXT_SIZE = 16;
+const TEXT_SIZES = [16, 17, 18, 19, 20];
+
 function Settings({ onClose }) {
   const snapStates = useSnapshot(states);
   const currentTheme = store.local.get('theme') || 'auto';
@@ -19,6 +22,7 @@ function Settings({ onClose }) {
     snapStates.settings.contentTranslationTargetLanguage || null;
   const systemTargetLanguage = getTranslateTargetLanguage();
   const systemTargetLanguageText = localeCode2Text(systemTargetLanguage);
+  const currentTextSize = store.local.get('textSize') || DEFAULT_TEXT_SIZE;
 
   return (
     <div id="settings-container" class="sheet" tabIndex="-1">
@@ -96,6 +100,42 @@ function Settings({ onClose }) {
                 </form>
               </div>
             </li>
+            <li>
+              <div>
+                <label>Text size</label>
+              </div>
+              <div class="range-group">
+                <span style={{ fontSize: TEXT_SIZES[0] }}>A</span>{' '}
+                <input
+                  type="range"
+                  min={TEXT_SIZES[0]}
+                  max={TEXT_SIZES[TEXT_SIZES.length - 1]}
+                  step="1"
+                  value={currentTextSize}
+                  list="sizes"
+                  onChange={(e) => {
+                    const value = parseInt(e.target.value, 10);
+                    const html = document.documentElement;
+                    // set CSS variable
+                    html.style.setProperty('--text-size', `${value}px`);
+                    // save to local storage
+                    if (value === DEFAULT_TEXT_SIZE) {
+                      store.local.del('textSize');
+                    } else {
+                      store.local.set('textSize', e.target.value);
+                    }
+                  }}
+                />{' '}
+                <span style={{ fontSize: TEXT_SIZES[TEXT_SIZES.length - 1] }}>
+                  A
+                </span>
+                <datalist id="sizes">
+                  {TEXT_SIZES.map((size) => (
+                    <option value={size} />
+                  ))}
+                </datalist>
+              </div>
+            </li>
           </ul>
         </section>
         <h3>Experiments</h3>

src/pages/status.css

@@ -17,7 +17,7 @@
 }
 
 .hero-heading {
-  font-size: 16px;
+  font-size: var(--text-size);
   display: inline-block;
 }
 .hero-heading .icon {