New Blog Template

With the growing popularity of mobile phones and lower resolution netbooks, a fixed width blog format is looking less and less appealing. I decided to work on a new look for this blog. The main feature I was looking for was a set of CSS rules that would allow the main content to scale with the viewer's browser window width. If the window is too narrow, the less important content on the sidebar should flow down below the main content.

I began with an existing theme for Blogger, Tekka, that pushes the right sidebar down beneath the main content when the window is narrow. I then made some CSS changes to tweak the look to fit my tastes.

First things first, the default fonts must go! I drew much of my inspiration from Nick Johnson's blog, specifically the way that serif fonts are used in some places for accent while sans-serif is used for most of the content. This is a technique that I experimented with a bit in a graphic design class in college.

For titles I added:

h1, h2 {
  ...
  font-family: Georgia, 'Times New Roman', Times, serif;
}

h3 {
  ...
  font-family: Trebuchet MS, Verdana, Sans-serif;
}

To change the font used for the main text in the page, I set a template variable as follows:

<Variable name="bodyFont" description="Text Font"
  type="font" 
  default="normal normal 100% 'Lucida Grande', 
    Verdana, Helvetica, sans-serif" 
  value="normal normal 100% 'Lucida Grande', 
    Verdana, Helvetica, sans-serif">

Next I set about changing the style of the title link. You see, when someone is viewing a single post, the blog title becomes a link to the main blog page. So, the blog's title is styled like a link and I found the default link styles a bit jarring. This might seem like a minor change but so often it's the little things that matter. I set this style using

h1 a:visited {
  ...
  color: #505050;
}

Now that the text styling is done, the layout could use a bit of adjustment. I changed the margins on the main content to the following:

#content-wrapper { 
  margin-top: 20px;
  margin-$endSide: 30px;
  margin-bottom: 30;
  margin-$startSide: 35px;
 }

I removed the padding from the h1 title style and the date header. I also removed the style rule entirely for the description.

We're nearing the end! The sidebar wasn't quite to my liking so I changed the border style. Lastly, in order to get the sidebar to flow down beneath the main content I set a minimum width. Here is the final style for the sidebar:

#sidebar {
  text-transform:none;
  background-color: $sidebarBgColor;
  color: $sidebarTextColor;
  padding-$startSide: 20px;
  width: 30%;
  min-width: 215px;
  float: $endSide;
  font: $bodyFont;
  border-$startSide:1px solid $mainTextColor;
  word-wrap: break-word;
  overflow: hidden;
}

I debated about posting the whole template here, but I'm not sure that it would be very readable. If you would like the whole thing, leave a comment and I can email it to you.