Adds responsive styles for all pages that include normal layout (not API, container, etc)

server/documents/collections/menu.html.eco

@@ -789,6 +789,8 @@ themes      : ['Default', 'Chubby', 'GitHub', 'Material']
       <a class="ui olive item">Olive</a>
       <a class="ui green item">Green</a>
       <a class="ui teal item">Teal</a>
+    </div>
+    <div class="ui menu">
       <a class="ui blue item">Blue</a>
       <a class="ui violet item">Violet</a>
       <a class="ui purple item">Purple</a>

server/documents/elements/list.html.eco

@@ -179,18 +179,15 @@ themes      : ['Default']
   </div>
   <div class="another example">
     <div class="ui horizontal bulleted list">
-      <div class="item">
-        <a class="header">Semantic-Org/Semantic-UI</a>
-        <div class="description">Updated 10 mins ago</div>
-      </div>
-      <div class="item">
-        <a class="header">Semantic-Org/Semantic-UI-Docs</a>
-        <div class="description">Updated 22 mins ago</div>
-      </div>
-      <div class="item">
-        <a class="header">Semantic-Org/Semantic-UI-Meteor</a>
-        <div class="description">Updated 34 mins ago</div>
-      </div>
+      <a class="item">
+        About Us
+      </a>
+      <a class="item">
+        Sitemap
+      </a>
+      <a class="item">
+        Contact
+      </a>
     </div>
   </div>
 
@@ -498,7 +495,7 @@ themes      : ['Default']
   <div class="example">
     <h4 class="ui header">Selection</h4>
     <p>A selection list formats list items as possible choices</p>
-    <div class="ui selection list">
+    <div class="ui middle aligned selection list">
       <div class="item">
         <img class="ui avatar image" src="/images/avatar/small/helen.jpg">
         <div class="content">
@@ -525,7 +522,7 @@ themes      : ['Default']
     <div class="ui ignored info message">
       Be sure content can fit on one line when using the animated variation, otherwise the content will create a new line break as the animated content adjusts to its new size.
     </div>
-    <div class="ui animated list">
+    <div class="ui middle aligned animated list">
       <div class="item">
         <img class="ui avatar image" src="/images/avatar/small/helen.jpg">
         <div class="content">
@@ -553,16 +550,22 @@ themes      : ['Default']
     <div class="ui horizontal list">
       <div class="item">
         <img class="ui avatar image" src="/images/wireframe/square-image.png">
-        <div class="content top aligned">
+        <div class="top aligned content">
           Top Aligned
         </div>
       </div>
       <div class="item">
         <img class="ui avatar image" src="/images/wireframe/square-image.png">
-        <div class="content aligned">
+        <div class="middle aligned content">
           Middle
         </div>
       </div>
+      <div class="item">
+        <img class="ui avatar image" src="/images/wireframe/square-image.png">
+        <div class="bottom aligned content">
+          Bottom
+        </div>
+      </div>
     </div>
   </div>
 

server/files/javascript/docs.js

@@ -445,11 +445,18 @@ semantic.ready = function() {
         .addClass('ui vertical following fluid accordion text menu')
         .html(html)
       ;
+      /* Advert
+      var $advertisement = $('<div />')
+        .addClass('advertisement')
+        .html('<script type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=semanticuicom" id="_carbonads_js"></script>')
+      ;
+      */
       $sticky = $('<div />')
         .addClass('ui sticky')
         .html($followMenu)
+        //.prepend($advertisement)
+        .prepend('<h4 class="ui header">Definition</h4>')
       ;
-      $sticky.prepend('<h4 class="ui header">Definition</h4>');
       $rail = $('<div />')
         .addClass('ui dividing right rail')
         .html($sticky)
@@ -1024,6 +1031,11 @@ semantic.ready = function() {
   // register less files
   window.less.registerStylesheets();
 
+  // create sidebar sticky
+  $tocSticky
+    .sticky()
+  ;
+
   // load page tabs
   if( $pageTabs.size() > 0 ) {
     $pageTabs
@@ -1088,30 +1100,18 @@ semantic.ready = function() {
     .each(handler.generateCode)
   ;
 
-
   // main sidebar
   $menu
     .sidebar({
-      dimPage          : false,
+      dimPage          : true,
       transition       : 'overlay',
       mobileTransition : 'uncover'
     })
   ;
-/*
-  // inner sticky menu (mozilla only)
-  $('.full.height > .toc > .sticky')
-    .sticky({
-      offset: 1,
-      context: $('.full.height > .article')
-    })
-  ;
-*/
+
   // launch buttons
-  $('.launch.button, .view-ui, .launch.item')
-    .on('click', function(event) {
-      $menu.sidebar('toggle');
-      event.preventDefault();
-    })
+  $menu
+    .sidebar('attach events', '.launch.button, .view-ui, .launch.item')
   ;
 
   $search
@@ -1141,12 +1141,13 @@ semantic.ready = function() {
       action      : handler.shortcut.modal
     }
   ];
-/*  $.each(shortcuts, function(index, shortcut) {
-    $document
-      .on('keydown', shortcut.key, shortcut.action)
-    ;
-  });
-*/
+  /*  $.each(shortcuts, function(index, shortcut) {
+      $document
+        .on('keydown', shortcut.key, shortcut.action)
+      ;
+    });
+  */
+
   handler.createIcon();
   $popupExample
     .each(function() {
@@ -1237,10 +1238,6 @@ semantic.ready = function() {
     })
   ;
 
-  $tocSticky
-    .sticky()
-  ;
-
   $languageDropdown
     .dropdown({
       allowTab       : false,

server/files/stylesheets/docs.css

@@ -249,92 +249,6 @@ p:last-child {
   font-weight: bold;
 }
 
-/*--------------
-  Advertisement
----------------*/
-
-#example .advertisement {
-  float: right;
-  margin-left: 2em;
-}
-#example .index.advertisement {
-  display: block;
-  position: absolute;
-}
-#example .advertisement {
-  float: none;
-  display: table-cell;
-  vertical-align: top;
-  padding-left: 2em;
-}
-#example #carbonads-container {
-  float: right;
-}
-#example .advertisement #carbonads {
-  display: block;
-  width: 300px;
-  height: 118px;
-  background-color: #F7F7F7;
-  padding: 8px;
-  font-size: 12px;
-  font-family: "Helvetica Neue", Arial, sans-serif;
-  overflow: hidden;
-  float: right;
-  -moz-border-radius: 5px;
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
-  border: 1px solid #CCCCCC;
-}
-#example .advertisement .carbon-img {
-  float: left;
-  margin-right: 10px;
-  width: 130px;
-}
-#example .advertisement .carbon-text {
-  width: 140px;
-  float: left;
-  height: auto;
-  color: #000000;
-  line-height: 1.3;
-}
-#example .advertisement .carbon-text:hover {
-  color: #666666;
-}
-#example .carbon-poweredby {
-  text-align: left;
-  color: #BBB;
-  float: left;
-  font-size: 11px;
-  margin-top: 9px;
-  text-align: left;
-  width: 140px;
-}
-
-/* Inverted Ad */
-#example .inverted.advertisement #carbonads {
-  background-color: rgba(0, 0, 0, 0.25);
-  border: none;
-  overflow: hidden;
-  height: auto;
-  padding: 6px 0px 13px;
-}
-#example .inverted.advertisement .carbon-text {
-  color: rgba(255, 255, 255, 0.6);
-}
-#example .inverted.advertisement .carbon-text:hover {
-  color: rgba(255, 255, 255, 1);
-}
-#example .inverted.advertisement .carbon-poweredby {
-  margin-top: 10px;
-  color: rgba(255, 255, 255, 0.4);
-}
-#example .inverted.advertisement .carbon-poweredby a {
-  color: rgba(255, 255, 255, 0.8);
-}
-#example .inverted.advertisement .carbon-poweredby a:hover {
-  color: #FFFFFF;
-}
-
 
 #example .main.container a.anchor {
   height: 1px;
@@ -384,9 +298,14 @@ p:last-child {
   z-index: 2;
 }
 #example .masthead .introduction {
-  display: table-cell;
-  vertical-align: top;
-  width: 100%;
+  display: block;
+}
+#example .masthead .introduction:after {
+  content: ".";
+  display: block;
+  height: 0;
+  clear: both;
+  visibility: hidden;
 }
 #example .masthead .introduction .theme.buttons {
   margin: -0.1em 0em 0em 0.5em;
@@ -420,7 +339,7 @@ p:last-child {
 #example .fixed.launch.button {
   display: none;
   position: fixed;
-  top: 63px;
+  top: 2.5em;
   left: 0px;
 
   width: 55px;
@@ -1727,12 +1646,6 @@ body.progress.animated .ui.progress .bar {
   max-width: 1140px;
 }
 
-#example .main.container > .right.rail,
-#example .main.container > .tab > .examples > .right.rail,
-#example .main.container > .tab > .right.rail {
-  padding-top: 2em;
-  width: 250px;
-}
 #example .main.container > .right.rail .sticky,
 #example .main.container > .tab > .examples > .right.rail .sticky,
 #example .main.container > .tab > .right.rail .sticky {
@@ -1759,6 +1672,82 @@ body.progress.animated .ui.progress .bar {
   padding: 0.5rem 0.25rem;
 }
 
+/*******************************
+           Advert
+*******************************/
+
+/*----------------
+  Style Overrides
+-----------------*/
+
+#example .advertisement #carbonads {
+  position: relative;
+  display: block;
+  width: auto;
+  margin: 0 auto;
+  background-color: #F5F8F9;
+  border: 1px solid #9ECAD3;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+  padding: 1em;
+  font-family: "Helvetica Neue", Arial, sans-serif;
+  overflow: hidden;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+}
+#example .advertisement #carbonads:hover {
+  background-color: #F0F8F9;
+  border: 1px solid #87C7D0;
+}
+#example .advertisement .carbon-wrap {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+#example .advertisement .carbon-img {
+  width: 130px;
+  margin-right: 0.75em;
+}
+#example .advertisement .carbon-img img {
+  display: block;
+  border: 1px solid #DDDDDD;
+}
+#example .advertisement .carbon-text {
+  font-size: 13px;
+  line-height: 16px;
+  padding-bottom: 1.5em;
+  height: auto;
+  min-width: 145px;
+  color: rgba(20, 50, 50, 0.8);
+}
+#example .advertisement .carbon-text:hover {
+  color: rgba(0, 30, 30, 0.8);
+}
+#example .carbon-poweredby {
+  position: absolute;
+  left: 130px;
+  margin-left: 2em;
+  bottom: 1em;
+  color: #bbb;
+  font-size: 11px;
+  color: rgba(0, 0, 0, 0.3);
+  text-align: left;
+}
+
+
+/* Rail Ad */
+#example .rail .advertisement {
+  display: block;
+  float: none;
+  margin: 1em 0;
+  padding-left: 0;
+}
+#example .rail .advertisement #carbonads {
+  display: block;
+  margin: 0 -1.5em;
+  width: auto;
+}
 
 
 /*******************************
@@ -1766,301 +1755,220 @@ body.progress.animated .ui.progress .bar {
 *******************************/
 
 /* Defaults */
+#example .masthead > .container,
+#example .main.container,
+#example .fixed.menu > .container {
+  margin-left: 3em !important;
+  margin-right: 3em !important;
+  width: auto !important;
+  max-width: 960px !important;
+}
+#example .masthead > .container {
+  margin-right: 387px !important;
+}
+#example .main.container {
+  margin-right: 387px !important;
+}
 
-#example .masthead .mobile.buttons {
-  display: none;
+/* Rail Default */
+#example .main.container > .right.rail,
+#example .main.container > .tab > .examples > .right.rail,
+#example .main.container > .tab > .right.rail {
+  margin-left: 3em;
+  padding-top: 2em;
+  width: 277px;
 }
 
-@media only screen and (max-width : 400px) {
-  #example .advertisement {
-    max-width: 260px;
-  }
+#example .masthead .advertisement {
+  margin-left: 3em;
+  padding: 0em 1.25em;
+  width: 342px;
 }
 
-@media only screen and (max-width : 450px) {
-  #example .main.menu .icon.item {
-    display: none;
-  }
-  #example .main.menu .github.item {
-    display: inline-block;
-  }
-  #example .main.menu .github.item:before {
-    display: none;
-  }
-  #example #carbonads {
-    height: 135px;
-  }
-  #example #carbonads .carbon-text {
-    width: 90px;
-  }
+/* Absolute Ad */
+#example .masthead .introduction {
+  display: block;
+}
+#example .masthead .advertisement {
+  position: absolute;
+  left: 100%;
+  bottom: -2px;
 }
 
-@media only screen and (max-width : 470px) {
-  #example .masthead .tag.label {
-    display: none;
-  }
-  #example .masthead .inverted.buttons {
-    display: none;
-  }
-  #example .masthead .mobile.buttons {
-    display: block;
-  }
-  #example.button-page .ui.buttons,
-  #example.button-page :not(.buttons) .ui.button {
-    margin-bottom: 0.5em;
-  }
-  #example .masthead:before {
-    -webkit-animation-name: none;
-    -moz-animation-name: none;
-    -o-animation-name: none;
-    animation-name: none;
-  }
+#example .fixed.main.menu .launch.item {
+  display: block;
+}
+#example .fixed.main.menu .search .icon {
+  opacity: 0.9;
 }
 
 
-@media only screen and (max-width : 600px) {
-  #example > .pusher > .footer {
-    padding: 1em 0em;
-  }
-  #example .masthead.segment {
-    padding-top: 60px;
-    padding-bottom: 20px;
-  }
-  #example .example i.code {
-    opacity: 0.3;
+/* Table Ad */
+@media only screen and (max-width: 1272px) {
+
+  #example .masthead > .container {
+    margin-right: 0em !important;
+    max-width: none !important;
   }
-  #example .example i.code:hover {
-    opacity: 1;
+  #example .masthead .introduction {
+    display: table-cell;
+    vertical-align: top;
+    width: 100%;
   }
-  #example .main.menu .borderless.item {
-    display: none;
+  #example .masthead .advertisement {
+    position: static;
+    float: none;
+    display: table-cell;
+    padding-left: 3em;
   }
-  #example .fixed .developer,
-  #example .fixed .designer,
-  #example .fixed .previous,
-  #example .fixed .next {
-    display: none;
+}
+
+/* Squish Content (Just For Small Computers) */
+@media only screen and (max-width: 1272px) {
+
+  /* Resize Main Container */
+  #example .main.container {
+    margin-right: 307px !important;
   }
-  #example .tab.masthead.segment .tabular.menu {
-    display: none;
+
+  /* Resize TOC  */
+  #example .full.height > .toc {
+    width: 200px;
   }
 
-  #example .tab.masthead.segment .vertical.menu {
-    display: block;
+  /* Resize Rail */
+  #example .main.container > .right.rail,
+  #example .main.container > .tab > .examples > .right.rail,
+  #example .main.container > .tab > .right.rail {
+    padding-left: 1.5em;
+    width: 225px;
   }
+
 }
 
-@media only screen and (max-width : 640px) {
-  #example .masthead.segment .download.button {
-    display: none;
-  }
-  #example.transition .fixed.column {
-    display: none;
-  }
-  #example.transition .examples {
-    width: 100%;
-  }
-  #example.transition .examples .pointing.below.label {
+/* Hide Top Bar */
+@media only screen and (min-width: 1145px) {
+  #example .fixed.main.menu {
     display: none;
   }
 }
 
-@media only screen and (max-width : 980px) {
-  pre.console {
-    height: 150px;
-  }
+/* Remove Fixed Sidebar /  Show Top Bar */
+@media only screen and (max-width: 1144px) {
 
-  #example .fixed.menu .music.item {
+  /* Hide Fixed Sidebar */
+  #example .full.height > .toc {
     display: none;
   }
 
-  /* Sidebar Nav Hide Link */
-  #example #toc .hide.item {
-    display: block;
-  }
-  #example #toc .item > .icon {
-    font-size: 1em !important;
+  /* Additional Padding for Fixed Menu */
+  #example .masthead.segment {
+    padding-top: 5em;
   }
 
-  /* Introduction Button Float */
-  #example:not(.index) .introduction .button {
-    float: none;
-    margin: 0 0.5em 0.5em 0;
+  /* Hide GitHub Stars in Intro */
+  #example .masthead iframe.github {
+    display: none;
   }
 
-  /* Advertisement */
-  #example .introduction {
-    display: block;
-  }
-  #example .advertisement {
-    display: block;
-    margin: 1em auto;
-    padding: 0em;
-  }
-  #example .advertisement #carbonads {
-    float: none;
-    width: 100%;
-  }
-  #example .fixed.menu .launch {
-    padding-left: 1.142em;
-  }
-  /* Resize Containers */
-  #example .main.container,
+  /* Less Left Padding */
   #example .masthead > .container,
+  #example .main.container,
   #example .fixed.menu > .container {
-    width: 100% !important;
-    margin-left: 0em !important;
-    margin-right: 0em !important;
-    padding-left: 2em !important;
-    padding-right: 2em !important;
-    border-left: none !important;
-    border-right: none !important;
-    box-shadow: none !important;
-  }
-  #example .fixed.menu > .container {
-    padding-left: 0em !important;
-    padding-right: 0em !important;
+    margin-left: 2em !important;
   }
 
-  /* Resize Sticky */
-  #example .container .right.rail,
+  /* Padding Above Rail */
   #example .main.container > .right.rail .sticky,
+  #example .main.container > .tab > .examples > .right.rail .sticky,
   #example .main.container > .tab > .right.rail .sticky {
-    display: none;
-  }
-  /* Resize Sticky */
-  #example .container .right.rail {
-    width: 200px;
-    padding-left: 0em;
+    padding-top: 2em;
   }
 
-
-  /* Advert in Rail */
-  #example .introduction {
-    display: block;
-    padding-right: 115px;
-  }
-  #example .advertisement {
-    left: 100%;
-    margin-left: -115px;
-    position: absolute;
-    top: 0em;
-    vertical-align: top;
+  /* 100% Menu Width */
+  #example .fixed.menu > .container {
+    margin-left: 0em !important;
+    margin-right: 0em !important;
+    width: 100% !important;
+    max-width: none !important;
   }
 
-  /* Remove Sticky Footer */
-  #example > .pusher {
-    display: block;
-    width: 100%;
-    height: auto;
+  /* Remove Bug Reports */
+  #example .main.menu .bug.item {
+    display: none;
   }
-  #example > .pusher > .full.height {
-    display: block;
-    height: auto;
+
+  /* Hide Music */
+  #example .main.menu .music.item {
+    display: none;
   }
+
 }
 
-@media only screen and (max-width : 998px) {
-  /* Nav Bar Items */
-  #example .fixed.menu .section,
-  #example .fixed.menu .title b {
+/* Remove Rail */
+@media only screen and (max-width: 992px) {
+
+  /* Remove Rail */
+  #example .main.container > .right.rail,
+  #example .main.container > .tab > .examples > .right.rail,
+  #example .main.container > .tab > .right.rail {
     display: none;
   }
-  #example .fixed.menu .launch {
-    cursor: pointer;
-    display: inline-block;
-  }
 
-  /* Hide Fixed Launch Button */
-  #example .fixed.launch.button {
-    display: none;
+  /* Fluid Containers */
+  #example .masthead > .container,
+  #example .main.container,
+  #example .fixed.menu > .container {
+    margin-left: 2em !important;
+    margin-right: 2em !important;
+    max-width: none !important;
   }
 
-  /* What is this? */
-  #example .header .button {
-    margin-bottom: 0.5em;
+  /* Still 100% Fixed Menu */
+  #example .fixed.menu > .container {
+    margin-left: 0em !important;
+    margin-right: 0em !important;
+    width: 100% !important;
+    max-width: none !important;
   }
-  #example .examples {
-    margin-right: 330px;
-    padding: 1px;
+
+  /* Remove Padding on Ad */
+  #example .masthead .advertisement {
+    padding-right: 0em !important;
   }
+
+
 }
 
-@media only screen and (min-width : 999px) {
 
-  /* Advert in Rail */
+@media only screen and (max-width: 820px) {
+
+  /* Ad Takes Full Width */
   #example .masthead .introduction {
     display: block;
   }
   #example .masthead .advertisement {
-    left: 100%;
+    display: block;
+    float: none;
+    margin: 2em 0em 0em;
     padding-left: 0em;
-    position: absolute;
-    top: 0em;
-    vertical-align: top;
-  }
-
-  #example .examples {
-    margin-right: 280px;
-    padding: 1px;
+    width: auto;
   }
-  #example .fixed.column,
-  #example .fixed.column .fixed {
-    width: 250px;
+  #example .masthead .advertisement #carbonads > span {
+    position: relative;
+    display: block;
+    max-width: 300px;
   }
 
-  /* Sticky Footers */
-  #example > .pusher {
-    display: flex;
-    overflow: visible;
-    min-height: 100vh;
-    flex-direction: column;
-  }
-  #example > .pusher > .full.height {
-    flex: 1;
-  }
 }
 
+@media only screen and (max-width: 768px) {
 
-/* Adjust Gutters */
-@media only screen and (min-width : 999px) and (max-width: 1300px) {
-  #example .masthead > .container,
-  #example .main.container,
-  #example .fixed.menu > .container {
-    margin-left: 3em !important;
-    margin-right: 3em !important;
-    width: auto !important;
-  }
-  #example .masthead > .container,
-  #example .main.container {
-    margin-right: 350px !important;
-  }
-  #example .masthead > .container .advertisement {
-    padding-left: 33px;
-  }
-}
-@media only screen and (min-width: 1301px) {
-  #example .masthead > .container,
-  #example .main.container,
-  #example .fixed.menu > .container {
-    margin-left: 4em !important;
-    margin-right: 4em !important;
-    width: auto !important;
-    max-width: 960px !important;
-  }
-  #example .masthead > .container,
-  #example .main.container {
-    margin-right: 380px !important;
-  }
-  #example .masthead > .container .advertisement {
-    padding-left: 26px;
+  /* Hide Some Fixed Menu Content (Pagination, Search) */
+  #example .fixed.menu > .container > .section.item,
+  #example .fixed.menu > .container > .right.menu > .item:last-child,
+  #example .fixed.menu > .container > .icon.item {
+    display: none;
   }
-}
 
-@media only screen and (min-width: 1600px) {
-}
-@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-  #example > .pusher > .full.height {
-    flex: none;
-  }
 }

server/partials/fixed-menu.html.eco

@@ -3,6 +3,53 @@
 <% pageNumber        = @getPage(currentCollection, @document.id) %>
 <% pageCollection    = @getPageCollection(currentCollection, @document.id) %>
 
-<!-- <div class="fixed bar">
-  <img class="ui small logo image" src="/images/logo.png">
-</div> -->
+<div class="ui fixed inverted main menu">
+  <div class="ui container">
+    <a class="launch item">
+      <i class="content icon"></i>
+      Menu
+    </a>
+    <% if @document.title: %>
+      <div class="item">
+        <%= @document.title %>
+      </div>
+      <% if pageNumber > 1 and currentCollection[pageNumber - 2]?: %>
+      <a class="icon item" href="<%= currentCollection[pageNumber - 2].url %>"><i class="left chevron icon"></i></a>
+      <% else: %>
+      <div class="disabled icon item"><i class="left chevron icon"></i></div>
+      <% end %>
+      <div class="section ui scrolling dropdown link item">
+        <span class="count"><%= "#{pageNumber} of #{pageCount}" %></span>
+        <div class="menu">
+          <% for element, index in currentCollection: %>
+            <a class="<%= if element.id is @document.id then 'active ' %>item" href="<%= element.url %>">
+              <%= element.title %>
+            </a>
+          <% end %>
+        </div>
+      </div>
+      <% if pageNumber isnt pageCount and currentCollection[pageNumber]?: %>
+      <a class="icon item" href="<%= currentCollection[pageNumber].url %>"><i class="right chevron icon"></i></a>
+      <% else: %>
+      <div class="disabled icon item"><i class="right chevron icon"></i></div>
+      <% end %>
+    <% end %>
+    <div class="right menu">
+      <% unless 'development' in @getEnvironments(): %>
+      <% else: %>
+      <div class="vertically fitted borderless item">
+        <iframe class="github" src="http://ghbtns.com/github-btn.html?user=semantic-org&amp;repo=semantic-ui&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
+      </div>
+      <% end %>
+      <div class="item">
+        <div class="ui hidden right aligned search input" id="search">
+          <div class="ui transparent icon input">
+            <input class="prompt" type="text" placeholder="Search...">
+            <i class="inverted search link icon" data-content="Search UI"></i>
+          </div>
+          <div class="results"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

server/partials/old-menu.html.eco

@@ -1,72 +0,0 @@
-<% currentCollection = @getCollection("documents").findAll({type: $in: [@document.type]},[{title: 1}]).toJSON() %>
-<% pageCount         = @pageCount(currentCollection) %>
-<% pageNumber        = @getPage(currentCollection, @document.id) %>
-<% pageCollection    = @getPageCollection(currentCollection, @document.id) %>
-
-<div class="ui fixed inverted main menu">
-  <div class="ui container">
-    <a class="launch item">
-      <i class="content icon"></i>
-      Menu
-    </a>
-    <% if @document.title: %>
-      <div class="item">
-        <%= @document.title %>
-      </div>
-      <% if pageNumber > 1 and currentCollection[pageNumber - 2]?: %>
-      <a class="icon item" href="<%= currentCollection[pageNumber - 2].url %>"><i class="left chevron icon"></i></a>
-      <% else: %>
-      <div class="disabled icon item"><i class="left chevron icon"></i></div>
-      <% end %>
-      <div class="section ui page dropdown link item">
-        <span class="count"><%= "#{pageNumber} of #{pageCount}" %></span>
-        <div class="menu">
-          <% for element, index in currentCollection: %>
-            <a class="<%= if element.id is @document.id then 'active ' %>item" href="<%= element.url %>">
-              <%= element.title %>
-            </a>
-          <% end %>
-        </div>
-      </div>
-      <% if pageNumber isnt pageCount and currentCollection[pageNumber]?: %>
-      <a class="icon item" href="<%= currentCollection[pageNumber].url %>"><i class="right chevron icon"></i></a>
-      <% else: %>
-      <div class="disabled icon item"><i class="right chevron icon"></i></div>
-      <% end %>
-    <% end %>
-    <div class="right menu">
-      <% if 'developments' in @getEnvironments(): %>
-      <% else: %>
-      <div class="vertically fitted borderless item">
-        <iframe class="github" src="http://ghbtns.com/github-btn.html?user=semantic-org&amp;repo=semantic-ui&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
-      </div>
-      <% end %>
-      <a class="popup icon music item" data-content="Play Music">
-        <i class="alternate music icon"></i>
-      </a>
-      <a class="popup icon github item" data-content="View project on GitHub" href="https://github.com/Semantic-Org/Semantic-UI">
-        <i class="alternate github icon"></i>
-      </a>
-      <div class="ui language dropdown icon item" id="languages" data-content="Select Language">
-        <i class="world icon"></i>
-        <div class="menu">
-          <div class="header">Search Languages</div>
-          <div class="ui icon search input">
-            <i class="search icon"></i>
-            <input type="text" placeholder="Search languages...">
-          </div>
-          <%- @partial('languages') %>
-        </div>
-      </div>
-      <div class="item">
-        <div class="ui hidden right aligned search input" id="search">
-          <div class="ui transparent icon input">
-            <input class="prompt" type="text" placeholder="Search...">
-            <i class="inverted search link icon" data-content="Search UI"></i>
-          </div>
-          <div class="results"></div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>