From 5fcfb11c6519aaebc6f90cd24634a4f1e14cecc2 Mon Sep 17 00:00:00 2001
From: Captain ALM <captainalm@captainalm.com>
Date: Wed, 17 Aug 2022 13:04:03 +0100
Subject: [PATCH] Provide a CSS Upgrade to prepare for JS supported nav
 modification on resize.

---
 base.css      | 20 +++++++++++++++++---
 dark.css      |  6 +++---
 index.go.html |  4 ++++
 light.css     |  6 +++---
 4 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/base.css b/base.css
index 6975bba..9549cba 100644
--- a/base.css
+++ b/base.css
@@ -59,6 +59,14 @@ main{
     overflow: hidden;
 	max-height: 0;
 }
+.vnav{
+    max-height: none;
+    top: 0;
+    position: relative;
+    float: right;
+    width: auto;
+    overflow: hidden;
+}
 .so-pane{
     display: none;
     overflow: hidden;
@@ -112,10 +120,16 @@ main{
 .nav-menu, .sort-menu{
 	display: none;
 }
-.menu a{
+.menu a, .vmenu a{
     display: block;
     padding: 24px 16px;
 }
+.vmenu li{
+    float: left;
+}
+.vmenu a:hover{
+    background-color: transparent;
+}
 .hmb{
     cursor: pointer;
     float: right;
@@ -142,7 +156,7 @@ main{
 .hmb-line::after{
     top: -5px;
 }
-.nav-menu:checked ~ nav, .nav-open{
+.nav-menu:checked ~ #nav, .nav-open{
     max-height: 100%;
 }
 .nav-menu:checked ~ .hmb .hmb-line, .nav-open-hmb .hmb-line{
@@ -274,7 +288,7 @@ main{
     border-width: 1px;
 	margin: 2px;
 }
-@media (min-width: 560px){
+@media (min-width: 600px){
     .main-box > div{
         padding: 12px;
     }
diff --git a/dark.css b/dark.css
index 8d78d36..d6c329e 100644
--- a/dark.css
+++ b/dark.css
@@ -10,13 +10,13 @@ body{
 a{
 	color: #b0b0f0;
 }
-.header, .nav, footer, .so-pane{
+.header, nav, footer, .so-pane{
 	background-color: #1d1d1e;
 }
-.home-button > div, .sort-button > div, .menu a, .so-pane > form > div > * > *{
+.home-button > div, .sort-button > div, .menu a, .vmenu a, .so-pane > form > div > * > *{
 	color: #e0e0e0;
 }
-.home-button:hover, .menu a:hover, .hmb:hover, .sort-button:hover, .sort-menu:checked ~ .sort-button, .sort-button-active, .so-pane > form > div > span > input, .so-pane > form > div > div > select{
+.home-button:hover, .menu a:hover, .vmenu a:hover, .hmb:hover, .sort-button:hover, .sort-menu:checked ~ .sort-button, .sort-button-active, .so-pane > form > div > span > input, .so-pane > form > div > div > select{
 	background-color: #606061;
 }
 .hmb-line, .hmb-line::before, .hmb-line::after{
diff --git a/index.go.html b/index.go.html
index 7feec80..deb0ae8 100644
--- a/index.go.html
+++ b/index.go.html
@@ -95,6 +95,10 @@
     </div>
     <input class="nav-menu" type="checkbox" id="nav-menu"/>
     <label class="hmb" for="nav-menu" title="Navigation Links"><span class="hmb-line"></span></label>
+    <nav class="vnav" id="vnav">
+        <ul class="vmenu no-lst-style">
+        </ul>
+    </nav>
     <nav class="nav" id="nav">
         <ul class="menu no-lst-style">
             {{ range .Data.GetHeaderLabels }}
diff --git a/light.css b/light.css
index 03f218c..208b748 100644
--- a/light.css
+++ b/light.css
@@ -10,13 +10,13 @@ body{
 a{
     color: #4f4fff;
 }
-.header, .nav, footer, .so-pane{
+.header, nav, footer, .so-pane{
     background-color: #e2e2e1;
 }
-.home-button > div, .sort-button > div, .menu a, .so-pane > form > div > * > *{
+.home-button > div, .sort-button > div, .menu a, .vmenu a, .so-pane > form > div > * > *{
     color: #1f1f1f;
 }
-.home-button:hover, .menu a:hover, .hmb:hover, .sort-button:hover, .sort-menu:checked ~ .sort-button, .sort-button-active, .so-pane > form > div > span > input, .so-pane > form > div > div > select{
+.home-button:hover, .menu a:hover, .vmenu a:hover, .hmb:hover, .sort-button:hover, .sort-menu:checked ~ .sort-button, .sort-button-active, .so-pane > form > div > span > input, .so-pane > form > div > div > select{
     background-color: #9f9f9e;
 }
 .hmb-line, .hmb-line::before, .hmb-line::after{