From 901e52b442e7481cbc33c6c80a5b890d9a22a78c Mon Sep 17 00:00:00 2001 From: Rohan Kumar Date: Thu, 21 Apr 2022 22:31:38 -0700 Subject: [PATCH] CSS: corrective spacing, dark-theme coga Yellow is a harsh color for people who deal with overstimulation; soften it up a bit. --- assets/css/dark.css | 6 +++--- assets/css/main.css | 15 +++++++++++++-- 2 files changed, 16 insertions(+), 5 deletions(-) diff --git a/assets/css/dark.css b/assets/css/dark.css index ae768a8..c645f0c 100644 --- a/assets/css/dark.css +++ b/assets/css/dark.css @@ -8,16 +8,16 @@ .skip { /* "background" is short for a bunch of unnecessary CSS rules * background-color is all I need */ - background-color: #0e0e0e; + background-color: #0e0e0b; } /* Only color if it's a link; if href is empty, let it be. */ a:link { - color: #fe8; + color: #ffeab3; } a:visited { - color: #edc; + color: #ffdfff; } a:active { diff --git a/assets/css/main.css b/assets/css/main.css index e57a9bf..01c4734 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -29,6 +29,13 @@ html { html { max-width: 45em; padding: 0 2%; + + /* 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 safe to bump it up ever so slightly. + * Only do this on screen, since printouts already improve legibility + * and cost paper + ink. */ + font-size: 106%; } /* 45em is too wide for long body text. */ @@ -90,7 +97,7 @@ kbd { /* narrow screens: remove unused figure margins */ figure { - margin: 0; + margin: 1em 0; } /* figcaptions should be distinct from surrounding paragraphs tho */ @@ -214,7 +221,11 @@ a:focus, position: absolute; top: -2em; left: .25em; - /* #06c is the default link color in FF, IE, and ux.redhat.com + /* skip-link could appear on top of existing content, so it needs a + * solid background to be legible. If we set the background, we must + * also set the foreground. Not all browsers support system colors + * ("Canvas", "LinkText"), so we need to pick our own colors. + * #06c is the default link color in FF, IE, and ux.redhat.com * #00e is the default in WebKit, Blink, and ancient FF. */ color: #00e; background-color: #fff;