picture of large dish telescope

Power, Corruption, and Lies

This is a sample blog post. Let’s take a look at some emphasized text as well as some strong text. There is an apostrophe in the first sentence, here are some quotes: “everybody needs money…that’s why they call it money.” And I would be remiss if I left out my favorite, the em-dash—hey look, something shiny. Check to see if the selected font uses old-style-figures: 1974-1996.

I’m also using new HTML5 elements on this page: header, section, nav, and even time. Some other elements to examine include:

  1. Footnotes and Sidenotes
  2. Code blocks
  3. Images
  4. Unordered lists
  5. Here is a list within a list:
    1. This is sub-tem one
    2. And this is sub-item two, which has a link
    3. Last, but not least, sub-item three

This is a Level 3 Sub-heading

Some more boilerplate text. A main goal here will be to maintain a vertical rhythm among all the elements on the page, usually by setting the bottom margin equal to some multiple of the line-height.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper. Nullam ultrices, nisi quis scelerisque convallis, augue neque tempor enim, et mattis justo nibh eu elit. Quisque ultrices gravida pede. Mauris accumsan vulputate tellus. Phasellus condimentum bibendum dolor. Mauris sed ipsum.

picture of lightning on the water

This is an image caption. The city picture is 458 x 254 pixels.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper. Nullam ultrices, nisi quis scelerisque convallis, augue neque tempor enim, et mattis justo nibh eu elit.

A Level 4 Sub-heading

This paragraph is floated right (with a special class.) The sidenote in the margin is floated left and it appears after this paragraph in the HTML source. By floating this paragraph right, the sidenote moves up and aligns with the paragraph it is “noting”, otherwise it would appear next to whatever element immediately followed it.

A floated sidenote. This one appears after the relevant paragraph in the source.

A Level Five Sub-heading

Here we have another paragraph, this one floated left with a different class. The sidenote following it in the source should be out in the right margin. Having left and right sidenotes will only really work in the 12-column layout, so that is the only place it will occur.

Here is the right-hand sidenote. Random link

The dramatic finish.