MeowcaTheoRange/abtmtr-v4
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use rem for scale instead of px.

Browse source
This commit is contained in:
MeowcaTheoRange 2023-12-21 18:36:57 -06:00
parent 71b81d1e5b
commit 81713b99cc
4 changed files with 16 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
views/projects/item/normalize/index.html
View file

@ -69,8 +69,8 @@
<ul> <ul>
<li> <li>
<code>--base-scale</code> - The defining em-size of the document, in <code>--base-scale</code> - The defining em-size of the document, in
anything but em.<br /> rem.<br />
Format: <code>[size]px (pt, in, cm, etc...)</code> Format: <code>[size]rem</code>
</li> </li>
<li> <li>
<code>--document-width</code> - The width of the document.<br /> <code>--document-width</code> - The width of the document.<br />

7
views/projects/item/normalize/scripts/generator.js
View file

@ -8,8 +8,9 @@ generator.innerHTML = `<h2>Generator</h2>
id="g_base-scale" id="g_base-scale"
type="number" type="number"
style="width: 8ch" style="width: 8ch"
value="16" value="1"
min="8" min="0"
step="0.1"
/> />
</label><br /> </label><br />
<label for="g_document-width">Document width: <label for="g_document-width">Document width:
@ -155,7 +156,7 @@ generatorFields.borderRadius.addEventListener('change', preview);
function generateNormalizeCode() { function generateNormalizeCode() {
return `:root { return `:root {
--base-scale: ${generatorFields.baseScale.value}px; --base-scale: ${generatorFields.baseScale.value}rem;
--document-width: ${generatorFields.documentWidth.value}em; --document-width: ${generatorFields.documentWidth.value}em;
--base-color: ${generatorFields.baseColor.hue.value}, ${generatorFields.baseColor.sat.value}%; --base-color: ${generatorFields.baseColor.hue.value}, ${generatorFields.baseColor.sat.value}%;

15
views/scripts/accessibility.js
View file

@ -34,9 +34,10 @@ function createAccessibilityNodes() {
id="acc-scale" id="acc-scale"
type="number" type="number"
style="width: 8ch" style="width: 8ch"
min="8" min="0"
max="48" max="10"
value="16" value="1"
step="0.1"
/> />
</label><br /> </label><br />
<label for="acc-width">Page width: <label for="acc-width">Page width:
@ -151,10 +152,10 @@ let prevBase; // previous base, for reload check
function initializeChanges(_, loading) { function initializeChanges(_, loading) {
if (window.frameElement == null) createAccessibilityNodes(); if (window.frameElement == null) createAccessibilityNodes();
let scale = window.localStorage.getItem("acc-scale"); let scale = window.localStorage.getItem("acc-scale-v2");
if (scale == null) { if (scale == null) {
window.localStorage.setItem("acc-scale", 16); window.localStorage.setItem("acc-scale-v2", 1);
scale = window.localStorage.getItem("acc-scale"); scale = window.localStorage.getItem("acc-scale-v2");
} }
let width = window.localStorage.getItem("acc-width"); let width = window.localStorage.getItem("acc-width");
if (width == null) { if (width == null) {
@ -212,7 +213,7 @@ function initializeChanges(_, loading) {
} }
function changeScale(scale) { function changeScale(scale) {
document.documentElement.style.setProperty("--base-scale", scale + "px"); document.documentElement.style.setProperty("--base-scale", scale + "rem");
} }
function changeWidth(width) { function changeWidth(width) {

4
views/styles/normal.css
View file

@ -35,8 +35,8 @@
/* Document form */ /* Document form */
:root { :root {
/* The defining em-size of the document, in anything but em. */ /* The defining em-size of the document, in rem. */
--base-scale: 16px; --base-scale: 1rem;
/* The width of the document, in em. */ /* The width of the document, in em. */
--document-width: 50em; --document-width: 50em;