why am i working on this all night

node/src/documents/index.html

@@ -6,47 +6,48 @@ type   : 'Semantic'
 ---
 
 <div class="masthead segment">
-  <div class="container">
-    <h1 class="ui header">Semantic UI</h1>
-    <h2 class="ui header">UI is the DNA of the web.</h2>
-    <p>Semantic empowers designers and developers by creating a shared vocabulary for user interfaces.</p>
-    
-      <a class="ui red huge labeled icon button" href="download.html" class="ui button"><i class="icon upload"></i> Download</a>
-      <a class="ui black huge labeled icon button" href="#" class="ui button"><i class="icon terminal"></i> Try it out</a>
-    
+  <div class="ui responsive center aligned grid">
+    <div class="column">
+      <h1 class="ui header">Semantic UI</h1>
+      <h2 class="ui header">UI is the DNA of the web.</h2>
+      <p>Semantic empowers designers and developers by creating a shared vocabulary for user interfaces.</p>
+        <a class="ui red huge labeled icon button" href="download.html" class="ui button"><i class="icon upload"></i> Download</a>
+        <a class="ui black huge labeled sidebar icon button"><i class="icon list layout"></i> View UI</a>
+    </div>
   </div>
 </div>
 
 <div class="solid">
-  <div class="ui three column stackable responsive grid">
+  <div class="ui two column divided stackable responsive grid">
     <div class="column"> 
-      <h1 class="ui red header">
-        <i class="inverted red circular community icon"></i> 
+      <h1 class="ui purple header">
+        <i class="inverted purple circular community icon"></i> 
         Code Like You Think
       </h1>
-      <p>Semantic creates a re-usable vocabulary for user interface. Semantic lets designing pages be as easy as describing them.</p>
+      <p><b>Designing pages be as easy as describing them.</b>
+      <br>Semantic creates a re-usable vocabulary for user interface. Semantic lets </p>
     </div>
     <div class="column">
       <h1 class="ui teal header">
         <i class="inverted teal circular terminal icon"></i> 
         Expert Tools
       </h1>
-      <p><b>Not happy with off the shelf plugins?</b> Semantic modules are written to be easy to read and extensible. Every plugin provides out of the box debug tools so you can monitor performance without breakpoints.</p>
+      <p><b>Not happy with off the shelf plugins?</b><br>Semantic modules are written to be easy to read and extensible. Every plugin provides out of the box debug tools so you can monitor performance without breakpoints.</p>
     </div>
   </div>
 </div>
 <div class="stripe">
-    <div class="two column stackable responsive divided ui grid">
+    <div class="two column stackable responsive ui grid">
       <div class="column">
-        <div class="large red ui block header">
+        <div class="large inverted purple center aligned ui block header">
           <i class="book icon"></i> HTML
           <div class="sub header">Sometimes it is easier to just see the code</div>
         </div>
         <p>This code example shows the code powering the code example.</p>
         <div class="code" data-type="html">
-    <div class="two column stackable divided ui grid">
+    <div class="two column stackable responsive ui grid">
       <div class="column">
-        <div class="large red ui block header">
+        <div class="large inverted purple center aligned ui block header">
           <i class="book icon"></i> HTML
           <div class="sub header">Sometimes it is easier to just see the code</div>
         </div>
@@ -56,7 +57,7 @@ type   : 'Semantic'
         </div>
       </div>
       <div class="column">
-        <div class="large teal ui block header">
+        <div class="large inverted teal center aligned ui block header">
           <i class="terminal icon"></i> Javascript
           <div class="sub header">Not everything is static</div>
         </div>
@@ -69,7 +70,7 @@ type   : 'Semantic'
       </div>
         </div>
       <div class="column">
-        <div class="large teal ui block header">
+        <div class="large inverted teal center aligned ui block header">
           <i class="terminal icon"></i> Javascript
           <div class="sub header">Not everything is static</div>
         </div>

node/src/files/stylesheets/semantic.css

@@ -314,6 +314,10 @@ a:hover {
   border-bottom: none;
 }
 #example .masthead .labeled.button {
+  position: relative;
+  left: 0px;
+  top: 0px;
+  width: auto !important;
   margin-right: 1em;
 }
 #example .masthead h1 {
@@ -949,6 +953,12 @@ a:hover {
   display: none;
 }
 
+
+#example.index .grid .column {
+  padding-left: 3%;
+  padding-right: 3%;
+}
+
 @media only screen and (max-width : 1725px) {
   #example .container {
     width: auto;

node/src/layouts/default.html.eco

@@ -179,10 +179,12 @@
       </div>
     </div>
   </div>
+    <% if @document.title isnt 'Introduction': %>
     <div class="ui black huge sidebar right attached button">
       <i class="icon list layout"></i>
       <span class="text">Menu</span>
     </div>
+    <% end %>
   <%- @content %>
 </body>