From ad89f1fb4fee69a0956c5c29904c7ee6a88372b6 Mon Sep 17 00:00:00 2001
From: Roan Horning <roan.horning@gmail.com>
Date: Sat, 12 Oct 2024 10:42:18 -0400
Subject: [PATCH] Modify white space of main menu

Add some accessiblility touches: change cursor to pointer on hover, change link color on active event.
---
 public_html/css/hpr.css | 182 +++++++---------------------------------
 1 file changed, 31 insertions(+), 151 deletions(-)

diff --git a/public_html/css/hpr.css b/public_html/css/hpr.css
index bdbfcc9..124c11d 100644
--- a/public_html/css/hpr.css
+++ b/public_html/css/hpr.css
@@ -185,174 +185,54 @@ header > hr {
 }
 
 /* The main navigation menu */
-.menu {
-  background: #4D4D4D; /* HPR Grey */
+header > nav.menu {
+  display: block;
+  background-color: #4D4D4D; /* HPR Grey */
   text-align: Left;
   clear:both; /* Forces the menu to appear after the HPR Header block */
-  padding: 0em 0em;
-  margin: 0em 0em;
-}
-
-.menu ul ul { /* Causes the sub menus not to be displayed, until hover shows them */
-  display: none;
-}
-
-#main_menu li a {display: block;}
-
-.menu ul li { padding: .25em 0em;}
-
-}
-
-.menu ul { /* The menu bar background across screen */
-  background: #4D4D4D; /* HPR Grey */
-  color: white;
-  padding: 0 10px; /* Keeps sub menus to the left */
-  list-style: none;
-  position: relative;
-  margin: 0;
-  display: inline-table;
-}
-
-.menu ul:after { /* Forces the dropdown to be a block with non float */
-  content: ""; 
-  clear: both; 
-  display: block;
-}
-
-.menu ul li {
-  background: #4D4D4D; /* HPR Grey */
-  color: white;
-  float: left;
-  padding: .5em 1em;
-}
-
-.menu ul li a {
-  background: #4D4D4D; /* HPR Grey */
-  color: white;
-  display: block; 
-  text-decoration: none;
-}
-    
-.menu ul ul {
-  background: #4D4D4D; /* HPR Grey */
-  color: white;
   padding: 0;
-  position: absolute; 
-  top: 100%;
+  margin: 0;
 }
 
-.menu ul ul li {
-  background: #4D4D4D; /* HPR Grey */
+header > nav.menu ul {
+	margin: 0;
+	padding: 0.5rem;
+	background-color: inherit;
   color: white;
-  float: none; 
-  position: relative;
-}
-    
-.menu ul ul ul {
-  position: absolute; 
-  left: 100%; 
-  top:0;
 }
 
-
-hr {
-  background: #4D4D4D;  /* HPR Grey */
-  border: 0;
-  height: 0.25em;
+header > nav.menu ul li {
+	display: inline-block;
+	background-color: inherit;
+	color: inherit;
+	line-height: 1.5;
+	margin: 0;
+  padding: 0;
+	padding-right: clamp(0.5rem, -0.25rem + 3vw , 2.5rem);
 }
 
-/* The multi colum footer layout */
-
-#footer_page {
-  width:100%;
-}
-
-.column {
-  width:12%;
-  background-color: white;
-  color: #4D4D4D; /* HPR Grey */
-  float:left;
-  margin:0 10px;
+header > nav.menu ul li a {
+  color: white;
+	text-decoration: none;
   display: block;
+	padding: 0.25rem 0;
 }
 
-.column li {
-  list-style:none;
-  padding: .25em 0em;
-  font-size: 85%;
+header > nav.menu ul li a:hover {
+	border-bottom: thin solid white;
+	padding: 0.15rem 0;
+	-webkit-transition: 0.3s ease-in-out color;
+	-moz-transition: 0.3s ease-in-out color;
+	transition: 0.3s ease-in-out color;
 }
 
-.thick_bar {
-  width:100%;
-  background-color: #4D4D4D; /* HPR Grey */
-  color: white;
-  float:left;   
-  clear: both;
-  height:1.5em;
-  padding: .5em 0em .5em 0em;
-  font-size: 1em;
-  margin: 1em 0em 1em 0em;
+header > nav.menu ul li a:visited{
+	color: #EDEDED;
 }
 
-#more_info {margin: auto;}
-nav.column { display: block; padding: 0em 1em 0em 1em;}
-#copyright {
-  font-size: small;
-  width:100%;
-  float:left;   
-}
-
-article, #copyright p {
-  padding: 0 10px;
-}
-
-audio {padding: .7em 0em .5em 0em; clear: both; position: relative; z-index:auto;}
-.audcredit { font-size: 75%;margin-bottom: 1em;}
-h1.showtitle { font-size: 125%;}
-
-/* Full Index Page styling */
-#index_full h2.title {
-	font-weight: lighter;
-	margin-bottom: -.5em;
-	padding: .5em 0em 0em 0em; 
-	font-size: 110%;}
-
-#index_full p.meta {font-size: 85%;}
-
-#small {
-  font-size: small;
-}
-
-p.author { font-size: 85%;}
-p.shownotes { padding: .5em;}
-#maincontent footer p { /* font-size: 75%; */ margin-bottom: 1em;}
-/* link styling */
-a:link {text-decoration: none;}
-
-table {
-    width:100%;
-}
-table, th, td {
-    border-collapse: collapse;
-    padding: 2px;
-    text-align: left;
-}
-table#t01, table#t01 th, table#t01 td {
-    border: 1px solid black;
-}
-table#t01 th, table#t01 td {
-    padding: 5px;
-    text-align: left;
-}
-table#t01 tr:nth-child(even) {
-    background-color: #eee;
-}
-table#t01 tr:nth-child(odd) {
-   background-color:#fff;
-}
-table#t01 th	{
-    background-color: #4D4D4D;
-    color: white;
+a:active, 
+header > nav.menu ul li a:active {
+	color: red;
 }
 
 pre { /* Add background, border and scrollbar to <pre> */