~seirdy/seirdy.one

ef10703db7607d457997b84c7c1b00ee27518efa — Rohan Kumar 10 months ago eb52398
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.
2 files changed, 2 insertions(+), 14 deletions(-)

M assets/css/dark.css
M assets/css/main.css
M assets/css/dark.css => assets/css/dark.css +1 -1
@@ 29,7 29,7 @@
	}

	a:visited {
		color: #ffd8ff;
		color: #ffd3ff;
	}

	/* Small text needs higher contrast.

M assets/css/main.css => assets/css/main.css +1 -13
@@ 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
		 * <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
		* 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;