Skip to content

Commit 031c486

Browse files
julioestjulioest
committed
style: update navigation layout and add nav scroll behavior
1 parent f4df92d commit 031c486

File tree

3 files changed

+350
-94
lines changed

3 files changed

+350
-94
lines changed

‎docs/website/index.html

Lines changed: 70 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -25,25 +25,22 @@
2525
</head>
2626

2727
<body>
28-
<nav class="container-fluid">
29-
<ul>
30-
<li><strong style="margin-left: 10px">MrDocs</strong></li>
31-
</ul>
32-
<ul>
33-
<li><a href="#examples" class="secondary">Examples</a></li>
34-
<li><a href="#features" class="secondary">Features</a></li>
35-
<li><a href="./docs/" class="secondary">Docs</a></li>
36-
<li>
37-
<a href="https://www.github.com/cppalliance/mrdocs" class="contrast" aria-label=" GitHub repository">
38-
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg"
39-
viewBox="0 0 496 512" height="16px">
40-
<path fill="currentColor"
41-
d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z">
42-
</path>
43-
</svg>
44-
</a>
45-
</li>
46-
</ul>
28+
<nav class="nav container-fluid" role="navigation" aria-label="Main navigation">
29+
<div class="logo nav-section">
30+
<a href="/" class="logo-link" aria-label="MrDocs Home">
31+
<div class="boxicon box-shape1">
32+
<div class="inner-box mrdocs" aria-hidden="true"></div>
33+
</div>
34+
<span class="logo-text">MrDocs</span>
35+
</a>
36+
</div>
37+
<div class="nav-section">
38+
<ul role="menubar">
39+
<li role="none"><a href="#examples" class="secondary" role="menuitem">Examples</a></li>
40+
<li role="none"><a href="#features" class="secondary" role="menuitem">Features</a></li>
41+
<li role="none"><a href="./docs/" class="secondary" role="menuitem">Docs</a></li>
42+
</ul>
43+
</div>
4744
</nav>
4845
<header>
4946
<div class="container">
@@ -475,22 +472,64 @@ <h3>Parameters</h3>
475472
</footer>
476473
<script>
477474
window.addEventListener("scroll", () => {
478-
const scrollY = window.scrollY;
479-
const maxScroll = document.body.scrollHeight - window.innerHeight;
480-
const t = scrollY / maxScroll;
475+
const t = window.scrollY / (document.body.scrollHeight - window.innerHeight);
476+
const root = document.documentElement;
481477

482-
// Update each blob's position based on scroll
483-
document.documentElement.style.setProperty('--x1', `${25 + 10 * Math.sin(t * 2 * Math.PI)}%`);
484-
document.documentElement.style.setProperty('--y1', `${75 - 20 * t}%`);
478+
const ease = (x) => 0.5 - Math.cos(x * Math.PI) / 2; // smooth easing
485479

486-
document.documentElement.style.setProperty('--x2', `${75 - 10 * Math.cos(t * 2 * Math.PI)}%`);
487-
document.documentElement.style.setProperty('--y2', `${25 + 10 * t}%`);
480+
// Update positions and radii
481+
for (let i = 1; i <= 3; i++) {
482+
const angle = t * Math.PI * 2 + i;
483+
const radius = 15 + 5 * (i % 2); // motion amplitude
484+
const blobSize = 25 + 10 * Math.sin(t * Math.PI * 2 + i); // animated radius %
485+
const cx = 50 + radius * Math.cos(angle + i);
486+
const cy = 50 + radius * Math.sin(angle + i * 0.5);
488487

489-
document.documentElement.style.setProperty('--x3', `${50 + 5 * Math.sin(t * Math.PI)}%`);
490-
document.documentElement.style.setProperty('--y3', `${50 + 5 * Math.cos(t * Math.PI)}%`);
488+
root.style.setProperty(`--x${i}`, `${cx}%`);
489+
root.style.setProperty(`--y${i}`, `${cy}%`);
490+
root.style.setProperty(`--r${i}`, `${blobSize}%`);
491+
}
492+
});
491493

492-
document.documentElement.style.setProperty('--x4', `${60 - 10 * t}%`);
493-
document.documentElement.style.setProperty('--y4', `${80 - 30 * t}%`);
494+
// Navigation scroll behavior
495+
document.addEventListener('DOMContentLoaded', function() {
496+
const nav = document.querySelector('.nav');
497+
const body = document.body;
498+
const scrollThreshold = 100; // Show nav after 100px scroll
499+
500+
function handleScroll() {
501+
const currentScrollY = window.scrollY;
502+
503+
if (currentScrollY > scrollThreshold) {
504+
nav.classList.add('nav-visible');
505+
body.classList.add('nav-visible');
506+
} else {
507+
nav.classList.remove('nav-visible');
508+
body.classList.remove('nav-visible');
509+
}
510+
}
511+
512+
// Throttle scroll events for performance
513+
let ticking = false;
514+
function updateNav() {
515+
handleScroll();
516+
ticking = false;
517+
}
518+
519+
window.addEventListener('scroll', function() {
520+
if (!ticking) {
521+
requestAnimationFrame(updateNav);
522+
ticking = true;
523+
}
524+
});
525+
526+
// Handle keyboard accessibility
527+
document.addEventListener('keydown', function(e) {
528+
if (e.key === 'Escape') {
529+
nav.classList.remove('nav-visible');
530+
body.classList.remove('nav-visible');
531+
}
532+
});
494533
});
495534
</script>
496535
</body>

‎docs/website/index.html.hbs

Lines changed: 68 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -36,25 +36,22 @@
3636
</head>
3737

3838
<body>
39-
<nav class="container-fluid">
40-
<ul>
41-
<li><strong style="margin-left: 10px">{{ page.title }}</strong></li>
42-
</ul>
43-
<ul>
39+
<nav class="nav container-fluid" role="navigation" aria-label="Main navigation">
40+
<div class="logo nav-section">
41+
<a href="/" class="logo-link" aria-label="MrDocs Home">
42+
<div class="boxicon box-shape1">
43+
<div class="inner-box mrdocs" aria-hidden="true"></div>
44+
</div>
45+
<span class="logo-text">{{ page.title }}</span>
46+
</a>
47+
</div>
48+
<div class="nav-section">
49+
<ul role="menubar">
4450
{{#each navbar}}
45-
<li><a href="{{ href }}" class="secondary">{{ title }}</a></li>
51+
<li role="none"><a href="{{ href }}" class="secondary" role="menuitem">{{ title }}</a></li>
4652
{{/each}}
47-
<li>
48-
<a href="{{ site.github.url }}" class="contrast" aria-label="{{ site.title}} GitHub repository">
49-
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg"
50-
viewBox="0 0 496 512" height="16px">
51-
<path fill="currentColor"
52-
d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z">
53-
</path>
54-
</svg>
55-
</a>
56-
</li>
57-
</ul>
53+
</ul>
54+
</div>
5855
</nav>
5956
<header>
6057
<div class="container">
@@ -161,22 +158,64 @@
161158
</footer>
162159
<script>
163160
window.addEventListener("scroll", () => {
164-
const scrollY = window.scrollY;
165-
const maxScroll = document.body.scrollHeight - window.innerHeight;
166-
const t = scrollY / maxScroll;
161+
const t = window.scrollY / (document.body.scrollHeight - window.innerHeight);
162+
const root = document.documentElement;
167163
168-
// Update each blob's position based on scroll
169-
document.documentElement.style.setProperty('--x1', `${25 + 10 * Math.sin(t * 2 * Math.PI)}%`);
170-
document.documentElement.style.setProperty('--y1', `${75 - 20 * t}%`);
164+
const ease = (x) => 0.5 - Math.cos(x * Math.PI) / 2; // smooth easing
171165
172-
document.documentElement.style.setProperty('--x2', `${75 - 10 * Math.cos(t * 2 * Math.PI)}%`);
173-
document.documentElement.style.setProperty('--y2', `${25 + 10 * t}%`);
166+
// Update positions and radii
167+
for (let i = 1; i <= 3; i++) {
168+
const angle = t * Math.PI * 2 + i;
169+
const radius = 15 + 5 * (i % 2); // motion amplitude
170+
const blobSize = 25 + 10 * Math.sin(t * Math.PI * 2 + i); // animated radius %
171+
const cx = 50 + radius * Math.cos(angle + i);
172+
const cy = 50 + radius * Math.sin(angle + i * 0.5);
174173
175-
document.documentElement.style.setProperty('--x3', `${50 + 5 * Math.sin(t * Math.PI)}%`);
176-
document.documentElement.style.setProperty('--y3', `${50 + 5 * Math.cos(t * Math.PI)}%`);
174+
root.style.setProperty(`--x${i}`, `${cx}%`);
175+
root.style.setProperty(`--y${i}`, `${cy}%`);
176+
root.style.setProperty(`--r${i}`, `${blobSize}%`);
177+
}
178+
});
177179
178-
document.documentElement.style.setProperty('--x4', `${60 - 10 * t}%`);
179-
document.documentElement.style.setProperty('--y4', `${80 - 30 * t}%`);
180+
// Navigation scroll behavior
181+
document.addEventListener('DOMContentLoaded', function() {
182+
const nav = document.querySelector('.nav');
183+
const body = document.body;
184+
const scrollThreshold = 100; // Show nav after 100px scroll
185+
186+
function handleScroll() {
187+
const currentScrollY = window.scrollY;
188+
189+
if (currentScrollY > scrollThreshold) {
190+
nav.classList.add('nav-visible');
191+
body.classList.add('nav-visible');
192+
} else {
193+
nav.classList.remove('nav-visible');
194+
body.classList.remove('nav-visible');
195+
}
196+
}
197+
198+
// Throttle scroll events for performance
199+
let ticking = false;
200+
function updateNav() {
201+
handleScroll();
202+
ticking = false;
203+
}
204+
205+
window.addEventListener('scroll', function() {
206+
if (!ticking) {
207+
requestAnimationFrame(updateNav);
208+
ticking = true;
209+
}
210+
});
211+
212+
// Handle keyboard accessibility
213+
document.addEventListener('keydown', function(e) {
214+
if (e.key === 'Escape') {
215+
nav.classList.remove('nav-visible');
216+
body.classList.remove('nav-visible');
217+
}
218+
});
180219
});
181220
</script>
182221
</body>

0 commit comments

Comments
 (0)