Izdihar - Magic Kingdom Escapology

Procrastination is a terrible thing. At times, It seems my default response to many things, so they get put off until they're absolutely needed and can no longer be avoided.Witness this blog. For too long, I have left vague (and not so vague) hints that it needs looking at, but then got nowhere with it. I did start something on my offline installation, but once I got word that the new b2evolution was coming out, that stalled. Well v6.6.x has come and gone, been installed, been upgraded, and upgraded, and is now up to 6.6.4 like the number means anything particularly at this point, yet the skin is the same.

So why this post then?

Well, a few weeks back Francois and team announced that they'd updated all of their skins to be compatible with version 6, including the one I've been using here since it was first set up around 10 years back (happy birthday blog). For the sake of swapping out the header image to the one of my Desert Tower shot, I'd supposedly got myself an upgrade to something rather more current, hadn't I? Well, it seemed not.

I tried swapping over to the new one, but it quickly became apparent more was needed than that. So what's wrong with it then, putting aside the obvious point that it's all a bit brown - #895c46 brown to be precise - there are a few other things that mitigate it being a straight swap out and job done:

• The contrast between the background and text is fairly low. At some point I've tweaked things a little here; the basic text for paragraphs is a bit darker, the links are a bit lighter, but not so in the updated skin at b2evo
• The text is generally on the small side, making it harder to read than it needs to be. For some reason, the new version starts things off by shrinking the default sizing a little to 0.9em. This doesn't look a comfortable on all devices; it's OK on my old 24" HP monitor, but not so much on my 13" laptop screen with it's 1,600 x 900px display.
• The font is a bit boring if truth be told. It's based around Tahoma, falling back through Lucida Sans, Arial, Verdana, and Sans-Serif if it's not available. Possibly worse, is that it doesn't veer away from san serif fonts at all for any component on the page - it's all a bit samey, and rather workmanlike.
• On higher resolution screens, the rather narrow width for the content - it's 900px wide - seems rather a waste of all that screen real estate to be going for a narrow strip down its middle. It doesn't even seem to take any design cues from any of the grid systems out there, like 960GS, an approach which now feels feels like it's been around since the ark in web terms
• Lastly, and this is the BIG ONE, the skin has been created as a 'fixed width' design and is in no way responsive, or mobile friendly. That needs fixing - seriously...

What needs to be done then? Sounds like time for another list doesn't it, but first let me just explain why this post even exists. In part it's going to be a reference as to what needs doing; a 'Statement of Requirements', but mostly it's going to be a constant reminder that I must actually get it done - no escaping, no skivvying off, and definitely no more procrastinating. The list then...

1. The v6.x version of Vastitude is to be installed and its included header image replaced [COMPLETED]
2. The font-size is to be made larger and line-height adjusted if needed [COMPLETED]
3. The font-color is to be matched to the old skin you see here now (this may have changed by the time you read this) [PARTIAL - more to do]
4. The overall width of the content area is to be widened to 960px initially, and the rest of the grid adjusted to match [COMPLETED]
5. A new font stack is to be selected from the rather excellent selection of choices across at Google Fonts and applied as a direct replacement for the current one [COMPLETED]
6. The font stack is to be split. This is to vary what's used for body text, header tags and possibly something a little more esoteric for the heading text to sit in keeping with the header image itself [COMPLETED]
7. Lastly, the skin is to be made responsive. At first, this will just be a case of removing the fixed pixel dimensions to get it fluid, but once that's behaving as expected, @media queries can be introduced to tidy things up at various break points [PARTIAL - @media queries to be addressed]

There are a few constraints I'll introduce at this point.

• I'm not writing the skin from scratch, so all changes will be done as changes to the current style.css file
• I've no wish to open up the PHP code on the site - I don't think I have to to be honest
• The site will retain it's background colour for now (I have other ideas ruminating). As easy as that is to change, it would likely raise a whole bunch of other design considerations
• I'll be avoiding anything that messes with the default CSS Prism code rendering plugin - as the skin sits at the moment, it turns most of it brown, which doesn't help the readability of code at all

With that, it's time to get on with something and see what happens. Let me know what you think as it goes along.