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

Added a thin blue line using a separate header-line.css file

Browse Source 
Maintained the existing header gradient and all other functionality
No modifications to existing variables or hover effects
This commit is contained in:
ben7sys
2024-11-17 09:32:22 +01:00
parent c6f023dccb
commit 172b2d0784
5 changed files with 14 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/components/header.html
View File

@@ -20,6 +20,7 @@
<i class="fas fa-bars"></i> <i class="fas fa-bars"></i>
</button> </button>
</div> </div>
<div class="header-horizontal-line"></div>
<script> <script>
// Hide expertise and contact links on non-index pages // Hide expertise and contact links on non-index pages
if (window.location.pathname !== '/' && window.location.pathname !== '/index.html') { if (window.location.pathname !== '/' && window.location.pathname !== '/index.html') {

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

@@ -0,0 +1,8 @@
.header-horizontal-line {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background-color: var(--primary);
}

2
public/css/header.css
View File

@@ -2,7 +2,7 @@ header {
position: fixed; position: fixed;
top: 0; top: 0;
width: 100%; width: 100%;
background: linear-gradient(350deg, 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: var(--spacing-lg) var(--spacing-md);
z-index: 1000; z-index: 1000;

4
public/css/variables.css
View File

@@ -10,9 +10,10 @@
--bg-card: #f5f5f5; --bg-card: #f5f5f5;
--text: #333333; --text: #333333;
--text-muted: #666666; --text-muted: #666666;
--header-gradient-1: rgba(245, 245, 245, 0.9); --header-gradient-1: rgba(220, 220, 220, 0.9);
--header-gradient-2: rgba(235, 235, 235, 0.9); --header-gradient-2: rgba(235, 235, 235, 0.9);
--border-color: rgba(58, 123, 224, 0.1); --border-color: rgba(58, 123, 224, 0.1);
--bg-hover-rgb: 207, 207, 207;
} }
[data-theme="dark"] { [data-theme="dark"] {
@@ -22,6 +23,7 @@
--text-muted: #888888; --text-muted: #888888;
--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;
} }
/* Common tokens */ /* Common tokens */

1
public/index.html
View File

@@ -16,6 +16,7 @@
<link rel="stylesheet" href="css/components.css"> <link rel="stylesheet" href="css/components.css">
<link rel="stylesheet" href="css/footer.css"> <link rel="stylesheet" href="css/footer.css">
<link rel="stylesheet" href="css/header.css"> <link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/header-line.css">
<link rel="stylesheet" href="css/layout.css"> <link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/responsive.css"> <link rel="stylesheet" href="css/responsive.css">
<link rel="stylesheet" href="css/variables.css"> <link rel="stylesheet" href="css/variables.css">