Skip to content

Commit fc7f542

Browse files
julioestjulioest
committed
style: remove navbar ux and refine background gradient
1 parent 3dc8bf4 commit fc7f542

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

‎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)