tronnet/ProxmoxAAS-Dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix aria-current value for nav bar to "page",

Browse Source 
improve nav css readability
This commit is contained in:
Arthur Lu 2023-09-26 19:15:54 +00:00
parent f179c0f7fb
commit 49b2405814
6 changed files with 42 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
account.html
View File

@ -51,7 +51,7 @@
<input type="checkbox" id="navtoggle">
<nav>
<a href="index.html">Instances</a>
<a href="account.html" aria-current="true">Account</a>
<a href="account.html" aria-current="page">Account</a>
<a href="settings.html">Settings</a>
<a href="login.html">Logout</a>
</nav>

2
config.html
View File

@ -18,7 +18,7 @@
<label for="navtoggle">&#9776;</label>
<input type="checkbox" id="navtoggle">
<nav>
<a href="index.html" aria-current="true">Instances</a>
<a href="index.html" aria-current="page">Instances</a>
<a href="account.html">Account</a>
<a href="settings.html">Settings</a>
<a href="login.html">Logout</a>

62
css/nav.css
View File

@ -5,6 +5,7 @@
--nav-header-text-color: black;
--nav-link-active-text-color: white;
--nav-link-active-bg-color: var(--main-bg-color, #404040);
--nav-transition-speed: 250ms;
}
@media screen and (prefers-color-scheme: light) {
@ -20,7 +21,6 @@
header {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
width: 100%;
background-color: var(--nav-bg-color);
@ -42,8 +42,12 @@ nav {
nav a, header h1, label[for="navtoggle"] {
text-align: left;
padding: 8px 10px;
padding-left: 8px;
padding-right: 8px;
text-decoration: none;
vertical-align: middle;
height: 2em;
line-height: 2em;
}
label[for="navtoggle"], #navtoggle {
@ -51,37 +55,40 @@ label[for="navtoggle"], #navtoggle {
}
@media screen and (width >= 600px){
nav a:hover, nav a[aria-current="true"] {
color: var(--nav-link-active-text-color);
background-color: var(--nav-link-active-bg-color);
}
nav:hover a[aria-current="true"] {
color: var(--nav-text-color);
background-color: var(--nav-bg-color);
}
nav:hover a[aria-current="true"]:hover {
color: var(--nav-link-active-text-color);
background-color: var(--nav-link-active-bg-color);
header {
grid-template-columns: auto 1fr;
}
nav {
display: flex;
align-items: center;
}
nav a[aria-current="page"], nav a:hover {
color: var(--nav-link-active-text-color);
background-color: var(--nav-link-active-bg-color);
}
nav:hover a[aria-current="page"]:has(~ a:hover) {
color: var(--nav-text-color);
background-color: var(--nav-bg-color);
}
nav:hover a[aria-current="page"]:hover {
color: var(--nav-link-active-text-color);
background-color: var(--nav-link-active-bg-color);
}
}
@media screen and (width <= 600px){
header {
display: grid;
grid-template-columns: 1fr auto;
}
nav {
display: block;
position: absolute;
top: 43px;
top: 2em;
right: 0;
background-color: var(--nav-bg-color);
}
@ -99,16 +106,21 @@ label[for="navtoggle"], #navtoggle {
#navtoggle ~ nav a {
height: 0;
padding: 0 0.5em;
border: 0;
transition: height 250ms cubic-bezier(0.23, 1, 0.32, 1);
visibility: hidden;
line-height: 2em;
opacity: 0;
transition:
height var(--nav-transition-speed) cubic-bezier(0.23, 1, 0.32, 1),
opacity var(--nav-transition-speed) cubic-bezier(0.23, 1, 0.32, 1)
;
}
#navtoggle:checked ~ nav a {
height: 2.5em;
padding: 0.5em;
transition: height 250ms cubic-bezier(0.23, 1, 0.32, 1);
visibility: visible;
height: 2em;
line-height: 2em;
opacity: 1;
transition:
height var(--nav-transition-speed) cubic-bezier(0.23, 1, 0.32, 1),
opacity var(--nav-transition-speed) cubic-bezier(0.23, 1, 0.32, 1)
;
}
}

2
index.html
View File

@ -48,7 +48,7 @@
<label for="navtoggle">&#9776;</label>
<input type="checkbox" id="navtoggle">
<nav>
<a href="index.html" aria-current="true">Instances</a>
<a href="index.html" aria-current="page">Instances</a>
<a href="account.html">Account</a>
<a href="settings.html">Settings</a>
<a href="login.html">Logout</a>

2
login.html
View File

@ -16,7 +16,7 @@
<label for="navtoggle">&#9776;</label>
<input type="checkbox" id="navtoggle">
<nav>
<a href="login.html" aria-current="true">Login</a>
<a href="login.html" aria-current="page">Login</a>
</nav>
</header>
<main class="flex" style="justify-content: center; align-items: center;">

2
settings.html
View File

@ -39,7 +39,7 @@
<nav>
<a href="index.html">Instances</a>
<a href="account.html">Account</a>
<a href="settings.html" aria-current="true">Settings</a>
<a href="settings.html" aria-current="page">Settings</a>
<a href="login.html">Logout</a>
</nav>
</header>