Blog Tweaks

Grateful Dead at the Winterland Arena, March 20, 1977 – Photo by Ed Perlstein

Our highly trained and efficient crack equipment team is busy at work making everything just exactly perfect.

Bob Weir, during a Grateful Dead concert on June 9, 1977 at the Winterland Arena, San Francisco, CA

It’s been almost a year since my very first post and I figured it was about time for a revamp of the old blog. I thought the My Life theme had a nice, classy look to it but I was longing for something a little more along the lines of what you see here (assuming you’re actually reading this on my blog and not, say, through an RSS reader).

And behold, I introduce the TwentyThirteen theme. Admittedly, it’s the default theme for WordPress nowadays, but I decided to use it because it does pretty much everything I want in a theme. My criteria were:

  • Semantic, Accessible HTML5 markup
  • Minimalist appearance
  • Responsive design for mobile devices
  • Centered, clean layout

In other words, pretty much what TwentyThirteen does right out of the box for the most part. I do have my own quibbles though: The markup is reasonably semantic but I would like to have seen the use of the <figure> and <figcaption> elements for media (e.g., images, videos, etc.) instead of the meaningless <div> elements. Ah well.

At least the content is centered. I’ve been meaning to try this sort of layout for a while now, the idea being that the content might read a little better if there aren’t any distracting sidebars, etc. We’ll see how it goes.

Fun in the Footer

Down in the footer, I added some perfunctory stuff you’d see in any blog including an image of yours truly courtesy of master photographer Geoffrey Baker. There’s also some other bits like where you can find me on the internet, category navigation, and some other goodies. I’m still playing around down there and will continue to maybe add or subtract here and there.

Typography

The typography that comes with TwentyThirteen is punchy, hip, and mod, but I felt that the subject matter called for a slightly more calm look. Thanks to some help from Lynne Vernart, I learned how to make a child theme and leverage Google’s Typography tools. It turns out that TwentyThirteen already makes use of Google Typography so I’m already most of the way there.

I did discover, however that Google Typography doesn’t include every font that’s out there, so I ended up grabbing the font for my name in the header from the old My Life theme and embedded them through the child theme using the CSS @font-face property, e.g.,:

@font-face {
	font-family: 'SortsMillGoudyItalic';
	src: url('fonts/goudystm/GoudyStM-Italic-webfont.eot');
	src: url('fonts/goudystm/GoudyStM-Italic-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/goudystm/GoudyStM-Italic-webfont.woff') format('woff'), url('fonts/goudystm/GoudyStM-Italic-webfont.ttf') format('truetype'), url('fonts/goudystm/GoudyStM-Italic-webfont.svg#SortsMillGoudyItalic') format("svg");
	font-weight: normal;
	font-style: normal;
}

Pop a Cap

There are several methods of using drop caps out there, but I ended up going with an approach that doesn’t require the use of additional morkup. That way, I can post away without having to remember to add an annoying <span class="dropcap"> elements.

After some trial and error, I found a great comment that led me to the following approach:

.entry-content>p:nth-of-type(1):first-letter {
	display: inline;
	float: left;
	margin: 0;
	padding: .35em .08em 0 0;
	/*_padding: 0.25em 0.08em 0.4em 0.00em;*/
	font-size: 3.2em;
	line-height: .4em;
	text-transform: capitalize;
	color: #c30;
	font-family: Georgia, Times New Romans, Trebuchet MS, Lucida Grande;
}

So far, it seems to work great, but I’ll keep checking pages in different browsers to see if there’s anything really screwed up with this approach.

More to Come

I do plan to make some more tweaks. I may knock down the <blockquote> font size or perhaps increasing the font of the “regular” text to match a little better. And there’s a little more work to be done down there in the footer. In the meantime, if you have any feedback on the new layout, please let me know!

2 Replies to “Blog Tweaks”

  1. Christian,

    The site looks great on my iPhone, it’s uncluttered and easily readable.

    Been using WordPress for many years, mostly because I have no time to deal with anything else. I’ve tended to use the simpler themes. My current one is “Twenty Ten”, which I really like.

    Once I know enough CFML to have something useful/intelligent to share, maybe I’ll unleash my site.

    I enjoy your tweets; if you’re coming to CfSummit it’ll be good to meet you. (I’m kind of an astronomy nut)

    Regards,
    Chuck

    1. Thanks for the feedback, Chuck. As much as I’d rather use a CF-based platform, WordPress does seen to be the right tool for the job. I won’t be at CF Summit but hope we’ll meet up at cf.Objective() next year!

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.