Our highly trained and efficient crack equipment team is busy at work making everything just exactly perfect.
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!