lee/hpr_generator
1
0
Fork 0
forked from HPR/hpr_generator
Code Pull Requests Activity

Reformat top navigation menus

Browse Source 
Have accessibility menu appear on same line as main menu.
This commit is contained in:
Roan Horning
2025-08-08 22:50:52 -04:00
parent 4336183437
commit 6b8c97815a
2 changed files with 31 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
public_html/css/hpr.css
View File

@@ -74,24 +74,27 @@ body {
padding: 0; padding: 0;
min-height: 100vh; min-height: 100vh;
} }
#top_navigation {
body > nav { display: flex;
flex-direction: row-reverse;
justify-content: space-between;
background-color: var(--background-secondary); background-color: var(--background-secondary);
color: var(--text-secondary); color: var(--text-secondary);
padding: 0.5rem;
} }
body > nav a { #top_navigation > nav a {
color: var(--link-secondary); color: var(--link-secondary);
} }
body > nav a:hover { #top_navigation > nav a:hover {
color: var(--link-secondary-hover); color: var(--link-secondary-hover);
} }
body > nav ul { #top_navigation > nav menu {
background-color: inherit; background-color: inherit;
color: inherit; color: inherit;
margin: 0; margin: 0;
padding: 0.25rem; padding: 0.25rem;
} }
body > nav ul li { #top_navigation > nav menu li {
display: inline-block; display: inline-block;
background-color: inherit; background-color: inherit;
color: inherit; color: inherit;
@@ -100,7 +103,7 @@ body > nav ul li {
padding: 0; padding: 0;
padding-right: var(--link-spacing-horizontal); padding-right: var(--link-spacing-horizontal);
} }
body > nav ul li a { #top_navigation > nav menu li a {
padding: 0.25rem 0; padding: 0.25rem 0;
} }
body > header { body > header {
@@ -420,6 +423,16 @@ fieldset > input {
.no-css { .no-css {
display: none; display: none;
} }
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
@media (min-width: 600px) { @media (min-width: 600px) {
body > header { body > header {
background-size: 200pt, cover; background-size: 200pt, cover;

18
templates/page.tpl.html
View File

@@ -27,13 +27,17 @@
</head> </head>
<body> <body>
<nav id="accessible_menu"> <div id="top_navigation">
<a href="<!--% absolute_path(baseurl) %-->sitemap.html#main_content">Site Map</a> <nav id="accessible_menu">
- <a href="#main_content">skip to main content</a> <menu>
</nav> <li><a href="<!--% absolute_path(baseurl) %-->sitemap.html#main_content">Site Map</a></li>
<nav id="main_menu" class="menu" role="navigation"> <li><a href="#main_content"><span class="sr-only">Skip to </span>Main Content</a></li>
<!--% INCLUDE "navigation-main.tpl.html" %--> </menu>
</nav> </nav>
<nav id="main_menu" class="menu" role="navigation">
<!--% INCLUDE "navigation-main.tpl.html" %-->
</nav>
</div>
<header role="banner"> <header role="banner">
<hgroup id="title"> <hgroup id="title">
<h1 id="site_acronym">HPR</h1> <h1 id="site_acronym">HPR</h1>