Fixes top level categories some

docs/collection.html

@@ -78,7 +78,7 @@
       </div>
     </div>
     <div class="item">
-      <a href="module.html"><b>UI Modules</b></a>
+      <a href="/module.html"><b>UI Modules</b></a>
       <div class="menu">
         
           <div class="item"><a href="/modules/shape.html">Shape</a></div>
@@ -90,7 +90,7 @@
   <div class="ui fixed transparent contrasting main menu">
     <div class="container">
       <div class="title item">
-        <b>Semantic:</b> Semantic
+        <b>Semantic:</b> Library
       </div>
       <div class="icon previous link item">
         
@@ -98,26 +98,34 @@
         
       </div>
       <div class="section dropdown item">
-        2 of 3
+        3 of 5
         <div class="menu">
           
             <div class="item">
-              <a href="/download.html">1. Download</a>
+              <a href="/index.html">1. About</a>
+            </div>
+          
+            <div class="item">
+              <a href="/download.html">2. Download</a>
             </div>
           
             <div class="active item">
-              <a href="/collection.html">2. UI Collections</a>
+              <a href="/collection.html">3. UI Collections</a>
+            </div>
+          
+            <div class="item">
+              <a href="/element.html">4. UI Elements</a>
             </div>
           
             <div class="item">
-              <a href="/index.html">3. </a>
+              <a href="/module.html">5. UI Modules</a>
             </div>
           
         </div>
       </div>
       <div class="icon next link item">
         
-        <a href="/index.html"><i class="icon right-open"></i></a>
+        <a href="/element.html"><i class="icon right-open"></i></a>
         
       </div>
       <div class="right menu">

docs/collections/block.html

@@ -78,7 +78,7 @@
       </div>
     </div>
     <div class="item">
-      <a href="module.html"><b>UI Modules</b></a>
+      <a href="/module.html"><b>UI Modules</b></a>
       <div class="menu">
         
           <div class="item"><a href="/modules/shape.html">Shape</a></div>

docs/collections/form.html

@@ -78,7 +78,7 @@
       </div>
     </div>
     <div class="item">
-      <a href="module.html"><b>UI Modules</b></a>
+      <a href="/module.html"><b>UI Modules</b></a>
       <div class="menu">
         
           <div class="item"><a href="/modules/shape.html">Shape</a></div>

docs/collections/menu.html

@@ -78,7 +78,7 @@
       </div>
     </div>
     <div class="item">
-      <a href="module.html"><b>UI Modules</b></a>
+      <a href="/module.html"><b>UI Modules</b></a>
       <div class="menu">
         
           <div class="item"><a href="/modules/shape.html">Shape</a></div>

docs/collections/table.html

@@ -78,7 +78,7 @@
       </div>
     </div>
     <div class="item">
-      <a href="module.html"><b>UI Modules</b></a>
+      <a href="/module.html"><b>UI Modules</b></a>
       <div class="menu">
         
           <div class="item"><a href="/modules/shape.html">Shape</a></div>

docs/download.html

@@ -78,7 +78,7 @@
       </div>
     </div>
     <div class="item">
-      <a href="module.html"><b>UI Modules</b></a>
+      <a href="/module.html"><b>UI Modules</b></a>
       <div class="menu">
         
           <div class="item"><a href="/modules/shape.html">Shape</a></div>
@@ -90,27 +90,35 @@
   <div class="ui fixed transparent contrasting main menu">
     <div class="container">
       <div class="title item">
-        <b>Semantic:</b> Semantic
+        <b>Semantic:</b> Library
       </div>
-      <div class="icon previous link disabled item">
+      <div class="icon previous link item">
         
-        <i class="icon left-open"></i>
+        <a href="/index.html"><i class="icon left-open"></i></a>
         
       </div>
       <div class="section dropdown item">
-        1 of 3
+        2 of 5
         <div class="menu">
           
+            <div class="item">
+              <a href="/index.html">1. About</a>
+            </div>
+          
             <div class="active item">
-              <a href="/download.html">1. Download</a>
+              <a href="/download.html">2. Download</a>
+            </div>
+          
+            <div class="item">
+              <a href="/collection.html">3. UI Collections</a>
             </div>
           
             <div class="item">
-              <a href="/collection.html">2. UI Collections</a>
+              <a href="/element.html">4. UI Elements</a>
             </div>
           
             <div class="item">
-              <a href="/index.html">3. </a>
+              <a href="/module.html">5. UI Modules</a>
             </div>
           
         </div>

docs/element.html

@@ -0,0 +1,176 @@
+<!DOCTYPE html>
+<head>
+
+  <!-- Standard Meta -->
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <meta name="viewport" content="width=device-width" />
+
+  <!-- Site Properities -->
+  <meta http-equiv="X-Powered-By" content="DocPad v6.31.6"/>
+  <title>UI Elements | Semantic UI</title>
+
+  <meta name="description" content="Semantic empowers designers and developers by creating a shared vocabulary for UI." />
+  <meta name="keywords" content="html5, ui, library, framework, javascript" />
+
+  <link rel="stylesheet" type="text/css" href="/stylesheets/reset.css">
+
+  <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/elements/icons.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/elements/button.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/elements/checkbox.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/elements/header.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/elements/label.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/elements/divider.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/elements/block.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/elements/segment.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/collections/grid.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/collections/table.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/collections/form.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/collections/menu.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/modules/shape.css">
+
+  <link rel="stylesheet" type="text/css" href="/stylesheets/semantic.css">
+  <link rel="stylesheet" type="text/css" href="/stylesheets/library/sidr.css">
+
+  <script src="/javascript/library/jquery.js"></script>
+  <script src="/javascript/library/ace/ace.js"></script>
+  <script src="/javascript/library/sidr.js"></script>
+  <script src="/javascript/library/waypoints.js"></script>
+  <script src="/modules/behavior/state.js"></script>
+  <script src="/modules/ui/shape.js"></script>
+  <script src="/javascript/semantic.js"></script>
+</head>
+
+
+
+
+
+
+
+<body id="example">
+  <div class="ui large vertical menu" id="menu">
+    <div class="item"><a href="/index.html"><b>Introduction</b></a></div>
+    <div class="item"><a href="/download.html"><b>Download</b></a></div>
+    <div class="item">
+      <a href="element.html"><b>UI Elements</b></a>
+      <div class="menu">
+        
+          <div class="item"><a href="/elements/button.html">Button</a></div>
+        
+          <div class="item"><a href="/elements/label.html">Label</a></div>
+        
+      </div>
+    </div>
+    <div class="item">
+      <a href="/collection.html"><b>UI Collections</b></a>
+      <div class="menu">
+        
+          <div class="item"><a href="/collections/form.html">Form</a></div>
+        
+          <div class="item"><a href="/elements/header.html">Header</a></div>
+        
+          <div class="item"><a href="/collections/menu.html">Menu</a></div>
+        
+          <div class="item"><a href="/collections/table.html">Table</a></div>
+        
+          <div class="item"><a href="/collections/block.html">Text Block</a></div>
+        
+      </div>
+    </div>
+    <div class="item">
+      <a href="/module.html"><b>UI Modules</b></a>
+      <div class="menu">
+        
+          <div class="item"><a href="/modules/shape.html">Shape</a></div>
+        
+      </div>
+    </div>
+  </div>
+
+  <div class="ui fixed transparent contrasting main menu">
+    <div class="container">
+      <div class="title item">
+        <b>Semantic:</b> Library
+      </div>
+      <div class="icon previous link item">
+        
+        <a href="/collection.html"><i class="icon left-open"></i></a>
+        
+      </div>
+      <div class="section dropdown item">
+        4 of 5
+        <div class="menu">
+          
+            <div class="item">
+              <a href="/index.html">1. About</a>
+            </div>
+          
+            <div class="item">
+              <a href="/download.html">2. Download</a>
+            </div>
+          
+            <div class="item">
+              <a href="/collection.html">3. UI Collections</a>
+            </div>
+          
+            <div class="active item">
+              <a href="/element.html">4. UI Elements</a>
+            </div>
+          
+            <div class="item">
+              <a href="/module.html">5. UI Modules</a>
+            </div>
+          
+        </div>
+      </div>
+      <div class="icon next link item">
+        
+        <a href="/module.html"><i class="icon right-open"></i></a>
+        
+      </div>
+      <div class="right menu">
+        <a class="item" href="https://github.com/quirkyinc/semantic">
+          <i class="icon github"></i>
+        </a>
+        <div class="dropdown item">
+          <i class="icon tint"></i> Theme
+          <div class="theme menu">
+            <div class="active item" data-theme="flat">Flat</div>
+            <div class="item" data-theme="shaded">Shaded</div>
+            <div class="item" data-theme="classic">Classic</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="ui huge left attached vertical side buttons">
+    <div class="ui large blue sidebar button"><i class="icon th-list"></i></div>
+  </div>
+  <div class="segment">
+  <div class="container">
+    <h1>UI Element</h1>
+    <p>UI elements are distinct interface elements, that can be explained both as single elements and as plural groups.</p>
+  </div>
+</div>
+<div class="main container">
+    
+  <div class="peek">
+    <div class="ui vertical pointing link menu">
+      <div class="active item">Definition</div>
+      <div class="item">Distinction</div>
+    </div>
+  </div>
+  <h2>Definition</h2>
+  
+  <p>zzzz</p>
+  
+  <h2>Distinction</h2>
+  
+</div>
+</body>
+
+</html>
+</body>
+
+</html>

docs/elements/button.html

@@ -78,7 +78,7 @@
       </div>
     </div>
     <div class="item">
-      <a href="module.html"><b>UI Modules</b></a>
+      <a href="/module.html"><b>UI Modules</b></a>
       <div class="menu">
         
           <div class="item"><a href="/modules/shape.html">Shape</a></div>

docs/elements/header.html

@@ -78,7 +78,7 @@
       </div>
     </div>
     <div class="item">
-      <a href="module.html"><b>UI Modules</b></a>
+      <a href="/module.html"><b>UI Modules</b></a>
       <div class="menu">
         
           <div class="item"><a href="/modules/shape.html">Shape</a></div>

docs/elements/label.html

@@ -78,7 +78,7 @@
       </div>
     </div>
     <div class="item">
-      <a href="module.html"><b>UI Modules</b></a>
+      <a href="/module.html"><b>UI Modules</b></a>
       <div class="menu">
         
           <div class="item"><a href="/modules/shape.html">Shape</a></div>

docs/index.html

@@ -8,7 +8,7 @@
 
   <!-- Site Properities -->
   <meta http-equiv="X-Powered-By" content="DocPad v6.31.6"/>
-  <title>Semantic UI</title>
+  <title>About | Semantic UI</title>
 
   <meta name="description" content="Semantic empowers designers and developers by creating a shared vocabulary for UI." />
   <meta name="keywords" content="html5, ui, library, framework, javascript" />
@@ -78,7 +78,7 @@
       </div>
     </div>
     <div class="item">
-      <a href="module.html"><b>UI Modules</b></a>
+      <a href="/module.html"><b>UI Modules</b></a>
       <div class="menu">
         
           <div class="item"><a href="/modules/shape.html">Shape</a></div>
@@ -90,34 +90,42 @@
   <div class="ui fixed transparent contrasting main menu">
     <div class="container">
       <div class="title item">
-        <b>Semantic:</b> Semantic
+        <b>Semantic:</b> Library
       </div>
-      <div class="icon previous link item">
+      <div class="icon previous link disabled item">
         
-        <a href="/collection.html"><i class="icon left-open"></i></a>
+        <i class="icon left-open"></i>
         
       </div>
       <div class="section dropdown item">
-        3 of 3
+        1 of 5
         <div class="menu">
           
+            <div class="active item">
+              <a href="/index.html">1. About</a>
+            </div>
+          
             <div class="item">
-              <a href="/download.html">1. Download</a>
+              <a href="/download.html">2. Download</a>
             </div>
           
             <div class="item">
-              <a href="/collection.html">2. UI Collections</a>
+              <a href="/collection.html">3. UI Collections</a>
             </div>
           
-            <div class="active item">
-              <a href="/index.html">3. </a>
+            <div class="item">
+              <a href="/element.html">4. UI Elements</a>
+            </div>
+          
+            <div class="item">
+              <a href="/module.html">5. UI Modules</a>
             </div>
           
         </div>
       </div>
-      <div class="icon next disabled link item">
+      <div class="icon next link item">
         
-        <i class="icon right-open"></i>
+        <a href="/download.html"><i class="icon right-open"></i></a>
         
       </div>
       <div class="right menu">

docs/module.html

@@ -0,0 +1,176 @@
+<!DOCTYPE html>
+<head>
+
+  <!-- Standard Meta -->
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <meta name="viewport" content="width=device-width" />
+
+  <!-- Site Properities -->
+  <meta http-equiv="X-Powered-By" content="DocPad v6.31.6"/>
+  <title>UI Modules | Semantic UI</title>
+
+  <meta name="description" content="Semantic empowers designers and developers by creating a shared vocabulary for UI." />
+  <meta name="keywords" content="html5, ui, library, framework, javascript" />
+
+  <link rel="stylesheet" type="text/css" href="/stylesheets/reset.css">
+
+  <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/elements/icons.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/elements/button.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/elements/checkbox.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/elements/header.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/elements/label.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/elements/divider.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/elements/block.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/elements/segment.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/collections/grid.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/collections/table.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/collections/form.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/collections/menu.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/modules/shape.css">
+
+  <link rel="stylesheet" type="text/css" href="/stylesheets/semantic.css">
+  <link rel="stylesheet" type="text/css" href="/stylesheets/library/sidr.css">
+
+  <script src="/javascript/library/jquery.js"></script>
+  <script src="/javascript/library/ace/ace.js"></script>
+  <script src="/javascript/library/sidr.js"></script>
+  <script src="/javascript/library/waypoints.js"></script>
+  <script src="/modules/behavior/state.js"></script>
+  <script src="/modules/ui/shape.js"></script>
+  <script src="/javascript/semantic.js"></script>
+</head>
+
+
+
+
+
+
+
+<body id="example">
+  <div class="ui large vertical menu" id="menu">
+    <div class="item"><a href="/index.html"><b>Introduction</b></a></div>
+    <div class="item"><a href="/download.html"><b>Download</b></a></div>
+    <div class="item">
+      <a href="element.html"><b>UI Elements</b></a>
+      <div class="menu">
+        
+          <div class="item"><a href="/elements/button.html">Button</a></div>
+        
+          <div class="item"><a href="/elements/label.html">Label</a></div>
+        
+      </div>
+    </div>
+    <div class="item">
+      <a href="/collection.html"><b>UI Collections</b></a>
+      <div class="menu">
+        
+          <div class="item"><a href="/collections/form.html">Form</a></div>
+        
+          <div class="item"><a href="/elements/header.html">Header</a></div>
+        
+          <div class="item"><a href="/collections/menu.html">Menu</a></div>
+        
+          <div class="item"><a href="/collections/table.html">Table</a></div>
+        
+          <div class="item"><a href="/collections/block.html">Text Block</a></div>
+        
+      </div>
+    </div>
+    <div class="item">
+      <a href="/module.html"><b>UI Modules</b></a>
+      <div class="menu">
+        
+          <div class="item"><a href="/modules/shape.html">Shape</a></div>
+        
+      </div>
+    </div>
+  </div>
+
+  <div class="ui fixed transparent contrasting main menu">
+    <div class="container">
+      <div class="title item">
+        <b>Semantic:</b> Library
+      </div>
+      <div class="icon previous link item">
+        
+        <a href="/element.html"><i class="icon left-open"></i></a>
+        
+      </div>
+      <div class="section dropdown item">
+        5 of 5
+        <div class="menu">
+          
+            <div class="item">
+              <a href="/index.html">1. About</a>
+            </div>
+          
+            <div class="item">
+              <a href="/download.html">2. Download</a>
+            </div>
+          
+            <div class="item">
+              <a href="/collection.html">3. UI Collections</a>
+            </div>
+          
+            <div class="item">
+              <a href="/element.html">4. UI Elements</a>
+            </div>
+          
+            <div class="active item">
+              <a href="/module.html">5. UI Modules</a>
+            </div>
+          
+        </div>
+      </div>
+      <div class="icon next disabled link item">
+        
+        <i class="icon right-open"></i>
+        
+      </div>
+      <div class="right menu">
+        <a class="item" href="https://github.com/quirkyinc/semantic">
+          <i class="icon github"></i>
+        </a>
+        <div class="dropdown item">
+          <i class="icon tint"></i> Theme
+          <div class="theme menu">
+            <div class="active item" data-theme="flat">Flat</div>
+            <div class="item" data-theme="shaded">Shaded</div>
+            <div class="item" data-theme="classic">Classic</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="ui huge left attached vertical side buttons">
+    <div class="ui large blue sidebar button"><i class="icon th-list"></i></div>
+  </div>
+  <div class="segment">
+  <div class="container">
+    <h1>UI Modules</h1>
+    <p>UI modules are interface elements which require a definition of their behavior.</p>
+  </div>
+</div>
+<div class="main container">
+    
+  <div class="peek">
+    <div class="ui vertical pointing link menu">
+      <div class="active item">Definition</div>
+      <div class="item">Distinction</div>
+    </div>
+  </div>
+  <h2>Definition</h2>
+  
+  <p>zzzz</p>
+  
+  <h2>Distinction</h2>
+  
+</div>
+</body>
+
+</html>
+</body>
+
+</html>

docs/modules/shape.html

@@ -78,7 +78,7 @@
       </div>
     </div>
     <div class="item">
-      <a href="module.html"><b>UI Modules</b></a>
+      <a href="/module.html"><b>UI Modules</b></a>
       <div class="menu">
         
           <div class="active item"><a href="/modules/shape.html">Shape</a></div>

docs/sink.html

@@ -78,7 +78,7 @@
       </div>
     </div>
     <div class="item">
-      <a href="module.html"><b>UI Modules</b></a>
+      <a href="/module.html"><b>UI Modules</b></a>
       <div class="menu">
         
           <div class="item"><a href="/modules/shape.html">Shape</a></div>

node/src/documents/collection.html

@@ -3,7 +3,7 @@ layout : 'default'
 css    : 'index'
 
 title  : 'UI Collections'
-type   : 'Semantic'
+type   : 'Library'
 ---
 
 <div class="segment">

node/src/documents/download.html

@@ -3,7 +3,7 @@ layout : 'default'
 css    : 'download'
 
 title  : 'Download'
-type   : 'Semantic'
+type   : 'Library'
 ---
 <div class="segment">
   <div class="container">

node/src/documents/element.html

@@ -0,0 +1,32 @@
+---
+layout : 'default'
+css    : 'index'
+
+title  : 'UI Elements'
+type   : 'Library'
+---
+
+<div class="segment">
+  <div class="container">
+    <h1>UI Element</h1>
+    <p>UI elements are distinct interface elements, that can be explained both as single elements and as plural groups.</p>
+  </div>
+</div>
+<div class="main container">
+    
+  <div class="peek">
+    <div class="ui vertical pointing link menu">
+      <div class="active item">Definition</div>
+      <div class="item">Distinction</div>
+    </div>
+  </div>
+  <h2>Definition</h2>
+  
+  <p>zzzz</p>
+  
+  <h2>Distinction</h2>
+  
+</div>
+</body>
+
+</html>

node/src/documents/index.html

@@ -1,7 +1,8 @@
 ---
 layout : 'default'
 css    : 'index'
-type   : 'Semantic'
+title  : 'About'
+type   : 'Library'
 ---
 
 <div class="segment">

node/src/documents/module.html

@@ -0,0 +1,32 @@
+---
+layout : 'default'
+css    : 'index'
+
+title  : 'UI Modules'
+type   : 'Library'
+---
+
+<div class="segment">
+  <div class="container">
+    <h1>UI Modules</h1>
+    <p>UI modules are interface elements which require a definition of their behavior.</p>
+  </div>
+</div>
+<div class="main container">
+    
+  <div class="peek">
+    <div class="ui vertical pointing link menu">
+      <div class="active item">Definition</div>
+      <div class="item">Distinction</div>
+    </div>
+  </div>
+  <h2>Definition</h2>
+  
+  <p>zzzz</p>
+  
+  <h2>Distinction</h2>
+  
+</div>
+</body>
+
+</html>

node/src/layouts/default.html.eco

@@ -68,7 +68,7 @@
       </div>
     </div>
     <div class="item">
-      <a href="module.html"><b>UI Modules</b></a>
+      <a href="/module.html"><b>UI Modules</b></a>
       <div class="menu">
         <% for element in uiModules: %>
           <div class="<%= if element.id is @document.id then 'active ' %>item"><a href="<%= element.url %>"><%= element.title %></a></div>