I’ve made a few small tweaks to the site theme.
When I first switched to this custom theme, responsive design was in its infancy, and neither the parent Twenty Twelve theme or my custom adaptation were designed for phones.
When I started using Jetpack on the site, it came with a mobile theme that I enabled. It looked very generic, but it also looked more presentable on mobile than the main theme… until a week or so ago.
Jetpack has given notice that they are retiring their mobile theme, so I decided to turn it off, to see how bad it was without it. Pretty bad. So I decided to turn Jetpack’s theme back on until I found time to deal with it… and found I couldn’t re-enable it. Oops. So, I’ve been chipping away at the issues for the past week or so, and now it’s pretty presentable on mobile.
The first thing I did was to override the fixed width on the content container. Here, I simply added a max-width to it, so that it wouldn’t get wider than the viewport. Next, I changed the way the background images are delivered — by default, the page only has background colors, and the “words” background image is only loaded for larger sizes. Next, I adjusted the positioning and sizing of the search field on mobile. Now, it’s small by default, then expands to cover the whole masthead. Finally, I adjusted the padding of the nav items so they all fit on a small screen.
I’ve also replaced a couple of the gradient images with linear gradients. I was using repeating background images for a couple of the gradients, to work around IE issues, and I really don’t care about IE anymore. I’ve also stripped out some vendor prefixes on some styles.
Update 2/29/2020
I’ve replaced the repeating “words” background image on the body element, so that I could also have a retina version for retina users. The words are mostly the same, in the interest of providing a text alternative, here they are:
<html> <head> <body> <nav> <img> <heading> <section> <div> <div> <span>
reading motorcycling New England diving photography kayaking Boston Charles River gardening bicycling Star Trek
document window Angular Observable function Array Event prototype Class string
aperture shutter lens ISO depth of field motion blur histogram exposure focal length strobe SLR f/stop
padding margin box-sizing flex color text-decoration background border top left
I’m not sure this theme is “worth” this effort. It’s just over 8 years old, which is ancient in web terms, but frankly, I still like the way it looks. And now, it looks like itself on mobile, too.