Skip to content

Commit 0610005

Browse files
nickteffnickteff
authored
some mobile improvements (#11)
1 parent df9a7fe commit 0610005

16 files changed

Lines changed: 838 additions & 246 deletions

File tree

‎output/about.html‎

Lines changed: 63 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -87,29 +87,39 @@
8787
<nav class="bg-white shadow-xl w-full z-50 fixed top-0 left-0 right-0 border-b border-slate-100">
8888
<div class="container mx-auto px-4 py-4">
8989
<div class="flex justify-between items-center">
90-
<a class="flex items-center group" href="https://www.pineydata.com/">
90+
<a class="flex items-center group" href="/">
9191
<img src="/images/piney.png" alt="Piney Data Logo" class="w-12 h-12 mr-3 group-hover:scale-110 transition-transform duration-300">
9292
<span class="font-display font-bold text-xl text-primary group-hover:text-secondary transition-colors duration-300">Piney Data</span>
9393
</a>
9494
<div class="hidden md:flex items-center space-x-12 ml-auto mr-8">
95-
<a href="https://www.pineydata.com/about" class="text-gray-600 hover:text-primary transition-colors duration-300 font-medium">About</a>
96-
<a href="https://www.pineydata.com/partners" class="text-gray-600 hover:text-primary transition-colors duration-300 font-medium">Partners</a>
97-
<a href="https://www.pineydata.com/faq" class="text-gray-600 hover:text-primary transition-colors duration-300 font-medium">FAQ</a>
98-
<a href="https://www.pineydata.com/contact" class="text-gray-600 hover:text-primary transition-colors duration-300 font-medium">Contact</a>
95+
<a href="/about" class="text-gray-600 hover:text-primary transition-colors duration-300 font-medium">About</a>
96+
<a href="/partners" class="text-gray-600 hover:text-primary transition-colors duration-300 font-medium">Partners</a>
97+
<a href="/faq" class="text-gray-600 hover:text-primary transition-colors duration-300 font-medium">FAQ</a>
98+
<a href="/contact" class="text-gray-600 hover:text-primary transition-colors duration-300 font-medium">Contact</a>
99+
</div>
100+
<div class="flex items-center space-x-4">
101+
<a href="https://calendly.com/pineydata/" target="_blank" rel="noopener noreferrer"
102+
class="hidden md:block bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-full text-sm font-semibold transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1">
103+
Book a Free Consult
104+
</a>
105+
<button class="md:hidden text-gray-600 hover:text-primary transition-colors duration-300" id="mobile-menu-button" aria-label="Menu">
106+
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
107+
<path class="menu-icon" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
108+
<path class="close-icon hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
109+
</svg>
110+
</button>
99111
</div>
100-
<a href="https://calendly.com/pineydata/" target="_blank" rel="noopener noreferrer"
101-
class="hidden md:block bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-full text-sm font-semibold transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1">
102-
Book a Free Consult
103-
</a>
104112
</div>
105113
</div>
106114
<!-- Mobile menu -->
107-
<div class="md:hidden hidden bg-white border-t border-slate-100" id="mobile-menu">
108-
<a class="block py-3 px-4 text-sm hover:bg-slate-50 transition-colors duration-200" href="https://www.pineydata.com/about">About</a>
109-
<a class="block py-3 px-4 text-sm hover:bg-slate-50 transition-colors duration-200" href="https://www.pineydata.com/partners">Partners</a>
110-
<a class="block py-3 px-4 text-sm hover:bg-slate-50 transition-colors duration-200" href="https://www.pineydata.com/faq">FAQ</a>
111-
<a class="block py-3 px-4 text-sm hover:bg-slate-50 transition-colors duration-200" href="https://www.pineydata.com/contact">Contact</a>
112-
<a class="block py-3 px-4 text-sm bg-primary text-white font-medium" href="https://calendly.com/pineydata/">Get Started</a>
115+
<div class="hidden bg-white border-t border-slate-100" id="mobile-menu">
116+
<div class="container mx-auto px-4 py-2 space-y-1">
117+
<a class="block py-3 px-4 text-gray-600 hover:text-primary hover:bg-slate-50 transition-colors duration-200 rounded-lg" href="/about">About</a>
118+
<a class="block py-3 px-4 text-gray-600 hover:text-primary hover:bg-slate-50 transition-colors duration-200 rounded-lg" href="/partners">Partners</a>
119+
<a class="block py-3 px-4 text-gray-600 hover:text-primary hover:bg-slate-50 transition-colors duration-200 rounded-lg" href="/faq">FAQ</a>
120+
<a class="block py-3 px-4 text-gray-600 hover:text-primary hover:bg-slate-50 transition-colors duration-200 rounded-lg" href="/contact">Contact</a>
121+
<a class="block py-3 px-4 text-white bg-primary hover:bg-primary/90 transition-colors duration-200 rounded-lg text-center mt-4" href="https://calendly.com/pineydata/">Book a Free Consult</a>
122+
</div>
113123
</div>
114124
</nav>
115125

@@ -347,19 +357,19 @@ <h3 class="font-display font-bold text-lg mb-4">Contact</h3>
347357
<h3 class="font-display font-bold text-lg mb-4">Quick Links</h3>
348358
<ul class="space-y-3">
349359
<li>
350-
<a href="https://www.pineydata.com/about"
360+
<a href="/about"
351361
class="text-slate-300 hover:text-primary transition-colors duration-300">
352362
About
353363
</a>
354364
</li>
355365
<li>
356-
<a href="https://www.pineydata.com/partners"
366+
<a href="/partners"
357367
class="text-slate-300 hover:text-primary transition-colors duration-300">
358368
Partners
359369
</a>
360370
</li>
361371
<li>
362-
<a href="https://www.pineydata.com/faq"
372+
<a href="/faq"
363373
class="text-slate-300 hover:text-primary transition-colors duration-300">
364374
FAQ
365375
</a>
@@ -371,6 +381,40 @@ <h3 class="font-display font-bold text-lg mb-4">Quick Links</h3>
371381
</footer>
372382

373383
<!-- Core theme JS-->
374-
<script src="https://www.pineydata.com/theme/js/scripts.js"></script>
384+
<script>
385+
document.addEventListener('DOMContentLoaded', function() {
386+
// Mobile menu toggle
387+
const menuButton = document.getElementById('mobile-menu-button');
388+
const mobileMenu = document.getElementById('mobile-menu');
389+
const menuIcon = menuButton.querySelector('.menu-icon');
390+
const closeIcon = menuButton.querySelector('.close-icon');
391+
392+
menuButton.addEventListener('click', function() {
393+
mobileMenu.classList.toggle('hidden');
394+
menuIcon.classList.toggle('hidden');
395+
closeIcon.classList.toggle('hidden');
396+
});
397+
398+
// Close mobile menu when clicking outside
399+
document.addEventListener('click', function(event) {
400+
const isClickInside = menuButton.contains(event.target) || mobileMenu.contains(event.target);
401+
402+
if (!isClickInside && !mobileMenu.classList.contains('hidden')) {
403+
mobileMenu.classList.add('hidden');
404+
menuIcon.classList.remove('hidden');
405+
closeIcon.classList.add('hidden');
406+
}
407+
});
408+
409+
// Close mobile menu when window is resized to desktop size
410+
window.addEventListener('resize', function() {
411+
if (window.innerWidth >= 768 && !mobileMenu.classList.contains('hidden')) {
412+
mobileMenu.classList.add('hidden');
413+
menuIcon.classList.remove('hidden');
414+
closeIcon.classList.add('hidden');
415+
}
416+
});
417+
});
418+
</script>
375419
</body>
376420
</html>

‎output/approach.html‎

Lines changed: 63 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -87,29 +87,39 @@
8787
<nav class="bg-white shadow-xl w-full z-50 fixed top-0 left-0 right-0 border-b border-slate-100">
8888
<div class="container mx-auto px-4 py-4">
8989
<div class="flex justify-between items-center">
90-
<a class="flex items-center group" href="https://www.pineydata.com/">
90+
<a class="flex items-center group" href="/">
9191
<img src="/images/piney.png" alt="Piney Data Logo" class="w-12 h-12 mr-3 group-hover:scale-110 transition-transform duration-300">
9292
<span class="font-display font-bold text-xl text-primary group-hover:text-secondary transition-colors duration-300">Piney Data</span>
9393
</a>
9494
<div class="hidden md:flex items-center space-x-12 ml-auto mr-8">
95-
<a href="https://www.pineydata.com/about" class="text-gray-600 hover:text-primary transition-colors duration-300 font-medium">About</a>
96-
<a href="https://www.pineydata.com/partners" class="text-gray-600 hover:text-primary transition-colors duration-300 font-medium">Partners</a>
97-
<a href="https://www.pineydata.com/faq" class="text-gray-600 hover:text-primary transition-colors duration-300 font-medium">FAQ</a>
98-
<a href="https://www.pineydata.com/contact" class="text-gray-600 hover:text-primary transition-colors duration-300 font-medium">Contact</a>
95+
<a href="/about" class="text-gray-600 hover:text-primary transition-colors duration-300 font-medium">About</a>
96+
<a href="/partners" class="text-gray-600 hover:text-primary transition-colors duration-300 font-medium">Partners</a>
97+
<a href="/faq" class="text-gray-600 hover:text-primary transition-colors duration-300 font-medium">FAQ</a>
98+
<a href="/contact" class="text-gray-600 hover:text-primary transition-colors duration-300 font-medium">Contact</a>
99+
</div>
100+
<div class="flex items-center space-x-4">
101+
<a href="https://calendly.com/pineydata/" target="_blank" rel="noopener noreferrer"
102+
class="hidden md:block bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-full text-sm font-semibold transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1">
103+
Book a Free Consult
104+
</a>
105+
<button class="md:hidden text-gray-600 hover:text-primary transition-colors duration-300" id="mobile-menu-button" aria-label="Menu">
106+
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
107+
<path class="menu-icon" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
108+
<path class="close-icon hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
109+
</svg>
110+
</button>
99111
</div>
100-
<a href="https://calendly.com/pineydata/" target="_blank" rel="noopener noreferrer"
101-
class="hidden md:block bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-full text-sm font-semibold transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1">
102-
Book a Free Consult
103-
</a>
104112
</div>
105113
</div>
106114
<!-- Mobile menu -->
107-
<div class="md:hidden hidden bg-white border-t border-slate-100" id="mobile-menu">
108-
<a class="block py-3 px-4 text-sm hover:bg-slate-50 transition-colors duration-200" href="https://www.pineydata.com/about">About</a>
109-
<a class="block py-3 px-4 text-sm hover:bg-slate-50 transition-colors duration-200" href="https://www.pineydata.com/partners">Partners</a>
110-
<a class="block py-3 px-4 text-sm hover:bg-slate-50 transition-colors duration-200" href="https://www.pineydata.com/faq">FAQ</a>
111-
<a class="block py-3 px-4 text-sm hover:bg-slate-50 transition-colors duration-200" href="https://www.pineydata.com/contact">Contact</a>
112-
<a class="block py-3 px-4 text-sm bg-primary text-white font-medium" href="https://calendly.com/pineydata/">Get Started</a>
115+
<div class="hidden bg-white border-t border-slate-100" id="mobile-menu">
116+
<div class="container mx-auto px-4 py-2 space-y-1">
117+
<a class="block py-3 px-4 text-gray-600 hover:text-primary hover:bg-slate-50 transition-colors duration-200 rounded-lg" href="/about">About</a>
118+
<a class="block py-3 px-4 text-gray-600 hover:text-primary hover:bg-slate-50 transition-colors duration-200 rounded-lg" href="/partners">Partners</a>
119+
<a class="block py-3 px-4 text-gray-600 hover:text-primary hover:bg-slate-50 transition-colors duration-200 rounded-lg" href="/faq">FAQ</a>
120+
<a class="block py-3 px-4 text-gray-600 hover:text-primary hover:bg-slate-50 transition-colors duration-200 rounded-lg" href="/contact">Contact</a>
121+
<a class="block py-3 px-4 text-white bg-primary hover:bg-primary/90 transition-colors duration-200 rounded-lg text-center mt-4" href="https://calendly.com/pineydata/">Book a Free Consult</a>
122+
</div>
113123
</div>
114124
</nav>
115125

@@ -375,19 +385,19 @@ <h3 class="font-display font-bold text-lg mb-4">Contact</h3>
375385
<h3 class="font-display font-bold text-lg mb-4">Quick Links</h3>
376386
<ul class="space-y-3">
377387
<li>
378-
<a href="https://www.pineydata.com/about"
388+
<a href="/about"
379389
class="text-slate-300 hover:text-primary transition-colors duration-300">
380390
About
381391
</a>
382392
</li>
383393
<li>
384-
<a href="https://www.pineydata.com/partners"
394+
<a href="/partners"
385395
class="text-slate-300 hover:text-primary transition-colors duration-300">
386396
Partners
387397
</a>
388398
</li>
389399
<li>
390-
<a href="https://www.pineydata.com/faq"
400+
<a href="/faq"
391401
class="text-slate-300 hover:text-primary transition-colors duration-300">
392402
FAQ
393403
</a>
@@ -399,6 +409,40 @@ <h3 class="font-display font-bold text-lg mb-4">Quick Links</h3>
399409
</footer>
400410

401411
<!-- Core theme JS-->
402-
<script src="https://www.pineydata.com/theme/js/scripts.js"></script>
412+
<script>
413+
document.addEventListener('DOMContentLoaded', function() {
414+
// Mobile menu toggle
415+
const menuButton = document.getElementById('mobile-menu-button');
416+
const mobileMenu = document.getElementById('mobile-menu');
417+
const menuIcon = menuButton.querySelector('.menu-icon');
418+
const closeIcon = menuButton.querySelector('.close-icon');
419+
420+
menuButton.addEventListener('click', function() {
421+
mobileMenu.classList.toggle('hidden');
422+
menuIcon.classList.toggle('hidden');
423+
closeIcon.classList.toggle('hidden');
424+
});
425+
426+
// Close mobile menu when clicking outside
427+
document.addEventListener('click', function(event) {
428+
const isClickInside = menuButton.contains(event.target) || mobileMenu.contains(event.target);
429+
430+
if (!isClickInside && !mobileMenu.classList.contains('hidden')) {
431+
mobileMenu.classList.add('hidden');
432+
menuIcon.classList.remove('hidden');
433+
closeIcon.classList.add('hidden');
434+
}
435+
});
436+
437+
// Close mobile menu when window is resized to desktop size
438+
window.addEventListener('resize', function() {
439+
if (window.innerWidth >= 768 && !mobileMenu.classList.contains('hidden')) {
440+
mobileMenu.classList.add('hidden');
441+
menuIcon.classList.remove('hidden');
442+
closeIcon.classList.add('hidden');
443+
}
444+
});
445+
});
446+
</script>
403447
</body>
404448
</html>

0 commit comments

Comments
 (0)