Modify white space of main menu

Add some accessiblility touches: change cursor to pointer on hover, change link color on active event.
This commit is contained in:
Roan Horning 2024-10-12 10:42:18 -04:00
parent 6b2a324730
commit ad89f1fb4f
Signed by: rho_n
GPG Key ID: 234AEF20B72D5769

View File

@ -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;
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);
}
hr {
background: #4D4D4D; /* HPR Grey */
border: 0;
height: 0.25em;
}
/* 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> */