krispire/spsays-training
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: font size slider in mobile

Browse Source
This commit is contained in:
gosangam
2026-04-18 13:35:42 +05:30
parent 5a2e556487
commit 67b9ab6b16
1 changed files with 50 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/globals.css
+50 -1
View File
@@ -144,30 +144,79 @@
font-family: Georgia, "Times New Roman", "Noto Serif", serif; font-family: Georgia, "Times New Roman", "Noto Serif", serif;
} }
/* Font size scaling — zoom on main + aside so rem-based Tailwind classes scale */ /*
* Font size scaling — uses zoom on main + aside.
* zoom is supported in all major browsers including iOS Safari (Apple invented it).
* -webkit-text-size-adjust prevents iOS from auto-scaling text in landscape.
*/
.reading-fs-xs main, .reading-fs-xs main,
.reading-fs-xs aside { .reading-fs-xs aside {
zoom: 0.8; zoom: 0.8;
-webkit-text-size-adjust: 80%;
} }
.reading-fs-sm main, .reading-fs-sm main,
.reading-fs-sm aside { .reading-fs-sm aside {
zoom: 0.9; zoom: 0.9;
-webkit-text-size-adjust: 90%;
} }
.reading-fs-base main, .reading-fs-base main,
.reading-fs-base aside { .reading-fs-base aside {
zoom: 1; zoom: 1;
-webkit-text-size-adjust: 100%;
} }
.reading-fs-lg main, .reading-fs-lg main,
.reading-fs-lg aside { .reading-fs-lg aside {
zoom: 1.12; zoom: 1.12;
-webkit-text-size-adjust: 112%;
} }
.reading-fs-xl main, .reading-fs-xl main,
.reading-fs-xl aside { .reading-fs-xl aside {
zoom: 1.25; zoom: 1.25;
-webkit-text-size-adjust: 125%;
} }
.reading-fs-2xl main, .reading-fs-2xl main,
.reading-fs-2xl aside { .reading-fs-2xl aside {
zoom: 1.4; zoom: 1.4;
-webkit-text-size-adjust: 140%;
}
/* Fallback for browsers that don't support zoom (Firefox < 126) */
@supports not (zoom: 1.1) {
.reading-fs-xs main,
.reading-fs-xs aside {
transform: scale(0.8);
transform-origin: top left;
width: 125%;
}
.reading-fs-sm main,
.reading-fs-sm aside {
transform: scale(0.9);
transform-origin: top left;
width: 111.11%;
}
.reading-fs-base main,
.reading-fs-base aside {
transform: none;
width: auto;
}
.reading-fs-lg main,
.reading-fs-lg aside {
transform: scale(1.12);
transform-origin: top left;
width: 89.28%;
}
.reading-fs-xl main,
.reading-fs-xl aside {
transform: scale(1.25);
transform-origin: top left;
width: 80%;
}
.reading-fs-2xl main,
.reading-fs-2xl aside {
transform: scale(1.4);
transform-origin: top left;
width: 71.43%;
}
} }
/* Justified text — only main content */ /* Justified text — only main content */