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

new primary menu styles, cleaned up variables

Browse Source
This commit is contained in:
sefaria
2026-05-26 17:38:54 +02:00
parent 4dcd811381
commit db5fe419ce
1 changed files with 34 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/style.css
+34 -36
View File
@@ -157,16 +157,9 @@
--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-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);
--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);
--shadow-button: inset 0px 1px 2px rgba(0, 0, 0, 0.16), inset 0px -1px 4px rgba(0, 0, 0, 0.28), var(--shadow-box);
@@ -374,18 +367,12 @@ button, .link-button, .menu-button, .menu-button-secondary, .logo {
text-decoration: none;
}
button, .link-button, .logo, .desktop-nav a[aria-current="page"],
.mobile-menu a[aria-current="page"] {
button, .link-button, .logo {
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);
}
.menu-button-secondary {
background: var(--color-secondary);
color: var(--color-text-primary-inverted);
@@ -408,49 +395,31 @@ button, .link-button, .logo, .desktop-nav a[aria-current="page"],
fill: currentColor;
}
button:hover, .link-button:hover, .logo:hover, .desktop-nav a[aria-current="page"]:hover, .mobile-menu a[aria-current="page"]:hover {
button:hover, .link-button:hover, .logo: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 {
button:active, .link-button:active, .logo: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 {
button:visited, .link-button:visited, .logo:visited {
color: var(--color-text-button);
text-decoration: none;
}
@@ -559,9 +528,38 @@ button:visited, .link-button:visited, .logo:visited, .desktop-nav a[aria-current
white-space: nowrap;
}
.menu-button {
background:none;
color: light-dark(var(--color-neutral-700), var(--color-neutral-300));
}
.menu-button:hover,
.desktop-nav a[aria-current="page"]:hover,
.mobile-menu a[aria-current="page"]:hover {
background: light-dark(var(--color-neutral-400), var(--color-neutral-400));
color: light-dark(var(--color-neutral-900), var(--color-neutral-900));
text-decoration: underline;
text-underline-offset: 0.175rem;
text-decoration-thickness: 0.075rem;
transition: 0.2s;
}
.menu-button:active,
.desktop-nav a[aria-current="page"]:active,
.mobile-menu a[aria-current="page"]:active,
.desktop-nav a[aria-current="page"],
.mobile-menu a[aria-current="page"] {
background: light-dark(var(--color-neutral-600), var(--color-neutral-600));
color: light-dark(var(--color-neutral-100), var(--color-neutral-100));
}
.menu-button:active,
.desktop-nav a[aria-current="page"]:active,
.mobile-menu a[aria-current="page"]:active {
text-decoration: underline;
text-underline-offset: 0.175rem;
text-decoration-thickness: 0.075rem;
transition: 0.2s;
}
.desktop-nav-secondary ul {