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"> <input type="checkbox" id="navtoggle">
<nav> <nav>
<a href="index.html">Instances</a> <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="settings.html">Settings</a>
<a href="login.html">Logout</a> <a href="login.html">Logout</a>
</nav> </nav>

2
config.html
View File

@ -18,7 +18,7 @@
<label for="navtoggle">&#9776;</label> <label for="navtoggle">&#9776;</label>
<input type="checkbox" id="navtoggle"> <input type="checkbox" id="navtoggle">
<nav> <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="account.html">Account</a>
<a href="settings.html">Settings</a> <a href="settings.html">Settings</a>
<a href="login.html">Logout</a> <a href="login.html">Logout</a>

62
css/nav.css
View File

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

2
login.html
View File

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

2
settings.html
View File

@ -39,7 +39,7 @@
<nav> <nav>
<a href="index.html">Instances</a> <a href="index.html">Instances</a>
<a href="account.html">Account</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> <a href="login.html">Logout</a>
</nav> </nav>
</header> </header>