docs: footer, sticky header and sidebar

caleblloyd · caleblloyd · commit d0138123cf32 · 2016-10-30T21:31:00.000-04:00
diff --git a/docs/layouts/partials/footer.html b/docs/layouts/partials/footer.html
@@ -35,6 +35,17 @@
     </div>
     <!-- container -->
 
+    <footer class="footer">
+      <div class="container-fluid">
+        <div class="row">
+          <div id="footerContent" class="col-sm-12">
+            Free and open source under the
+            <a href="https://github.com/mysql-net/MySqlConnector/blob/master/LICENSE">MIT License</a>
+          </div>
+        </div>
+      </div>
+    </footer>
+
     <!-- js -->
     <script type="text/javascript" src="vendor/jquery/js/jquery-2.1.4.min.js"></script>
     <script type="text/javascript" src="vendor/bootstrap/js/bootstrap.min.js"></script>
diff --git a/docs/layouts/partials/header.html b/docs/layouts/partials/header.html
@@ -39,7 +39,7 @@
 
   <body>
 
-    <nav class="navbar navbar-default">
+    <nav class="navbar navbar-default navbar-fixed-top">
         <div class="container">
             <div class="col-xs-8 navbar-mysqlc-logo">
                 <a href="">
diff --git a/docs/layouts/partials/menu.html b/docs/layouts/partials/menu.html
@@ -1,6 +1,6 @@
 {{ $cur := . }}
 <div class="col-md-3">
-    <div class="list-group" id="navigation">
+    <div class="list-group" id="navigation" data-spy="affix" data-offset-top="0">
 
         {{ range $i, $el := .Site.Menus.main }}
         <a class="list-group-item{{ if or ($cur.IsMenuCurrent "main" .) ($cur.HasMenuCurrent "main" .) (and (eq $i 0) ($cur.IsHome)) }} active{{ end }}" href="{{ if .HasChildren }}#nav-{{ $i }}{{ else }}{{ .URL }}{{ end }}" data-parent="#navigation"{{ if .HasChildren }} data-toggle="collapse"{{end}}>
diff --git a/docs/static/css/style.css b/docs/static/css/style.css
@@ -1,3 +1,13 @@
+html {
+  position: relative;
+  min-height: 100%;
+}
+
+body {
+  padding-top: 70px;
+  margin-bottom: 40px;
+}
+
 #navigation {
     margin-top: 20px;
 }
@@ -7,17 +17,17 @@
     margin-right: 5px;
 }
 
-.navbar-mysqlc-logo{
+.navbar-mysqlc-logo {
     padding: 10px 0 0 15px;
 }
 
-.navbar-mysqlc-logo a{
+.navbar-mysqlc-logo a {
     color: #777;
     font-size: 18px;
     padding: 0 12px 0 0;
 }
 
-.navbar-mysqlc-logo a:hover{
+.navbar-mysqlc-logo a:hover {
     text-decoration: none;
 }
 
@@ -35,6 +45,31 @@
     border-radius: 0;
 }
 
+@media (max-width: 991px) {
+    .affix {
+        position: static;
+    }
+}
+
+@media (min-width: 992px) {
+    .affix {
+        top: 70px;
+        position: fixed;
+    }
+}
+
+@media only screen and (min-width : 992px) {
+    #navigation{
+        width: 212px;
+    }
+}
+
+@media only screen and (min-width : 1200px) {
+    #navigation{
+        width: 262px;
+    }
+}
+
 .submenu a:hover, .submenu a:active,
 .submenu a.active, .submenu a.active:hover, .submenu a.active:active {
     background: #44b5f6;
@@ -48,17 +83,38 @@
 }
 
 #prevNext {
-    margin-top: 20px;
+    margin: 20px 0;
 }
 
-pre{
+pre {
     padding: 0;
 }
 
-h1{
+h1 {
     margin-bottom: 20px;
 }
 
-h2{
+h2 {
     margin-bottom: 20px;
-}
+}
+
+.footer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 40px;
+    background-color: #f5f5f5;
+    border: 1px solid #e7e7e7;
+    border-width: 1px 0 0 0;
+}
+
+#footerContent {
+    color: #777;
+    padding: 10px;
+    text-align: center;
+}
+
+#footerContent a {
+    color: #777;
+}
