From 93a5a13e3e6fc3fbbdd6746a54dceef863a32e84 Mon Sep 17 00:00:00 2001 From: sefaria Date: Tue, 26 May 2026 18:39:31 +0200 Subject: [PATCH] new button-secondary, coherent styling (variables) --- css/style.css | 71 ++++++++++++++++++++++++++--------------------- index.html | 10 +++---- legal-notice.html | 2 +- privacy.html | 2 +- 4 files changed, 47 insertions(+), 38 deletions(-) diff --git a/css/style.css b/css/style.css index d683c97..b771ec5 100644 --- a/css/style.css +++ b/css/style.css @@ -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 { diff --git a/index.html b/index.html index 22f4cb6..599b1ec 100644 --- a/index.html +++ b/index.html @@ -48,11 +48,11 @@