Skip to content

Commit 474114f

Browse files
nstrayernstrayer
committed
Make nav float a bit
1 parent 65e6a4b commit 474114f

File tree

2 files changed

+130
-54
lines changed

2 files changed

+130
-54
lines changed

‎index.html‎

Lines changed: 67 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -26,57 +26,57 @@
2626
<link rel="stylesheet" href="landing.css">
2727
</head>
2828
<body>
29+
<!-- Navigation Header -->
30+
<header class="site-header">
31+
<nav class="site-nav">
32+
<div class="nav-container">
33+
<!-- Brand Section -->
34+
<a href="/" class="nav-brand">
35+
<img src="images/positron.svg" alt="Positron logo" class="nav-logo">
36+
<span class="nav-title">Positron</span>
37+
</a>
38+
39+
<!-- Navigation Links -->
40+
<div class="nav-links">
41+
<a href="start.html" class="nav-link">
42+
<svg class="nav-link-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
43+
<path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/>
44+
</svg>
45+
Getting Started
46+
</a>
47+
<a href="add-to-path.html" class="nav-link">
48+
<svg class="nav-link-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
49+
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
50+
</svg>
51+
Guides
52+
</a>
53+
<a href="troubleshooting.html" class="nav-link">
54+
<svg class="nav-link-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
55+
<path stroke-linecap="round" stroke-linejoin="round" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
56+
</svg>
57+
Help
58+
</a>
59+
<a href="download.html" class="nav-link nav-link-cta">
60+
<svg class="nav-link-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
61+
<path stroke-linecap="round" stroke-linejoin="round" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"/>
62+
</svg>
63+
Download
64+
</a>
65+
</div>
66+
67+
<!-- Mobile Menu Button -->
68+
<button class="nav-mobile-toggle" aria-label="Toggle navigation menu">
69+
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
70+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
71+
</svg>
72+
</button>
73+
</div>
74+
</nav>
75+
</header>
76+
2977
<main>
3078
<!-- Hero Section -->
3179
<section class="hero-section">
32-
<!-- Navigation Header -->
33-
<header class="site-header">
34-
<nav class="site-nav">
35-
<div class="nav-container">
36-
<!-- Brand Section -->
37-
<a href="/" class="nav-brand">
38-
<img src="images/positron.svg" alt="Positron logo" class="nav-logo">
39-
<span class="nav-title">Positron</span>
40-
</a>
41-
42-
<!-- Navigation Links -->
43-
<div class="nav-links">
44-
<a href="start.html" class="nav-link">
45-
<svg class="nav-link-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
46-
<path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/>
47-
</svg>
48-
Getting Started
49-
</a>
50-
<a href="add-to-path.html" class="nav-link">
51-
<svg class="nav-link-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
52-
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
53-
</svg>
54-
Guides
55-
</a>
56-
<a href="troubleshooting.html" class="nav-link">
57-
<svg class="nav-link-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
58-
<path stroke-linecap="round" stroke-linejoin="round" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
59-
</svg>
60-
Help
61-
</a>
62-
<a href="download.html" class="nav-link nav-link-cta">
63-
<svg class="nav-link-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
64-
<path stroke-linecap="round" stroke-linejoin="round" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"/>
65-
</svg>
66-
Download
67-
</a>
68-
</div>
69-
70-
<!-- Mobile Menu Button -->
71-
<button class="nav-mobile-toggle" aria-label="Toggle navigation menu">
72-
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
73-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
74-
</svg>
75-
</button>
76-
</div>
77-
</nav>
78-
</header>
79-
8080
<!-- Background layer with gradient and orbs -->
8181
<div class="hero-background">
8282
<div class="gradient-orb gradient-orb-blue" style="top: 5rem; left: -10rem;"></div>
@@ -486,5 +486,24 @@ <h3 class="footer-heading">Posit</h3>
486486
</div>
487487
</footer>
488488
</main>
489+
490+
<script>
491+
// Add scroll effect to navigation header
492+
const header = document.querySelector('.site-header');
493+
let lastScroll = 0;
494+
495+
window.addEventListener('scroll', () => {
496+
const currentScroll = window.pageYOffset;
497+
498+
// Add scrolled class when user scrolls down
499+
if (currentScroll > 50) {
500+
header.classList.add('scrolled');
501+
} else {
502+
header.classList.remove('scrolled');
503+
}
504+
505+
lastScroll = currentScroll;
506+
});
507+
</script>
489508
</body>
490509
</html>

‎landing.css‎

Lines changed: 63 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -77,27 +77,83 @@ body {
7777

7878
/* Navigation Header */
7979
.site-header {
80-
position: relative;
81-
z-index: 10;
80+
position: fixed;
81+
top: 0;
82+
left: 0;
83+
right: 0;
84+
z-index: 1000;
8285
padding: var(--spacing-lg) 0;
86+
transition: all 0.3s ease;
87+
}
88+
89+
/* Add backdrop blur when scrolled */
90+
.site-header.scrolled {
91+
padding: var(--spacing-md) 0;
92+
}
93+
94+
.site-header.scrolled .site-nav {
95+
background: rgba(255, 255, 255, 0.6);
96+
backdrop-filter: blur(16px) saturate(180%);
97+
-webkit-backdrop-filter: blur(16px) saturate(180%);
98+
box-shadow: 0 8px 32px -8px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.02);
99+
border-radius: 1rem;
100+
padding: var(--spacing-xs) 0;
101+
border: 1px solid rgba(255, 255, 255, 0.3);
102+
}
103+
104+
.site-header.scrolled .nav-container {
105+
padding: var(--spacing-xs) var(--spacing-xl);
106+
}
107+
108+
@media (max-width: 768px) {
109+
.site-header.scrolled .nav-container {
110+
padding: var(--spacing-xs) var(--spacing-md);
111+
}
83112
}
84113

85114
.site-nav {
86-
width: 100%;
115+
max-width: calc(80rem - var(--spacing-xl));
116+
margin: 0 auto;
117+
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
118+
border-radius: 0;
119+
padding: 0;
120+
border: 1px solid transparent;
121+
}
122+
123+
@media (max-width: 1280px) {
124+
.site-nav {
125+
max-width: calc(100% - var(--spacing-xl) * 2);
126+
margin: 0 var(--spacing-xl);
127+
}
128+
}
129+
130+
@media (max-width: 1024px) {
131+
.site-nav {
132+
max-width: calc(100% - var(--spacing-lg) * 2);
133+
margin: 0 var(--spacing-lg);
134+
}
135+
}
136+
137+
@media (max-width: 768px) {
138+
.site-nav {
139+
max-width: calc(100% - var(--spacing-md) * 2);
140+
margin: 0 var(--spacing-md);
141+
}
87142
}
88143

89144
.nav-container {
90145
max-width: 80rem;
91146
margin: 0 auto;
92-
padding: 0 var(--spacing-md);
147+
padding: 0 var(--spacing-xl);
93148
display: flex;
94149
align-items: center;
95150
justify-content: space-between;
151+
transition: padding 0.4s cubic-bezier(0.4, 0, 0.2, 1);
96152
}
97153

98-
@media (min-width: 768px) {
154+
@media (max-width: 768px) {
99155
.nav-container {
100-
padding: 0 var(--spacing-xl);
156+
padding: 0 var(--spacing-md);
101157
}
102158
}
103159

@@ -362,6 +418,7 @@ a {
362418
overflow: hidden;
363419
display: flex;
364420
flex-direction: column;
421+
padding-top: calc(4rem + var(--spacing-lg) * 2); /* Account for fixed header */
365422
}
366423

367424
/* Hero Background Layer */

0 commit comments

Comments
 (0)