Design fixes, fixes #288 and fixes #119

resources/themes/_common/less/bootstrap/bootstrap.less

@@ -19,7 +19,7 @@
 @import "code.less";
 @import "grid.less";
 //@import "tables.less";
-@import "forms.less";
+//@import "forms.less";
 @import "buttons.less";
 
 // Components
@@ -42,7 +42,7 @@
 //@import "list-group.less";
 //@import "panels.less";
 //@import "responsive-embed.less";
-@import "wells.less";
+//@import "wells.less";
 //@import "close.less";
 
 // Components w/ JavaScript

resources/themes/_common/less/bootstrap/navbar.less

@@ -140,7 +140,8 @@
   position: fixed;
   right: 0;
   left: 0;
-  z-index: @zindex-navbar-fixed;
+
+
 
   // Undo the rounded corners
   @media (min-width: @grid-float-breakpoint) {
@@ -283,7 +284,8 @@
 // Extension of the `.form-inline` with some extra flavor for optimum display in
 // our navbars.
 
-.navbar-form {
+//DAUX.io / onigoetz; removed so we can safely remove forms.less
+/*.navbar-form {
   margin-left: -@navbar-padding-horizontal;
   margin-right: -@navbar-padding-horizontal;
   padding: 10px @navbar-padding-horizontal;
@@ -318,7 +320,7 @@
     padding-bottom: 0;
     .box-shadow(none);
   }
-}
+}*/
 
 
 // Dropdown menus

resources/themes/_common/less/components.less

@@ -6,6 +6,8 @@ a {
 }
 
 .btn {
+    display: inline-block;
+
     &.btn-sidebar {
         padding: 7px 10px;
         .kill-background-image;
@@ -44,7 +46,6 @@ code {
     box-shadow: 0 1px 5px rgba(0,0,0,.25);
     background-color: @dark;
     margin-bottom: 0px;
-    z-index: 200;
 
     .container, .container-fluid {
         .kill-background-image;
@@ -65,19 +66,6 @@ code {
             }
         }
     }
-
-    @media (min-width: 768px) and (max-width: 979px) {
-        &.navbar-fixed-top {
-            position: fixed;
-        }
-    }
-
-    @media (max-width: 767px) {
-        &.navbar-fixed-top {
-            margin-left: 0px;
-            margin-right: 0px;
-        }
-    }
 }
 
 //Sidebar Nav List
@@ -308,12 +296,8 @@ table {
     z-index: 200;
 }
 
-.well {
+.sidebar-links {
-    &.well-sidebar {
+    padding:20px;
-        .kill-box-shadow;
-        background-color: transparent;
-        border-radius: 0;
-        border: none;
 
     a {
         font-size: 13px;
@@ -330,4 +314,3 @@ table {
         }
     }
 }
-}

resources/themes/_common/less/structure.less

@@ -163,25 +163,79 @@ Homepage
 
     .twitter {
         margin-top: 20px;
-    }
 
-        .twitter:first-child {
+        &:first-child {
             margin-top: 40px;
         }
     }
+}
 
 /* ===========================================================================================
 Docs Body & Page Structure
 ============================================================================================== */
 
 html, body {
-    margin: 0;
-    padding: 0;
     height: 100%;
-    background-color: @light;
+    background-color: #fff;
     color: @text;
 }
 
+.columns {
+    .left-column {
+        background-color:@sidebar-background;
+    }
+
+    .right-column {
+        .content-page {
+            padding: 10px;
+            background-color:#fff;
+        }
+    }
+}
+
+.container-fluid .navbar-static-top {
+    margin-left:-15px;
+    margin-right:-15px;
+}
+
+//mobile friendly sub-nav
+.responsive-collapse {
+    padding: 10px 15px;
+    display: block;
+    background-color: @lines;
+    border-bottom: 1px solid @lines;
+}
+
+.sub-nav-collapse {
+    display: none;
+}
+
+.content-area,
+.article-tree {
+    padding: 0px;
+}
+
+@media screen and (min-width: 767px)  {
+
+    body {
+        //Needed only for floating code blocks
+        background-color:@light;
+    }
+
+    .navbar-static-top {
+        position:fixed;
+        z-index: @zindex-navbar-fixed;
+        width:100%;
+    }
+
+    .responsive-collapse {
+        display: none;
+    }
+
+    .sub-nav-collapse {
+        display: block !important;
+    }
+
     //100% Height Columns
     .container-fluid {
 
@@ -190,12 +244,18 @@ html, body {
         }
     }
 
+    .content-area,
+    .article-tree {
+        overflow: auto;
+
+        height: 100%;
+    }
+
     .columns {
         height:100%;
         padding-top:@navbar-height;
 
         .left-column {
-        background-color: @sidebar-background;
             border-right:1px solid @lines;
             overflow-x:hidden;
         }
@@ -204,40 +264,9 @@ html, body {
             .content-page {
                 padding:20px;
                 min-height:100%;
-            background-color: white;
             }
         }
     }
-
-.content-area, .article-tree {
-    overflow: auto;
-    padding: 0px;
-
-    @media (min-width: 767px) {
-        height: 100%;
-    }
-}
-
-//mobile friendly sub-nav
-.responsive-collapse {
-    padding: 10px 15px;
-    display: none;
-    background-color: @lines;
-    border-bottom: 1px solid @lines;
-
-    @media (max-width: 767px) {
-        display: block;
-    }
-}
-
-.sub-nav-collapse {
-    @media (max-width: 768px) {
-        display: none;
-    }
-
-    @media (min-width: 768px) {
-        display: block;
-    }
 }
 
 //CSS For Fluid Tables
@@ -299,3 +328,13 @@ html, body {
             content: attr(data-title);
         }
 }
+
+@media print {
+    .content-area {
+        width:100% !important;
+    }
+
+    h1 a[href]:after {
+        font-size:50%;
+    }
+}

templates/home.php

@@ -1,5 +1,5 @@
 <?php $this->layout('theme::layout/00_layout') ?>
-<div class="navbar navbar-fixed-top hidden-print">
+<div class="navbar navbar-static-top hidden-print">
     <div class="container">
         <?php $this->insert('theme::partials/navbar_content', ['params' => $params]); ?>
     </div>
@@ -8,7 +8,7 @@
     <a href="https://github.com/<?= $params['html']['repo']; ?>" target="_blank" id="github-ribbon" class="hidden-print"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
 <?php } ?>
 
-<div class="homepage-hero well container-fluid">
+<div class="homepage-hero container-fluid">
     <div class="container">
         <div class="row">
             <div class="text-center col-sm-12">
@@ -28,9 +28,7 @@
 </div>
 
 <div class="hero-buttons container-fluid">
-    <div class="container">
+    <div class="container text-center">
-        <div class="row">
-            <div class="text-center col-sm-12">
         <?php
         if ($params['html']['repo']) {
             echo '<a href="https://github.com/' . $params['html']['repo'] . '" class="btn btn-secondary btn-hero">View On GitHub</a>';
@@ -39,8 +37,7 @@
             echo '<a href="' . $node . '" class="btn btn-primary btn-hero">' . $key . '</a>';
         }
         ?>
-            </div>
+        <div class="clearfix"></div>
-        </div>
     </div>
 </div>
 
@@ -54,7 +51,7 @@
     </div>
 </div>
 
-<div class="homepage-footer well container-fluid">
+<div class="homepage-footer container-fluid">
     <div class="container">
         <div class="row">
             <div class="col-sm-5 col-sm-offset-1">

templates/layout/05_page.php

@@ -4,7 +4,7 @@
     <a href="https://github.com/<?= $params['html']['repo']; ?>" target="_blank" id="github-ribbon" class="hidden-print"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
 <?php } ?>
 <div class="container-fluid fluid-height wrapper">
-    <div class="navbar navbar-fixed-top hidden-print">
+    <div class="navbar navbar-static-top hidden-print">
         <div class="container-fluid">
             <?php $this->insert('theme::partials/navbar_content', ['params' => $params]); ?>
         </div>
@@ -30,7 +30,7 @@
                 ?>
 
                 <?php if (!empty($params['html']['links']) || !empty($params['html']['twitter']) || $params['html']['toggle_code']) { ?>
-                    <div class="well well-sidebar">
+                    <div class="sidebar-links">
 
                         <!-- Links -->
                         <?php