docs : IE fixes - add html5 shim. index.html links. Element background color

_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 -->

_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>
   

_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 %}

_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>
 

_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>
   

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.alkali          { background: #F00; background: hsl(   0, 100%, 50%); }
-.element.alkaline-earth  { background-color: hsl(  36, 100%, 50%); }
+.element.alkaline-earth  { background: #F80; background: hsl(  36, 100%, 50%); }
-.element.lanthanoid      { background-color: hsl(  72, 100%, 50%); }
+.element.lanthanoid      { background: #FF0; background: hsl(  72, 100%, 50%); }
-.element.actinoid        { background-color: hsl( 108, 100%, 50%); }
+.element.actinoid        { background: #0F0; background: hsl( 108, 100%, 50%); }
-.element.transition      { background-color: hsl( 144, 100%, 50%); }
+.element.transition      { background: #0F8; background: hsl( 144, 100%, 50%); }
-.element.post-transition { background-color: hsl( 180, 100%, 50%); }
+.element.post-transition { background: #0FF; background: hsl( 180, 100%, 50%); }
-.element.metalloid       { background-color: hsl( 216, 100%, 50%); }
+.element.metalloid       { background: #08F; background: hsl( 216, 100%, 50%); }
-.element.other.nonmetal  { background-color: hsl( 252, 100%, 50%); }
+.element.other.nonmetal  { background: #00F; background: hsl( 252, 100%, 50%); }
-.element.halogen         { background-color: hsl( 288, 100%, 50%); }
+.element.halogen         { background: #F0F; background: hsl( 288, 100%, 50%); }
-.element.noble-gas       { background-color: hsl( 324, 100%, 50%); }
+.element.noble-gas       { background: #F08; background: hsl( 324, 100%, 50%); }
 
 
 .element * {