Major CSS/styling overhaul with Primer.css.

gollum.gemspec

@@ -32,6 +32,7 @@ Gem::Specification.new do |s|
   s.add_dependency 'mustache', ['>= 0.99.5', '< 1.0.0']
   s.add_dependency 'useragent', '~> 0.16.2'
   s.add_dependency 'gemojione', '~> 3.2'
+  s.add_dependency 'octicons', '~> 8.5'
   s.add_dependency 'sprockets', '~> 3.7'
   s.add_dependency 'sass', '~> 3.5'
   s.add_dependency 'uglifier', '~> 3.2'

lib/gollum/app.rb

@@ -374,11 +374,14 @@ module Precious
         @editable      = false
         @bar_side      = wiki.bar_side
         @allow_uploads = wiki.allow_uploads
+        @navbar        = false
         mustache :page
       end
 
       get '/history/*' do
-        @page     = wiki_page(params[:splat].first).page
+        wikip     = wiki_page(params[:splat].first)
+        @name     = wikip.fullname
+        @page     = wikip.page
         @page_num = [params[:page].to_i, 1].max
         unless @page.nil?
           @versions = @page.versions(:page => @page_num, :follow => settings.wiki_options.fetch(:follow_renames, ::Gollum::GIT_ADAPTER == 'rjgit' ? false : true))
@@ -438,9 +441,9 @@ module Precious
       end
 
       get %r{
-        /pages  # match any URL beginning with /pages
+        /overview  # match any URL beginning with /overview
         (?:     # begin an optional non-capturing group
-          /(.+) # capture any path after the "/pages" excluding the leading slash
+          /(.+) # capture any path after the "/overview" excluding the leading slash
         )?      # end the optional non-capturing group
       }x do |path|
         wiki         = wiki_new
@@ -455,7 +458,8 @@ module Precious
         @results.sort_by! {|result| result.name.downcase}
 
         @ref         = wiki.ref
-        mustache :pages
+        @newable     = true
+        mustache :overview
       end
     end
 
@@ -471,6 +475,7 @@ module Precious
         @content = page.formatted_data
         @version = version
         @bar_side = wikip.wiki.bar_side
+        @navbar   = true
         mustache :page
       elsif file = wikip.wiki.file(file_path, version, true)
         show_file(file)
@@ -500,7 +505,7 @@ module Precious
         @h1_title      = wiki.h1_title
         @bar_side      = wiki.bar_side
         @allow_uploads = wiki.allow_uploads
-
+        @navbar        = true
         mustache :page
       elsif file = wiki.file(fullpath, wiki.ref, true)
         show_file(file)

lib/gollum/public/gollum/javascript/editor/gollum.editor.js.erb

@@ -136,11 +136,18 @@
       }
 
       if ( EditorHas.collapsibleInputs() ) {
-        $('#gollum-editor .collapsed a.button, ' +
+        $('#gollum-editor .collapsed button.collapsable, ' +
-          '#gollum-editor .expanded a.button').click(function( e ) {
+          '#gollum-editor .expanded button.collapsable').click(function( e ) {
           e.preventDefault();
           $(this).parent().toggleClass('expanded');
           $(this).parent().toggleClass('collapsed');
+
+          buttons = $(this).parent().children("button");
+          console.log(buttons);
+          hidden_button = buttons.filter(':hidden')[0];
+          shown_button  = buttons.not(':hidden')[0];
+          hidden_button.hidden = false;
+          shown_button.hidden = true;
         });
       }
 
@@ -587,7 +594,7 @@
         debug('Activating function bar');
 
         // check these out
-        $('#gollum-editor-function-bar a.function-button').each(function() {
+        $('#gollum-editor-function-bar button.function-button').each(function() {
           if ( LanguageDefinition.getDefinitionFor( $(this).attr('id') ) ) {
             $(this).click( FunctionBar.evtFunctionButtonClick );
             $(this).removeClass('disabled');

lib/gollum/public/gollum/javascript/gollum.dialog.js.erb

@@ -74,7 +74,7 @@
         html += '>' + fieldAttributes.name + '</label>';
       }
 
-      html += '<input type="text"';
+      html += '<input type="text" class="form-control input-sm width-full"';
 
       if ( fieldAttributes.id ) {
         html += ' name="' + fieldAttributes.id + '"'
@@ -105,7 +105,7 @@
 
       html += '<form method=post enctype="multipart/form-data" ' +
         'action="' + action + '" ' + 'id="' + id + '">';
-      html += '<input type=file name="' + name + '">';
+      html += '<input type=file name="' + name + '" class="form-control width-full">';
       html += '</form>';
 
       if( fieldAttributes.context ){
@@ -117,35 +117,20 @@
 
     createMarkup: function( title, body ) {
       Dialog.markupCreated = true;
-      if ($.facebox) {
+      return '<div id="gollum-dialog-dialog">' +
-        return '<div id="gollum-dialog-dialog">' +
+             '<div id="gollum-dialog-dialog-inner" class="border rounded-1">' +
-               '<div id="gollum-dialog-dialog-title"><h4>' +
+             '<div id="gollum-dialog-dialog-title"><h4>' +
-               title +'</h4></div>' +
+             title +'</h4></div>' +
-               '<div id="gollum-dialog-dialog-body">' + body + '</div>' +
+             '<div id="gollum-dialog-dialog-body">' + body + '</div>' +
-               '<div id="gollum-dialog-dialog-buttons">' +
+             '<div id="gollum-dialog-dialog-buttons" class="pt-2 float-right">' +
-               '<button name="Cancel" id="gollum-dialog-action-cancel" ' +
+             '<button name="Cancel" id="gollum-dialog-action-cancel" ' +
-               'class="gollum-minibutton">Cancel</a>' +
+             'class="btn">Cancel</button>' +
-               '<button name="OK" id="gollum-dialog-action-ok" '+
+             '<span class="px-1"></span>' +
-               'class="gollum-minibutton">OK</a>' +
+             '<button name="OK" id="gollum-dialog-action-ok" '+
-               '</div>' +
+             'class="btn btn-primary">OK</button>' +
-               '</div>';
+             '</div>' +
-      } else {
+             '</div>' +
-        return '<div id="gollum-dialog-dialog">' +
+             '</div>';
-               '<div id="gollum-dialog-dialog-inner">' +
-               '<div id="gollum-dialog-dialog-bg">' +
-               '<div id="gollum-dialog-dialog-title"><h4>' +
-               title +'</h4></div>' +
-               '<div id="gollum-dialog-dialog-body">' + body + '</div>' +
-               '<div id="gollum-dialog-dialog-buttons">' +
-               '<button name="Cancel" id="gollum-dialog-action-cancel" ' +
-               'class="minibutton">Cancel</button>' +
-               '<button name="OK" id="gollum-dialog-action-ok" '+
-               'class="minibutton">OK</a>' +
-               '</div>' +
-               '</div>' +
-               '</div>' +
-               '</div>';
-      }
     },
 
     eventCancel: function( e ) {
@@ -172,23 +157,17 @@
     },
 
     hide: function() {
-      if ( $.facebox ) {
+      if ( $.browser.msie ) {
-        Dialog.markupCreated = false;
+        $('#gollum-dialog-dialog').hide().removeClass('active');
-        $(document).trigger('close.facebox');
+        $('select').css('visibility', 'visible');
-        Dialog.detachEvents();
       } else {
-        if ( $.browser.msie ) {
+        $('#gollum-dialog-dialog').animate({ opacity: 0 }, {
-          $('#gollum-dialog-dialog').hide().removeClass('active');
+          duration: 200,
-          $('select').css('visibility', 'visible');
+          complete: function() {
-        } else {
+            $('#gollum-dialog-dialog').removeClass('active');
-          $('#gollum-dialog-dialog').animate({ opacity: 0 }, {
+            $('#gollum-dialog-dialog').css('display', 'none');
-            duration: 200,
+          }
-            complete: function() {
+        });
-              $('#gollum-dialog-dialog').removeClass('active');
-              $('#gollum-dialog-dialog').css('display', 'none');
-            }
-          });
-        }
 
         $(window).unbind('resize', Dialog.resize);
       }
@@ -219,29 +198,15 @@
       }
 
       if ( Dialog.markupCreated ) {
-        if ($.facebox) {
+        $('#gollum-dialog-dialog').remove();
-          $(document).trigger('close.facebox');
-        } else {
-          $('#gollum-dialog-dialog').remove();
-        }
       }
 
       Dialog.markup = Dialog.createMarkup( title, body );
 
-      if ($.facebox) {
+      $('body').append( Dialog.markup );
-        $(document).bind('reveal.facebox', function() {
+      if ( argObject.OK &&
-          if ( argObject.OK &&
+           typeof argObject.OK == 'function' ) {
-               typeof argObject.OK == 'function' ) {
+        Dialog.attachEvents( argObject.OK );
-            Dialog.attachEvents( argObject.OK );
-            $($('#facebox input[type="text"]').get(0)).focus();
-          }
-        });
-      } else {
-        $('body').append( Dialog.markup );
-        if ( argObject.OK &&
-             typeof argObject.OK == 'function' ) {
-          Dialog.attachEvents( argObject.OK );
-        }
       }
 
       Dialog.show();
@@ -252,27 +217,24 @@
         debug('Dialog: No markup to show. Please use init first.');
       } else {
         debug('Showing dialog');
-        if ($.facebox) {
+
-          $.facebox( Dialog.markup );
+        if ( $.browser.msie ) {
+          $('#gollum-dialog.dialog').addClass('active');
+          Dialog.position();
+          $('select').css('visibility', 'hidden');
         } else {
-          if ( $.browser.msie ) {
+          $('#gollum-dialog.dialog').css('display', 'none');
-            $('#gollum-dialog.dialog').addClass('active');
+          $('#gollum-dialog-dialog').animate({ opacity: 0 }, {
-            Dialog.position();
+            duration: 0,
-            $('select').css('visibility', 'hidden');
+            complete: function() {
-          } else {
+              $('#gollum-dialog-dialog').css('display', 'block');
-            $('#gollum-dialog.dialog').css('display', 'none');
+              Dialog.position(); // position this thing
-            $('#gollum-dialog-dialog').animate({ opacity: 0 }, {
+              $('#gollum-dialog-dialog').animate({ opacity: 1 }, {
-              duration: 0,
+              duration: 500
-              complete: function() {
+              });
-                $('#gollum-dialog-dialog').css('display', 'block');
+              $($('#gollum-dialog-dialog input[type="text"]').get(0)).focus();
-                Dialog.position(); // position this thing
+            }
-                $('#gollum-dialog-dialog').animate({ opacity: 1 }, {
+          });
-                duration: 500
-                });
-                $($('#gollum-dialog-dialog input[type="text"]').get(0)).focus();
-              }
-            });
-          }
         }
 
         $(window).bind('resize', Dialog.resize);
@@ -299,11 +261,6 @@
     }
   };
 
-  if ($.facebox) {
-    $(document).bind('reveal.facebox', function() {
-      $('#facebox img.close_image').remove();
-    });
-  }
 
   var debug = function(m) {
     if ( Dialog.debugOn

lib/gollum/public/gollum/javascript/gollum.js.erb

@@ -302,7 +302,7 @@ $(document).ready(function() {
         // In the pages view, pageFullPath isn't defined.
         // The new button will still expect a value however.
         // So we try to figure one out from window.location
-        path = window.location.pathname.replace(routePath('pages'), '')
+        path = window.location.pathname.replace(routePath('overview'), '')
         // For consistency remove the trailing /
         path = path.replace(/\/$/,'')
       }
@@ -349,8 +349,8 @@ $(document).ready(function() {
       }
     });
 
-    if ($('.history a.action-compare-revision').length) {
+    if ($('.history button.action-compare-revision').length) {
-      $('.history a.action-compare-revision').click(function() {
+      $('.history button.action-compare-revision').click(function() {
         $("#version-form").submit();
       });
     }
@@ -377,6 +377,38 @@ $(document).ready(function() {
     });
   }
 
+  if( $('.tabnav-tabs').length ){
+    $(".tabnav-tab").click( function() {
+      if( ! $(this).hasClass('selected')) {
+        tab_id = $(this).attr('id');
+        if (tab_id == 'preview') {
+          var formData = new FormData($('#gollum-editor-form').get(0));
+          var paths = window.location.pathname.split('/');
+          formData.append('page', paths[ paths.length - 1 ] || '')
+          $.ajax({
+            url: routePath('preview'),
+            data: formData,
+            type: 'POST',
+            processData: false,
+            contentType: false,
+            success: function(data) {
+              var mainDiv = $('#wiki-wrapper', data);
+              $('.tabnav-div#preview-content').html(mainDiv);
+            },
+            error: function(data, textStatus, errorThrown) {
+              console.log('something went wrong: ' + textStatus + errorThrown);
+            }
+          });
+        }
+        $('.tabnav-tab.selected').removeClass('selected');
+        $(this).addClass('selected');
+        active_div = '#' + tab_id + "-content";
+        $('.tabnav-div').hide();
+        $(active_div).show();
+      };
+    });
+  };
+
   if( $('#wiki-wrapper.edit').length ){
     $("#gollum-editor-submit").click( function() { window.onbeforeunload = null; } );
     $("#gollum-editor-body").one('change', function(){

lib/gollum/public/gollum/stylesheets/_base.scss

@@ -46,10 +46,5 @@ $editor-button-img-width: 27px;
 $editor-button-img-height: 28px;
 
 //urls
-$img_fileview_doc: url('../images/fileview/document.png');
-$img_fileview_trash: url('../images/fileview/trashcan.png');
-$img_fileview_toggle_small: url('../images/fileview/toggle-small.png');
-$img_fileview_toggle_small_expand: url('../images/fileview/toggle-small-expand.png');
-$img_fileview_folder: url('../images/fileview/folder-horizontal.png');
 $img_icon_sprite: url('../images/icon-sprite.png');
 $img_dirty_shade: url('../images/dirty-shade.png');

lib/gollum/public/gollum/stylesheets/_component.scss

@@ -27,9 +27,6 @@
   display: block;
   clear: both;
 
-  background: #fff;
-  border: $border-standard;
-
   font-size: 1em;
   font-family: $font-console;
   line-height: 1.4em;

lib/gollum/public/gollum/stylesheets/app.scss

@@ -1,5 +1,7 @@
-//= require gollum
+//= require primer
 //= require editor
 //= require dialog
 //= require criticmarkup
+//= require tables
+//= require emoji
 //= require template

lib/gollum/public/gollum/stylesheets/dialog.scss

@@ -8,9 +8,9 @@
   position: absolute;
   top: 0;
   left: 0;
-  z-index: 999999;
   width: 100%;
   height: 100%;
+  z-index: 999999;
 
   @include mediummobile-breakpoint {
     position: absolute;
@@ -29,24 +29,6 @@
     display: block;
   }
 
-  button.minibutton {
-    float: right;
-    margin-right: 0.5em;
-    width: auto;
-    
-    font-size: 1.2em;
-    font-family: $font-default;
-    
-    margin: 0 0 0 0.8em;
-    padding: 0.4em 1em;
-
-    @include button-base;
-  }
-  
-  button.minibutton:disabled {
-    opacity: 0.65; 
-    cursor: not-allowed;
-  }
   
 }
 
@@ -54,6 +36,12 @@
   margin: 0px;
   width: 100%;
   height: 100%;
+  padding: 1em;
+  overflow: hidden;
+  background-color: white;
+  webkit-box-shadow: 8px 7px 21px 0px rgba(0,0,0,0.68);
+  moz-box-shadow: 8px 7px 21px 0px rgba(0,0,0,0.68);
+  box-shadow: 8px 7px 21px 0px rgba(0,0,0,0.68);
 
   @include four-edge-position(0px);
 
@@ -72,9 +60,6 @@
 
     @include four-edge-position(10px);
 
-    border: 7px solid #999;
-    border: 7px solid rgba(0, 0, 0, 0.3);
-    border-radius: 5px;
   }
 
   @include desktop-breakpoint {
@@ -98,7 +83,6 @@
 }
 
 #gollum-dialog-dialog-bg {
-  background-color: #fff;
   padding: 1em;
 
   height: 100%;
@@ -145,16 +129,6 @@
       }
 
       input {
-        &[type="text"] {
-          border: $border-standard;
-          display: block;
-          font-family: $font-default;
-          font-size: 1.2em;
-          line-height: 1.6em;
-          margin: 0.3em 0 0 0;
-          padding: 0.3em 0.5em;
-          width: 94%;
-        }
 
         &.code {
           font-family: $font-console;
@@ -175,8 +149,5 @@
 }
 
 #gollum-dialog-dialog-buttons {
-  border-top: $border-standard;
   overflow: hidden;
-  margin: 1.5em 0 0 0;
-  padding: 1em 0 0 0;
 }

lib/gollum/public/gollum/stylesheets/editor.scss

@@ -22,54 +22,25 @@ a {
 }
 
 #gollum-editor-body-ace {
-  overflow: scroll;
+  overflow: hidden;
-  resize: vertical;
-  border: 1px solid #ddd;
   font-family: Consolas, "Liberation Mono", Courier, monospace;
   font-size: 1em;
-  height: 25em;
 }
 
 #gollum-editor {
-  margin: 0 0 5em;
-  padding: 0em 1em 0.4em;
-
-  @include clearfix;
-
-  .ff &, .ie & {
-    padding-bottom: 1em;
-  }
-
-  @include desktop-breakpoint {
-    border: $border-editor-component;
-    background: $color-editor-component;
-    margin: 1em 0 5em;
-
-    border-radius: 1em;
-  }
-
-  form {
-    fieldset {
-      width: 100%;
-      @include reset-box;
-    }
-  }
 
   .singleline {
     display: block;
     margin: 0 0 0.7em 0;
-    @include clearfix;
+/*    @include clearfix;
-
+*/
     input {
-      background: #fff;
-      border: $border-standard;
-      color: #000;
       font-size: 1.1em;
       font-family: $font-default;
       line-height: 1.5em;
       margin: 1em 0 0.4em;
       padding: 0.5em;
-      width: 98%;
+      width: 100%;
 
       &.ph {
         color: #999;
@@ -85,6 +56,7 @@ a {
   .path_note {
     text-align: right;
     font-size: small;
+    padding-top: 5px;
     padding-right: 5px;
   }
 
@@ -169,34 +141,6 @@ a {
         clear: none;
         text-align: right;
       }
-
-      select {
-        background-color: $color-editor-component;
-        border: $border-standard;
-        color: #333;
-
-        font-size: 1em;
-        font-family: $font-default;
-        font-weight: bold;
-        line-height: 1.6em;
-        padding: 0.3em 0.4em;
-        display: inline-block;
-
-        border-radius: 0.5em;
-      }
-
-      label {
-        color: #999;
-        font-size: 1em;
-        font-weight: bold;
-        line-height: 1.6em;
-        padding: .3em 0.5em 0 0;
-        display: inline-block;
-
-        &:after {
-          content: ':';
-        }
-      }
     }
   }
 
@@ -205,28 +149,8 @@ a {
   /* @section form-fields */
 
   textarea {
-    @include component-textarea;
+    height: 30em;
-    height: 25em;
+    overflow: hidden;
-  }
-
-  input#gollum-editor-submit {
-    float: left;
-    font-size: 1em;
-    font-family: $font-default;
-    
-    margin: 0;
-    padding: 0.4em 1em;
-
-    @include button-base;
-    @include alt-box-model;
-
-    .webkit & {
-      padding: 0.5em 1em 0.45em;
-    }
-
-    .ie & {
-      padding: 0.4em 1em 0.5em;
-    }
   }
 
   .collapsed, .expanded {
@@ -235,30 +159,15 @@ a {
     overflow: hidden;
     padding: 0.5em 0 0;
 
-    a {
+    button {
-      &.button {
+      margin-bottom: 6px;
-        float: left;
-        
-        overflow: hidden;
-        margin: 0.2em 0.5em 0.75em 0;
-
-        @include editor-button-size;
-        @include button-base;
-      }
-
-      span {
-        display: block;
-
-        @include button-sprites;
-        @include editor-button-size;
-        @include text-conceal-simple;
-      }
     }
+    
 
     h4 {
       font-size: 1.6em;
-      float: left;
       margin: 0;
+      display: inline-block;
 
       padding: 0.25em 0 0 0.3em;
 
@@ -304,28 +213,6 @@ a {
 
   }
 
-  /* @control minibutton */
-
-  a.minibutton {
-    font-size: 1em;
-    font-family: $font-default;
-    line-height: 1.2em;
-    margin: 0 0 0 0.8em;
-    padding: 0.5em 1em;
-
-    @include button-base;
-  }
-
-  /* @control preview */
-
-  #gollum-editor-preview, #gollum-editor-cancel {
-    float: left;
-    font-weight: normal;
-    padding: left;
-
-    @include alt-box-model;
-  }
-
 }
 
 /* @control title */

lib/gollum/public/gollum/stylesheets/emoji.scss

@@ -0,0 +1,5 @@
+.emoji {
+  width: 20px;
+  height: 20px;
+  vertical-align: -18%;
+}

lib/gollum/public/gollum/stylesheets/fileview.scss

@@ -1,84 +0,0 @@
-@import "_base";
-
-#pages {
-  li {
-    position: relative;
-    margin-left: -15px;
-    list-style: none;
-    &.file {
-      white-space: nowrap;
-      margin-left: -1px !important;
-      height: 1.5em;
-      a {
-        text-decoration: none;
-        display: inline-block;
-        span.icon {
-          width: 14px;
-          height: 18px;
-          background: $img_fileview_doc 0 0 no-repeat;
-          display: inline-block;
-          margin-right: 7px;
-          vertical-align: text-top;
-        }
-      }
-      form {
-        vertical-align: middle;
-        display: inline;
-        button {
-          vertical-align: middle;
-          height: 20px;
-          border: 0 solid $black;
-          background: $img_fileview_trash no-repeat 16px center;
-          cursor: pointer;
-        }
-      }
-      a span.icon {
-        background: $img_fileview_doc 0 0 no-repeat;
-      }
-    }
-    input {
-      position: absolute;
-      left: 0;
-      margin-left: 0;
-      opacity: 0;
-      z-index: 2;
-      cursor: pointer;
-      height: 1em;
-      width: 1em;
-      top: 0;
-      + ol {
-        background: $img_fileview_toggle_small_expand 40px 0 no-repeat;
-        margin: -1.188em 0 0 -44px;
-        height: 1.5em;
-        > li {
-          display: none;
-          margin-left: -14px !important;
-          padding-left: 1px;
-        }
-      }
-      &:checked + ol {
-        background: $img_fileview_toggle_small 40px 5px no-repeat;
-        margin: -1.5em 0 0 -44px;
-        padding: 1.563em 0 0 80px;
-        height: auto;
-        > li {
-          display: block;
-          margin: 0 0 0.125em;
-          &:last-child {
-            margin: 0 0 0.063em;
-          }
-        }
-      }
-    }
-    label {
-      background: $img_fileview_folder 15px 1px no-repeat;
-      cursor: pointer;
-      display: block;
-      padding-left: 37px;
-    }
-  }
-  ol.tree {
-    padding: 0 0 0 30px;
-    width: 300px;
-  }
-}

lib/gollum/public/gollum/stylesheets/gollum.scss

@@ -1,732 +0,0 @@
-// Basic stylesheet for Gollum
-
-@import "_base", "_breakpoint", "_features", "_layout", "_component";
-
-/* @section core */
-body, html {
-  font-family: $font-default;
-  font-size: 10px;
-  @include reset-box;
-}
-
-a {
-  &:link {
-    color: $blue;
-    text-decoration: none;
-  }
-  &:hover, &:visited {
-    color: $blue;
-    text-decoration: underline;
-  }
-}
-
-#wiki-wrapper {
-  #template blockquote {
-    margin: 1em 0;
-    border-left: 4px solid $grey;
-    padding-left: .8em;
-    color: #555;
-  }
-}
-
-/* @section head */
-#head {
-  margin: 1em 0 0;
-  padding: 0;
-  overflow: hidden;
-  width: 100%;
-
-  @include desktop-breakpoint {
-    border-bottom: $border-standard;
-    padding-bottom: 0.3em;
-    margin: 4em 0 1.5em;
-  }
-
-  h1 {
-    font-size: 1.5em;
-    float: left;
-    line-height: normal;
-    margin: 0;
-    margin-top: 3em;
-    padding: 0 0 0 0.667em;
-
-    @include desktop-breakpoint {
-      font-size: 2.5em;
-      padding: 2px 0 0 0;
-    }
-  }
-  
-  div.breadcrumb {
-    margin: 0;
-    padding: 0;
-    position: absolute;
-    margin-top: 3.5em;
-    float: none;
-    overflow: auto;
-    font-size: 1.5em;
-  }
-
-  ul.actions {
-    clear: both;
-    margin: 0 1em;
-    position: absolute;
-
-    @include desktop-breakpoint {
-      clear: none;
-      float: right;
-      margin: 0;
-    }
-  }
-}
-
-/* @section body */
-#wiki-body {
-  margin-bottom: 40px;
-
-  table {
-    display: block;
-    overflow: auto;
-    border: 0;
-  }
-
-  /* @section comments */
-  #inline-comment {
-    display: none; /* todo */
-  }
-}
-
-/* @section toc */
-#wiki-toc-main {
-  @include component-base;
-
-  font-size: 13px;
-  padding: 0px 5px;
-  float: left;
-  margin-bottom: 20px;
-  min-width: 33%;
-
-  > div {
-    border: none;
-  }
-}
-
-/* @section sidebar */
-
-#wiki-sidebar {
-  @include component-base;
-
-  font-size: 13px;
-  padding: 7px;
-  color: #555;
-
-  p {
-    margin: 13px 0 0;
-
-    &.parent {
-      border-bottom: 1px solid #bbb;
-      font-weight: bold;
-      margin: 0 0 0.5em 0;
-      padding: 0 0 0.5em 0;
-      text-shadow: 0 1px 0 #fff;
-
-      &:before {
-        color: #666;
-        content: "← ";
-      }
-    }
-  }
-
-  > p:first-child {
-    margin-top: 10px;
-  }
-}
-
-/* @section footer */
-
-#wiki-footer {
-  margin: 2em 0 5em;
-
-  #header-content, #footer-content {
-    @include component-base;
-
-    padding: 1em;
-  }
-  #header-content {
-    margin-bottom: 1.5em;
-  }
-  #footer-content {
-    margin-top: 1.5em;
-
-    h3 {
-      font-size: 1.2em;
-      color: #333;
-      margin: 0;
-      padding: 0 0 0.2em;
-      text-shadow: 0 1px 0 #fff;
-    }
-
-    p {
-      margin: 0.5em 0 0;
-      padding: 0;
-    }
-
-    ul.links {
-      margin: 0.5em 0 0;
-      overflow: hidden;
-      padding: 0;
-
-      li {
-        color: #999;
-        float: left;
-        list-style-position: inside;
-        list-style-type: square;
-        padding: 0;
-        margin-left: 0.75em;
-
-        &:first-child {
-          list-style-type: none;
-          margin: 0;
-
-          .ff & {
-            margin: 0 -0.75em 0 0;
-          }
-        }
-
-        a {
-          font-weight: bold;
-          text-shadow: 0 1px 0 #fff;
-        }
-      }
-    }
-  }
-}
-
-/* @section page-footer */
-.page #footer {
-  clear: both;
-  border-top: $border-standard;
-  margin: 1em 0 7em;
-}
-
-#footer {
-  p#last-edit {
-    font-size: .9em;
-    line-height: 1.6em;
-    color: #999;
-    margin: 0.9em 0;
-
-    span.username {
-      font-weight: bold;
-    }
-  }
-
-  .actions {
-    margin-left: 1em;
-
-    @include desktop-breakpoint {
-      margin: 0;
-    }
-  }
-}
-
-/* @section history */
-.history {
-  @include section-header;
-}
-
-#wiki-history {
-  margin: 2em 1em 0 1em;
-
-  fieldset {
-    border: 0;
-    margin: 1em 0;
-    padding: 0;
-  }
-
-  table, tbody {
-    border-collapse: collapse;
-    padding: 0;
-    margin: 0;
-    width: 100%;
-
-    tr {
-      padding: 0;
-      margin: 0;
-      background-color: #ebf2f6;
-
-      &:nth-child(2n), &.alt-row {
-        background-color: #f3f7fa;
-      }
-
-      &.selected {
-        background-color: #ffffea !important;
-        z-index: 100;
-      }
-
-      td {
-        border-top: 1px solid #c0dce9;
-        border-bottom: 1px solid #c0dce9;
-        font-size: 1em;
-        line-height: 1.6em;
-        margin: 0;
-        padding: 0.3em 0.7em;
-
-        &.checkbox {
-          width: auto;
-          padding: 0 0.2em 0 0;
-
-          input {
-            cursor: pointer;
-            display: block;
-            padding-right: 0;
-            padding-top: 0.4em;
-            margin: 0 auto;
-            width: 1.2em;
-            height: 1.2em;
-          }
-        }
-
-        &.commit-name {
-          border-left: 0;
-
-          span.time-elapsed {
-            color: #999;
-          }
-
-          a {
-            font-size: 0.9em;
-            font-family: $font-console;
-            padding: 0 0.2em;
-          }
-        }
-
-        &.author {
-          width: 20%;
-
-          a {
-            color: #000;
-            font-weight: bold;
-
-            span.username {
-              display: block;
-              padding-top: 3px;
-            }
-          }
-        }
-
-        img {
-          background-color: #fff;
-          border: 1px solid #999;
-          display: block;
-          float: left;
-          height: 18px;
-          overflow: hidden;
-          margin: 0 0.5em 0 0;
-          width: 18px;
-          padding: 2px;
-        }
-      }
-    }
-  }
-}
-
-.history #footer {
-  margin-bottom: 7em;
-}
-
-.history #wiki-history ul.actions li,
-.history #footer ul.actions li {
-  margin: 0 0.6em 0 0;
-}
-
-@include desktop-breakpoint {
-  #wiki-history {
-    margin: 2em 0 0 0;
-
-    table tr td {
-      border: 1px solid #c0dce9;
-      font-size: 1em;
-      line-height: 1.6em;
-      margin: 0;
-      padding: 0.3em 0.7em;
-
-      &.checkbox {
-        width: 4em;
-        padding: 0.3em;
-      }
-    }
-  }
-}
-
-/* @section edit */
-.edit {
-  @include section-header;
-}
-
-/* @section search */
-
-.results {
-  @include section-header;
-
-  #results {
-    border-bottom: 1px solid #ccc;
-    margin-left: 1em;
-    margin-right: 1em;
-    margin-bottom: 2em;
-    padding-bottom: 2em;
-
-    @include desktop-breakpoint {
-      margin-left: 0;
-      margin-right: 0;
-    }
-
-    ul {
-      margin: 2em 0 0 0;
-      padding: 0;
-
-      li {
-        list-style: none;
-        padding: 0.2em 0;
-
-        @include largemobile-breakpoint {
-          font-size: 1.2em;
-        }
-
-        @include desktop-breakpoint {
-          list-style: disc;
-          list-style-position: outside;
-          line-height: 1.6em;
-        }
-
-        a {
-          word-wrap: break-word;
-        }
-
-        span.count {
-          color: #999;
-        }
-      }
-    }
-  }
-
-  p#no-results {
-    font-size: 1.2em;
-    line-height: 1.6em;
-    margin-top: 2em;
-  }
-
-  #footer ul.actions li {
-    margin: 0 1em 0 0;
-  }
-}
-
-/* @section compare */
-.compare {
-  @include section-header;
-
-  #compare-content {
-    margin-top: 3em;
-  }
-
-  .data {
-    border: $border-standard;
-    margin: 1em 0 2em;
-    overflow: auto;
-
-    table {
-      width: 100%;
-
-      tr td {
-        font-family: $font-console;
-        font-size: 1.2em;
-        line-height: 1.2em;
-        margin: 0;
-        padding: 0;
-
-        & + td + td {
-          width: 100%;
-        }
-
-        &.line_numbers {
-          background: $light-grey;
-          border-right: 1px solid #999;
-          color: #999;
-          padding: 0 0 0 0.5em;
-        }
-      }
-    }
-
-    pre {
-      margin: 0;
-      padding: 0;
-
-      div {
-        padding: 0 0 0 1em;
-      }
-    }
-  }
-
-  #footer {
-    margin-bottom: 7em;
-  }
-}
-
-.compare #compare-content ul.actions li,
-.compare #footer ul.actions li {
-  margin-left: 0;
-  margin-right: 0.6em;
-}
-
-/* @control syntax */
-.highlight {
-  background: #ffffff;
-  .c, .cm, .c1 { color: #999988; font-style: italic }
-  .err { color: #a61717; background-color: #e3d2d2 }
-  .k, .o { font-weight: bold }
-  .cp { color: #999999; font-weight: bold }
-  .cs { color: #999999; font-weight: bold; font-style: italic }
-  .gd {
-    color: #000000;
-    background-color: #ffdddd;
-    .x {
-      color: #000000;
-      background-color: #ffaaaa;
-    }
-  }
-  .ge { font-style: italic }
-  .gr { color: #aa0000 }
-  .gh { color: #999999 }
-  .gi {
-    color: #000000;
-    background-color: #ddffdd;
-    .x {
-      color: #000000;
-      background-color: #aaffaa;
-    }
-  }
-  .gc { color: #999; background-color: #EAF2F5 }
-  .go { color: #888888 }
-  .gp { color: #555 }
-  .gs { font-weight: bold }
-  .gu { color: #aaaaaa }
-  .gt { color: #aa0000 }
-}
-
-/* @control minibutton */
-ul.actions {
-   display: block;
-   list-style-type: none;
-   overflow: hidden;
-   padding: 0;
-   width: $layout-body-width;
-
-  li {
-    font-size: 0.9em;
-    margin-left: 1px;
-    margin-bottom: 1px;
-    float: left;
-
-    @include desktop-breakpoint {
-      margin-left: 0.6em;
-      margin-bottom: 0.6em;
-    }
-  
-  }
-  
-}
-
-.minibutton a {
-  @include button-base;
-
-  margin: 0;
-  padding: 0.6em 1em;
-  height: 1.4em;
-
-  @include desktop-breakpoint {
-    padding: 0.4em 1em;
-  }
-}
-
-#search-submit {
-  @include button-base;
-  
-  margin: 0;
-  padding: 0.4em 1em;
-}
-
-/* @special error */
-#wiki-wrapper.error {
-  height: 1px;
-  position: absolute;
-  overflow: visible;
-  top: 50%;
-  width: 100%;
-}
-
-#error {
-  background-color: $color-editor-component;
-  border: $border-editor-component;
-  left: 50%;
-  overflow: hidden;
-  padding: 2%;
-  margin: -10% 0 0 -35%;
-  position: absolute;
-  width: 70%;
-
-  border-radius: 0.5em;
-
-  h1 {
-    font-size: 3em;
-    line-height: normal;
-    margin: 0;
-    padding: 0;
-  }
-
-  p {
-    font-size: 1.2em;
-    line-height: 1.6em;
-    margin: 1em 0 0.5em;
-    padding: 0;
-  }
-}
-
-/* @control searchbar */
-#searchbar {
-  float: none;
-  overflow: hidden;
-
-  @include desktop-breakpoint {
-    padding: 0;
-  }
-
-  #searchbar-fauxtext {
-    background: #fff;
-    border: none;
-    overflow: hidden;
-    height: $editor-button-size;
-
-    @include desktop-breakpoint {
-      height: $editor-button-img-height;
-    }
-
-    input#search-query {
-      border: 1px solid $color-button-border;
-      border-radius: 3px 0 0 3px;
-
-      color: #000;
-      float: left;
-      font-family: $font-default;
-      font-size: 1em;
-      height: inherit;
-      padding: 0 .5em;
-
-      -webkit-focus-ring: none;
-
-      @include alt-box-model;
-
-      .ie8 & {
-        padding: 0.5em 0 0 0.5em;
-      }
-
-      &.ph {
-        color: #999;
-      }
-    }
-
-    #search-submit {
-      @include button-base;
-
-      border-left: none;
-      border-radius: 0 3px 3px 0;
-
-      margin: 0 !important;
-      padding: 0;
-      float: right;
-      height: inherit;
-
-      @include alt-box-model;
-
-      @include editor-button(16);
-
-      span {
-        @include button-sprites;
-        
-        display: block;
-        height: inherit;
-
-        width: 32px;
-        text-align: center;
-
-        @include text-conceal-simple;
-
-        .ff &, .ie & {
-          height: 2.2em;
-        }
-
-        @include desktop-breakpoint {
-          width: 28px;
-        }
-      }
-
-      &:hover span {
-        padding: 0;
-      }
-    }
-  }
-}
-
-/* @section pages */
-
-#pages {
-  font-size: 1.2em;
-  margin: 0 1em 20px 1em;
-
-  @include desktop-breakpoint {
-    margin: 0 0 20px 0;
-  }
-
-  ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-
-    li {
-      a {
-        &.file, &.page, &.folder {
-          background-position: 0 1px;
-          background-repeat: no-repeat;
-          padding-left: 20px;
-        }
-
-        &.file {
-          background-image: $img_fileview_doc;
-        }
-        
-        &.page {
-          background-image: $img_fileview_doc;
-        }
-
-        &.folder {
-          background-image: $img_fileview_folder;
-        }
-      }
-    }
-  }
-
-  .breadcrumb {
-    border-top: $border-standard;
-    border-bottom: $border-standard;
-    margin: 1em 0;
-    padding: 0.25em;
-  }
-}
-
-.clearfloats {
-  clear: both;
-}
-
-.emoji {
-  width: 20px;
-  height: 20px;
-  vertical-align: -18%;
-}

lib/gollum/public/gollum/stylesheets/ie7.scss

@@ -1,146 +0,0 @@
-// IE7/8-specific styles
-
-@import "_base", "_features", "_breakpoint", "_component";
-
-/* @section layout */
-#wiki-wrapper {
-  @include desktop-page-layout;
-}
-
-#wiki-content {
-  height: 1%;
-  overflow: visible;
-
-  .wrap {
-    height: 1%;
-    overflow: auto;
-  }
-}
-
-#wiki-body {
-  display: block;
-  width: 100%;
-  margin-right: 3%;
-
-  float: left;
-  clear: left;
-}
-
-#wiki-sidebar {
-  width: $layout-sidebar;
-}
-
-#wiki-footer {
-  clear: both;
-}
-
-.has-sidebar {
-  #wiki-body {
-    width: $layout-with-sidebar - $layout-with-sidebar-leeway;
-  }
-  #wiki-footer {
-    width: $layout-with-sidebar;
-  }
-}
-
-.has-leftbar {
-  #wiki-body {
-    float: right;
-    clear: right;
-  }
-  #wiki-sidebar {
-    float: left;
-  }
-}
-
-.has-rightbar {
-  #wiki-sidebar {
-    float: right;
-  }
-}
-
-/* @section head */
-
-#head {
-  #searchbar {
-    #searchbar-fauxtext {
-      input#search-query {
-        float: left;
-      }
-
-      #search-submit span {
-        height: 2.25em;
-      }
-    }
-  }
-
-  ul.actions {
-    margin: 1em 0 0 1em;
-  }
-}
-
-/*
-ul.actions {
-  margin-left: 0;
-}
-*/
-
-.compare {
-  #footer ul.actions {
-    margin-top: 1em;
-  }
-
-  div.data {
-    overflow: auto;
-  }
-}
-
-.history {
-  #version-form {
-    margin: -0.5em 0 -0.5em !important;
-  }
-}
-
-#gollum-editor {
-  padding-bottom: 0;
-
-  #gollum-editor-format-selector {
-    margin-top: 6px;
-
-    label {
-      padding-top: 0.1em !important;
-    }
-  }
-
-  .singleline input {
-    padding-top: 0.25em;
-  }
-
-  .collapsed {
-    padding-bottom: 1.1em;
-  }
-
-  #gollum-editor-submit {
-    padding: 0.55em 1em 0.55em;
-    height: 2.4em;
-  }
-
-  #gollum-editor-preview {
-    line-height: 1.3em;
-  }
-
-  form {
-    margin: 0;
-  }
-
-  textarea {
-    width: 98%;
-  }
-}
-
-#gollum-editor-help-parent, 
-#gollum-editor-help-list {
-  li a {
-    height: auto;
-  }
-}

lib/gollum/public/gollum/stylesheets/tables.scss

@@ -0,0 +1,40 @@
+@import "_base", "_breakpoint";
+
+/* @section history */
+
+
+.history #footer {
+  margin-bottom: 7em;
+}
+
+
+
+/* @section compare */
+.compare {
+
+
+  .data {
+
+    table {
+
+      tr td {
+        font-family: $font-console;
+        line-height: 1.5em;
+
+        & + td + td {
+          width: 100%;
+        }
+
+        &.line_numbers {
+          border-right: 1px solid #999;
+          color: #999;
+          padding: 0 0 0 0.5em;
+        }
+      }
+    }
+
+  }
+
+
+}
+

lib/gollum/public/gollum/stylesheets/template.scss

@@ -134,17 +134,17 @@ a {
   h6:before {counter-increment: h6; content: counter(h1, var(--header-enum-style)) "." counter(h2, var(--header-enum-style)) "." counter(h3, var(--header-enum-style)) "." counter(h4, var(--header-enum-style)) "." counter(h5, var(--header-enum-style)) "." counter(h6, var(--header-enum-style)) ". ";}
 }
 
+#footer {
+  margin-bottom: 7em;
+}
+
 .markdown-body {
-  padding: 1em;
+  padding: 1em 1em 1em 0;
   font-size: 15px;
   line-height: 1.7;
   overflow: hidden;
   word-wrap: break-word;
-
+  
-  @include desktop-breakpoint {
-    padding: 30px;
-  }
-
   a {
     &.absent {
       color: $red;
@@ -490,7 +490,7 @@ a {
 /* Table of contents */
 
 .toc {
-  background-color: #F7F7F7;
+  background-color: white;
   border: $border-standard;
   padding: 5px 10px;
   margin: 0;
@@ -515,7 +515,7 @@ a {
 
   > ul {
     margin-left: 10px;
-    font-size: 17px;
+    font-size: 15px;
   }
 }
 

lib/gollum/templates/compare.mustache

@@ -1,69 +1,52 @@
 <div id="wiki-wrapper" class="compare">
-<div id="head">
+	<div id="head">
-  <h1>History for <strong>{{path}}</strong></h1>
+		{{>navbar}}
-
+	  <h1 class="py-4"><span class="f1-light text-gray-light">Comparing versions of</span> {{name}}</h1>
-  <ul class="actions">
+	</div>
-    <li class="minibutton">
-      {{>searchbar}}
-    </li>
-    <li class="minibutton"><a href="{{base_url}}/{{escaped_url_path}}"
-       class="action-view-page">View Page</a></li>
-    {{#allow_editing}}
-      <li class="minibutton"><a href="{{edit_path}}/{{escaped_url_path}}"
-         class="action-edit-page">Edit Page</a></li>
-    {{/allow_editing}}
-    <li class="minibutton"><a href="{{history_path}}/{{escaped_url_path}}"
-       class="action-page-history">Page History</a></li>
-  </ul>
-</div>
 
 {{#message}}
-<p>{{message}}</p>
+	<p>{{message}}</p>
 {{/message}}
 
-<div id="compare-content">
+	<div id="compare-content">
 
-  {{#show_revert}}
+		<div class="py-4" id="actions">
-  <ul class="actions">
+		  {{#show_revert}}
-    <li class="minibutton"><a href="{{history_path}}/{{escaped_url_path}}"
+		    {{#allow_editing}}
-       class="action-page-history">Back to Page History</a></li>
+				<form name="gollum-revert" action="{{revert_path}}/{{escaped_url_path}}/{{before}}/{{after}}" method="post" id="gollum-revert-form"></form>
-    {{#allow_editing}}
+				<span class="pb-4">
-      <li class="minibutton">
+					<button class="btn btn-sm" type="submit" onclick="$('#gollum-revert-form').submit()">Revert Changes</button>
-        <form name="gollum-revert" action="{{revert_path}}/{{escaped_url_path}}/{{before}}/{{after}}" method="post" id="gollum-revert-form">
+					<a href="{{history_path}}/{{escaped_url_path}}" class="btn btn-sm action-page-history">Back to Page History</a>
-        <a href="#" class="gollum-revert-button">Revert Changes</a>
+				</span>
-        </form>
+		    {{/allow_editing}}
-      </li>
+		  {{/show_revert}}
-    {{/allow_editing}}
+		</div>
-  </ul>
-  {{/show_revert}}
 
-  <div class="data highlight">
+	  <div class="Box data highlight">
-    <table cellpadding="0" cellspacing="0">
+			<div class="Box-header Box--condensed Box-header--gray">{{path}} <span class="px-2 float-right">Comparing {{before}} to {{after}}</span></div>
-      {{#lines}}
+	    <table >
-        <tr>
+	      {{#lines}}
-          <td class="line_numbers">{{ldln}}</td>
+	        <tr>
-          <td class="line_numbers">{{rdln}}</td>
+	          <td class="line_numbers">{{ldln}}</td>
-          <td>
+	          <td class="line_numbers">{{rdln}}</td>
-            <pre><div class="{{class}}">{{line}}</div></pre>
+	          <td>
-          </td>
+	            <div class="{{class}} pl-2">{{line}}</div>
-        </tr>
+	          </td>
-      {{/lines}}
+	        </tr>
-    </table>
+	      {{/lines}}
-  </div>
+	    </table>
-</div>
+		</div>
-<div id="footer">
+	</div>
-  <ul class="actions">
+
-    <li class="minibutton"><a href="{{history_path}}/{{escaped_url_path}}"
+	<div class="pt-4" id="footer">
-       class="action-page-history">Back to Page History</a></li>
+	   {{#show_revert}}
-    {{#show_revert}}
+	   {{#allow_editing}}
-    {{#allow_editing}}
+				<span class="pt-4"><button class="btn btn-sm gollum-revert-button" type="submit" onclick="$('#gollum-revert-form').submit()">Revert Changes</button></span>
-      <li class="minibutton">
+	   {{/allow_editing}}
-        <a href="#" class="gollum-revert-button">Revert Changes</a>
+	   {{/show_revert}}
-      </li>
+		<div class="pt-4">
-    {{/allow_editing}}
+	   <a href="#">Back to Top</a>
-    {{/show_revert}}
+		</div>
-    <li class="minibutton"><a href="#">Back to Top</a></li>
+	</div>
-  </ul>
-</div>
-</div>
 </div>
+

lib/gollum/templates/create.mustache

@@ -1,15 +1,21 @@
 <div id="wiki-wrapper" class="create">
 <div id="head">
-  <h1>Create New Page</h1>
+	{{>navbar}}
-	<ul class="actions">
+  <h1 class="py-4">Create New Page</h1>
-		<li class="minibutton"><a href="{{base_url}}/"
-       class="action-home-page">Home</a></li>
-	</ul>
 </div>
 <div id="wiki-content" class="create edit">
-  <div class="has-sidebar">
+	<div class="tabnav">
+	  <nav class="tabnav-tabs" aria-label="Foo bar">
+	    <a href="#" id="edit" class="tabnav-tab selected" aria-current="edit">Edit</a>
+	    <a href="#" id="preview" class="tabnav-tab" aria-current="preview">Preview</a>
+	  </nav>
+	</div>
+	
+  <div class="has-sidebar tabnav-div" id="edit-content">
     {{>editor}}
   </div>
+	<div class="tabnav-div" id="preview-content">
+	</div>
 </div>
 </div>
 <script type="text/javascript">

lib/gollum/templates/edit.mustache

@@ -1,14 +1,14 @@
 <div id="wiki-wrapper" class="edit">
 <div id="head">
-  <h1>Editing <strong>{{title}}</strong></h1>
+	{{>navbar}}
-  <ul class="actions">
+  <h1 class="py-4">Editing <strong>{{title}}</strong></h1>
-		<li class="minibutton"><a href="{{base_url}}/"
-       class="action-home-page">Home</a></li>
-    <li class="minibutton"><a href="{{base_url}}/{{escaped_url_path}}"
-       class="action-view-page">View Page</a></li>
-     <li class="minibutton"><a href="{{history_path}}/{{escaped_url_path}}"
-       class="action-page-history">Page History</a></li>
-  </ul>
 </div>
-  <div id="wiki-content">{{>editor}}</div>
+<div class="tabnav">
+  <nav class="tabnav-tabs">
+    <a href="#" id="edit" class="tabnav-tab selected" aria-current="edit">Edit</a>
+    <a href="#" id="preview" class="tabnav-tab" aria-current="preview">Preview</a>
+  </nav>
+</div>
+  <div class="tabnav-div" id="edit-content">{{>editor}}</div>
+	<div class="tabnav-div" id="preview-content"></div>
 </div>

lib/gollum/templates/editor.mustache

@@ -9,7 +9,7 @@
   {{#is_create_page}}
   <div id="gollum-editor-title-field" class="singleline">
     <label for="page" class="jaws">Page Title</label>
-    <input type="text" name="page" id="gollum-editor-page-title" value="{{page_name}}">
+    <input class="form-control input-lg" placeholder="Page title" type="text" name="page" id="gollum-editor-page-title" value="{{page_name}}">
     {{#has_path}}
     <p class="path_note"><strong>NOTE:</strong> This page will be created within the &quot;<strong>{{path}}</strong>&quot; directory</p>
     {{/has_path}}
@@ -20,56 +20,44 @@
   <input type="hidden" name="etag" id="gollum-editor-etag" value="{{etag}}">
   {{/is_edit_page}}
   <input type="hidden" name="path" id="gollum-editor-page-path" value="{{path}}">
-  <div id="gollum-editor-function-bar">
+  
+	<div id="gollum-editor-function-bar">
     <div id="gollum-editor-function-buttons">
-    <a href="#" id="function-bold" class="function-button" title="Bold">
+			<button class="btn btn-sm function-button" id="function-bold" title="Bold">{{#octicon}}bold{{/octicon}}</button>
-      <span>Bold</span></a>
+			<button class="btn btn-sm function-button" id="function-italic" title="Italic">{{#octicon}}italic{{/octicon}}</button>
-    <a href="#" id="function-italic" class="function-button" title="Italic">
+			<button class="btn btn-sm function-button" id="function-code" title="Code">{{#octicon}}code{{/octicon}}</button>
-      <span>Italic</span></a>
+			<span class="pr-2"></span>
-    <a href="#" id="function-code" class="function-button" title="Code">
+			<button class="btn btn-sm function-button" id="function-ul" title="Unordered list">{{#octicon}}list-unordered{{/octicon}}</button>
-      <span>Code</span></a>
+			<button class="btn btn-sm function-button" id="function-ol" title="Ordered list">{{#octicon}}list-ordered{{/octicon}}</button>
-    <span class="function-divider">&nbsp;</span>
+			<button class="btn btn-sm function-button" id="function-blockquote" title="Blockquote">{{#octicon}}quote{{/octicon}}</button>
-    <a href="#" id="function-ul" class="function-button" title="Unordered list">
+			<button class="btn btn-sm function-button" id="function-hr" title="Horizontal rule">{{#octicon}}horizontal-rule{{/octicon}}</button>
-      <span>Unordered List</span></a>
+			<span class="pr-2"></span>
-    <a href="#" id="function-ol" class="function-button" title="Ordered list">
+			<button class="btn btn-sm function-button" id="function-h1" title="Heading 1">h1</button>
-      <span>Ordered List</span></a>
+			<button class="btn btn-sm function-button" id="function-h2" title="Heading 2">h2</button>
-    <a href="#" id="function-blockquote" class="function-button" title="Blockquote">
+			<button class="btn btn-sm function-button" id="function-h3" title="Heading 3">h3</button>
-      <span>Blockquote</span></a>
+			<span class="pr-2"></span>
+			<button class="btn btn-sm function-button" id="function-link" title="Link">{{#octicon}}link{{/octicon}}</button>
+			<button class="btn btn-sm function-button" id="function-image" title="Image">{{#octicon}}file-media{{/octicon}}</button>
+			<span class="pr-2"></span>
+			{{#critic_markup}}
+			<button class="btn btn-sm function-button" id="function-critic-accept" title="Accept Selected CriticMarkup">{{#octicon}}plus{{/octicon}}</button>
+			<button class="btn btn-sm function-button" id="function-critic-reject" title="Reject Selected CriticMarkup">{{#octicon}}dash{{/octicon}}</button>					
+			<span class="pr-2"></span>
+			{{/critic_markup}}
+			<button class="btn btn-sm function-button" id="function-help" title="Help">{{#octicon}}question{{/octicon}}</button>
+			
 
-    <a href="#" id="function-hr" class="function-button" title="Horizontal rule">
-      <span>Horizontal Rule</span></a>
-    <span class="function-divider">&nbsp;</span>
-    <a href="#" id="function-h1" class="function-button"  title="Heading 1">
-      <span>h1</span></a>
-    <a href="#" id="function-h2" class="function-button" title="Heading 2">
-      <span>h2</span></a>
-    <a href="#" id="function-h3" class="function-button" title="Heading 3">
-      <span>h3</span></a>
-    <span class="function-divider">&nbsp;</span>
-    <a href="#" id="function-link" class="function-button" title="Link">
-      <span>Link</span></a>
-    <a href="#" id="function-image" class="function-button" title="Image">
-      <span>Image</span></a>
-	{{#critic_markup}}
-    <a href="#" id="function-critic-accept" class="function-button" title="Accept Selected CriticMarkup">
-      <span>Accept Selected CriticMarkup</span></a>
-    <a href="#" id="function-critic-reject" class="function-button" title="Reject Selected CriticMarkup">
-      <span>Reject Selected CriticMarkup</span></a>
-	{{/critic_markup}}
-    <span class="function-divider">&nbsp;</span>
-    <a href="#" id="function-help" class="function-button" title="Help">
-      <span>Help</span></a>
     </div>
 
     <div id="gollum-editor-format-selector">
       <label for="format">Keybinding</label>
-      <select id="keybinding" name="keybinding">
+      <select id="keybinding" name="keybinding" class="form-select">
         <option selected="selected">default</option>
         <option>vim</option>
         <option>emacs</option>
       </select>
       <label for="format">Edit Mode</label>
-      <select id="wiki_format" name="format">
+      <select id="wiki_format" name="format" class="form-select">
       {{#formats}}
       {{#enabled}}
       <option {{#selected}}selected="selected" {{/selected}}value="{{id}}">
@@ -110,7 +98,7 @@
       </div>
     </div>
   </div>
-    <textarea id="gollum-editor-body"
+    <textarea id="gollum-editor-body" class="form-control"
      data-markup-lang="{{format}}" name="content" class="mousetrap">{{content}}</textarea>
     <div>
       <i class="fa fa-spinner fa-spin"></i>
@@ -118,43 +106,46 @@
     </div>
 
     {{#header}}
+
     <div id="gollum-editor-edit-header" class="collapsed">
-      <a href="#" class="button"><span>Expand/Collapse</span></a>
+			<button class="btn btn-sm collapsable">{{#octicon}}triangle-down{{/octicon}}</button><button class="btn btn-sm collapsable" hidden>{{#octicon}}triangle-up{{/octicon}}</button>
       <h4>Header</h4>
-      <textarea id="gollum-editor-header" name="header">{{header}}</textarea>
+      <textarea id="gollum-editor-header" name="header" class="form-control">{{header}}</textarea>
     </div>
     {{/header}}
 
     {{#footer}}
     <div id="gollum-editor-edit-footer" class="collapsed">
-      <a href="#" class="button"><span>Expand/Collapse</span></a>
+      <button class="btn btn-sm collapsable">{{#octicon}}triangle-down{{/octicon}}</button><button class="btn btn-sm collapsable" hidden>{{#octicon}}triangle-up{{/octicon}}</button>
       <h4>Footer</h4>
-      <textarea id="gollum-editor-footer" name="footer">{{footer}}</textarea>
+      <textarea id="gollum-editor-footer" name="footer" class="form-control">{{footer}}</textarea>
     </div>
     {{/footer}}
 
     {{#sidebar}}
     <div id="gollum-editor-edit-sidebar" class="collapsed">
-      <a href="#" class="button"><span>Expand/Collapse</span></a>
+      <button class="btn btn-sm collapsable">{{#octicon}}triangle-down{{/octicon}}</button><button class="btn btn-sm collapsable" hidden>{{#octicon}}triangle-up{{/octicon}}</button>
-      <h4>Sidebar</h4>
+			<h4>Sidebar</h4>
-      <textarea id="gollum-editor-sidebar" name="sidebar">{{sidebar}}</textarea>
+      
+      <textarea id="gollum-editor-sidebar" name="sidebar" class="form-control">{{sidebar}}</textarea>
     </div>
     {{/sidebar}}
 
     <div id="gollum-editor-edit-summary" class="singleline">
       <label for="message" class="jaws">Edit message:</label>
       {{#is_create_page}}
-      <input type="text" name="message" id="gollum-editor-message-field" value="Created {{page_name}} ({{format}})">
+      <input type="text" name="message" class="form-control input-block" id="gollum-editor-message-field" value="Created {{page_name}} ({{format}})">
       {{/is_create_page}}
       {{#is_edit_page}}
-      <input type="text" name="message" id="gollum-editor-message-field" value="Updated {{page_name}} ({{format}})">
+      <input type="text" name="message" class="form-control input-block" id="gollum-editor-message-field" value="Updated {{page_name}} ({{format}})">
       {{/is_edit_page}}
     </div>
 
     <span class="jaws"><br></span>
-    <input type="submit" id="gollum-editor-submit" value="Save" title="Save current changes">
+		<div class="form-actions">
-    <a href="" id="gollum-editor-cancel" class="minibutton" title="Cancel editing" onClick="window.history.back()">Cancel</a>
+    	<input type="submit" id="gollum-editor-submit" class="btn btn-primary" value="Save" title="Save current changes">
-    <a href="{{preview_path}}" id="gollum-editor-preview" class="minibutton" title="Preview this Page">Preview</a>
+    	<a href="" id="gollum-editor-cancel" class="btn" type="button" title="Cancel editing" onClick="window.history.back()">Cancel</a>
+		</div>
   </fieldset>
 </form>
 </div>

lib/gollum/templates/history.mustache

@@ -1,62 +1,35 @@
 <div id="wiki-wrapper" class="history">
 <div id="head">
-  <h1>History for <strong>{{title}}</strong></h1>
+	{{>navbar}}
-  <ul class="actions">
+  <h1 class="py-4"><span class="f1-light text-gray-light"> History for</span> {{name}}</h1>
-		<li class="minibutton"><a href="{{base_url}}/"
-       class="action-home-page">Home</a></li>
-    <li class="minibutton">
-      {{>searchbar}}
-    </li>
-    <li class="minibutton"><a href="{{base_url}}/{{escaped_url_path}}"
-       class="action-view-page">View Page</a></li>
-    {{#allow_editing}}
-      <li class="minibutton"><a href="{{edit_path}}/{{escaped_url_path}}"
-         class="action-edit-page">Edit Page</a></li>
-    {{/allow_editing}}
-  </ul>
 </div>
-<div id="wiki-history">
+<div id="page-history">
 
-  <ul class="actions">
+  <div class="pb-4"><button class="btn btn-sm action-compare-revision" type="submit">Compare Revisions</button></div>
-    <li class="minibutton"><a href="javascript:void(0);"
-       class="action-compare-revision">Compare Revisions</a></li>
-  </ul>
 
-  <form name="compare-versions" id="version-form" method="post"
+	<div class="Box Box--condensed flex-auto">
-   action="{{compare_path}}/{{escaped_url_path}}">
+		<form name="compare-versions" id="version-form" method="post"
-  <fieldset>
+	   action="{{compare_path}}/{{escaped_url_path}}">
-  <table>
+			<ul>
-    <tbody>
+	    	{{#versions}}
+				<li class="Box-row border-top Box-row--hover-gray d-flex flex-items-center">
+					<span class="pr-2"><input class="checkbox" type="checkbox" name="versions[]" value="{{id}}"></span>
+					<span class="float-left col-2">{{>author_template}}</span>
+					<span class="flex-auto col-1 text-gray-light">{{date}}</span>
+					<span class="flex-auto col-5">{{message}}</span>
+					<span class="pl-4 float-right">[<a href="{{base_url}}/{{escaped_url_path}}/{{id}}" title="View commit">{{id7}}</a>]</span>
+				</li>
+				{{/versions}}
+			</ul>
+		</form>
+	</div>
+	
 
-      {{#versions}}
-      <tr>
-        <td class="checkbox">
-          <input type="checkbox" name="versions[]" value="{{id}}">
-        </td>
-        <td class="author">
-            {{>author_template}}
-        </td>
-        <td class="commit-name">
-          <span class="time-elapsed" title="{{date_full}}">{{date}}:</span>&nbsp;
-          {{message}}
-          [<a href="{{base_url}}/{{escaped_url_path}}/{{id}}" title="View commit">{{id7}}</a>]
-        </td>
-      </tr>
-      {{/versions}}
 
-    </tbody>
-  </table>
-  </fieldset>
-  </form>
-</div>
 <div id="footer">
-  <ul class="actions">
+	<div class="pt-4">
-    <li class="minibutton"><a href="javascript:void(0);"
+  	<button class="btn btn-sm action-compare-revision" type="submit">Compare Revisions</button>
-       class="action-compare-revision">Compare Revisions</a></li>
+	</div>
-
+	<div class="pt-2"><a href="#" class="action-back-to-top">Back to Top</a></div>
-    <!-- only show this button if we have more than 20 revisions -->
-    <li class="minibutton"><a href="#"
-       class="action-back-to-top">Back to Top</a></li>
-  </ul>
 </div>
 </div>

lib/gollum/templates/history_authors/gravatar.mustache

@@ -1,5 +1,5 @@
 <a href="javascript:void(0)">
 <img src="https://secure.gravatar.com/avatar/{{gravatar}}?s=16"
     alt="avatar: {{author}}" class="mini-gravatar"/>
-    <span class="username">{{author}}</span>
+    {{author}}
 </a>

lib/gollum/templates/history_authors/identicon.mustache

@@ -1,5 +1,5 @@
 <a href="javascript:void(0)">
   <img src="{{#sprockets_image_path}}man_24.png{{/sprockets_image_path}}" alt="avatar: {{author}}"
     class="mini-gravatar identicon" data-identicon="{{identicon}}"/>
-  <span class="username">{{author}}</span>
+  {{author}}
 </a>

lib/gollum/templates/history_authors/none.mustache

@@ -1,3 +1,3 @@
 <a href="javascript:void(0)">
-    <span class="username">{{author}}</span>
+    {{author}}
 </a>

lib/gollum/templates/latest_changes.mustache

@@ -1,37 +1,26 @@
 <div id="wiki-wrapper" class="history">
 <div id="head">
-  <h1><strong>{{title}}</strong></h1>
+	{{>navbar}}
-  <ul class="actions">
+  <h1 class="py-4">{{title}}</h1>
-    <li class="minibutton"><a href="{{base_url}}/{{escaped_url_path}}"
-       class="action-view-page">Home</a></li>
-  </ul>
 </div>
 <div id="wiki-history">
 
-  <fieldset>
+<div class="Box flex-auto">
-  <table>
+	{{#versions}}
-    <tbody>
+		<div class="Box-row Box-row--hover-gray border-top d-flex flex-items-center">
+			<span class="float-left col-2">{{>author_template}}</span>
+			<span class="flex-auto col-1 text-gray-light">{{date}}</span>
+			<span class="flex-auto col-7">{{message}}<br/>
+			{{#files}}
+      	<span class="flex-auto col-2"><a href="{{link}}">{{file}}</a></span><br/>
+      {{/files}}
+			</span>
+			<span class="pl-4 float-right">[{{id7}}]</span>
+		</div>
+	{{/versions}}
+</div>
 
-      {{#versions}}
+ 
-      <tr>
-        <td class="author">
-            {{>author_template}}
-        </td>
-        <td class="commit-name">
-          <span class="time-elapsed" title="{{date_full}}">{{date}}:</span>&nbsp;
-          {{message}}
-          [{{id7}}]
-          {{#files}}
-          <br>
-          <a href="{{link}}">{{file}}</a>
-          {{/files}}
-        </td>
-      </tr>
-      {{/versions}}
-
-    </tbody>
-  </table>
-  </fieldset>
 </div>
 <div id="footer">
 

lib/gollum/templates/layout.mustache

@@ -7,12 +7,10 @@
   <meta name="viewport" content="width=device-width">
   {{#sprockets_stylesheet_tag}}app{{/sprockets_stylesheet_tag}}
   {{#sprockets_stylesheet_tag}}print print{{/sprockets_stylesheet_tag}}
+
   {{#css}}<link rel="stylesheet" type="text/css" href="{{custom_path}}/custom.css" media="all">{{/css}}
   {{#noindex}}<meta name="robots" content="noindex, nofollow" />{{/noindex}}
 
-  <!--[if lte IE 8]>
-  {{#sprockets_stylesheet_tag}}ie7{{/sprockets_stylesheet_tag}}
-  <![endif]-->
 
   <script>
   var criticMarkup = '{{critic_markup}}';
@@ -23,7 +21,7 @@
 	  uploadDest = uploadDest + window.location.pathname.replace(/.*gollum\/[-\w]+\//, "/").replace(/\.[^/.]+$/, "")
 	}
 	{{#page}}
-	  var pageFullPath = '{{url_path}}';
+	  var pageFullPath = '{{url_path.source_location}}';
 	{{/page}}
 
   </script>
@@ -58,8 +56,8 @@
   <title>{{title}}</title>
 </head>
 <body>
-
+<div class="container-lg clearfix">
 {{{yield}}}
-
+</div>
 </body>
 </html>

lib/gollum/templates/navbar.mustache

@@ -0,0 +1,43 @@
+<nav class="actions pt-4">
+	
+	<div class="TableObject">
+		<div class="TableObject-item">
+	    <a class="btn" href="{{base_url}}/">Home</a>
+	  </div>
+
+
+  	<div class="TableObject-item TableObject-item--primary px-2" {{^search}}style="visibility:hidden"{{/search}}>
+			{{>searchbar}}
+	  </div>
+		
+	  <div class="TableObject-item">
+	    {{#overview}}<a class="btn" href="{{overview_path}}">Overview</a>{{/overview}}
+			{{#latest_changes}}<a class="btn" href="{{latest_changes_path}}">Latest Changes</a>{{/latest_changes}}
+	  </div>
+	
+		{{#history}}
+		<div class="TableObject-item pl-1">
+			<a class="btn" href="{{history_path}}/{{escaped_url_path}}">Page History</a>
+		</div>
+		{{/history}}
+		
+    {{#allow_editing}}
+		  <div class="TableObject-item px-1">
+				{{#allow_uploads}}
+					<a class="btn" id="minibutton-upload-page" href="#">Upload</a>
+	    	{{/allow_uploads}}
+				{{#editable}}
+					<a class="btn" id="minibutton-rename-page" href="#">Rename</a>
+					<a class="btn" id="minibutton-edit-page" href="{{edit_path}}/{{escaped_url_path}}">Edit</a>
+					<a class="btn btn-primary" id="minibutton-new-page" href="#">New</a>
+				{{/editable}}
+				{{^editable}}
+					{{#newable}}
+						<a class="btn btn-primary" id="minibutton-new-page" href="#">New</a>
+					{{/newable}}
+				{{/editable}}
+			</div>
+		{{/allow_editing}}
+			
+	</div>
+</nav>

lib/gollum/templates/overview.mustache

@@ -0,0 +1,42 @@
+<div id="wiki-wrapper" class="results">
+<div id="head" style="border:none;">
+	{{>navbar}}
+  <h1 class="py-4">{{title}}</h1>
+</div>
+<div id="overview">
+
+{{#has_results}}
+  <div id="file-browser">
+    <div class="breadcrumb pb-4">
+      {{{breadcrumb}}}
+    </div>
+
+		<div class="Box">
+	    <ul>
+				{{#files_folders}}
+					<li class="Box-row">
+						<span class="pr-2">{{{icon}}}</span>
+						<span><a href={{url}}>{{name}}</a></span>
+						{{#allow_editing}}
+							{{#is_file}}<button class="btn btn-sm float-right delete-file" data-file-path={{name}} data-confirm="Are you sure you want to delete {{name}}?">{{#octicon}}trashcan{{/octicon}}</button>{{/is_file}}
+						{{/allow_editing}}
+		      </li>
+				{{/files_folders}}
+	    </ul>
+		</div>
+	
+	
+{{/has_results}}
+
+{{#no_results}}
+  <p id="no-results">
+    There are no pages in <strong>{{current_path}}</strong> on <strong>{{ref}}</strong>.
+  </p>
+{{/no_results}}
+
+</div>
+<div class="pt-4" id="footer">
+	<a href="#">Back to Top</a>
+</div>
+</div>
+

lib/gollum/templates/page.mustache

@@ -6,93 +6,17 @@ Mousetrap.bind(['e'], function( e ) {
 });
 </script>
 <div id="wiki-wrapper" class="page">
-<div id="head"> 
+<div id="head">
-  <h1>{{page_header}}</h1>
+	{{#navbar?}}{{>navbar}}{{/navbar?}}
-  <ul class="actions">
-		<li class="minibutton"><a href="{{base_url}}/"
-       class="action-home-page">Home</a></li>
-    <li class="minibutton">
-      {{>searchbar}}
-    </li>
-    <li class="minibutton"><a href="{{pages_path}}"
-      class="action-all-pages">Overview</a></li>
-    {{#allow_editing}}
-      <li class="minibutton jaws">
-        <a href="#" id="minibutton-new-page">New</a></li>
-    {{/allow_editing}}
-    {{#allow_editing}}
-      {{#allow_uploads}}
-      <li class="minibutton jaws">
-        <a href="#" id="minibutton-upload-page">Upload</a></li>
-      {{/allow_uploads}}
-    {{/allow_editing}}
-    {{#allow_editing}}
-      {{#editable}}
-        <li class="minibutton jaws">
-          <a href="#" id="minibutton-rename-page">Rename</a></li>
-      {{/editable}}
-    {{/allow_editing}}
-    {{#allow_editing}}
-      {{#editable}}
-        <li class="minibutton"><a href="{{edit_path}}/{{escaped_url_path}}"
-           class="action-edit-page">Edit</a></li>
-      {{/editable}}
-    {{/allow_editing}}
-    <li class="minibutton"><a href="{{history_path}}/{{escaped_url_path}}"
-       class="action-page-history">History</a></li>
-    <li class="minibutton"><a href="{{latest_changes_path}}"
-       class="action-page-history">Latest Changes</a></li>
-  </ul>
-  <div class="breadcrumb">{{{breadcrumb}}}</div>
 </div>
-<div id="wiki-content">
-<div class="{{#has_header}}has-header{{/has_header}}{{#has_footer}} has-footer{{/has_footer}}{{#has_sidebar}} has-sidebar has-{{bar_side}}bar{{/has_sidebar}}{{#has_toc}} has-toc{{/has_toc}}">
-  {{#has_toc}}
-  <div id="wiki-toc-main">
-    {{{toc_content}}}
-  </div>
-  {{/has_toc}}
-  {{#has_sidebar}}
-  <div id="wiki-sidebar" class="gollum-{{sidebar_format}}-content">
-    <div id="sidebar-content" class="markdown-body">
-      {{{sidebar_content}}}
-    </div>
-  </div>
-  {{/has_sidebar}}
-  <div id="wiki-body" class="gollum-{{format}}-content">
-    {{#has_header}}
-    <div id="wiki-header" class="gollum-{{header_format}}-content">
-      <div id="header-content" class="markdown-body">
-        {{{header_content}}}
-      </div>
-    </div>
-    {{/has_header}}
-    <div class="markdown-body {{#header_enum?}}header-enum{{/header_enum?}}" {{#header_enum?}}style="--header-enum-style:{{header_enum_style}};"{{/header_enum?}}>
-      {{{rendered_metadata}}}
-      {{{content}}}
-    </div>
-  </div>
-  {{#has_footer}}
-  <div id="wiki-footer" class="gollum-{{footer_format}}-content">
-    <div id="footer-content" class="markdown-body">
-      {{{footer_content}}}
-    </div>
-  </div>
-  {{/has_footer}}
-  </div>
 
-</div>
+
-<div id="footer">
+{{>wiki_content}}
-  <p id="last-edit"><a id="page-info-toggle" data-pagepath="{{escaped_url_path}}">When was this page last modified?</a></p>
+
-  {{#allow_editing}}
-    <p>
-      <a id="delete-link" href="{{escaped_url_path}}" data-confirm="Are you sure you want to delete this page?"><span>Delete this Page</span></a>
-    </p>
-  {{/allow_editing}}
-</div>
-</div>
 
 <form name="rename" method="POST" action="{{rename_path}}/{{escaped_url_path}}">
   <input type="hidden" name="rename"/>
   <input type="hidden" name="message"/>
 </form>
+
+</div>

lib/gollum/templates/pages.mustache

@@ -1,42 +0,0 @@
-<div id="wiki-wrapper" class="results">
-<div id="head" style="border:none;">
-  <h1>{{title}}</h1>
-  <ul class="actions">
-	  <li class="minibutton"><a href="{{base_url}}/"
-       class="action-home-page">Home</a></li>
-    <li class="minibutton">
-      {{>searchbar}}
-    </li>
-    {{#allow_editing}}
-      <li class="minibutton jaws">
-      <a href="#" id="minibutton-new-page">New</a></li>
-    {{/allow_editing}}
-  </ul>
-</div>
-<div id="pages">
-
-{{#has_results}}
-  <div id="file-browser">
-    <div class="breadcrumb">
-      {{{breadcrumb}}}
-    </div>
-    <ul>
-      {{{files_folders}}}
-    </ul>
-  </div>
-{{/has_results}}
-
-{{#no_results}}
-  <p id="no-results">
-    There are no pages in <strong>{{current_path}}</strong> on <strong>{{ref}}</strong>.
-  </p>
-{{/no_results}}
-
-</div>
-<div id="footer">
-  <ul class="actions">
-    <li class="minibutton"><a href="#">Back to Top</a></li>
-  </ul>
-</div>
-</div>
-

lib/gollum/templates/searchbar.mustache

@@ -1,10 +1,3 @@
-<div id="searchbar">
+<form class="search-form" action="{{search_path}}" method="get" id="search-form">
-  <form class="search-form" action="{{search_path}}" method="get" id="search-form">
+	<input type="text" class="form-control input-block" name="q" id="search-query" placeholder="Search" aria-label="Search site" autocomplete="off">
-  <div id="searchbar-fauxtext">
+</form>
-    <input type="text" name="q" id="search-query" value="Search&hellip;" autocomplete="off">
-    <a href="#" id="search-submit" title="Search this wiki">
-      <span>Search</span>
-    </a>
-  </div>
-  </form>
-</div>

lib/gollum/templates/wiki_content.mustache

@@ -0,0 +1,52 @@
+<div id="wiki-content">
+	<h1 class="pt-4">{{page_header}}</h1>
+	<div class="breadcrumb">{{{breadcrumb}}}</div>
+	
+
+	<div class="{{#has_header}}has-header{{/has_header}}{{#has_footer}} has-footer{{/has_footer}}{{#has_sidebar}} has-sidebar has-{{bar_side}}bar{{/has_sidebar}}{{#has_toc}} has-toc{{/has_toc}}">
+	  {{#has_toc}}
+	  <div id="wiki-toc-main">
+	    {{{toc_content}}}
+	  </div>
+	  {{/has_toc}}
+	  {{#has_sidebar}}
+	  <div id="wiki-sidebar" class="gollum-{{sidebar_format}}-content">
+	    <div id="sidebar-content" class="Box Box--condensed col-3 markdown-body pl-4 float-right">
+	      {{{sidebar_content}}}
+	    </div>
+	  </div>
+	  {{/has_sidebar}}
+	  <div id="wiki-body" class="gollum-{{format}}-content">
+	    {{#has_header}}
+	    <div id="wiki-header" class="gollum-{{header_format}}-content">
+	      <div id="header-content" class="markdown-body">
+	        {{{header_content}}}
+	      </div>
+	    </div>
+	    {{/has_header}}
+	    <div class="markdown-body {{#header_enum?}}header-enum{{/header_enum?}}" {{#header_enum?}}style="--header-enum-style:{{header_enum_style}};"{{/header_enum?}}>
+	      {{{rendered_metadata}}}
+	      {{{content}}}
+	    </div>
+	  </div>
+	  {{#has_footer}}
+	  <div id="wiki-footer" class="gollum-{{footer_format}}-content">
+	    <div id="footer-content" class="Box Box-condensed markdown-body pl-2">
+	      {{{footer_content}}}
+	    </div>
+	  </div>
+	  {{/has_footer}}
+	  </div>
+
+	</div>
+
+	<div id="footer" class="pt-4">
+	  <p id="last-edit"><a id="page-info-toggle" data-pagepath="{{escaped_url_path}}">When was this page last modified?</a></p>
+	  {{#allow_editing}}
+	    <p>
+	      <a id="delete-link" href="{{escaped_url_path}}" data-confirm="Are you sure you want to delete this page?"><span>Delete this Page</span></a>
+	    </p>
+	  {{/allow_editing}}
+	</div>
+	
+</div>

lib/gollum/views/has_page.rb

@@ -1,7 +1,7 @@
 module Precious
   module HasPage
     def path
-      @page.path
+      @page.url_path
     end
 
     def escaped_url_path

lib/gollum/views/helpers.rb

@@ -12,7 +12,7 @@ module Precious
           create: 'create',
           delete: 'delete',
           edit: 'edit',
-          pages: 'pages',
+          overview: 'overview',
           history: 'history',
           rename: 'rename',
           preview: 'preview',
@@ -44,6 +44,26 @@ module Precious
       end
     end
 
+    module OcticonHelpers
+      def self.included(base)
+        
+        def rocticon(symbol, parameters = {})
+          Octicons::Octicon.new(symbol, parameters).to_svg
+        end
+        
+        def octicon
+          lambda do |args|
+            symbol, height, width = args.split(' ')
+            parameters = {}
+            parameters[:height] = height if height
+            parameters[:width]  = width if width
+            Octicons::Octicon.new(symbol, parameters).to_svg
+          end
+        end
+      end
+    end
+
+
     module SprocketsHelpers
       def self.included(base)
 

lib/gollum/views/history.rb

@@ -65,6 +65,10 @@ module Precious
           super
         end
       end
+      
+      def editable
+        @editable
+      end
 
       def previous_link
         label = "« Previous"

lib/gollum/views/layout.rb

@@ -1,4 +1,5 @@
 require 'cgi'
+require 'octicons'
 
 module Precious
   module Views
@@ -7,6 +8,7 @@ module Precious
       include Sprockets::Helpers
       include Precious::Views::SprocketsHelpers
       include Precious::Views::RouteHelpers
+      include Precious::Views::OcticonHelpers
       
       alias_method :h, :escape_html
 
@@ -48,6 +50,23 @@ module Precious
         @per_page_uploads
       end
 
+      # Navigation bar
+      def search
+        false
+      end
+      
+      def history
+        false
+      end
+      
+      def overview
+        false
+      end
+      
+      def latest_changes
+        false
+      end
+      
     end
   end
 end

lib/gollum/views/overview.rb

@@ -0,0 +1,80 @@
+require "pathname"
+
+module Precious
+  module Views
+    class Overview < Layout
+      attr_reader :results, :ref, :allow_editing, :newable
+
+      def title
+        "Overview of #{@ref}"
+      end
+
+      # def editable
+      #   false
+      # end
+
+      def current_path
+        @path ? @path : '/'
+      end
+
+      def breadcrumb
+        if @path
+          path       = Pathname.new(@path)
+          breadcrumb = [%{<a href="#{overview_path}">Home</a>}]
+          path.descend do |crumb|
+            title = crumb.basename
+
+            if title == path.basename
+              breadcrumb << title
+            else
+              breadcrumb << %{<a href="#{overview_path}/#{crumb}/">#{title}</a>}
+            end
+          end
+
+          breadcrumb.join(' / ')
+        else
+          'Home'
+        end
+      end
+
+      
+      def files_folders
+        if has_results
+          files_and_folders = []
+          
+          @results.each do |result|
+            result_path = result.url_path
+            result_path = result_path.sub(/^#{Regexp.escape(@path)}\//, '') unless @path.nil?            
+            if result_path.include?('/')
+              # result contains a folder
+              folder_name = result_path.split('/').first
+              folder_path = @path ? "#{@path}/#{folder_name}" : folder_name
+              folder_url  = "#{overview_path}/#{folder_path}/"
+              files_and_folders << {name: folder_name, icon: rocticon('file-directory'), type: 'dir', url: folder_url, is_file: false}
+            elsif result_path != '.gitkeep'
+              file_url = "#{@base_url}/#{result.escaped_url_path}"
+              files_and_folders << {name: result.filename, icon: rocticon('file'), type: 'file', url: file_url, is_file: true}
+            end
+          end
+          # 1012: Overview should list folders first, followed by files and pages sorted alphabetically
+          files_and_folders.uniq{|f| f[:name]}.sort_by!{|f| [f[:type], f[:name]]}
+        end
+      end
+      
+
+      def has_results
+        !@results.empty?
+      end
+
+      def no_results
+        @results.empty?
+      end
+      
+      def latest_changes
+        true
+      end
+    
+      
+    end
+  end
+end

lib/gollum/views/page.rb

@@ -24,14 +24,14 @@ module Precious
       def page_header
         title
       end
-      
+            
       def breadcrumb
         path = Pathname.new(@page.url_path_title)
         breadcrumb = []
         path.descend do |crumb|
           element = "#{crumb.basename}"
           next if element == @page.title
-          breadcrumb << %{<a href="#{pages_path}/#{crumb}/">#{element}</a>}
+          breadcrumb << %{<a href="#{overview_path}/#{crumb}/">#{element}</a>}
         end
         breadcrumb.empty? ? "" : breadcrumb.join(" / ") << " /"
       end
@@ -59,7 +59,23 @@ module Precious
       def editable
         @editable
       end
+      
+      def search
+        true
+      end
+      
+      def history
+        true
+      end
 
+      def latest_changes
+        true
+      end
+      
+      def overview
+        true 
+      end
+        
       def allow_editing
         @allow_editing
       end
@@ -143,6 +159,10 @@ module Precious
         @page.wiki.user_icons == 'identicon'
       end
 
+      def navbar?
+        @navbar
+      end
+
       # Access to embedded metadata.
       #
       # Returns Hash.

lib/gollum/views/pages.rb

@@ -1,87 +0,0 @@
-require "pathname"
-
-module Precious
-  module Views
-    class Pages < Layout
-      attr_reader :results, :ref, :allow_editing
-
-      def title
-        "Overview of #{@ref}"
-      end
-
-      def current_path
-        @path ? @path : '/'
-      end
-
-      def breadcrumb
-        if @path
-          path       = Pathname.new(@path)
-          breadcrumb = [%{<a href="#{pages_path}">Home</a>}]
-          path.descend do |crumb|
-            title = crumb.basename
-
-            if title == path.basename
-              breadcrumb << title
-            else
-              breadcrumb << %{<a href="#{pages_path}/#{crumb}/">#{title}</a>}
-            end
-          end
-
-          breadcrumb.join(' / ')
-        else
-          'Home'
-        end
-      end
-
-
-      def delete_file(path)
-        %Q(<div class="delete-file" data-file-path="#{path}" data-confirm="Are you sure you want to delete #{path}?"><span><button type="submit" name="delete">Delete</button></span></div>)
-      end
-      
-      def files_folders
-        if has_results
-          folders = {}
-          files = {}
-
-          # 1012: Folders and Pages need to be separated
-          @results.each do |result|
-            result_path = result.url_path
-            result_path = result_path.sub(/^#{Regexp.escape(@path)}\//, '') unless @path.nil?            
-
-            if result_path.include?('/')
-              # result contains a folder
-              folder      = result_path.split('/').first
-              folder_path = @path ? "#{@path}/#{folder}" : folder
-              folder_link = %{<li><a href="#{pages_path}/#{folder_path}/" class="folder">#{folder}</a></li>}
-
-              folders[folder] = folder_link unless folders.key?(folder)
-            elsif result_path != '.gitkeep'
-              # result is either a valid gollum page or another type of file
-              klass = (defined? result.format) ? 'page' : 'file'
-              url = "#{@base_url}/#{result.escaped_url_path}"
-              
-              file_link = %{<li><a href="#{url}" class="#{klass}">#{result.filename}</a>#{delete_file(result.url_path) if @allow_editing}</li>}
-              files[result.name] = file_link
-            end
-          end
-
-          # 1012: All Pages should be rendered as Folders first, then Pages, each sorted alphabetically
-          result = Hash[folders.sort_by{| key, value | key.downcase} ].values.join("\n") + "\n"
-          result += Hash[files.sort_by{ | key, value | key.downcase } ].values.join("\n")
-
-          result
-        else
-          ''
-        end
-      end
-
-      def has_results
-        !@results.empty?
-      end
-
-      def no_results
-        @results.empty?
-      end
-    end
-  end
-end

test/test_allow_editing.rb

@@ -36,17 +36,17 @@ context "Precious::Views::Editing" do
     assert_match /Rename/,           last_response.body, "'Rename' link is blocked in page template"
     assert_match /Edit/,             last_response.body, "'Edit' link is blocked in page template"
 
-    get '/gollum/pages'
+    get '/gollum/overview'
 
     assert_match /New/, last_response.body, "'New' link is blocked in pages template"
 
     get '/gollum/history/A'
 
-    assert_match /Edit/, last_response.body, "'Edit' link is blocked in history template"
+    assert_no_match /Edit/, last_response.body, "'Edit' link is not blocked in history template"
 
     get '/gollum/compare/A/fc66539528eb96f21b2bbdbf557788fe8a1196ac..b26b791cb7917c4f37dd9cb4d1e0efb24ac4d26f'
 
-    assert_match /Edit Page/,             last_response.body, "'Edit Page' link is blocked in compare template"
+    assert_no_match /Edit Page/,             last_response.body, "'Edit Page' link is not blocked in compare template"
     assert_match /Revert Changes/,        last_response.body, "'Revert Changes' link is blocked in compare template"
   end
 
@@ -60,7 +60,7 @@ context "Precious::Views::Editing" do
     assert_no_match /Rename/,           last_response.body, "'Rename' link not blocked in page template"
     assert_no_match /Edit/,             last_response.body, "'Edit' link not blocked in page template"
 
-    get '/gollum/pages'
+    get '/gollum/overview'
 
     assert_no_match /New/, last_response.body, "'New' link not blocked in pages template"
 

test/test_app.rb

@@ -605,34 +605,35 @@ context "Frontend with lotr" do
   # │   ├── eye.jpg
   # │   └── todo.txt
   # ├── My-Precious.md
+  # ├── roast-mutton.md
   # ├── Samwise\ Gamgee.mediawiki
   # ├── _Footer.md
   # ├── _Header.md
   # └── _Sidebar.md
-  #
+  # ├── Zamin.md
 
-  test "/pages" do
+  test "/overview" do
-    get "/gollum/pages"
+    get "/gollum/overview"
     assert last_response.ok?
 
     body = last_response.body
 
-    assert body.include?("Bilbo-Baggins"), "/pages should include the page 'Bilbo Baggins'"
+    assert body.include?("Bilbo-Baggins"), "/overview should include the page 'Bilbo Baggins'"
-    assert body.include?("Gondor"), "/pages should include the folder 'Gondor'"
+    assert body.include?("Gondor"), "/overview should include the folder 'Gondor'"
-    assert !body.include?("Boromir"), "/pages should NOT include the page 'Boromir'"
+    assert !body.include?("Boromir"), "/overview should NOT include the page 'Boromir'"
-    assert body.include?("Mordor"), "/pages should include the folder 'Mordor'"
+    assert body.include?("Mordor"), "/overview should include the folder 'Mordor'"
-    assert !body.include?("Eye-Of-Sauron"), "/pages should NOT include the page 'Eye Of Sauron'"
+    assert !body.include?("Eye-Of-Sauron"), "/overview should NOT include the page 'Eye Of Sauron'"
-    assert !body.match(/(Zamin).+(roast\-mutton)/m), "/pages should be sorted alphabetically"
+    assert !body.match(/(Zamin).+(Bilbo\-Baggins)/m), "/overview should be sorted alphabetically"
   end
 
-  test "/gollum/pages/Mordor/" do
+  test "/gollum/overview/Mordor/" do
-    get "/gollum/pages/Mordor/"
+    get "/gollum/overview/Mordor/"
-    assert last_response.ok?, "/pages/Mordor/ did not respond ok"
+    assert last_response.ok?, "/overview/Mordor/ did not respond ok"
 
     body = last_response.body
 
-    assert !body.include?("Bilbo-Baggins"), "/pages/Mordor/ should NOT include the page 'Bilbo Baggins'"
+    assert !body.include?("Bilbo-Baggins"), "/overview/Mordor/ should NOT include the page 'Bilbo Baggins'"
-    assert body.include?("Eye-Of-Sauron"), "/pages/Mordor/ should include the page 'Eye Of Sauron'"
+    assert body.include?("Eye-Of-Sauron"), "/overview/Mordor/ should include the page 'Eye Of Sauron'"
   end
 
   test "symbolic link pages" do

test/test_latest_changes_view.rb

@@ -19,8 +19,8 @@ context "Precious::Views::LatestChanges" do
   test "displays_latest_changes" do
     get('/gollum/latest_changes')
     body = last_response.body
-
+        
-    assert body.include?('<span class="username">Charles Pence</span>'), "/latest_changes should include the Author Charles Pence"
+    assert body.include?("<span class=\"float-left col-2\"><a href=\"javascript:void(0)\">\n    Charles Pence\n</a>\n</span>"), "/latest_changes should include Author Charles Pence"
     assert body.include?('1db89eb'), "/latest_changes should include the :latest_changes_count commit"
     assert !body.include?('a8ad3c0'), "/latest_changes should not include more than latest_changes_count commits"
     assert body.include?('<a href="Data-Two.csv/874f597a5659b4c3b153674ea04e406ff393975e">Data-Two.csv</a>'), "/latest_changes include links to modified files in #{body}"

test/test_overview_view.rb

@@ -1,6 +1,6 @@
 # ~*~ encoding: utf-8 ~*~
 require File.expand_path(File.join(File.dirname(__FILE__), 'helper'))
-require File.expand_path '../../lib/gollum/views/pages', __FILE__
+require File.expand_path '../../lib/gollum/views/overview', __FILE__
 
 FakePageResult = Struct.new(:path) do
   def name
@@ -33,15 +33,15 @@ FakeFileResult = Struct.new(:path) do
   end  
 end
 
-context "Precious::Views::Pages" do
+context "Precious::Views::Overview" do
   setup do
-    @page = Precious::Views::Pages.new
+    @page = Precious::Views::Overview.new
   end
 
   test "breadcrumb" do
     @page.instance_variable_set("@path", "Mordor/Eye-Of-Sauron/Saruman")
     @page.instance_variable_set("@base_url", "")
-    assert_equal '<a href="/gollum/pages">Home</a> / <a href="/gollum/pages/Mordor/">Mordor</a> / <a href="/gollum/pages/Mordor/Eye-Of-Sauron/">Eye-Of-Sauron</a> / Saruman', @page.breadcrumb
+    assert_equal '<a href="/gollum/overview">Home</a> / <a href="/gollum/overview/Mordor/">Mordor</a> / <a href="/gollum/overview/Mordor/Eye-Of-Sauron/">Eye-Of-Sauron</a> / Saruman', @page.breadcrumb
   end
 
   test "breadcrumb with no path" do
@@ -52,7 +52,11 @@ context "Precious::Views::Pages" do
     @page.instance_variable_set("@base_url", "")
 	results = [FakePageResult.new("Gondor/Bromir.md"), FakePageResult.new("Hobbit.md"), FakePageResult.new("Home.md"), FakePageResult.new("Mordor/Eye-Of-Sauron.md"), FakePageResult.new("Mordor/todo.md"), FakePageResult.new("Rivendell/Elrond.md"), FakePageResult.new("My-Precious.md"), FakePageResult.new("Zamin.md"), FakePageResult.new("Samwise-Gamgee.md"), FakePageResult.new("roast-mutton.md"), FakePageResult.new("Bilbo-Baggins.md")]
     @page.instance_variable_set("@results", results)
-    assert_equal %{<li><a href="/gollum/pages/Gondor/" class="folder">Gondor</a></li>\n<li><a href="/gollum/pages/Mordor/" class="folder">Mordor</a></li>\n<li><a href="/gollum/pages/Rivendell/" class="folder">Rivendell</a></li>\n<li><a href="/Bilbo-Baggins" class="page">Bilbo Baggins</a></li>\n<li><a href="/Hobbit" class="page">Hobbit</a></li>\n<li><a href="/Home" class="page">Home</a></li>\n<li><a href="/My-Precious" class="page">My Precious</a></li>\n<li><a href="/roast-mutton" class="page">roast mutton</a></li>\n<li><a href="/Samwise-Gamgee" class="page">Samwise Gamgee</a></li>\n<li><a href="/Zamin" class="page">Zamin</a></li>}, @page.files_folders
+    files = 0
+    folders = 0
+    results = @page.files_folders
+    results[0..2].each { |r| assert r[:type] == 'dir' }
+    results[3..-1].each { |r| assert r[:type] == 'file' }
   end
 
   test "files_folders from subdir" do
@@ -60,7 +64,12 @@ context "Precious::Views::Pages" do
     @page.instance_variable_set("@base_url", "")
     results = [FakePageResult.new("Mordor/Eye-Of-Sauron.md"), FakeFileResult.new("Mordor/Aragorn.pdf"), FakePageResult.new("Mordor/Orc/Saruman.md"), FakeFileResult.new("Mordor/.gitkeep")]
     @page.instance_variable_set("@results", results)
-    assert_equal %{<li><a href="/gollum/pages/Mordor/Orc/" class="folder">Orc</a></li>\n<li><a href="/Mordor/Aragorn.pdf" class="file">Aragorn.pdf</a></li>\n<li><a href="/Mordor/Eye-Of-Sauron" class="page">Eye Of Sauron</a></li>}, @page.files_folders
+    result = @page.files_folders.first
+    assert_equal result[:icon].start_with?('<svg class="octicon octicon-file-directory'), true
+    assert_equal result[:type], 'dir'
+    assert_equal result[:url], '/gollum/overview/Mordor/Orc/'
+    assert_equal result[:is_file], false
+    assert_equal result[:name], 'Orc'
   end
 
   test "base url" do
@@ -69,6 +78,6 @@ context "Precious::Views::Pages" do
     @page.instance_variable_set("@base_url", "/wiki")
     results = [FakePageResult.new("Mordor/Eye-Of-Sauron.md"), FakeFileResult.new("Mordor/Aragorn.pdf"), FakePageResult.new("Mordor/Orc/Saruman.md"), FakePageResult.new("Mordor/.gitkeep")]
     @page.instance_variable_set("@results", results)
-    assert_equal %{<li><a href="/wiki/gollum/pages/Mordor/Orc/" class="folder">Orc</a></li>\n<li><a href="/wiki/Mordor/Aragorn.pdf" class="file">Aragorn.pdf</a></li>\n<li><a href="/wiki/Mordor/Eye-Of-Sauron" class="page">Eye Of Sauron</a></li>}, @page.files_folders
+    assert_equal @page.files_folders.first[:url], '/wiki/gollum/overview/Mordor/Orc/'
   end
 end