From 1c59cf8e97a1f5254468a3b8650ba1811be54d69 Mon Sep 17 00:00:00 2001
From: jlukic <jacklukic@gmail.com>
Date: Wed, 23 Oct 2013 18:04:04 -0400
Subject: [PATCH] Updates homepage examples

---
 server/documents/index.html.eco       | 30 +++++++++++++--------------
 server/files/stylesheets/semantic.css |  4 +---
 src/collections/message.less          |  9 ++++----
 3 files changed, 20 insertions(+), 23 deletions(-)

diff --git a/server/documents/index.html.eco b/server/documents/index.html.eco
index cd2b1b47b..17dc3ae4e 100755
--- a/server/documents/index.html.eco
+++ b/server/documents/index.html.eco
@@ -31,26 +31,26 @@ type   : 'Semantic'
   <div class="ui page grid">
     <div class="ui column">
       <h2 class="ui header">
-        <i class="circular emphasized code icon"></i>
+        <i class="circular emphasized book icon"></i>
         <div class="content">
           Lose the Hieroglyphics
           <div class="sub header">Semantic is structured around natural language conventions to make development more intuitive.
           </div>
         </div>
       </h2>
-      <div class="ui horizontal section divider">
-        <i class="circular heart icon"></i>
+      <div class="ui message">
+        Semantic is tag ambivalent meaning you can use <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list" target="_blank">any html tags</a> with UI elements.
       </div>
       <div class="ui stackable grid">
       <div class="two column row">
         <div class="column">
           <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>
-      <div class="column">2</div>
-      <div class="column">3</div>
-    </div>
+    <main class="ui three column grid">
+      <aside class="column">1</aside>
+      <section class="column">2</section>
+      <section class="column">3</section>
+    </main>
           </div>
         </div>
         <div class="column">
@@ -68,15 +68,15 @@ type   : 'Semantic'
         <div class="column">
           <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>
+    <nav class="ui menu">
+      <h3 class="header item">Title</h3>
       <a class="active item">Home</a>
       <a class="item">Link</a>
       <a class="item">Link</a>
-      <div class="right floated text item">
+      <span class="right floated text item">
         Signed in as <a href="#">user</a>
-      </div>
-    </div>
+      </span>
+    </nav>
           </div>
         </div>
         <div class="column">
@@ -98,10 +98,10 @@ type   : 'Semantic'
         <div class="column">
           <a class="ui teal label" href="/elements/button.html">Semantic</a>
           <div class="code" data-type="html">
-    <div class="large ui button">
+    <button class="large ui button">
       <i class="heart icon"></i>
       Like it
-    </div>
+    </button>
           </div>
         </div>
         <div class="column">
diff --git a/server/files/stylesheets/semantic.css b/server/files/stylesheets/semantic.css
index 17b63c4e9..eaddb09b8 100755
--- a/server/files/stylesheets/semantic.css
+++ b/server/files/stylesheets/semantic.css
@@ -535,9 +535,7 @@ body.guide .main.container > * {
   color: rgba(0, 0, 0, 0.5);
 }
 #example .stripe .message {
-  margin: 0em;
-  padding: 0em;
-  background-color: transparent;
+  margin: 2em 0em;
 }
 
 
diff --git a/src/collections/message.less b/src/collections/message.less
index d4eb6a980..8346b4f6e 100755
--- a/src/collections/message.less
+++ b/src/collections/message.less
@@ -308,21 +308,20 @@
 /* Red Text Block */
 .ui.red.message {
   background-color: #F1D7D7;
-
   color: #A95252;
 }
 
 /* Success Text Block */
 .ui.success.message,
 .ui.positive.message {
-  background-color: #5BBD72;
-  color: #FFFFFF;
+  background-color: #DEFCD5;
+  color: #52A954;
 }
 /* Error Text Block */
 .ui.error.message,
 .ui.negative.message {
-  background-color: #D95C5C;
-  color: #FFFFFF;
+  background-color: #F1D7D7;
+  color: #A95252;
 }