Updating doc header to create theme button

server/documents/elements/button.html.eco

@@ -1,14 +1,16 @@
 ---
 layout      : 'default'
 css         : 'button'
+element     : 'button'
+elementType : 'element'
+
 title       : 'Button'
 description : 'Buttons indicate a possible user action.'
 type        : 'UI Element'
+
 themes      : ['default', 'basic', 'github']
 ---
 <link rel="stylesheet/less" type="text/css" href="/build/less/elements/button.less" />
-<script src="/javascript/library/less.js"></script>
-
 <script src="/javascript/button.js"></script>
 
 <%- @partial('header') %>
@@ -263,8 +265,6 @@ themes      : ['default', 'basic', 'github']
     <a class="ui yellow button">Yellow Button</a>
     <a class="ui green button">Green Button</a>
     <a class="ui blue button">Blue Button</a>
-  </div>
-  <div class="another example">
     <a class="ui orange button">Orange Button</a>
     <a class="ui purple button">Purple Button</a>
     <a class="ui red button">Red Button</a>

server/documents/elements/divider.html.eco

@@ -123,6 +123,16 @@ type        : 'UI Element'
     </div>
   </div>
 
+  <div class="example">
+    <h4 class="ui header">Hidden</h4>
+    <p>A hidden divider divides content without creating a dividing line</p>
+    <h3 class="ui header">Section One</h3>
+    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
+    <div class="ui hidden divider"></div>
+    <h3 class="ui header">Section Two</h3>
+    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
+  </div>
+
   <div class="example">
     <h4 class="ui header">Section</h4>
     <p>A divider can provide greater margins to divide sections of content</p>

server/files/javascript/semantic.js

@@ -113,11 +113,9 @@ semantic.ready = function() {
           // clear whitespace
           line = $.trim(line);
           // match variables only
-          console.log(line);
           if(line[0] == '@') {
             name = line.match(/^@(.+):/);
             value = line.match(/:(\W)(.*);/);
-            console.log(name, value);
             if( ($.isArray(name) && name.length >= 2) && ($.isArray(value) && value.length >= 3) ) {
               name = name[1];
               value = value[2];
@@ -738,7 +736,6 @@ semantic.ready = function() {
 
   $themeDropdown
     .dropdown({
-      action: 'combo',
       onChange: handler.less.changeTheme
     })
   ;

server/files/stylesheets/semantic.css

@@ -63,6 +63,24 @@ h5 {
   font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
 }
 
+p {
+  margin: 1em 0em;
+}
+p:first-child {
+  margin-top: 0em;
+}
+p:last-child {
+  margin-bottom: 0em;
+}
+/* links */
+a {
+  color: #009FDA;
+  text-decoration: none;
+}
+a:hover {
+  color: #00BAFF;
+}
+
 /*
 p,
 ul,
@@ -110,6 +128,7 @@ code {
   padding: 0.125em 0.5em;
   vertical-align: middle;
 }
+
 pre code {
   border: none;
   padding: 0px;
@@ -138,10 +157,6 @@ a:hover {
   color: #00BAFF;
 }
 
-#example .theme.buttons .basic.button .text {
-  font-weight: bold;
-}
-
 #example #menu .item {
   -webkit-border-radius: 0px;
   -moz-border-radius: 0px;
@@ -410,6 +425,15 @@ body.guide .main.container > * {
   vertical-align: top;
   width: 100%;
 }
+#example .introduction h1 {
+  margin-bottom: 0em;
+}
+
+#example .introduction .theme.buttons {
+  margin: -0.1em 0em 0em 0.5em;
+  vertical-align: middle;
+}
+
 #example .advertisement {
   float: none;
   display: table-cell;

server/layouts/default.html.eco

@@ -32,6 +32,7 @@
   <link rel="stylesheet" type="text/css" href="/stylesheets/reset.css">
   <link rel="stylesheet" type="text/css" href="/stylesheets/library/basic.icon.css">
 
+  <link rel="stylesheet/less" type="text/css" href="/build/less/site.less" />
   <% if 'development' in @getEnvironments(): %>
   <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/elements/icon.css">
 
@@ -275,6 +276,7 @@
       <span class="text">Menu</span>
     </div>
   <%- @content %>
+  <script src="/javascript/library/less.js"></script>
 </body>
 
 </html>

server/partials/header.html.eco

@@ -4,13 +4,14 @@
   <div class="container">
     <div class="introduction">
 
-      <h1 class="ui dividing header">
+      <h1 class="ui header">
         <%=@document.title %>
         <% if @document.status?: %><span class="ui label"><%= @document.status %></span><% end %>
       </h1>
 
       <p><%=@document.description %></p>
       <% if @document.type is 'UI Element' or @document.type is 'UI View' or @document.type is 'UI Collection': %>
+      <div class="ui divider"></div>
       <div class="ui right floated basic labeled icon toggle overview button">
         Definition Mode
         <i class="book icon"></i>
@@ -22,20 +23,25 @@
         <i class="help icon"></i>
       </a>
       <% end %>
-      <div class="ui theme buttons">
-        <div class="ui basic button">
-          <span class="text">Semantic</span>
-           Theme
-        </div>
-        <div class="ui theme dropdown icon button" data-element="button" data-type="element">
-          <i class="dropdown icon"></i>
-          <div class="menu ui transition hidden">
-            <div class="item" data-value="default">Semantic</div>
-            <div class="item" data-value="basic">Basic</div>
-            <div class="item active" data-value="github">Github</div>
-          </div>
+      <% if @document.themes?: %>
+      <div class="ui basic floating dropdown theme button" data-element="<%= @document.element %>" data-type="<%= @document.elementType %>">
+        <span class="text">Theme</span>
+        <i class="dropdown icon"></i>
+        <div class="menu ui transition hidden">
+          <% for id, name of @document.themes: %>
+            <div class="item" data-value="<%= name %>"><%= (name.charAt(0).toUpperCase() + name.slice(1)) %></div>
+          <% end %>
         </div>
       </div>
+      <div class="ui button">
+        <i class="settings icon"></i>
+        Customize
+      </div>
+      <div class="ui primary button">
+        Download
+        <i class="download icon"></i>
+      </div>
+      <% end %>
     </div>
     <div class="advertisement">
       <% unless 'development' in @getEnvironments(): %>