HPR/hpr_generator
8
1
Fork 5
Code Issues 36 Pull Requests 5 Actions Packages Projects Releases Wiki 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;
min-height: 100vh;
}
body > nav {
#top_navigation {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
background-color: var(--background-secondary);
color: var(--text-secondary);
padding: 0.5rem;
}
body > nav a {
#top_navigation > nav a {
color: var(--link-secondary);
}
body > nav a:hover {
#top_navigation > nav a:hover {
color: var(--link-secondary-hover);
}
body > nav ul {
#top_navigation > nav menu {
background-color: inherit;
color: inherit;
margin: 0;
padding: 0.25rem;
}
body > nav ul li {
#top_navigation > nav menu li {
display: inline-block;
background-color: inherit;
color: inherit;
@@ -100,7 +103,7 @@ body > nav ul li {
padding: 0;
padding-right: var(--link-spacing-horizontal);
}
body > nav ul li a {
#top_navigation > nav menu li a {
padding: 0.25rem 0;
}
body > header {
@@ -420,6 +423,16 @@ fieldset > input {
.no-css {
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) {
body > header {
background-size: 200pt, cover;

18
templates/page.tpl.html
View File

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