Untitled

<!DOCTYPE html>
<html>
  <head>
    <title>A Python Twitter Client | BonsaiDen</title>
    <link rel="shortcut icon" href="/images/favicon.ico">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold">
    <link rel="stylesheet" href="/stylesheets/style.css">

    // will get copied to a local file sooner or later
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>

  <body>

    // the content
    <article>

      // quite some divs here
      <div>
        <div id="content">  // maybe use section?

          // gets replaced via ajax

          <header data-page="/atarashii">
            <h1 class="small">A Python Twitter Client</h1>
            <div class="external">
              <a href="https://github.com/BonsaiDen/Atarashii">Go to Project &#x27A4;</a>
            </div>
            <div class="clear"></div> // always hate these clear things...
          </header>

          <div>
            <p>A Twitter Client for GNOME...</p>
          </div>

          // ajax end

        </div>

        <div id="slideshow">  // maybe use section?
          <header>
            <h1 id="slideTitle">[SlideShowItem Title]</h1>
          </header>

          <div id="slideContent">
            <p>[Slideshow Image]</p>
          </div>
        </div>
        <div class="clear"></div>
      </div>
    </article>


    <header>

      // navigation, surprise!
      <nav>

        // really happy with this
        <ul>
          <li class="left">
            <h1>Projects</h1>
            <ul>
              <li><a href="/garden">JavaScript Garden</a></li>
              <li><a href="/shooter">NodeGame: Shooter</a></li>
              <li><a href="/atarashii" class="active">Atarashii</a></li>
            </ul>
          </li>

          <li>
            <h1>Code</h1>
            <ul>
              <li><a href="/neko">neko.js</a></li>
              <li><a href="/bison">BiSON.js</a></li>
            </ul>
          </li>

          <li>
            <h1>Web</h1>
            <ul>
              <li><a href="/stackoverflow">Stack Overflow</a></li>
              <li><a href="/github">GitHub</a></li>
              <li><a href="/website">The Website</a></li>
            </ul>
          </li>

          <li class="right">
            <h1>ME</h1>
            <ul class="info">
              <li><a href="/me">Ivo Wetzel</a></li>
              <li class="simple">

                // div div div :/
                <div>
                  <div id="picture">
                    <img src="images/snufkin.png" alt="Ivo Wetzel"/>
                    <a href="/me"></a>
                  </div>

                  <ul>
                    <li class="first"><a href="http://twitter.com/BonsaiDen">Twitter</a></li>
                    <li><a href="mailto: ivo.wetzel@googlemail.com">E-Mail</a></li>
                  </ul>

                  <div class="clear"></div>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </nav>
    </header>

    // no real content so far but a background image thingy
    <footer></footer>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script src="/javascripts/page.js"></script>
  </body>
</html>

a {
    background: #fff;
    display: block;
    height: 128px;
    width: 128px;
}

a img:hover {
    opacity: 0.9;
}

nav {
    -moz-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3), 0 -3px 0 rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3), 0 -3px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3), 0 -3px 0 rgba(0, 0, 0, 0.3);
}

nav ul li {
    border-right: 4px solid #052C4F;
}

nav ul li.right {
    border-right: 0;
}

<meta charset="utf-8">
    <title>Coding. Clean and Functional. | BonsaiDen</title>

<nav>
 <h1>Navigation</h1>

 <h2>Projects</h2>
 <ul>
  <li><a href="/garden">JavaScript&nbsp;Garden</a></li>
  <li><a href="/shooter">NodeGame:&nbsp;Shooter</a></li>
  <li><a href="/atarashii">Atarashii</a></li>
 </ul>

 <h2>Code</h2>
 <ul>
  <li><a href="/neko">neko.js</a></li>
  <li><a href="/bison">BiSON.js</a></li>
 </ul>

 <h2>Web</h2>
 <ul>
  <li><a href="/stackoverflow">Stack&nbsp;Overflow</a></li>
  <li><a href="/github">GitHub</a></li>
  <li><a href="/website">The&nbsp;Website</a></li>
 </ul>

 <h1>ME</h1>
 <ul class="info">
  <li><a href="/me" class="">Ivo Wetzel</a></li>
  <li class="simple"><a id="picture" href="/me" class=""><img src="images/snufkin.png" alt="Ivo Wetzel"></a>
   <ul>
    <li class="first"><a href="http://twitter.com/BonsaiDen">Twitter</a></li>
    <li><a href="mailto:ivo.wetzel@googlemail.com">E-Mail</a></li>
   </ul>
  </li>
 </ul>

</nav>

/* >> The Magnificent CLEARFIX: http://j.mp/bestclearfix */
.clearfix:before, .clearfix:after { content: "020"; display: block; height: 0; visibility: hidden; }
.clearfix:after { clear: both; }
/* fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom: 1; }