From 81e537408a0b7286e335ef77f17d19722d91fd90 Mon Sep 17 00:00:00 2001
From: David DeSandro <david@desandro.com>
Date: Thu, 20 Jan 2011 22:33:29 -0500
Subject: [PATCH] docs : IE fixes - add html5 shim. index.html links. Element
 background color

---
 _includes/html-head.html      |  2 ++
 _layouts/demo.html            |  2 +-
 _layouts/doc.html             |  2 +-
 _layouts/elements.html        |  2 +-
 _layouts/inf-scroll-page.html |  2 +-
 css/style.css                 | 22 +++++++++++-----------
 6 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/_includes/html-head.html b/_includes/html-head.html
index 98b924d..a226915 100644
--- a/_includes/html-head.html
+++ b/_includes/html-head.html
@@ -4,6 +4,8 @@
   <meta charset="utf-8" />
   <title>{{ page.title }} &middot; {{ site.name }} {% if page.category == 'docs' %}Docs{% elsif page.category == 'demos' %}Demo{% endif %}</title>
   
+  <!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
+  
   <link rel="stylesheet" href="../css/style.css" type="text/css" media="screen" />
   
   <!-- scripts at bottom of page -->
diff --git a/_layouts/demo.html b/_layouts/demo.html
index 9f63b7f..18af36c 100644
--- a/_layouts/demo.html
+++ b/_layouts/demo.html
@@ -1,6 +1,6 @@
 {% include html-head.html %}
 
-  <p id="demo-nav"><a href="../">{{ site.name }}</a> Demo</p>
+  <p id="demo-nav"><a href="../index.html">{{ site.name }}</a> Demo</p>
   
   <h1>{{ page.title }}</h1>
   
diff --git a/_layouts/doc.html b/_layouts/doc.html
index 996ffc1..d2e3f53 100644
--- a/_layouts/doc.html
+++ b/_layouts/doc.html
@@ -1,7 +1,7 @@
 {% include html-head.html %}
   
   <nav id="docs-nav">
-    <h1><a href="../">{{ site.name }}</a> Docs</h1>
+    <h1><a href="../index.html">{{ site.name }}</a> Docs</h1>
     
     <ul>
       {% for doc in site.categories.docs reversed %}
diff --git a/_layouts/elements.html b/_layouts/elements.html
index f68b7a3..2a4c8c3 100644
--- a/_layouts/elements.html
+++ b/_layouts/elements.html
@@ -1,6 +1,6 @@
 {% include html-head.html %}
 
-  <p id="demo-nav"><a href="../">{{ site.name }}</a> Demo</p>
+  <p id="demo-nav"><a href="../index.html">{{ site.name }}</a> Demo</p>
 
   <h1>{{ page.title }}</h1>
 
diff --git a/_layouts/inf-scroll-page.html b/_layouts/inf-scroll-page.html
index 5187daf..1e5b08c 100644
--- a/_layouts/inf-scroll-page.html
+++ b/_layouts/inf-scroll-page.html
@@ -1,6 +1,6 @@
 {% include html-head.html %}
 
-  <p id="demo-nav"><a href="../">{{ site.name }}</a> Demo</p>
+  <p id="demo-nav"><a href="../index.html">{{ site.name }}</a> Demo</p>
 
   <h1>{{ page.title }}</h1>
   
diff --git a/css/style.css b/css/style.css
index 4e628e3..187bd16 100644
--- a/css/style.css
+++ b/css/style.css
@@ -77,23 +77,23 @@ body {
   height: 110px;
   margin: 5px;
   float: left;
-  background: white;
   overflow: hidden;
   position: relative;
+  background: #888;
   color: #222;
   border-top-right-radius: 1.2em;
 }
 
-.element.alkali          { background-color: hsl(   0, 100%, 50%); }
-.element.alkaline-earth  { background-color: hsl(  36, 100%, 50%); }
-.element.lanthanoid      { background-color: hsl(  72, 100%, 50%); }
-.element.actinoid        { background-color: hsl( 108, 100%, 50%); }
-.element.transition      { background-color: hsl( 144, 100%, 50%); }
-.element.post-transition { background-color: hsl( 180, 100%, 50%); }
-.element.metalloid       { background-color: hsl( 216, 100%, 50%); }
-.element.other.nonmetal  { background-color: hsl( 252, 100%, 50%); }
-.element.halogen         { background-color: hsl( 288, 100%, 50%); }
-.element.noble-gas       { background-color: hsl( 324, 100%, 50%); }
+.element.alkali          { background: #F00; background: hsl(   0, 100%, 50%); }
+.element.alkaline-earth  { background: #F80; background: hsl(  36, 100%, 50%); }
+.element.lanthanoid      { background: #FF0; background: hsl(  72, 100%, 50%); }
+.element.actinoid        { background: #0F0; background: hsl( 108, 100%, 50%); }
+.element.transition      { background: #0F8; background: hsl( 144, 100%, 50%); }
+.element.post-transition { background: #0FF; background: hsl( 180, 100%, 50%); }
+.element.metalloid       { background: #08F; background: hsl( 216, 100%, 50%); }
+.element.other.nonmetal  { background: #00F; background: hsl( 252, 100%, 50%); }
+.element.halogen         { background: #F0F; background: hsl( 288, 100%, 50%); }
+.element.noble-gas       { background: #F08; background: hsl( 324, 100%, 50%); }
 
 
 .element * {