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

background gradient for site-header

Browse Source
This commit is contained in:
sefaria
2026-05-28 22:41:00 +02:00
parent 0d7beb1dac
commit 88f3140357
1 changed files with 24 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/style.css
+24 -18
View File
@@ -55,6 +55,7 @@
:root { :root {
color-scheme: light dark; color-scheme: light dark;
background-color: light-dark(##F7F7F7, #121212);
/* Primitive tokens: raw design values */ /* Primitive tokens: raw design values */
--color-neutral-100: #F7F7F7; --color-neutral-100: #F7F7F7;
@@ -87,6 +88,21 @@
--color-orange-800: #933D00; --color-orange-800: #933D00;
--color-orange-900: #7A2C00; --color-orange-900: #7A2C00;
--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);
--gradient-stop-1-light: #f7f7f7;
--gradient-stop-1-dark: #121212;
--gradient-stop-2-light: #f7f7f7;
--gradient-stop-2-dark: #121212;
--gradient-stop-3-light: #f7f7f780;
--gradient-stop-3-dark: #12121280;
--gradient-stop-4-light: #f7f7f700;
--gradient-stop-4-dark: #12121200;
--text-h1: clamp(2.25rem, 1.9rem + 1.1vw, 3rem); --text-h1: clamp(2.25rem, 1.9rem + 1.1vw, 3rem);
--text-h2: clamp(1.875rem, 1.6rem + 0.9vw, 2.5rem); --text-h2: clamp(1.875rem, 1.6rem + 0.9vw, 2.5rem);
--text-h3: clamp(1.625rem, 1.4rem + 0.7vw, 2rem); --text-h3: clamp(1.625rem, 1.4rem + 0.7vw, 2rem);
@@ -128,9 +144,6 @@
--radius-xl: 2rem; --radius-xl: 2rem;
--radius-xxl: 2.5rem; --radius-xxl: 2.5rem;
--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 */ /* Semantic tokens: contextual usage */
--color-background: light-dark(var(--color-neutral-100), var(--color-neutral-900)); --color-background: light-dark(var(--color-neutral-100), var(--color-neutral-900));
@@ -471,23 +484,16 @@ button:visited, .button-primary:visited, .logo:visited {
top: 0; top: 0;
padding-top: max(1px, env(safe-area-inset-top)); padding-top: max(1px, env(safe-area-inset-top));
z-index: 100; z-index: 100;
background: linear-gradient( background-image: linear-gradient(
180deg, 180deg,
light-dark(var(--color-neutral-100), var(--color-neutral-900)) 80%, light-dark(var(--gradient-stop-1-light), var(--gradient-stop-1-dark)) 0%,
light-dark(rgba(247,247,247,0), rgba(18,18,18,0)) 100% 6%,
light-dark(var(--gradient-stop-2-light), var(--gradient-stop-2-dark)) 12%,
44%,
light-dark(var(--gradient-stop-3-light), var(--gradient-stop-3-dark)) 60%,
76%,
light-dark(var(--gradient-stop-4-light), var(--gradient-stop-4-dark)) 100%
); );
/* -webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
-webkit-mask-image: linear-gradient(
to top,
rgba(18,18,18,0) 0%,
rgba(18,18,18,1.00) 16%
);
mask-image: linear-gradient(
to top,
rgba(18,18,18,0) 0%,
rgba(18,18,18,1.00) 16%
); */
} }
.menu-bar { .menu-bar {