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

new button-secondary, coherent styling (variables)

Browse Source
This commit is contained in:
sefaria
2026-05-26 18:39:31 +02:00
parent db5fe419ce
commit 93a5a13e3e
4 changed files with 47 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/style.css
+40 -31
View File
@@ -153,12 +153,21 @@
--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);
--color-primary-button-active: var(--color-orange-red-600);
--color-button-primary: var(--color-orange-red-500);
--color-button-primary-hover: var(--color-orange-500);
--color-button-primary-active: var(--color-orange-red-600);
--color-text-button: var(--color-neutral-900);
--color-text-button-hover: var(--color-neutral-100);
--color-button-secondary: light-dark(var(--color-neutral-300), var(--color-neutral-700));
--color-button-secondary-hover: light-dark(var(--color-neutral-200), var(--color-neutral-600));
--color-button-secondary-active: light-dark(var(--color-neutral-400), var(--color-neutral-800));
--color-text-button-primary: var(--color-neutral-900);
--color-text-button-primary-hover: var(--color-neutral-100);
--color-text-button-primary-active: var(--color-neutral-900);
--color-text-button-secondary: light-dark(var(--color-neutral-800), var(--color-neutral-200));
--color-text-button-seconary-hover: light-dark(var(--color-neutral-900), var(--color-neutral-100));
--color-text-button-seconary-active: light-dark(var(--color-neutral-900), var(--color-neutral-100));
--shadow-box: var(--shadow-light);
@@ -348,7 +357,7 @@ a:visited {
text-decoration-thickness: 0.175rem;
}
button, .link-button, .menu-button, .menu-button-secondary, .logo {
button, .button-primary, .button-secondary, .menu-button, .logo {
appearance: none;
-webkit-appearance: none;
display: inline-flex;
@@ -367,19 +376,19 @@ button, .link-button, .menu-button, .menu-button-secondary, .logo {
text-decoration: none;
}
button, .link-button, .logo {
background: var(--color-primary-button);
color: var(--color-text-button);
button, .button-primary, .logo {
background: var(--color-button-primary);
color: var(--color-text-button-primary);
box-shadow: var(--shadow-button);
}
.menu-button-secondary {
background: var(--color-secondary);
color: var(--color-text-primary-inverted);
.button-secondary {
background: var(--color-button-secondary);
color: var(--color-text-button-secondary);
box-shadow: var(--shadow-button);
}
.logo, .menu-button-secondary {
.logo, .button-secondary {
padding: 1rem;
aspect-ratio: 1/1;
}
@@ -395,41 +404,41 @@ button, .link-button, .logo {
fill: currentColor;
}
button:hover, .link-button:hover, .logo:hover {
background: var(--color-primary-button-hover);
color: var(--color-text-button);
button:hover, .button-primary:hover, .logo:hover {
background: var(--color-button-primary-hover);
color: var(--color-text-button-primary);
text-decoration: none;
}
.menu-button-secondary:hover {
background: var(--color-secondary-hover);
color: var(--color-text-primary-inverted);
.button-secondary:hover {
background: var(--color-button-secondary-hover);
color: var(--color-text-button-secondary-hover);
}
button:active, .link-button:active, .logo:active {
background: var(--color-primary-button-active);
button:active, .button-primary:active, .logo:active {
background: var(--color-button-primary-active);
box-shadow: var(--shadow-button-active);
color: var(--color-text-button-active);
color: var(--color-text-button-primary-active);
text-decoration: none;
}
.menu-button-secondary:active {
background: var(--color-secondary-active);
color: var(--color-text-primary);
.button-secondary:active {
background: var(--color-button-secondary-active);
color: var(--color-text-button-secondary-active);
box-shadow: var(--shadow-button-active);
}
button:visited, .link-button:visited, .logo:visited {
color: var(--color-text-button);
button:visited, .button-primary:visited, .logo:visited {
color: var(--color-text-button-primary);
text-decoration: none;
}
.menu-button-secondary:visited {
color: var(--color-text-primary);
.button-secondary:visited {
color: var(--color-text-button-secondary);
text-decoration: none;
}
.link-button span {
.button-primary span {
margin-right: 0.3em;
}
@@ -497,7 +506,7 @@ button:visited, .link-button:visited, .logo:visited {
align-self: stretch;
background: light-dark(var(--color-neutral-200), var(--color-neutral-800));
border-radius: var(--radius-xxl);
box-shadow: var(--shadow-box);
box-shadow: var(--shadow-button);
}
.desktop-nav ul {