Index updating

node/src/documents/index.html

@@ -20,12 +20,19 @@ type   : 'Semantic'
 <div class="stripe">
   <div class="ui responsive grid">
     <div class="ui column">
-      <h3 class="ui header">Comparing UI Frameworks</h3>
-      <div class="ui vertically divided grid">
+      <h2 class="ui header">
+        <i class="icon code"></I>
+        <div class="content">
+          Decodifying code
+          <div class="sub header">Semantic makes developing websites easier by defining a re-usable language for writing user interfaces.</div>
+        </div>
+      </h2>
+      <div class="ui divider"></div>
+      <div class="ui grid">
       <div class="three column row">
         <p>3 column grid</p>
         <div class="column">
-          <a class="ui teal below pointing label" href="/collections/grid.html">Semantic</a>
+          <a class="ui teal label" href="/collections/grid.html">Semantic</a>
           <div class="code" data-type="html">
     <div class="ui three column grid">
       <div class="column">1</div>
@@ -35,7 +42,7 @@ type   : 'Semantic'
           </div>
         </div>
         <div class="column">
-          <div class="ui below pointing label">Bootstrap</div>
+          <div class="ui label">Bootstrap</div>
           <div class="code" data-type="html">
     <div class="row">
       <div class="col-lg-4">1</div>
@@ -45,7 +52,7 @@ type   : 'Semantic'
           </div>
         </div>
         <div class="column">
-          <div class="ui below pointing label">YUI</div>
+          <div class="ui label">YUI</div>
           <div class="code" data-type="html">
     <div class="yui-3-g">
       <div class="yui3-u-1-3">1</div>
@@ -58,7 +65,7 @@ type   : 'Semantic'
       <div class="ui two column row">
         <p>Navigation Menu</p>
         <div class="column">
-          <a class="ui teal below pointing label" href="/collections/menu.html">Semantic</a>
+          <a class="ui teal label" href="/collections/menu.html">Semantic</a>
           <div class="code" data-type="html">
     <div class="ui menu">
       <div class="header item">Title</div>
@@ -72,7 +79,7 @@ type   : 'Semantic'
           </div>
         </div>
         <div class="column">
-          <div class="ui below pointing label">Bootstrap</div>
+          <div class="ui label">Bootstrap</div>
           <div class="code" data-type="html">
     <div class="navbar">
       <a class="navbar-brand" href="#">Title</a>
@@ -89,7 +96,7 @@ type   : 'Semantic'
       <div class="ui two column row">
         <p>Buttons</p>
         <div class="column">
-          <a class="ui teal below pointing label" href="/elements/button.html">Semantic</a>
+          <a class="ui teal label" href="/elements/button.html">Semantic</a>
           <div class="code" data-type="html">
     <div class="ui large red labeled icon button">
       <i class="icon heart"></i>
@@ -98,7 +105,7 @@ type   : 'Semantic'
           </div>
         </div>
         <div class="column">
-          <div class="ui below pointing label">Bootstrap</div>
+          <div class="ui label">Bootstrap</div>
           <div class="code" data-type="html">
     <button type="button" class="btn btn-primary btn-lg">
       <span class="glyphicon glyphicon-heart"></span>

node/src/files/stylesheets/semantic.css

@@ -378,6 +378,12 @@ a:hover {
 #example .stripe {
   padding: 50px 0px;
 }
+#example .stripe .column .divider {
+  margin-bottom: 2em;
+}
+#example .stripe .column .label {
+  margin-bottom: 1em;
+}
 
 #example .solid {
   background-color: #FFFFFF;