diff --git a/account.html b/account.html index 4a84b80..2d67fcb 100644 --- a/account.html +++ b/account.html @@ -51,7 +51,7 @@ Instances - Account + Account Settings Logout diff --git a/config.html b/config.html index e8f0463..c0c0d8a 100644 --- a/config.html +++ b/config.html @@ -18,7 +18,7 @@ ☰ - Instances + Instances Account Settings Logout diff --git a/css/nav.css b/css/nav.css index eb92fbb..bb0929b 100644 --- a/css/nav.css +++ b/css/nav.css @@ -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) + ; } } \ No newline at end of file diff --git a/index.html b/index.html index e6d1c37..10e77a4 100644 --- a/index.html +++ b/index.html @@ -48,7 +48,7 @@ ☰ - Instances + Instances Account Settings Logout diff --git a/login.html b/login.html index 68dfee8..c93df16 100644 --- a/login.html +++ b/login.html @@ -16,7 +16,7 @@ ☰ - Login + Login diff --git a/settings.html b/settings.html index 0e155f8..08219bc 100644 --- a/settings.html +++ b/settings.html @@ -39,7 +39,7 @@ Instances Account - Settings + Settings Logout