#101: Almanac Styling, Part 2

(Updated on )

We jump forward just a teensy bit here. This is a pretty comprehensive screencast series, but it’s only 40 hours or so and of course this actual project is actually more like a few hundred. In this case the jump forward was to style up the two-page spread a little bit. We walk through those changes in the beginning.

The left and right pages have one shared and one different class name. This is super common I find in lots of different scenarios in web design. In this case, the pages share the same gradient and the same sizing. But they differ when we apply a CSS3 skew() transform. This gives us a kinda neat “open book” effect. Because all of these effects are created with CSS, they scale nicely (in a way that an image almost certainly wouldn’t).

We had a clever equal heights solution in place, but unfortunately because of our clever open book skew-y stuff, that breaks. Instead, we just use a touch of JavaScript.

First, while looking at the JavaScript, we write a line which will hide any of the “letters” that have no children. For example, there are no selectors that start with “Z” but we have a page published called that just to be comprehensive. We discover those (and then hide them) with the ultra-useful jQuery :has() selector.

For the equal heights, we measure both of the two columns, decide which is tallest, and then set them both to the tallest one. We have to use a slightly hacky setTimeout for it to work correctly because of the @font-face loading taking a little time and affecting heights. We could ultimately use some kind of font loader callback. (Or, that might be overkill).

Then we move onto single almanac pages. Trucking on quickly now! We’ve done this kind of thing so many times now it’s no surprise we’re moving faster. We essentially whip this template into shape in the same way we styled up a single blog post or a generic page or anything like that.

We use a “black bar” for the breadcrumbs, cementing this design pattern as something that we’ll use over and over again for site-section navigation.