Fixed headers and footers (responsive)

docs/Documentation.md

@@ -1,20 +1,25 @@
-# PiPedal Documentation
+# Documentation
+---
 
-### [System Requirements](SystemRequirements.md)
-### [Installing PiPedal](Installing.md)
-### [Configuring PiPedal After Installation](Configuring.md)
-### [Choosing a USB Audio Adapter](ChoosingAUsbAudioAdapter.md)
-### [Optimizing Audio Latency](AudioLatency.md)
-### [Command-Line Configuration of PiPedal](CommandLine.md)
-### [Changing the Web Server Port](ChangingTheWebServerPort.md)
-### [Using LV2 Audio Plugins](UsingLv2Plugins.md)
-### [Which LV2 Plugins does PiPedal support?](WhichLv2PluginsAreSupported.md)
+ 
+
+#### [System Requirements](SystemRequirements.md)
+
+#### [Installing PiPedal](Installing.md)
+
+#### [Configuring PiPedal After Installation](Configuring.md)  
+#### [Choosing a USB Audio Adapter](ChoosingAUsbAudioAdapter.md)  
+#### [Optimizing Audio Latency](AudioLatency.md)  
+#### [Command-Line Configuration of PiPedal](CommandLine.md)
+#### [Changing the Web Server Port](ChangingTheWebServerPort.md)
+#### [Using LV2 Audio Plugins](UsingLv2Plugins.md)
+#### [Which LV2 Plugins does PiPedal support?](WhichLv2PluginsAreSupported.md)
 
  
 
-### [Building PiPedal from Source](BuildingPiPedalFromSource.md)
-### [Build Prerequisites](BuildPrerequisites.md)
-### [The Build Systems](TheBuildSystem.md)
-### [How to Debug PiPedal](Debugging.md)
+#### [Building PiPedal from Source](BuildingPiPedalFromSource.md)
+#### [Build Prerequisites](BuildPrerequisites.md)
+#### [The Build Systems](TheBuildSystem.md)
+#### [How to Debug PiPedal](Debugging.md)
 
 

docs/_config.yml

@@ -28,6 +28,7 @@ github_username:  rerdavies
 github_repository: rerdavies/pipedal
 
 header_pages:
+  - Documentation.md 
   - download.md
 
 # Build settings

docs/_includes/footer.html

@@ -1,4 +1,32 @@
-<footer class="site-footer h-card">
+<style>
+  .sticky-footer {
+    display: block;
+  }
+
+  .footer-offset {
+    display: none;
+  }
+  @media only screen and (min-height: 600px) {
+    .sticky-footer {
+      position: fixed;
+      bottom: 0;
+      width: 100%;
+      
+      background: white;
+      height: 24px;
+      
+      
+    }
+    .footer-offset {
+      display: block;
+      height: 24px;
+    }
+</style>
+
+<div class="footer-offset">
+  &nbsp;
+</div>
+<footer class="site-footer h-card sticky-footer" style="padding-top: 10px; padding-bottom: 10px">
     <data class="u-url" href="{{ "/" | relative_url }}"></data>
   
     <div class="wrapper">

docs/_includes/header.html

@@ -1,10 +1,35 @@
-<header class="site-header">
+<style>
+  .sticky-header {
+    display: block;
+  }
 
-    <div class="wrapper">
+  .header-offset {
+    display: none;
+  }
+  @media only screen and (min-height: 500px) {
+    .sticky-header {
+      z-index: 9;
+      position: fixed;
+      top: 0;
+      width: 100%;
+      
+      background: white;
+      height: 54px;
+      
+      
+    }
+    .header-offset {
+      display: block;
+      height: 54px;
+    }
+</style>
+<header class="site-header sticky-header">
+
+    <div class="wrapper ">
       {%- assign default_paths = site.pages | map: "path" -%}
       {%- assign page_paths = site.header_pages | default: default_paths -%}
       {%- assign titles_size = site.pages | map: 'title' | join: '' | size -%}
-      <a class="site-title" rel="author" href="{{ "/" | relative_url }}">
+      <a class="site-title" rel="author" href="{{ "/" | relative_url }}" style="vertical-align: center">
         <img src="PiPedal-logo.png" style="height: 32px;border: 0px;margin-top: 8px;margin-bottom: 8px;" />
       </a>
   
@@ -26,7 +51,7 @@
               <a class="page-link" href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
               {%- endif -%}
             {%- endfor -%}
-            <a class="page-link" href="https://github.com/sponsors/rerdavies">
+            <a class="page-link" href="https://github.com/sponsors/rerdavies" style="vertical-align: center">
                 Sponsor
                 <span style="vertical-align: center">
                     <svg aria-hidden="true" height="12" viewBox="0 0 16 16" version="1.1" width="12" 
@@ -40,3 +65,6 @@
       {%- endif -%}
     </div>
   </header>
+  <div class="header-offset">
+    &nbsp;
+  </div>

docs/_layouts/home.html

@@ -1,7 +1,6 @@
 ---
 layout: default
 ---
-
 <div class="home">
   {%- if page.title -%}
     <h1 class="page-heading">{{ page.title }}</h1>

docs/index.md

@@ -19,7 +19,7 @@ If your USB audio adapter has midi connectors, you can use midi devices (keyboar
 
  
 
-To read the PiPedal document click [here](Documentation.md).
+To read the PiPedal documentation, click [here](Documentation.md).
 
 To download PiPedal, click [here](download.md).