From 81713b99ccee641d2102f0d0995e95d95a2ed8d9 Mon Sep 17 00:00:00 2001
From: MeowcaTheoRange <me@abtmtr.link>
Date: Thu, 21 Dec 2023 18:36:57 -0600
Subject: [PATCH] Use rem for scale instead of px.

---
 views/projects/item/normalize/index.html          |  4 ++--
 .../projects/item/normalize/scripts/generator.js  |  7 ++++---
 views/scripts/accessibility.js                    | 15 ++++++++-------
 views/styles/normal.css                           |  4 ++--
 4 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/views/projects/item/normalize/index.html b/views/projects/item/normalize/index.html
index a300bcf..7362ec8 100644
--- a/views/projects/item/normalize/index.html
+++ b/views/projects/item/normalize/index.html
@@ -69,8 +69,8 @@
         <ul>
           <li>
             <code>--base-scale</code> - The defining em-size of the document, in
-            anything but em.<br />
-            Format: <code>[size]px (pt, in, cm, etc...)</code>
+            rem.<br />
+            Format: <code>[size]rem</code>
           </li>
           <li>
             <code>--document-width</code> - The width of the document.<br />
diff --git a/views/projects/item/normalize/scripts/generator.js b/views/projects/item/normalize/scripts/generator.js
index 539c1cf..853c4be 100644
--- a/views/projects/item/normalize/scripts/generator.js
+++ b/views/projects/item/normalize/scripts/generator.js
@@ -8,8 +8,9 @@ generator.innerHTML = `<h2>Generator</h2>
       id="g_base-scale"
       type="number"
       style="width: 8ch"
-      value="16"
-      min="8"
+      value="1"
+      min="0"
+      step="0.1"
     />
   </label><br />
   <label for="g_document-width">Document width:
@@ -155,7 +156,7 @@ generatorFields.borderRadius.addEventListener('change', preview);
 
 function generateNormalizeCode() {
   return `:root {
-    --base-scale: ${generatorFields.baseScale.value}px;
+    --base-scale: ${generatorFields.baseScale.value}rem;
     --document-width: ${generatorFields.documentWidth.value}em;
 
     --base-color: ${generatorFields.baseColor.hue.value}, ${generatorFields.baseColor.sat.value}%;
diff --git a/views/scripts/accessibility.js b/views/scripts/accessibility.js
index c8b2fae..44820dd 100755
--- a/views/scripts/accessibility.js
+++ b/views/scripts/accessibility.js
@@ -34,9 +34,10 @@ function createAccessibilityNodes() {
         id="acc-scale"
         type="number"
         style="width: 8ch"
-        min="8"
-        max="48"
-        value="16"
+        min="0"
+        max="10"
+        value="1"
+        step="0.1"
       />
     </label><br />
     <label for="acc-width">Page width:
@@ -151,10 +152,10 @@ let prevBase; // previous base, for reload check
 function initializeChanges(_, loading) {
   if (window.frameElement == null) createAccessibilityNodes();
 
-  let scale = window.localStorage.getItem("acc-scale");
+  let scale = window.localStorage.getItem("acc-scale-v2");
   if (scale == null) {
-    window.localStorage.setItem("acc-scale", 16);
-    scale = window.localStorage.getItem("acc-scale");
+    window.localStorage.setItem("acc-scale-v2", 1);
+    scale = window.localStorage.getItem("acc-scale-v2");
   }
   let width = window.localStorage.getItem("acc-width");
   if (width == null) {
@@ -212,7 +213,7 @@ function initializeChanges(_, loading) {
 }
 
 function changeScale(scale) {
-  document.documentElement.style.setProperty("--base-scale", scale + "px");
+  document.documentElement.style.setProperty("--base-scale", scale + "rem");
 }
 
 function changeWidth(width) {
diff --git a/views/styles/normal.css b/views/styles/normal.css
index 9b6eabd..1c6a4bd 100755
--- a/views/styles/normal.css
+++ b/views/styles/normal.css
@@ -35,8 +35,8 @@
 /* Document form */
 
 :root {
-  /* The defining em-size of the document, in anything but em. */
-  --base-scale: 16px;
+  /* The defining em-size of the document, in rem. */
+  --base-scale: 1rem;
   /* The width of the document, in em. */
   --document-width: 50em;