In the end, they realize that all of their scientific passions were in pursuit of destruction & devastation and the eradication of life, just seconds before blowing up the entire universe.

It’s going to be called either Oblivion Operations Protocol System or Automotivated Warfare: Syndicated Hostility Initiative Tokenization, with the title written out so you see the hidden message that reveals humanity’s final observation.

My goal with this theme was to have a much, much cleaner page, without too much extraneous information clogging up eyeballs. Here is how i’ve decided it will eventually be layed out:

"transitory" layout (click to enlarge)

Note that the colors are arbitrary in the above layout and will change. 

And now here is a screenshot of it in action. Note the final layout has not yet been 100% applied. Also note the cool city background, which is blacked out underneath content boxes. Trust me, it looks much cooler than this. The menu to the side is being rewritten with jQuery, and will fold out when needed, and collapse when not needed.

"transitory" screenshot (click to enlarge)

At a guess, i’d have to say that it should be completed in about another week or two. So… a month, maybe? I dunno. You’ll see it soon enough.

All comments (good or bad) welcome!

You may also have noticed that the heading for each of these menu items is highlighted whenever you hover your cursor (pointer) over it.

What you may not have noticed is that the headings for these items’ parent elements is also highlighted when its descendant is hovered over. In other words, when you hover over the “planned books,” “current books,” or “recent books” list, the parent element, “now reading,” is highlighted as well.

(If you’re still not sure just what the hell i’m talking about, check out the demo first, and then come back.)

This is a cool trick that you rarely ever see on the internets, and it’s remarkably simple to do. You don’t need no fancy JavaScripting to do it, either! No server- or client-side scripts are used at all, just good old CSS, and a properly nested hierarchy of elements.

First, create a nested list, with headings. For example:

<ol>
  <li>
    <h1>text</h1>
    <h2>more text</h2>
    <ol>
      <li>
        <h3>subtext1</h3>
      </li>
      <li>
        <h3>subtext2</h3>
        <ol>
          <li>
            <h4>subtext2.1</h4>
          </li>
          <li>
            <h4>subtext2.2</h4>
          </li>
        </ol>
      </li>
      <li>
        <h3>subtext</h3>
      </li>
    </ol>
  </li>
  <li>
    <h2>text again</h2>
  </li>
</ol>

Now create the following style rules:

li:hover>h2, /* matches the H2 element when its parent list-item is hovered over */
li:hover>h3,
li:hover>h4,
li:hover>h5
	{
	background: #000;
	color: #fed;
	}

(Note that the H1 element is not styled and thus does not actually participate in any fancy hover effects.)

Now save your page and test it out. You can adapt this technique to work with just about any set of nested elements. (Just make sure your nest validates!)

See the demo

• Kuler, by Adobe is really cool; it’s an interactive color palette generating widget thing that’s all about inspiration
• Visibone’s Font Card is all the most important information you need to know about fonts
• Ampsoft’s Browser-safe fonts includes a demonstration of each
• XHTML Character Entity Reference with extra info on hover
• Will the browser apply the rule(s)? A cool chart, if slightly outdated
• Quirksmode’s W3C DOM Compatibility Table
• 30 Exceptional CSS Techniques and Examples
• A slew of great cheat sheets of all flavors, courtesy of Dave Child, formerly of ILoveJackDaniels.com (i was wondering when that would happen! Sorry, Dave!)
• The Web Developer’s SEO Cheat Sheet
• A shitload of WordPress cheat sheets from Kahi
• Lorelle’s giant list of various cheat sheets, covering HTML, CSS, PHP, and more
• jQuery cheat sheet
• Another jQuery cheat sheet
• jQuery Visual Map
• And lastly, where i found some of these, SixRevision’s Cheat Sheets for Front-end Web Developers and Useful Cheat Sheets for Web Designers

I’m sure there are more I have bookmarked somewhere. I’ll add them as i find ‘em. Enjoy!