Bulletin Board in The Style Contest

My third submission to The Style Contest is Bulletin Board. Sherree's actually the one who came up with the original concept for this, I just made it all work. The contest deadline has been extended to June 5 so I'll have a little more time to iron out some bugs, but I don't think I'll submit another theme.

Bulletin Board stands out for a few reasons: most obviously, the visual aspect. Full of color and assorted bulletin-board related elements; the Main Index is also devoid of the traditional columns and directly linear format, by bouncing each entry around on the note paper. The CSS that drives it is also pretty unique to the contest (I think. I haven't looked at the CSS of all of the styles): I'm using some advanced CSS selectors to make all of this work. It let's me achieve some great effects, but Internet Explorer doesn't support them.

The Main Index of the theme really doesn't work well in IE. It just repeats the first element and that's pretty displeasing. But as an opportunity to create a very unique design specifically for a contest, it was a lot of fun to do. That said, I have a few ideas of how I can make it work better with IE--I just have to implement them. Anyway, if you aren't using Apple's Safari browser or Firefox you aren't seeing Bulletin Board in it's full glory.

The CSS for this design has grown in complexity quite a bit. I initially under-thought what needed to be done and found my theme breaking in quite a few areas. I rethought and rebuilt it all thanks to the indirect adjacent combinator. This combinator let me simplify the code quite a bit and made the theme work correctly! Unfortunately, I discovered, the indirect adjacent combinator only works in Firefox. Using the indirect adjacent combinator, this was the longest style definition:

.content-nav ~ .entry,
.content-nav ~ .entry ~ .entry,
.content-nav ~ .entry ~ .entry ~ .entry,
.content-nav ~ .entry ~ .entry ~ .entry ~ .entry,
.content-nav ~ .entry ~ .entry ~ .entry ~ .entry ~ .entry,
.content-nav ~ .entry ~ .entry ~ .entry ~ .entry ~ .entry ~ .entry { }

I won't get into the details of what all it was doing--and this certainly isn't simple stuff--but it is perfectly manageable and readable for a CSS author (or me, at least).

But I really didn't want to limit myself to only Firefox, so I rewrote the styles with the direct adjacent combinator. This required quite a bit more work because I had to think about possible permutations of each set of classes, and it just grew to something unwieldy:

.content-nav + * + * + .entry,
.content-nav + * + * + .entry + * + .entry,
.content-nav + * + * + .entry + * + * + .entry,
.content-nav + * + * + .entry + * + .entry + * + .entry,
.content-nav + * + * + .entry + * + * + .entry + * + .entry,
.content-nav + * + * + .entry + * + .entry + * + * + .entry,
.content-nav + * + * + .entry + * + * + .entry + * + * + .entry,
.content-nav + * + * + .entry + * + * + .entry + * + * + .entry + * + * + .entry,
.content-nav + * + * + .entry + * + * + .entry + * + * + .entry + * + .entry,
.content-nav + * + * + .entry + * + * + .entry + * + .entry + * + * + .entry,
.content-nav + * + * + .entry + * + * + .entry + * + .entry + * + .entry,
.content-nav + * + * + .entry + * + .entry + * + * + .entry + * + * + .entry,
.content-nav + * + * + .entry + * + .entry + * + .entry + * + * + .entry,
.content-nav + * + * + .entry + * + .entry + * + .entry + * + .entry,
.content-nav + * + * + .entry + * + .entry + * + * + .entry + * + .entry,
.content-nav + * + * + .entry + * + * + .entry + * + * + .entry + * + * + .entry + * + * + .entry,
.content-nav + * + * + .entry + * + * + .entry + * + * + .entry + * + * + .entry + * + .entry,
.content-nav + * + * + .entry + * + * + .entry + * + * + .entry + * + .entry + * + * + .entry,
.content-nav + * + * + .entry + * + * + .entry + * + * + .entry + * + .entry + * + .entry,
.content-nav + * + * + .entry + * + * + .entry + * + .entry + * + * + .entry + * + * + .entry,
.content-nav + * + * + .entry + * + * + .entry + * + .entry + * + * + .entry + * + .entry,
.content-nav + * + * + .entry + * + * + .entry + * + .entry + * + .entry + * + * + .entry,
.content-nav + * + * + .entry + * + * + .entry + * + .entry + * + .entry + * + .entry,
.content-nav + * + * + .entry + * + .entry + * + * + .entry + * + * + .entry + * + * + .entry,
.content-nav + * + * + .entry + * + .entry + * + * + .entry + * + * + .entry + * + .entry,
.content-nav + * + * + .entry + * + .entry + * + * + .entry + * + .entry + * + * + .entry,
.content-nav + * + * + .entry + * + .entry + * + * + .entry + * + .entry + * + .entry,
.content-nav + * + * + .entry + * + .entry + * + .entry + * + * + .entry + * + * + .entry,
.content-nav + * + * + .entry + * + .entry + * + .entry + * + * + .entry + * + .entry,
.content-nav + * + * + .entry + * + .entry + * + .entry + * + .entry + * + * + .entry,
.content-nav + * + * + .entry + * + .entry + * + .entry + * + .entry + * + .entry,
.content-nav + * + * + .entry + * + * + .entry + * + * + .entry + * + * + .entry + * + * + .entry + * + * + .entry,
.content-nav + * + * + .entry + * + * + .entry + * + * + .entry + * + * + .entry + * + * + .entry + * + .entry,
.content-nav + * + * + .entry + * + * + .entry + * + * + .entry + * + * + .entry + * + .entry + * + * + .entry,
.content-nav + * + * + .entry + * + * + .entry + * + * + .entry + * + * + .entry + * + .entry + * + .entry,
.content-nav + * + * + .entry + * + * + .entry + * + * + .entry + * + .entry + * + * + .entry + * + * + .entry,
.content-nav + * + * + .entry + * + * + .entry + * + * + .entry + * + .entry + * + * + .entry + * + .entry,
.content-nav + * + * + .entry + * + * + .entry + * + * + .entry + * + .entry + * + .entry + * + * + .entry,
.content-nav + * + * + .entry + * + * + .entry + * + * + .entry + * + .entry + * + .entry + * + .entry,
.content-nav + * + * + .entry + * + * + .entry + * + .entry + * + * + .entry + * + * + .entry + * + * + .entry,
.content-nav + * + * + .entry + * + * + .entry + * + .entry + * + * + .entry + * + * + .entry + * + .entry,
.content-nav + * + * + .entry + * + * + .entry + * + .entry + * + * + .entry + * + .entry + * + * + .entry,
.content-nav + * + * + .entry + * + * + .entry + * + .entry + * + * + .entry + * + .entry + * + .entry,
.content-nav + * + * + .entry + * + * + .entry + * + .entry + * + .entry + * + * + .entry + * + * + .entry,
.content-nav + * + * + .entry + * + * + .entry + * + .entry + * + .entry + * + * + .entry + * + .entry,
.content-nav + * + * + .entry + * + * + .entry + * + .entry + * + .entry + * + .entry + * + * + .entry,
.content-nav + * + * + .entry + * + * + .entry + * + .entry + * + .entry + * + .entry + * + .entry,
.content-nav + * + * + .entry + * + .entry + * + * + .entry + * + * + .entry + * + * + .entry + * + * + .entry,
.content-nav + * + * + .entry + * + .entry + * + * + .entry + * + * + .entry + * + * + .entry + * + .entry,
.content-nav + * + * + .entry + * + .entry + * + * + .entry + * + * + .entry + * + .entry + * + * + .entry,
.content-nav + * + * + .entry + * + .entry + * + * + .entry + * + * + .entry + * + .entry + * + .entry,
.content-nav + * + * + .entry + * + .entry + * + * + .entry + * + .entry + * + * + .entry + * + * + .entry,
.content-nav + * + * + .entry + * + .entry + * + * + .entry + * + .entry + * + * + .entry + * + .entry,
.content-nav + * + * + .entry + * + .entry + * + * + .entry + * + .entry + * + .entry + * + * + .entry,
.content-nav + * + * + .entry + * + .entry + * + * + .entry + * + .entry + * + .entry + * + .entry,
.content-nav + * + * + .entry + * + .entry + * + .entry + * + * + .entry + * + * + .entry + * + * + .entry,
.content-nav + * + * + .entry + * + .entry + * + .entry + * + * + .entry + * + * + .entry + * + .entry,
.content-nav + * + * + .entry + * + .entry + * + .entry + * + * + .entry + * + .entry + * + * + .entry,
.content-nav + * + * + .entry + * + .entry + * + .entry + * + * + .entry + * + .entry + * + .entry,
.content-nav + * + * + .entry + * + .entry + * + .entry + * + .entry + * + * + .entry + * + * + .entry,
.content-nav + * + * + .entry + * + .entry + * + .entry + * + .entry + * + * + .entry + * + .entry,
.content-nav + * + * + .entry + * + .entry + * + .entry + * + .entry + * + .entry + * + * + .entry,
.content-nav + * + * + .entry + * + .entry + * + .entry + * + .entry + * + .entry + * + .entry { }

That's 62 lines, if you were counting! Obviously, those kind of style definitions caused the stylesheet to grow considerably: from roughly 17 kB with the simple indirect adjacent selector to just over 117 kB with this direct adjacent selector! But, it works, so it's probably worth it, right? I'm glad we have browser caching!