Merge pull request 'more nav adjustments' (#56) from layoutfixe into …

…main

_docs/index.md

@@ -0,0 +1,25 @@
+---
+name: Documentation Index
+layout: default
+---
+
+# Documentation
+
+<ol>
+{% for doc in site.docs %}
+<li class="tag-h1"><a href="{{ doc.url }}"{{ doc.name }}</a></li>
+{% endfor %}
+</ol>
+
+
+1. [Raspberry Pi Node]({% link _install_steps/install-1-raspberrypinode.md %})
+2. [Display Screen]({% link _install_steps/install-2-displayscreen.md %})
+3. [Python Dependencies]({% link _install_steps/install-3-pythondeps.md %})
+4. [Nodeyez User and Config]({% link _install_steps/install-4-nodeyez.md %})
+5. [Website Dashbaord]({% link _install_steps/install-5-websitedashboard.md %})
+6. [Run at Startup]({% link _install_steps/install-6-runatstartup.md %})
+
+---
+
+[Home](../) | [Continue to Raspberry Pi Node]({% link _install_steps/install-1-raspberrypinode.md %})
+

_includes/head-custom.html

@@ -17,10 +17,10 @@
 
     <!-- sliders from blog.logrocket.com/build-image-carousel-from-scratch-vanilla-javascript/  -->
     <style>
-    .slider { width: 100%; max-with: 600px; height: 400px; position: relative; overflow: hidden; border-radius: 15px; }
-    .slide { width: 100%; max-width: 600px; height: 400px; position: absolute; transition: all 0.5s; }
-    .slide img { width: 100%; height: 100%; object-fit: cover; }
-    .btn { position: absolute; width: 40px; height: 40px; padding: 10px; border: none; border-radius: 50%; z-index: 10px; cursor: pointer; background-color: #fff; font-size: 18px; }
+    .slider { width: 100%; max-with: 600px; height: auto; zzheight: 400px; position: relative; overflow: hidden; border-radius: 15px; }
+    .slide { width: 100%; max-width: 600px; height: auto; zzheight: 400px; position: absolute; transition: all 0.5s; }
+    .slide img { width: 100%; height: auto; object-fit: cover; zzheight: 100% }
+    .btn { position: absolute; width: 40px; height: 40px; padding: 10px; border: none; border-radius: 50%; z-index: 10px; cursor: pointer; background-color: #fc0; font-size: 18px; }
     .btn:active { transform: scale(1.1); }
     .btn-prev { top: 45%; left: 2%; }
     .btn-next { top: 45%; right: 2%; }
@@ -52,6 +52,8 @@
     <!-- header image colorize to #FFCC00 using codepen https://codepen.io/sosuke/pen/Pjoqqp -->
     <style>
     .header-image-color {
+      max-width: calc(100%);
+      height: auto;
       filter: brightness(0) saturate(100%) invert(69%) sepia(96%) saturate(488%) hue-rotate(357deg) brightness(100%) contrast(106%);
     }
     </style>

_install_steps/index.md.xxx

@@ -0,0 +1,18 @@
+---
+name: Install Steps
+layout: default
+---
+
+# Install Steps
+
+1. [Raspberry Pi Node]({% link _install_steps/install-1-raspberrypinode.md %})
+2. [Display Screen]({% link _install_steps/install-2-displayscreen.md %})
+3. [Python Dependencies]({% link _install_steps/install-3-pythondeps.md %})
+4. [Nodeyez User and Config]({% link _install_steps/install-4-nodeyez.md %})
+5. [Website Dashbaord]({% link _install_steps/install-5-websitedashboard.md %})
+6. [Run at Startup]({% link _install_steps/install-6-runatstartup.md %})
+
+---
+
+[Home](../) | [Continue to Raspberry Pi Node]({% link _install_steps/install-1-raspberrypinode.md %})
+

_install_steps/install-1-raspberrypinode.md

@@ -28,5 +28,5 @@ a Linux operating system that uses systemd and is Debian based.
 
 ---
 
-[Home](../) | [Continue to Python and Dependencies](./install-2-displayscreen.html)
+[Home](../) | [Continue to Python and Dependencies]({% link _install_steps/install-2-displayscreen.md %})
 

_install_steps/install-2-displayscreen.md

@@ -126,7 +126,7 @@ After waiting for the pi to restart, log to your node with the same user.  Proce
 
 ## Using DSI Screen
 
-The Dispaly Serial Interface (DSI) connector is a small connector on the side
+The Display Serial Interface (DSI) connector is a small connector on the side
 opposite the USB and Ethernet ports on a Raspberry Pi.  Though screens that use
 this interface tend to cost more, there are significant advantages in this
 approach
@@ -240,4 +240,4 @@ you do have to make changes here, make note of them as you'll need to make simil
 
 ---
 
-[Home](../) | [Back to Raspberry Pi Node](install-1-raspberrypinode.md) | [Continue to Python and Dependencies](install-3-pythondeps.md)
+[Home](../) | [Back to Raspberry Pi Node]({% link _install_steps/install-1-raspberrypinode.md %}) | [Continue to Python and Dependencies]({% link _install_steps/install-3-pythondeps.md %})

_install_steps/install-3-pythondeps.md

@@ -62,4 +62,4 @@ sudo apt-get install imagemagick inkscape
 
 ---
 
-[Home](../) | [Back to Display Screen](./install-2-displayscreen.md) | [Continue to Nodeyez](./install-4-nodeyez.md)
+[Home](../) | [Back to Display Screen]({% link _install_steps/install-2-displayscreen.md %}) | [Continue to Nodeyez]({% link _install_steps/install-4-nodeyez.md %})

_layouts/default.html

@@ -26,26 +26,26 @@ <h1>{{ page.title | default: site.title | default: site.github.repository_name }
     </header>
     <div id="banner">
       <span id="logo"></span>
-      <a href="{{ site.github.repository_url }}" class="button fork"><strong>View On GitHub</strong></a>
-      {% if site.show_downloads %}
       <div class="downloads">
-        <span>Downloads:</span>
         <ul>
+          <li><a href="{% link index.md %}" class="button">Home</a></li>
+          <li><a href="{% link _install_steps/index.md %}" class="button">Install</a></li>
+          <li><a href="{% link _docs/index.md %}" class="button">Docs</a></li>
+          <li><a href="{{ site.github.repository_url }}" class="button">View On GitHub</a></li>
+          {% if site.show_downloads %}
           <li><a href="{{ site.github.zip_url }}" class="button">ZIP</a></li>
           <li><a href="{{ site.github.tar_url }}" class="button">TAR</a></li>
+          {% endif %}
         </ul>
       </div>
-      {% endif %}
     </div><!-- end banner -->
 
     <div class="wrapper">
-      <nav>
-        <ul>
+      <ul>
         {% for install_step in site.install_steps %}
-        <li>{{ install_step.name }}</li>
+        <li class="tag-h1"><a href="{{ install_step.url }}"{{ install_step.name }}</a></li>
         {% endfor %} 
-        </ul>
-      </nav>
+      </ul>
       <section>
         {{ content }}
 

_sass/jekyll-theme-nodeyez.scss

@@ -363,6 +363,14 @@ footer {
   bottom:20px;
   text-align: right;
   line-height: 16px;
+
+  p {
+    color: #bbb;
+    a {
+      color: #bbb;
+      &:hover { color: #999; }
+    }
+  }
 }
 
 @media print, screen and (max-width: 1060px) {
@@ -418,7 +426,15 @@ footer {
     left:auto;
     bottom:auto;
     width:auto;
+
+    p {
+      color: #bbb;
+      a {
+        color: #bbb;
+        &:hover { color: #999; }
+      }
     }
+  }
 }
 
 @media print, screen and (max-width: 720px) {
@@ -511,6 +527,14 @@ footer {
     left:auto;
     bottom:auto;
     width:auto;
+
+    p {
+      color: #bbb;
+      a {
+        color: #bbb;
+        &:hover { color: #999; }
+      }
+    }
   }
 }
 
@@ -526,5 +550,13 @@ footer {
     left:auto;
     bottom:auto;
     width:auto;
+
+    p {
+      color: #bbb;
+      a {
+        color: #bbb;
+        &:hover { color: #999; }
+      }
+    }
   }
 }