lars/Portfolio-2026
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

menu styling and active page state

Browse Source
This commit is contained in:
sefaria
2026-05-24 00:32:41 +02:00
parent 4e287c0e85
commit 9a92ed4489
2 changed files with 45 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/style.css
+38 -22
View File
@@ -154,8 +154,14 @@
--color-primary-button-hover: var(--color-orange-500);
--color-primary-button-active: var(--color-orange-red-600);
--color-menu-button: none;
--color-menu-button-hover: light-dark(var(--color-neutral-400), var(--color-neutral-600));
--color-text-button: var(--color-neutral-900);
--color-text-button-active: var(--color-neutral-100);
--color-text-button-hover: var(--color-neutral-100);
--color-menu-text-button: light-dark(var(--color-neutral-800), var(--color-neutral-200));
--color-menu-text-button-hover: light-dark(var(--color-neutral-900), var(--color-neutral-100));
--shadow-box: var(--shadow-light);
@@ -346,7 +352,7 @@ a:visited {
text-decoration-thickness: 0.175rem;
}
button, .link-button, .logo {
button, .link-button, .menu-button, .logo {
appearance: none;
-webkit-appearance: none;
display: inline-flex;
@@ -359,15 +365,24 @@ button, .link-button, .logo {
line-height: var(--line-normal);
letter-spacing: 0.025rem;
padding: 0.875rem 1rem;
background: var(--color-primary-button);
font-size: var(--text-button);
color: var(--color-text-button);
border: none;
border-radius: var(--radius-xxl);
box-shadow: var(--shadow-button);
text-decoration: none;
}
button, .link-button, .logo, .desktop-nav a[aria-current="page"],
.mobile-menu a[aria-current="page"] {
background: var(--color-primary-button);
color: var(--color-text-button);
box-shadow: var(--shadow-button);
}
.menu-button {
background: var(--color-menu-button);
color: var(--color-menu-text-button);
}
.logo {
padding: 1rem;
aspect-ratio: 1/1;
@@ -384,18 +399,23 @@ button, .link-button, .logo {
fill: currentColor;
}
button:hover, .link-button:hover, .logo:hover {
button:hover, .link-button:hover, .logo:hover, .desktop-nav a[aria-current="page"]:hover, .mobile-menu a[aria-current="page"]:hover {
background: var(--color-primary-button-hover);
color: var(--color-text-button);
}
button:active, .link-button:active, .logo:active {
.menu-button:hover {
background: var(--color-menu-button-hover);
color: var(--color-menu-text-button-hover);
}
button:active, .link-button:active, .logo:active, .desktop-nav a[aria-current="page"]:active, .mobile-menu a[aria-current="page"]:active {
background: var(--color-primary-button-active);
box-shadow: var(--shadow-button-active);
color: var(--color-text-button-active);
}
button:visited, .link-button:visited, .logo:visited {
button:visited, .link-button:visited, .logo:visited, .desktop-nav a[aria-current="page"]:hover, .mobile-menu a[aria-current="page"]:hover {
color: var(--color-text-button);
text-decoration: none;
}
@@ -438,9 +458,9 @@ button:visited, .link-button:visited, .logo:visited {
align-items: center;
justify-content: space-between;
gap: 1rem;
background: rgb(255 255 255 / 0.88);
/* background: rgb(255 255 255 / 0.88);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); */
}
.menu-bar .menu-left {
@@ -458,10 +478,11 @@ button:visited, .link-button:visited, .logo:visited {
.desktop-nav {
flex: 1;
background: var(--color-neutral-200);
background: light-dark(var(--color-neutral-200), var(--color-neutral-800));
border-radius: var(--radius-xxl);
box-shadow: var(--shadow-button);
padding: var(--spacing-1);
padding: var(--spacing-2);
height: 100%;
}
.desktop-nav ul,
@@ -473,21 +494,16 @@ button:visited, .link-button:visited, .logo:visited {
.desktop-nav ul {
display: flex;
gap: 1rem;
gap: var(--spacing-2);
}
.desktop-nav ul li {
/* .desktop-nav ul li {
margin: 0;
}
} */
.desktop-nav ul li a {
align-self: stretch;
}
.desktop-nav a[aria-current="page"],
.mobile-menu a[aria-current="page"] {
.desktop-nav a,
.mobile-menu a {
color: inherit;
text-decoration: none;
}
.menu-toggle,
index.html
+6 -6
View File
@@ -38,9 +38,9 @@
<nav class="desktop-nav" aria-label="Primary navigation">
<ul>
<li><a href="#" class="link-button">Home</a></li>
<li><a href="#" class="link-button">Work</a></li>
<li><a href="#" class="link-button">About</a></li>
<li><a href="/" class="menu-button" aria-current="page">Work</a></li>
<li><a href="/legal-notice.html" class="menu-button">About</a></li>
<li><a href="/privacy.html" class="menu-button">Blog</a></li>
</ul>
</nav>
</div>
@@ -78,9 +78,9 @@
<nav aria-label="Mobile navigation">
<ul>
<li><a href="#" class="link-button">Home</a></li>
<li><a href="#" class="link-button">Work</a></li>
<li><a href="#" class="link-button">About</a></li>
<li><a href="/" class="link-button" aria-current="page">Work</a></li>
<li><a href="/legal-notice.html" class="link-button">About</a></li>
<li><a href="/privacy.html" class="link-button">Blog</a></li>
</ul>
</nav>
</aside>