Skip to content

Commit 7b5eece

Browse files
julioestjulioest
committed
style: remove navbar ux and refine background gradient
1 parent 243885e commit 7b5eece

File tree

4 files changed

+74
-114
lines changed

4 files changed

+74
-114
lines changed

‎docs/website/data.json‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,6 @@
1212
}
1313
},
1414
"navbar": [
15-
{
16-
"title": "Examples",
17-
"href": "#examples"
18-
},
1915
{
2016
"title": "Features",
2117
"href": "#features"

‎docs/website/index.html‎

Lines changed: 31 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,6 @@
3636
</div>
3737
<div class="nav-section">
3838
<ul role="menubar">
39-
<li role="none"><a href="#examples" class="secondary" role="menuitem">Examples</a></li>
4039
<li role="none"><a href="#features" class="secondary" role="menuitem">Features</a></li>
4140
<li role="none"><a href="./docs/" class="secondary" role="menuitem">Docs</a></li>
4241
<li>
@@ -509,74 +508,55 @@ <h3>Parameters</h3>
509508
<footer>
510509
<div class="container">
511510
<ul>
512-
<li><a href="#examples" class="contrast">Examples</a></li>
513511
<li><a href="#features" class="contrast">Features</a></li>
514512
<li><a href="./docs/" class="contrast">Docs</a></li>
515513
<li><a href="https://github.com/cppalliance/mrdocs" class="contrast">GitHub</a></li>
516514
</ul>
517515
</div>
518516
</footer>
519517
<script>
518+
// Initialize positions to match CSS exactly
519+
document.addEventListener('DOMContentLoaded', function() {
520+
const root = document.documentElement;
521+
522+
// Set initial positions to exactly match CSS defaults
523+
root.style.setProperty('--x1', '20%');
524+
root.style.setProperty('--y1', '20%');
525+
root.style.setProperty('--x2', '75%');
526+
root.style.setProperty('--y2', '25%');
527+
root.style.setProperty('--x3', '50%');
528+
root.style.setProperty('--y3', '50%');
529+
});
530+
520531
window.addEventListener("scroll", () => {
521532
const t = window.scrollY / (document.body.scrollHeight - window.innerHeight);
522533
const root = document.documentElement;
523534

524-
const ease = (x) => 0.5 - Math.cos(x * Math.PI) / 2; // smooth easing
525-
526-
// Update positions and radii
535+
// Original animation formula but adjusted to start from CSS positions
527536
for (let i = 1; i <= 3; i++) {
528537
const angle = t * Math.PI * 2 + i;
529-
const radius = 15 + 5 * (i % 2); // motion amplitude
530-
const blobSize = 25 + 10 * Math.sin(t * Math.PI * 2 + i); // animated radius %
531-
const cx = 50 + radius * Math.cos(angle + i);
532-
const cy = 50 + radius * Math.sin(angle + i * 0.5);
538+
const radius = 15 + 5 * (i % 2); // original motion amplitude
539+
540+
// Calculate what the original formula produces at t=0
541+
const angle0 = 0 * Math.PI * 2 + i; // t=0
542+
const baseX = 50 + radius * Math.cos(angle0 + i);
543+
const baseY = 50 + radius * Math.sin(angle0 + i * 0.5);
544+
545+
// Calculate current animation position
546+
const animX = 50 + radius * Math.cos(angle + i);
547+
const animY = 50 + radius * Math.sin(angle + i * 0.5);
548+
549+
// Apply offset to match CSS starting positions
550+
const offsetX = (i === 1) ? 20 - baseX : (i === 2) ? 75 - baseX : 50 - baseX;
551+
const offsetY = (i === 1) ? 20 - baseY : (i === 2) ? 25 - baseY : 50 - baseY;
552+
553+
const cx = animX + offsetX;
554+
const cy = animY + offsetY;
533555

534556
root.style.setProperty(`--x${i}`, `${cx}%`);
535557
root.style.setProperty(`--y${i}`, `${cy}%`);
536-
root.style.setProperty(`--r${i}`, `${blobSize}%`);
537558
}
538559
});
539-
540-
// Navigation scroll behavior
541-
document.addEventListener('DOMContentLoaded', function() {
542-
const nav = document.querySelector('.nav');
543-
const body = document.body;
544-
const scrollThreshold = 300;
545-
546-
function handleScroll() {
547-
const currentScrollY = window.scrollY;
548-
549-
if (currentScrollY > scrollThreshold) {
550-
nav.classList.add('nav-visible');
551-
body.classList.add('nav-visible');
552-
} else {
553-
nav.classList.remove('nav-visible');
554-
body.classList.remove('nav-visible');
555-
}
556-
}
557-
558-
// Throttle scroll events for performance
559-
let ticking = false;
560-
function updateNav() {
561-
handleScroll();
562-
ticking = false;
563-
}
564-
565-
window.addEventListener('scroll', function() {
566-
if (!ticking) {
567-
requestAnimationFrame(updateNav);
568-
ticking = true;
569-
}
570-
});
571-
572-
// Handle keyboard accessibility
573-
document.addEventListener('keydown', function(e) {
574-
if (e.key === 'Escape') {
575-
nav.classList.remove('nav-visible');
576-
body.classList.remove('nav-visible');
577-
}
578-
});
579-
});
580560
</script>
581561
</body>
582562

‎docs/website/index.html.hbs‎

Lines changed: 31 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -188,66 +188,48 @@
188188
</div>
189189
</footer>
190190
<script>
191+
// Initialize positions to match CSS exactly
192+
document.addEventListener('DOMContentLoaded', function() {
193+
const root = document.documentElement;
194+
195+
// Set initial positions to exactly match CSS defaults
196+
root.style.setProperty('--x1', '20%');
197+
root.style.setProperty('--y1', '20%');
198+
root.style.setProperty('--x2', '75%');
199+
root.style.setProperty('--y2', '25%');
200+
root.style.setProperty('--x3', '50%');
201+
root.style.setProperty('--y3', '50%');
202+
});
203+
191204
window.addEventListener("scroll", () => {
192205
const t = window.scrollY / (document.body.scrollHeight - window.innerHeight);
193206
const root = document.documentElement;
194207
195-
const ease = (x) => 0.5 - Math.cos(x * Math.PI) / 2; // smooth easing
196-
197-
// Update positions and radii
208+
// Original animation formula but adjusted to start from CSS positions
198209
for (let i = 1; i <= 3; i++) {
199210
const angle = t * Math.PI * 2 + i;
200-
const radius = 15 + 5 * (i % 2); // motion amplitude
201-
const blobSize = 25 + 10 * Math.sin(t * Math.PI * 2 + i); // animated radius %
202-
const cx = 50 + radius * Math.cos(angle + i);
203-
const cy = 50 + radius * Math.sin(angle + i * 0.5);
211+
const radius = 15 + 5 * (i % 2); // original motion amplitude
212+
213+
// Calculate what the original formula produces at t=0
214+
const angle0 = 0 * Math.PI * 2 + i; // t=0
215+
const baseX = 50 + radius * Math.cos(angle0 + i);
216+
const baseY = 50 + radius * Math.sin(angle0 + i * 0.5);
217+
218+
// Calculate current animation position
219+
const animX = 50 + radius * Math.cos(angle + i);
220+
const animY = 50 + radius * Math.sin(angle + i * 0.5);
221+
222+
// Apply offset to match CSS starting positions
223+
const offsetX = (i === 1) ? 20 - baseX : (i === 2) ? 75 - baseX : 50 - baseX;
224+
const offsetY = (i === 1) ? 20 - baseY : (i === 2) ? 25 - baseY : 50 - baseY;
225+
226+
const cx = animX + offsetX;
227+
const cy = animY + offsetY;
204228
205229
root.style.setProperty(`--x${i}`, `${cx}%`);
206230
root.style.setProperty(`--y${i}`, `${cy}%`);
207-
root.style.setProperty(`--r${i}`, `${blobSize}%`);
208231
}
209232
});
210-
211-
// Navigation scroll behavior
212-
document.addEventListener('DOMContentLoaded', function() {
213-
const nav = document.querySelector('.nav');
214-
const body = document.body;
215-
const scrollThreshold = 300;
216-
217-
function handleScroll() {
218-
const currentScrollY = window.scrollY;
219-
220-
if (currentScrollY > scrollThreshold) {
221-
nav.classList.add('nav-visible');
222-
body.classList.add('nav-visible');
223-
} else {
224-
nav.classList.remove('nav-visible');
225-
body.classList.remove('nav-visible');
226-
}
227-
}
228-
229-
// Throttle scroll events for performance
230-
let ticking = false;
231-
function updateNav() {
232-
handleScroll();
233-
ticking = false;
234-
}
235-
236-
window.addEventListener('scroll', function() {
237-
if (!ticking) {
238-
requestAnimationFrame(updateNav);
239-
ticking = true;
240-
}
241-
});
242-
243-
// Handle keyboard accessibility
244-
document.addEventListener('keydown', function(e) {
245-
if (e.key === 'Escape') {
246-
nav.classList.remove('nav-visible');
247-
body.classList.remove('nav-visible');
248-
}
249-
});
250-
});
251233
</script>
252234
</body>
253235

‎docs/website/styles.css‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1860,7 +1860,15 @@ a[aria-busy=true], button[aria-busy=true], input[type=button][aria-busy=true], i
18601860
:root {
18611861
--icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
18621862
--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
1863-
--icon-check-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.75)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E")
1863+
--icon-check-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.75)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
1864+
1865+
/* Background animation variables */
1866+
--x1: 20%;
1867+
--y1: 20%;
1868+
--x2: 75%;
1869+
--y2: 25%;
1870+
--x3: 50%;
1871+
--y3: 50%;
18641872
}
18651873

18661874
:root:not([data-theme=dark]), [data-theme=light] {
@@ -2768,9 +2776,9 @@ html {
27682776
padding: 0;
27692777
min-height: 100%;
27702778
background:
2771-
radial-gradient(ellipse 100% 100% at 20% 20%, rgba(89, 36, 99, 0.8), transparent 50%),
2772-
radial-gradient(ellipse 80% 120% at 75% 25%, rgba(138, 214, 236, 0.5), transparent 55%),
2773-
radial-gradient(ellipse 150% 90% at 50% 50%, rgba(40, 98, 114, 0.6), transparent 65%),
2779+
radial-gradient(ellipse 100% 100% at var(--x1) var(--y1), rgba(89, 36, 99, 0.8), transparent 50%),
2780+
radial-gradient(ellipse 80% 120% at var(--x2) var(--y2), rgba(138, 214, 236, 0.5), transparent 55%),
2781+
radial-gradient(ellipse 150% 90% at var(--x3) var(--y3), rgba(40, 98, 114, 0.6), transparent 65%),
27742782
radial-gradient(ellipse 100% 100% at 80% 100%, rgba(89, 36, 99, 0.8), transparent 60%),
27752783
linear-gradient(135deg, #124B83, #124B83, #124B83);
27762784
background-blend-mode: normal;
@@ -2867,16 +2875,10 @@ nav {
28672875
top: 0;
28682876
left: 0;
28692877
right: 0;
2870-
transform: translateY(-100%);
2871-
transition: transform 0.3s ease-in-out;
28722878
backdrop-filter: blur(10px);
28732879
-webkit-backdrop-filter: blur(10px);
28742880
}
28752881

2876-
.nav.nav-visible {
2877-
transform: translateY(0);
2878-
}
2879-
28802882
.nav .logo {
28812883
display: flex;
28822884
align-items: center;

0 commit comments

Comments
 (0)