From ef10703db7607d457997b84c7c1b00ee27518efa Mon Sep 17 00:00:00 2001 From: Rohan Kumar Date: Wed, 24 May 2023 13:52:18 -0700 Subject: [PATCH] Use the default font-size 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. --- assets/css/dark.css | 2 +- assets/css/main.css | 14 +------------- 2 files changed, 2 insertions(+), 14 deletions(-) diff --git a/assets/css/dark.css b/assets/css/dark.css index c836dbe..b8becd9 100644 --- a/assets/css/dark.css +++ b/assets/css/dark.css @@ -29,7 +29,7 @@ } a:visited { - color: #ffd8ff; + color: #ffd3ff; } /* Small text needs higher contrast. diff --git a/assets/css/main.css b/assets/css/main.css index c73d0c8..cfca6fe 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -65,18 +65,6 @@ html { /* This should not take effect on printouts, to save paper. */ @media screen { 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 - * , , , 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 * link activation on tablets, and is a common practice that users are * more used to for articles. */ @@ -220,6 +208,7 @@ html { /* A11y: If we have a list of disclosure widgets, we need some * non-interactive space on the screen that's safe to tap. */ details, + fieldset, form { contain: inline-size layout; margin: .5em 0; @@ -463,7 +452,6 @@ h1 { * precedence over being touch-friendly. */ @media (max-width: 272px) { body { - font-size: 100%; -webkit-hyphens: auto; hyphens: auto; padding: 0 8px;