HPR/hpr_generator
5
0
Fork 0
Code Issues 33 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Modify white space of main menu

Browse Source 
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
1 changed files with 31 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

182
public_html/css/hpr.css
View File

@ -185,174 +185,54 @@ header > hr {
} }
/* The main navigation menu */ /* The main navigation menu */
.menu { header > nav.menu {
background: #4D4D4D; /* HPR Grey */ display: block;
background-color: #4D4D4D; /* HPR Grey */
text-align: Left; text-align: Left;
clear:both; /* Forces the menu to appear after the HPR Header block */ 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; padding: 0;
position: absolute; margin: 0;
top: 100%;
} }
.menu ul ul li { header > nav.menu ul {
background: #4D4D4D; /* HPR Grey */ margin: 0;
padding: 0.5rem;
background-color: inherit;
color: white; color: white;
float: none;
position: relative;
} }
.menu ul ul ul { header > nav.menu ul li {
position: absolute; display: inline-block;
left: 100%; background-color: inherit;
top:0; color: inherit;
line-height: 1.5;
margin: 0;
padding: 0;
padding-right: clamp(0.5rem, -0.25rem + 3vw , 2.5rem);
} }
header > nav.menu ul li a {
hr { color: white;
background: #4D4D4D; /* HPR Grey */ text-decoration: none;
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;
display: block; display: block;
padding: 0.25rem 0;
} }
.column li { header > nav.menu ul li a:hover {
list-style:none; border-bottom: thin solid white;
padding: .25em 0em; padding: 0.15rem 0;
font-size: 85%; -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 { header > nav.menu ul li a:visited{
width:100%; color: #EDEDED;
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;
} }
#more_info {margin: auto;} a:active,
nav.column { display: block; padding: 0em 1em 0em 1em;} header > nav.menu ul li a:active {
#copyright { color: red;
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;
} }
pre { /* Add background, border and scrollbar to <pre> */ pre { /* Add background, border and scrollbar to <pre> */