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

styling secondary; underline hover primary menu

Browse Source
This commit is contained in:
sefaria
2026-05-25 21:05:08 +02:00
parent 9365d7c6f9
commit 4dcd811381
1 changed files with 43 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/style.css
+43 -20
View File
@@ -129,6 +129,7 @@
--shadow-light: 0px 2px 8px rgba(0, 0, 0, 0.3), 0px 1px 4px rgba(0, 0, 0, 0.2);
--shadow-dark: 0px 2px 8px rgba(0, 0, 0, 0.5), 0px 1px 4px rgba(0, 0, 0, 0.2);
/* Semantic tokens: contextual usage */
--color-background: light-dark(var(--color-neutral-100), var(--color-neutral-900));
@@ -149,6 +150,8 @@
--color-text-primary: light-dark(var(--color-neutral-900), var(--color-neutral-100));
--color-text-secondary: light-dark(var(--color-neutral-700), var(--color-neutral-400));
--color-text-primary-inverted: light-dark(var(--color-neutral-100), var(--color-neutral-900));
--color-text-secondary-inverted: light-dark(var(--color-neutral-400), var(--color-neutral-700));
--color-primary-button: var(--color-orange-red-500);
--color-primary-button-hover: var(--color-orange-500);
@@ -156,6 +159,7 @@
--color-menu-button: none;
--color-menu-button-hover: light-dark(var(--color-neutral-400), var(--color-neutral-600));
--color-menu-button-active: light-dark(var(--color-neutral-500), var(--color-neutral-700));
--color-text-button: var(--color-neutral-900);
--color-text-button-hover: var(--color-neutral-100);
@@ -384,18 +388,18 @@ button, .link-button, .logo, .desktop-nav a[aria-current="page"],
.menu-button-secondary {
background: var(--color-secondary);
color: var(--color-text-button);
color: var(--color-text-primary-inverted);
box-shadow: var(--shadow-button);
}
.logo {
.logo, .menu-button-secondary {
padding: 1rem;
aspect-ratio: 1/1;
}
.logo svg {
height: 1.75em;
width: 1.75em;
height: 2em;
width: 2em;
flex: none;
display: block;
}
@@ -407,17 +411,43 @@ button, .link-button, .logo, .desktop-nav a[aria-current="page"],
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);
text-decoration: none;
}
.menu-button:hover {
background: var(--color-menu-button-hover);
color: var(--color-menu-text-button-hover);
text-decoration: underline;
text-underline-offset: 0.175rem;
text-decoration-thickness: 0.075rem;
transition: 0.2s;
}
.menu-button-secondary:hover {
background: var(--color-secondary-hover);
color: var(--color-text-primary-inverted);
}
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);
text-decoration: none;
}
.menu-button:active {
background: var(--color-menu-button-active);
color: var(--color-menu-text-button-hover);
text-decoration: underline;
text-underline-offset: 0.175rem;
text-decoration-thickness: 0.075rem;
transition: 0.2s;
}
.menu-button-secondary:active {
background: var(--color-secondary-active);
color: var(--color-text-primary);
box-shadow: var(--shadow-button-active);
}
button:visited, .link-button:visited, .logo:visited, .desktop-nav a[aria-current="page"]:visited, .mobile-menu a[aria-current="page"]:visited {
@@ -425,6 +455,11 @@ button:visited, .link-button:visited, .logo:visited, .desktop-nav a[aria-current
text-decoration: none;
}
.menu-button-secondary:visited {
color: var(--color-text-primary);
text-decoration: none;
}
.link-button span {
margin-right: 0.3em;
}
@@ -532,7 +567,7 @@ button:visited, .link-button:visited, .logo:visited, .desktop-nav a[aria-current
.desktop-nav-secondary ul {
display: flex;
align-items: stretch;
gap: var(--spacing-4);
gap: var(--spacing-3);
margin: 0;
padding: 0;
list-style: none;
@@ -545,25 +580,13 @@ button:visited, .link-button:visited, .logo:visited, .desktop-nav a[aria-current
}
.desktop-nav-secondary svg {
color: var(--color-secondary);
height: 1.5em;
width: 1.5em;
color: currentcolor;
height: 1em;
width: 1em;
flex: none;
display: block;
}
.desktop-nav-secondary svg:hover {
color: var(--color-secondary-hover);
}
.desktop-nav-secondary svg:active {
color: var(--color-secondary-active);
}
.desktop-nav-secondary svg path {
fill: currentColor;
}
.menu-toggle,
.menu-close {
width: 44px;