Anyone visiting my actual site will realise quite quickly that there is a new design. It was designed by my girlfriend and put together by me over the last week or two. It is still not done, but it’s close enough for me to put it live for now.

One thing of note is that it is entirely HTML5 and CSS3. This is done partly as an intellectual exercise and partly as a statement affirming my belief in a semantic web. I am still learning what elements are right to use where, so if you look at the HTML source and say to yourself: “Hey, that’s not how that element is supposed to be used,” please do tell me and I’ll restructure it.

I’ve tried to keep classes and IDs to a minimum, using the full power of CSS3 selectors instead. In order to get the design out, I’ve cut a few corners I am not happy with and used some classes, but I plan on refactoring these occurrences soon.

So far the design looks and works perfectly in Safari 4 and FireFox 3.5. Before implementing comments, it was working perfectly in Safari 3 and FireFox 3, but I haven’t checked those yet. I am quite content ignoring IE and even older versions of FireFox and Safari, as my target audience is developers—web developers, specifically—and I fully expect them to be using the cutting edge of browser technology.

I’ve hacked Enki apart quite a bit to get the code highlighting the way I want, replacing CodeRay with Ultraviolet, then further modifying it to add my own line numbers in a way that made the line numbers not get selected when selecting the code. Now, my sin: I used tables. I’m sorry—I based it off CodeRay’s existing table code for line numbers but find this an utter violation of the semantic goal of this entire re-design. This will be very shortly replaced with <figure> elements and figure pre { display: table-cell; } to emulate the same design.

Also, somewhere between finishing the code highlighting, and working on the rest of the site, I broke code highlighting in FireFox. Will fix soon.

Now some code samples I am quite proud of:

<article>
  <header>
    <h1><a href="#" rel="bookmark">Article Title</a></h1>
    <details>
      <ul>
        <li><a href="#">0 comments</a></li>
        <li>tagged with <a href="/snow%20leopard">snow leopard</a></li>
      </ul>
    </details>
  </header>
  
  <aside>
    <time datetime="2009-07-09T05:34:00Z">
      <a href="#" rel="bookmark">
      <abbr title="July">Jul</abbr> 
       9<sup>th</sup> 
      <abbr title="2009">'09</abbr>
      <sub> 5:34 am</sub>
    </a>
    </time>
  </aside>

  <section>
    <p>Article text</p>
  </section>
  
  <section>
    <h2 id="comments">Comments</h2>
    <ol>
      <li id="comment-17">
        <a href="#" title="">
           <time datetime="2009-07-01T12:47:33Z">
             July 01, 2009 at 12:47 PM
           </time>
          </a>
        <h3>commenter says:</h3>
        <p>comment text</p>
      </li>
    </ol>
  </section>
</article>

The CSS for the article is incredibly long, so I’ll just show off the fanciest CSS3, the part for the comment section:

body > article > aside ~ section:last-of-type {
    margin-top:40px;
  }
    
    body > article > aside ~ section:last-of-type ol:first-of-type {
      border-top: 1px dotted #4B4B4B;
      margin-top:20px;
      list-style: none;
      width: 598px;
      margin-left: -20px;
    }
  
      body > article > aside ~ section:last-of-type ol:first-of-type li {
        border-bottom: 1px dotted #4B4B4B;
        padding: 20px;
      }
      
      body > article > aside ~ section:last-of-type ol:first-of-type li p {
        margin-bottom: 0;
      }
      
        body > article > aside ~ section:last-of-type ol:first-of-type li h3,
        body > article > aside ~ section:last-of-type ol:first-of-type li h3 a {
          color: inherit;
          font-size: 14px;
        }
        
        body > article > aside ~ section:last-of-type ol:first-of-type li h3 a {
          display: inline-block;
          padding-left: 15px;
          background: transparent url(/images/openid_icon.png) no-repeat 0 3px;
        }
        
        body > article > aside ~ section:last-of-type ol:first-of-type li time {
          font-size: 11px;
        }
  
      body > article > aside ~ section:last-of-type ol:first-of-type li:nth-of-type(2n+1) {
        background-color:#C5C5C5;
      }
  
        body > article > aside ~ section:last-of-type ol:first-of-type li table {
          margin-left: -51px;
          opacity:0.8;
        }
  
          body > article > aside ~ section:last-of-type ol:first-of-type li table caption {
            color: #000;
          }
          
    body > article > aside ~ section:last-of-type textarea {
      width: 100%;
    }

Please send screenshots of the design broken in some browsers. I do want to have a stab at making it work in as many browsers as possible. But for now, go modern or go bust!

Comments

1. July 19, 2009 at 9:21 PM

   demolischa says:

   Nice to see something happening here again ... its been a while. An nice to see some HTML5 an CSS3 in practice.
2. July 21, 2009 at 7:53 AM

   Bodaniel Jeanes says:

   Thanks Mischa. Interested in learning Ruby on Rails then? That's 90% of the content :P