fmaury/seirdy.one
1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-11-23 21:02:09 +00:00
Code Issues Projects Releases Wiki Activity

Use the default font-size

Browse source 
Now that more mobile browsers support text zoom, I don't need to worry
about font size as much. Moreover, iOS and Android support a zoomed mode
that makes all tap targets and text larger. This mode made my site's
larger text uncomfortably larger than other sites. On Android, this is
the "Display size" setting; on iOS, this is the "display zoom" setting
under "Display and Brightness" section.

This commit switches everything back to the browser's default font
sizes to better accomodate non-default zoom levels and display zoom
settings.
This commit is contained in:
Rohan Kumar 2023-05-24 13:52:18 -07:00
parent eb52398dd3
commit ef10703db7
No known key found for this signature in database
GPG key ID: 1E892DB2A5F84479
2 changed files with 2 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assets/css/dark.css
View file

@ -29,7 +29,7 @@
} }
a:visited { a:visited {
color: #ffd8ff; color: #ffd3ff;
} }
/* Small text needs higher contrast. /* Small text needs higher contrast.

14
assets/css/main.css
View file

@ -65,18 +65,6 @@ html {
/* This should not take effect on printouts, to save paper. */ /* This should not take effect on printouts, to save paper. */
@media screen { @media screen {
body { body {
/* Default font sizes are one-size-fits-all; they're optimized for a
* wide variety of complex pages. For single-column websites like
* mine, it's ideal to bump it up ever so slightly. This also makes
* <sup>, <sub>, <small>, etc. large enough to have decent contrast
* with minimal adjustment, and makes tap-targets larger.
* Only do this on screen, since printouts already improve legibility
* and cost paper + ink.
* 109.375% is the minimum required to get text to 17.5 CSS pixels and
* superscripts past 14.75 px with most default stylesheets. At that
* size, my dark color palette has sufficient contrast.*/
font-size: 109.375%;
/* Aligning to the center with space on both sides prevents accidental /* Aligning to the center with space on both sides prevents accidental
* link activation on tablets, and is a common practice that users are * link activation on tablets, and is a common practice that users are
* more used to for articles. */ * more used to for articles. */
@ -220,6 +208,7 @@ html {
/* A11y: If we have a list of disclosure widgets, we need some /* A11y: If we have a list of disclosure widgets, we need some
* non-interactive space on the screen that's safe to tap. */ * non-interactive space on the screen that's safe to tap. */
details, details,
fieldset,
form { form {
contain: inline-size layout; contain: inline-size layout;
margin: .5em 0; margin: .5em 0;
@ -463,7 +452,6 @@ h1 {
* precedence over being touch-friendly. */ * precedence over being touch-friendly. */
@media (max-width: 272px) { @media (max-width: 272px) {
body { body {
font-size: 100%;
-webkit-hyphens: auto; -webkit-hyphens: auto;
hyphens: auto; hyphens: auto;
padding: 0 8px; padding: 0 8px;