fixes rounding error in popup, adds fixes to messages, start of index

Former-commit-id: f037b27b1328e835920455e0a1fbb3e5086c8a2a
Former-commit-id: 90f0d5fc2679c25e09476419d223ef27bd9f029a

node/src/documents/index.html

@@ -7,20 +7,30 @@ type   : 'Semantic'
 
 <div class="masthead segment">
   <div class="container">
-    <h1>Semantic</h1>
-    <h2>UI is the language of the web.</h2>
+    <h1><i class="icon flash"></i>Semantic</h1>
+    <h2><strike>HTML</strike> UI is the language of the web.</h2>
     <p>Semantic empowers designers and developers by creating a shared vocabulary for UI.</p>
     
-    <div class="ui large buttons">
+    <div class="ui large black buttons">
       <a href="#" class="ui button"><i class="icon cloud"></i> Download</a>
       <a href="#" class="ui button"><i class="icon terminal"></i> Customize</a>
     </div>
     
   </div>
 </div>
-<div class="main container">
-   
+
+<div class="solid">
+  <div class="container">
+    <h2 class="ui header"><i class="icon eye"></i>HTML for Everyone</h2>
+    <p>Semantic code is designed to work like natural language so front end code can be understood and written without being a tech guru.</p>
+    <h2 class="ui header"><i class="icon easel"></i>  Reskin your site in seconds</h2>
+    <p>Semantic provides an exchange format for UI, so swapping out designs doesn't mean rewriting your site's codebase.</p>
+    <h2 class="ui header"><i class="icon users"></i>  Made for the Community</h2>
+    <p>Semantic gives front end developers a common language to develop UI components, so we can all start speaking the same language.</p>
+  </div>
 </div>
+
+
 </body>
 
 </html>

node/src/files/components/semantic/src/elements/header.css

@@ -20,7 +20,6 @@
 
   font-size: 1.33em;
   font-weight: bold;
-  color: rgba(50, 50, 50, 0.9);
 
   padding: 0em;
   border: none;
@@ -44,31 +43,26 @@ h1.ui.header {
   margin: 2rem 0rem 1.5rem;
   line-height: 1.33rem;
   font-size: 2rem;
-  color: rgba(20, 20, 20, 1);
 }
 h2.ui.header {
   margin: 1.5rem 0rem 1rem;
   line-height: 1.33rem;
   font-size: 1.5rem;
-  color: rgba(20, 20, 20, 0.9);
 }
 h3.ui.header {
   margin: 1.3rem 0rem 1rem;
   line-height: 1.33rem;
   font-size: 1.33rem;
-  color: rgba(30, 30, 30, 0.9);
 }
 h4.ui.header {
   margin: 0.75rem 0rem 0.3rem;
   line-height: 1.33rem;
   font-size: 1.1rem;
-  color: rgba(30, 30, 30, 0.9);
 }
 h5.ui.header {
   margin: 0rem 0rem 0.2rem;
   line-height: 1.2rem;
   font-size: 1rem;
-  color: rgba(40, 40, 40, 0.9);
 }
 
 /*--------------
@@ -79,24 +73,20 @@ h5.ui.header {
   min-height: 1em;
   line-height: 1.33em;
   font-size: 2em;
-  color: rgba(20, 20, 20, 1);
 }
 .large.ui.header {
   line-height: 1.33em;
   font-size: 1.5em;
-  color: rgba(20, 20, 20, 0.9);
 }
 .small.ui.header {
   margin-bottom: 0.25em;
   line-height: 1.33em;
   font-size: 1.1em;
-  color: rgba(30, 30, 30, 0.9);
 }
 .tiny.ui.header {
   margin-bottom: 0em;
   line-height: 1.2em;
   font-size: 1em;
-  color: rgba(40, 40, 40, 0.9);
 }
 
 /*******************************

node/src/files/components/semantic/src/modules/popup.js

@@ -324,9 +324,9 @@
                 };
               break;
             }
-            // true width on popup
+            // true width on popup, avoid rounding error
             $.extend(positioning, {
-              width: $popup.width()
+              width: $popup.width() + 1
             });
             // tentatively place on stage
             $popup

node/src/files/javascript/semantic.js

@@ -19,6 +19,9 @@ semantic.ready = function() {
     $menuPopup   = $('.ui.main.menu .popup.item'),
 
     $example     = $('.example'),
+
+    $developer   = $('.developer.item'),
+    $designer    = $('.designer.item'),
     
     $peek        = $('.peek'),
     $peekItem    = $peek.children('.menu').children('a.item'),

node/src/files/stylesheets/semantic.css

@@ -165,7 +165,7 @@ ul.list li {
 h1 {
   margin: 0px 0px 20px;
   padding: 50px 0px 5px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
 h1 {
   margin: 0px auto;
@@ -303,11 +303,14 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
   background-color: #EF4D6D;
   padding: 75px 0px 50px;
   color: #FFFFFF;
+  margin-bottom: 0px;
+  border-bottom: none;
 }
 #example .masthead h1 {
   font-size: 4em;
   line-height: 1.2;
   padding-bottom: 0px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
 }
 #example .masthead strike {
   color: rgba(255, 255, 255, 0.5);
@@ -341,6 +344,23 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
   width: 800px;
   margin: 0px auto;
 }
+
+#example .solid .container,
+#example .stripe .container {
+  min-height: 240px;
+  padding: 50px 0px;
+  overflow: hidden;
+}
+
+#example .solid {
+  background-color: #FFFFFF;
+}
+#example .stripe {
+  background-color: #333333;
+  color: #FFFFFF;
+}
+
+
 #example .shortcuts {
   float: right;
   clear: both;

node/src/layouts/default.html.eco

@@ -131,6 +131,12 @@
         <% end %>
       </div>
       <div class="right menu">
+        <a class="popup designer item" title="Designer Mode">
+          <i class="icon easel"></i>
+        </a>
+        <a class="popup developer item" title="Developer Mode">
+          <i class="icon terminal"></i>
+        </a>
         <a class="popup item" title="View project on Github" href="https://github.com/quirkyinc/semantic">
           <i class="icon github"></i>
         </a>

src/elements/header.css

@@ -20,7 +20,6 @@
 
   font-size: 1.33em;
   font-weight: bold;
-  color: rgba(50, 50, 50, 0.9);
 
   padding: 0em;
   border: none;
@@ -44,31 +43,26 @@ h1.ui.header {
   margin: 2rem 0rem 1.5rem;
   line-height: 1.33rem;
   font-size: 2rem;
-  color: rgba(20, 20, 20, 1);
 }
 h2.ui.header {
   margin: 1.5rem 0rem 1rem;
   line-height: 1.33rem;
   font-size: 1.5rem;
-  color: rgba(20, 20, 20, 0.9);
 }
 h3.ui.header {
   margin: 1.3rem 0rem 1rem;
   line-height: 1.33rem;
   font-size: 1.33rem;
-  color: rgba(30, 30, 30, 0.9);
 }
 h4.ui.header {
   margin: 0.75rem 0rem 0.3rem;
   line-height: 1.33rem;
   font-size: 1.1rem;
-  color: rgba(30, 30, 30, 0.9);
 }
 h5.ui.header {
   margin: 0rem 0rem 0.2rem;
   line-height: 1.2rem;
   font-size: 1rem;
-  color: rgba(40, 40, 40, 0.9);
 }
 
 /*--------------
@@ -79,24 +73,20 @@ h5.ui.header {
   min-height: 1em;
   line-height: 1.33em;
   font-size: 2em;
-  color: rgba(20, 20, 20, 1);
 }
 .large.ui.header {
   line-height: 1.33em;
   font-size: 1.5em;
-  color: rgba(20, 20, 20, 0.9);
 }
 .small.ui.header {
   margin-bottom: 0.25em;
   line-height: 1.33em;
   font-size: 1.1em;
-  color: rgba(30, 30, 30, 0.9);
 }
 .tiny.ui.header {
   margin-bottom: 0em;
   line-height: 1.2em;
   font-size: 1em;
-  color: rgba(40, 40, 40, 0.9);
 }
 
 /*******************************

src/modules/popup.js

@@ -324,9 +324,9 @@
                 };
               break;
             }
-            // true width on popup
+            // true width on popup, avoid rounding error
             $.extend(positioning, {
-              width: $popup.width()
+              width: $popup.width() + 1
             });
             // tentatively place on stage
             $popup