Browse files

Blog post on the redesign

  • Loading branch information...
1 parent bcc5ebe commit 2a699953d0cc644ec86a98c0c930511d155e9ec3 @captn3m0 committed Mar 31, 2012
Showing with 46 additions and 0 deletions.
  1. +46 −0 _posts/
@@ -0,0 +1,46 @@
+layout: post
+title: New Design of
+- design
+- responsive
+I did a redesign of the blog. The main goals for the redesign were to reach a
+clean, readable layout, which I feel I've accomplished.
+<iframe frameborder='0' height='540' width='100%' src=''></iframe>
+###Old Design
+Everything was plain old bootstrap, except for the hover effect on the
+photograph. I've also removed the old "Related Posts" feature, which I felt was
+not at all useful. In the old homepage, the list of articles was earlier presented as a list (\<li\>), while it is now slightly better. The topbar has also been removed, instead focussing on a far better sidebar.
+###New Stuff
+I wanted a _clean design_ more than anything. So instead of the sharebox being persistent on every device, I decided to hide it on lower resolutions. It currently hides if the screen width < 1100px, so unless you are on a widescreen resolution monitor and using your browser on fullscreen, you won't see it.
+Responsive design via bootstrap allows you to easily support mobile devices. The left sidebar is stacked, so that even mobile devices have no problem with the layout.
+I'd describe the design as _clean, minimal_.
+The earlier design was using Bootstrap 1.3, and I've upgraded to 2.0.2 now.
+I've used the new version before, but with zero changes using
+[bootswatch]( in [a few other places](/codechef/). But
+this time, I decided to tweak bootstrap for my needs.
+I did away with the navigation bar, and changed the default fonts. The site
+does not feel like a stock bootstrap site any longer. The major contribution
+from bootstrap, was in fact the grid system, and the responsiveness, which
+really helped me get it done quickly.
+The fonts used are [Ubuntu]( for the content, and [Gentium Book
+Basic]( for the
+headings. I'm using [Google Web Fonts
+Directory]( for the fonts.
+I'm only loading the italicized version of Gentium as I've chosen to display
+all headings (h1-h6) as italics.

0 comments on commit 2a69995

Please sign in to comment.