diff --git a/public/assets/css/styles.css b/public/assets/css/styles.css index fb2a78a..35e0bb3 100644 --- a/public/assets/css/styles.css +++ b/public/assets/css/styles.css @@ -1,18 +1,10 @@ -:target::before { - content: ""; - display: block; - height: 4rem; - margin-top: -4rem; - visibility: hidden; -} - -nav.bg-body { - background-color: rgba(var(--bs-body-bg-rgb), 0.7) !important; +nav { + background-color: rgba(22, 23, 25, 0.4) !important; transition: background-color 0.5s; } -body.is-scrolled nav.bg-body { - background-color: rgba(var(--bs-body-bg-rgb), 1.0) !important; +body.is-scrolled nav { + background-color: rgba(22, 23, 25, 1.0) !important; } .navbar-collapse:not(.collapsing):not(.show) { @@ -25,20 +17,33 @@ body.is-scrolled nav.bg-body { padding-left: var(--bs-navbar-nav-link-padding-x); } -section.hero { - position: relative; +.hero { height: 100vh; - overflow: hidden; } -section.hero video { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - object-fit: cover; - z-index: -1; +.row { + --bs-gutter-y: var(--bs-gutter-x); +} + +.text-shadow { + text-shadow: + -1px -1px 1px rgba(0, 0, 0, 0.4), + -1px 0px 1px rgba(0, 0, 0, 0.4), + -1px 1px 1px rgba(0, 0, 0, 0.4), + 0px -1px 1px rgba(0, 0, 0, 0.4), + 0px 0px 1px rgba(0, 0, 0, 0.4), + 0px 1px 1px rgba(0, 0, 0, 0.4), + 1px -1px 1px rgba(0, 0, 0, 0.4), + 1px 0px 1px rgba(0, 0, 0, 0.4), + 1px 1px 1px rgba(0, 0, 0, 0.4); +} + +:target::before { + content: ""; + display: block; + height: 4rem; + margin-top: -4rem; + visibility: hidden; } .anchor-link { @@ -56,19 +61,8 @@ h6:hover .anchor-link { opacity: 1; } -.text-shadow { - text-shadow: - -1px -1px 3px rgba(0, 0, 0, 0.3), - -1px 0px 3px rgba(0, 0, 0, 0.3), - -1px 1px 3px rgba(0, 0, 0, 0.3), - 0px -1px 3px rgba(0, 0, 0, 0.3), - 0px 0px 3px rgba(0, 0, 0, 0.3), - 0px 1px 3px rgba(0, 0, 0, 0.3), - 1px -1px 3px rgba(0, 0, 0, 0.3), - 1px 0px 3px rgba(0, 0, 0, 0.3), - 1px 1px 3px rgba(0, 0, 0, 0.3); -} - +.cover, +.parallax, .card-img { position: absolute; top: 0; @@ -78,6 +72,10 @@ h6:hover .anchor-link { object-fit: cover; } +.parallax { + height: 100vh; +} + .card-img-overlay { position: unset; z-index: 1; diff --git a/public/assets/js/navigation.js b/public/assets/js/navigation.js index 516eb8b..d58fe13 100644 --- a/public/assets/js/navigation.js +++ b/public/assets/js/navigation.js @@ -1,7 +1,7 @@ /** - * @type {HTMLVideoElement} + * @type {NodeListOf} */ -const heroVid = document.querySelector('.hero video'); +const parallaxElems = document.querySelectorAll('.parallax'); /** * @type {NodeListOf} @@ -20,13 +20,24 @@ window.addEventListener('scroll', () => document.body.classList.toggle('is-scrolled', window.scrollY > 0); // Parallax effect. - heroVid.style.top = `${window.scrollY / 3}px`; + parallaxElems.forEach(parallaxElem => + { + const parentElem = parallaxElem.parentElement; + + const parentRect = parentElem.getBoundingClientRect(); + const parentScroll = parentRect.top + (parentRect.height / 2); + + const windowScroll = window.scrollY + (window.innerHeight / 2); + + parallaxElem.style.top = `${(windowScroll - parentScroll) / 4}px`; + }); // Highlight menu item when scrolled to section. let current = ''; sections.forEach(section => { - const sectionTop = section.offsetTop; + const rect = section.getBoundingClientRect(); + const sectionTop = rect.top + window.scrollY; if (window.scrollY >= sectionTop - 70) { @@ -45,14 +56,26 @@ window.addEventListener('scroll', () => }); }); -document.querySelectorAll('h1, h2').forEach(header => +sections.forEach(section => { - if (header.id) + if (section.id) { const anchor = document.createElement('a'); anchor.className = 'anchor-link'; - anchor.href = `#${header.id}`; + anchor.href = `#${section.id}`; anchor.innerHTML = ' # '; - header.appendChild(anchor); + section.appendChild(anchor); } +}); + +document.querySelectorAll('#navbarNav li.nav-item>a').forEach(anchor => +{ + anchor.addEventListener('click', () => + { + /** + * @type {HTMLButtonElement} + */ + const navbarNav = document.querySelector('button.navbar-toggler[aria-expanded="true"]'); + navbarNav?.click(); + }); }); \ No newline at end of file diff --git a/public/assets/static/20230909_150343.jpg b/public/assets/static/20230909_150343.jpg new file mode 100644 index 0000000..f4a4bbf Binary files /dev/null and b/public/assets/static/20230909_150343.jpg differ diff --git a/public/assets/static/audience-1850119_640.jpg b/public/assets/static/audience-1850119_640.jpg new file mode 100644 index 0000000..b726bac Binary files /dev/null and b/public/assets/static/audience-1850119_640.jpg differ diff --git a/public/assets/static/coffee-2306471_640.jpg b/public/assets/static/coffee-2306471_640.jpg new file mode 100644 index 0000000..e6055ff Binary files /dev/null and b/public/assets/static/coffee-2306471_640.jpg differ diff --git a/public/assets/static/fittings-2784899_640.jpg b/public/assets/static/fittings-2784899_640.jpg new file mode 100644 index 0000000..b4c54d0 Binary files /dev/null and b/public/assets/static/fittings-2784899_640.jpg differ diff --git a/public/assets/static/love-6600904_640.jpg b/public/assets/static/love-6600904_640.jpg new file mode 100644 index 0000000..65fa505 Binary files /dev/null and b/public/assets/static/love-6600904_640.jpg differ diff --git a/public/assets/static/motor-cross-1634206_640.jpg b/public/assets/static/motor-cross-1634206_640.jpg new file mode 100644 index 0000000..a43f6d6 Binary files /dev/null and b/public/assets/static/motor-cross-1634206_640.jpg differ diff --git a/public/includes/footer.html b/public/includes/footer.html index ec51139..c77a175 100644 --- a/public/includes/footer.html +++ b/public/includes/footer.html @@ -1,4 +1,38 @@ -