Future new C-Nauts design: A modified Triton Lite theme

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 :-).

Home Page

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.

Articles and pages
This is how a post looks like.

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.

Advertisements

Ask, comment, or give feedback :)

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s