ben7sys/web7sys
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: ben7sys:172b2d07842e21f14229e5c4fc6e3034c3c3ad31
Branches Tags
ben7sys:main
...
compare: ben7sys:956238800ddf4799c983f5cdafcfe9154d1ad2ba
Branches Tags
ben7sys:main

2 Commits
172b2d0784 ... 956238800d

Author SHA1 Message Date
ben7sys
956238800d Der Header wurde erfolgreich angepasst. Das vertikale Padding wurde von 1.5rem auf 1.3rem reduziert, wodurch der Header etwa 15% flacher ist. Die fixierte Position beim Scrollen bleibt erhalten. 2024-11-17 10:12:14 +01:00
ben7sys
9fd7195c2d added header gradient, improved horizontal line 2024-11-17 10:05:51 +01:00
3 changed files with 17 additions and 9 deletions
Expand all files Collapse all files

8
public/css/header-line.css
View File

@@ -4,5 +4,11 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: 1px; height: 1px;
background-color: var(--primary); background: linear-gradient(
90deg,
var(--primary-gradient-1),
var(--primary-gradient-2),
var(--primary-gradient-3),
var(--primary-gradient-4)
);
} }

6
public/css/header.css
View File

@@ -4,7 +4,7 @@ header {
width: 100%; width: 100%;
background: linear-gradient(90deg, var(--header-gradient-1), var(--header-gradient-2)); background: linear-gradient(90deg, var(--header-gradient-1), var(--header-gradient-2));
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
padding: var(--spacing-lg) var(--spacing-md); padding: 0.5rem var(--spacing-md);
z-index: 1000; z-index: 1000;
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
left: 0; left: 0;
@@ -19,7 +19,7 @@ header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
max-width: 1200px; max-width: 1100px;
margin: 0 auto; margin: 0 auto;
padding: 0 var(--spacing-md); padding: 0 var(--spacing-md);
} }
@@ -58,7 +58,7 @@ header {
padding: 0.5rem 0.8rem; padding: 0.5rem 0.8rem;
border-radius: var(--border-radius); border-radius: var(--border-radius);
position: relative; position: relative;
background-color: rgba(var(--bg-hover-rgb), 0.4); background-color: rgba(var(--bg-hover-nav), 0.4);
letter-spacing: 0.3px; letter-spacing: 0.3px;
} }

12
public/css/variables.css
View File

@@ -6,14 +6,15 @@
--primary-gradient-3: #5743ed; --primary-gradient-3: #5743ed;
--primary-gradient-4: #784dd9; --primary-gradient-4: #784dd9;
--bg-main: #ffffff; --bg-main: #f8f8f8;
--bg-card: #f5f5f5; --bg-card: #f1f1f1;
--text: #333333; --text: #333333;
--text-muted: #666666; --text-muted: #666666;
--header-gradient-1: rgba(220, 220, 220, 0.9); --header-gradient-1: rgba(237, 237, 237, 0.9);
--header-gradient-2: rgba(235, 235, 235, 0.9); --header-gradient-2: rgba(228, 228, 228, 0.9);
--border-color: rgba(58, 123, 224, 0.1); --border-color: rgba(58, 123, 224, 0.1);
--bg-hover-rgb: 207, 207, 207; --bg-hover-rgb: 228, 228, 228;
--bg-hover-nav: 241, 241, 241;
} }
[data-theme="dark"] { [data-theme="dark"] {
@@ -24,6 +25,7 @@
--header-gradient-1: rgba(14, 14, 14, 0.9); --header-gradient-1: rgba(14, 14, 14, 0.9);
--header-gradient-2: rgba(41, 41, 41, 0.9); --header-gradient-2: rgba(41, 41, 41, 0.9);
--bg-hover-rgb: 17, 17, 17; --bg-hover-rgb: 17, 17, 17;
--bg-hover-nav: 20, 20, 20;
} }
/* Common tokens */ /* Common tokens */