The technical specifications of Weltraumbesty get angry

///

I'm hoping this is the last of such pages for a while, as I've already run out of Daimajin-series films to reference by name. Perhaps I should diversify my interests. Or perhaps I should just get on with it, as this promises to be a short one.

On the docket for today are modifications I've made which are aimed squarely at increasing overall site accessibility, of which there have been a few. Not directly exampled below, but important and oft overlooked (including by myself until a day or so ago) is the inclusion of descriptive alt text for all of the images posted on this site. Easily enough done, though I wish I had thought of it from the start (and not forgotten the header image... again). C'est la vie.

The rest of the changes are to the color scheme of the site. While I began this project with alternative dark and light variants of the layout, I eventually settled on a dark layout exclusively (for reasons of utter laziness). This continues to be my personal preference for the site, as it is with most of my browsing and apps, but I have adjusted (with assitance from an online contrast checker, like this one from WebAIM) the background, font, and links to increase their contrast ratio a bit.

Preferences be damned, I also revisited the issue of offering an alternate light-mode for the site. While it took a (very) light evening of reading and a bit of toying to figure out, this has now been implemented site-wide by way of yet more handy-dandy CSS declaration. Weltraumbesty.com will now display in either its light or dark theming automatically, depending upon your own browser settings. This was surprisingly simple to achieve, even if it took an hour or so of getting it wrong before my brain wrapped around what I was doing (and, more important, why it wasn't working). The revised styling reads as follows:

		<style type="text/css">
		:root {
		     --bgcolor: #e7e3dc;
		     --fcolor:  #353332;
		     --linkcolor:  #1f1e1d;
		      }
		      
		@media (prefers-color-scheme: dark) {
		:root {
		     --bgcolor:    #353332;
		     --fcolor:     #e7e3dc;
		     --linkcolor:  #f6f2eb;
		      }			
		     				    }
		     				    
		body{
		     background-color: var(--bgcolor);
		     margin: 10px auto;
		     max-width: 600px;
		     line-height:1.4;
		     font-family:Monaco, monospace;
		     font-size:16px;
		     color: var(--fcolor); 
		     padding:0 10px;
		     }
		h1,h2,h3
		     {
		      line-height:1.2
		     }
		a    {
		     color: var(--linkcolor); 
		     }
		</style>

As always, these alterations were tested in Firefox, with a hefty assist on the rest from its Inspect Accessibility mode. Mistakes made along the way included, but were by no means limited to updating my layout blanks first (good!) and accidentally copying over all of my published page headers with their blank layout counterparts (bad!). This was infuriating.

I will recover.

///

~ Weltraumbesty / KRP

<← previous // home ↵ // next →

if you enjoyed this shit then please consider throwing us a buck or two. we wander the wastes of intergalactic space in search of a new home, free from war and traffic accidents, and are powered by coffee alone. thank you.

© Weltraumbesty // KRP // Kevin Pyrtle