You may have noticed. Or quite possibly, not. I won’t hold it against you; it is a bit nerdy. The thing is, I’ve revamped my blog so that the “ancillary” stuff is now hidden behind a “hamburger menu” over there on the left. Click the icon (it’s known in the trade as a “hamburger”) – or, if you are on a tablet or phone, touch it – and the extra stuff about me, the site, and other information slides in, pushing the normal blog content over to the right. This is my first tentative step to being “responsive”, at least in the web sense. The rest of the responsiveness will come later, when I change how posts are rendered in the browser.
Quirks? Well, the first one is that my extras panel is long. It is no small menu as seems to be assumed by the library. Hence it gets displayed with a scrollbar. So, the first requirement was not only to “move” the panel (that is, restyle it) from the right side of the window to the left, but also to futz with the CSS so that there was enough room for a scrollbar on the right.
The next quirk is that the library duplicates the panel. For the longest time (OK, a couple of days, until I noticed), the extras content was being shown at the bottom of the page as well as in the slideout panel. Oops. A small change in CSS later (
display:none to be precise) and that problem went away.
The next quirk was the way I’d originally written the extras panel: I’d used
id instead of
So, apart from these minor quirks – and it only really took an evening’s worth of work to get it all working properly, albeit spread over a few days – I’m happy with the way the slideout panel works on this site. Even more so, the way it works nicely on a smaller, touch screen. As I said earlier: now I can think about how to display the posts more optimally on a small screen; that is, make the rest of the site more responsive.