
The maximization of the data-ink ratio of Tufte didn’t last very long. For the new theme I decided to look for inspiration in posters from the turn of the 20th century. I found it in one from 1901 advertising Fry’s Cocoa. (Coincidentally, our cocoa of choice growing up; I’m not such a fan nowadays.) The color palette, typefaces, and restrained Art Nouveau elements appealed to me - and there were no rounded boxes! Bonus: the advertising text was amusingly nonsensical when used out of place.
So with the theme in mind I set about making the website match, which boiled down to a few stylesheet changes, drawing the top image, and drawing the side decorative element. For the banner, the closest font I could find matching the original was Ashley Inline, published by Monotype. For the “pure, concentrated” flag I loaded a higher resolution bitmap of the poster into Photoshop, cleaned up the outline, and loaded that into Inkscape, then converted it into a path. I drew the text on top as another path, and here is the resulting SVG (Users of Firefox and other SVG compatible browsers should be able to view this directly). The decorative element on the side was also drawn in Inkscape: another SVG. There is a certain lack of detail there, since I couldn’t find very high resolution source images to trace over.
As I mentioned previously, Wordpress surprisingly didn’t get in my way when it came to delivering data to the theme. I could reuse all the CSS class names I’d used earlier for the Tufte look, and take advantage of the work already invested battling floating boxes in various browsers. Getting the side elements positioned correctly was the only stumbling block (note to self: remember to use position:relative for a parent element before using position:absolute). Still trying to decide what to do about the sidebar (big empty space below it) and the footer (doesn’t match), but I think it’s now much more interesting than what was here before.