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).
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.