If you are confused with the title, let me put it simple: C-Nauts is the abbreviated title of the blog, and yes, as it says, there will be a new “style” here in a near future once I get money for the Custom CSS Upgrade of our beloved WordPress.com, which costs 30 USD. Anyway, I found out that the admin panel allows me to test those features locally and I did! I played for hours and hours with CSS, Chrome Developer Tools and Photoshop; spent some time trying to do a media query for screen resolutions under 800 px wide and of course, added some pretty icons to the articles.
The CSS is huge, measures about 696 lines of code and 13.0 KB, which can and will be reduced, if you want to test it just ask me for it but don’t expect it soon because I’d need to throw away some customisations such as the social icons, the logo and more. If I can do it responsive, I will, probably will take me more time but that will be left for later. If it looks familiar in the images above, that has a pretty simple explanation: It’s the same tame but modified :-).
So, what’s new? Good question right there, the two fonts I chose on the little “Customize” sidebar panel that WordPress.com kindly provides us were Open Sans for the heading titles (Light, 0) and Source Sans Pro for the body text (Normal, 0). I had to target several elements to tweak them individually, which considerably increased the size of the additional CSS file. I also rounded the avatars, added CSS3 transitions to the buttons, put icons to make it more pretty, changed three specific header menu items to make them look like social media icons; that would probably shatter your layout if you put it directly, but I promise a CSS that’s not bespoke to myself, but to you all.
If you haven’t noticed, I decided to go with a 1100 pixels wide container instead of the classic 960 px one, why? Because I needed more room for the articles and I think it looks nicer, takes advantage of the width of 15″ laptops and big monitors with monstrous resolutions. However, I may need more media-queries to adapt the layout for those who have 13″ laptops or lower resolutions that aren’t necessarily 800×600, I may as well need to ‘retinafy’ my images. I also changed the opacity, reversed the dynamic here: we start with full opacity and end with 80% when an article is hovered over. I tested the new design on Firefox and you may notice (unless I correct it first) an extra padding in the bottom of each featured image (those lovely images on the home page), nothing too scandalous but it certainly disturbs me; IE is a mess, if only I could target Internet Explorer users… but I am using a free blogging platform, not a self-hosted one so, there it goes.
Did you see how I carefully styled specific elements? Strike and highlight text needed a new style, addresses now have a cool icon on the left, also, the comment titles have an icon! Links have a nice colour, it looks a little bit dark to me (the dark blue tone I used) but I might change it later. The comments look the same, I see no need in changing them.
So what do you guys think? Does it look nice and would love to see it implemented? If you can spout any suggestion in the manner you see fit, you can do it via comment or if you want the CSS to play around, go to Contact (or see the contact link on the footer, where you can send me an email) to ask me for the file.
Creativenauts 