Note: Again, if you are viewing this in Internet Explorer and it looks not nearly as impressive as the screenshots, rest easy with the knowledge that your browser’s inability to follow any semblance of standard best-practices guidelines on rendering webpages (something that web browsers tend to do on a regular-to-frequent basis) is to credit for your misfortune. I am not changing any of my proper code to work with IE, as that would make me an enabler of such terrible design.
Well, I think this is as good as awesome now. With the release of my Tissue theme a week or so ago and all the minor changes I have made since, I think what we’ve got here and now is a pretty stable look going forward. Here’s a quick feature listing:
- Page Element Widths
Columns are spaced and sized based on a percentage of your browser’s window dimensions (go ahead, try resizing your window). There is a min-width to prevent crazy behaviour when people inevitably try to resize their windows to something ridiculous, like 50px wide. - Compatibility/Standards Compliance
All scripts and CSS render fine on Google Chrome (OS X and Windows), Firefox (OS X and Windows), Safari (OS X and Windows), Opera (OS X and Windows)—obviously, Chrome and Firefox are the practicality tests, whereas Opera was the acid test, as it were, for standards compliance. - Sidebar Toggling
Sidebar toggle functionality uses a cookie to save user settings, expiring/resetting to default (show the sidebar) after seven days have passed since the last visit. The cookie expiry is extended by a week from whenever you visit again, so frequent readers will probably never need to re-toggle the sidebar setting. daynight(...)
I coded a function (actually, more like a whole suite of functions) that would allow for some fancy color management/math.daynight(...)is the end result—based on your current time of day, you should notice the page’s background colour “rise” and “fall” (like the sun) within a specified range (currently, between#555and#eee). More on this below.
daynight(...) is based on some fun math using your time’s “distance” from noon, in minutes. First, a function gathers this info and does some math to bring it into an integer from 0 to 255 (people who know how RGB works will know why this makes things fun). A shade of grey is made from this value, which is then mapped from the default domain (#000 to #fff) to a grey within my specified range (#555 to #eee). Then, it’s just a matter of writing the result to id.style.backgroundColor by JavaScript on load, and using setInterval(...) to do all this every five minutes (so that the color will still change if someone just leaves the window open).Granted, this isn’t all that impressive on its own, but I also coded in a lot of extra features, such as being able to map any color (not just greys) to its analogue within any valid range (color to color). That’s kind of cool I think. Completely (or mostly) useless for most people, but I could probably use this feature in more parts of my theme (especially if I plan on implementing alternate color schemes later on, since I could just pick a new range and convert all my existing colors to their analogues). Yay for automation and linear algebra.