Caveat Lector

Looking at my draft for the blog entries, I see three design changes that I made:

1. Entry titles are a touch larger than currently.
2. When a timestamp does not come directly after a date header or blog title, it has some whitespace above it. (How I did this is instructive, and I’ll discuss it in a bit.) In AKMA’s current design, the timestamp has an (IMO) unfortunate tendency to look like part of the previous entry, rather than an introduction to the next one.
3. The permalink/main page links are now in their own paragraph. Just a touch neater that way, plus we can style them separately now.

Any of these changes can be undone, though I would argue pretty strongly for the last one.

The trick with the timestamp: It’s not as simple as just setting a big ol’ top margin. The problem with that is that the margin will still be there after date headers and blog entry titles, and the extra whitespace will look just plain dumb. Fortunately, we can fix that, in most browsers anyway. (Hello? Microsoft? CSS2 selectors in IE/Win, please?)

CSS2 contains the + selector, which joins two other selectors and means “the second selector, when it immediately follows the first one.” Which seems weird, but watch it work. I set a margin-top: 4em on the selector .blogtime (hm, perhaps I should change that to .timestamp, since that is how I am referring to it). Now, we don’t actually want such a big top margin when a timestamp follows a date header (coded as <h2 class="dateheader">) or a blog entry title (coded as <h3 class="blogtitle">). Here is the rule that accomplishes that:

.dateheader+.blogtime, .blogtitle+.blogtime { margin-top: 1em }

I thought I might have to Box Model Hack this for IE5/Win (which understandeth not +), but it seems to look all right. Not entirely sure why, but I’ll take serendipity when I can get it.

Some other tidbits of possible interest (view source on the test page to see them):

• The belt-and-suspenders id/<a name> system is in place. I put the identifiers on the timestamp rather than the blog entry title, because AKMA does not always title his entries, but the Blogger template always puts a timestamp on.

  (For those who missed the earlier discussion: the entry identifiers in AKMA’s current template cannot be used as XHTML id attribute values because they don’t start with a letter. Changing them, however, will break all the links to the archives, not a good thing. So the new template will have both legal ids and <a name> elements per the old template. From now on, permalinks will use the id attributes. Both old links and new ones will work.)

• The timestamp in the current template is indented with non-breaking spaces in the markup. (View source on AKMA’s blog to see them.) Messy. I took them out and used the CSS text-indent property instead. (margin-left or padding-left would also have worked.)
• Some minor cleanups in the markup: all <p> tags now have corresponding </p> tags, a lot of unneeded <br> tags are gone, all tag names are now lowercase, and… really that’s about it. The code was pretty clean to start with. I have definitely seen worse. Much worse.

The next step (assuming all this is more or less acceptable) is turning it into Blogger, MT, and Radio templates. Give me a few days on this one; I still have to read up on Radio.