bvandevliet/Vandevliet.AerialShots.Website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Some small fixes and optimizations.

Browse source
This commit is contained in:
Bob Vandevliet 2024-07-13 18:09:28 +02:00
parent 39c2c3d8c4
commit 8c2cfa180d
5 changed files with 121 additions and 106 deletions
Download patch file Download diff file Expand all files Collapse all files

81
src/js/scripts.js
View file

@ -1,53 +1,56 @@
/**
* @type {NodeListOf<HTMLVideoElement>}
*/
const parallaxElems = document.querySelectorAll('.parallax');
// Handle scroll events.
window.addEventListener('scroll', () =>
document.addEventListener('DOMContentLoaded', () =>
{
/**
* @type {NodeListOf<HTMLVideoElement>}
*/
const parallaxElems = document.querySelectorAll('.parallax');
// Handle scroll events.
window.addEventListener('scroll', () =>
{
// Add class to body when scrolled.
document.body.classList.toggle('is-scrolled', window.scrollY > 0);
document.body.classList.toggle('is-scrolled', window.scrollY > 0);
// Parallax effect.
parallaxElems.forEach(parallaxElem =>
{
const parentElem = parallaxElem.parentElement;
// Parallax effect.
parallaxElems.forEach(parallaxElem =>
{
const parentElem = parallaxElem.parentElement;
const parentRect = parentElem.getBoundingClientRect();
const parentScroll = parentRect.top + (parentRect.height / 2);
const parentRect = parentElem.getBoundingClientRect();
const parentScroll = parentRect.top + (parentRect.height / 2);
const windowScroll = window.scrollY + (window.innerHeight / 2);
const windowScroll = window.scrollY + (window.innerHeight / 2);
parallaxElem.style.top = `${(windowScroll - parentScroll) / 4}px`;
parallaxElem.style.top = `${(windowScroll - parentScroll) / 4}px`;
});
});
});
/**
* @type {NodeListOf<HTMLElement>}
*/
const sections = document.querySelectorAll('.section');
/**
* @type {NodeListOf<HTMLElement>}
*/
const sections = document.querySelectorAll('.section');
sections.forEach(section =>
{
if (section.id)
sections.forEach(section =>
{
const anchor = document.createElement('a');
anchor.className = 'anchor-link';
anchor.href = `#${section.id}`;
anchor.innerHTML = ' #&nbsp;';
section.appendChild(anchor);
}
});
if (section.id)
{
const anchor = document.createElement('a');
anchor.className = 'anchor-link';
anchor.href = `#${section.id}`;
anchor.innerHTML = ' #&nbsp;';
section.appendChild(anchor);
}
});
document.querySelectorAll('#navbarNav li.nav-item>a').forEach(anchor =>
{
anchor.addEventListener('click', () =>
document.querySelectorAll('#navbarNav li.nav-item>a').forEach(anchor =>
{
/**
* @type {HTMLButtonElement}
*/
const navbarNav = document.querySelector('button.navbar-toggler[aria-expanded="true"]');
navbarNav?.click();
anchor.addEventListener('click', () =>
{
/**
* @type {HTMLButtonElement}
*/
const navbarNav = document.querySelector('button.navbar-toggler[aria-expanded="true"]');
navbarNav?.click();
});
});
});

82
src/scss/styles.scss
View file

@ -3,7 +3,7 @@
// $enable-shadows: true;
// Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/functions";
// scss-docs-start color-variables
$red: #cc2929; // Default: #dc3545
@ -12,54 +12,54 @@ $red: #cc2929; // Default: #dc3545
$primary: $red; // Default: $blue
// Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/variables-dark";
@import "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/variables-dark";
// Include any default map overrides here
// Include remainder of required parts
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
@import "../../node_modules/bootstrap/scss/maps";
@import "../../node_modules/bootstrap/scss/mixins";
@import "../../node_modules/bootstrap/scss/root";
// Include any other parts as needed
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/nav";
@import "../node_modules/bootstrap/scss/navbar"; // Requires nav
@import "../node_modules/bootstrap/scss/buttons";
@import "../node_modules/bootstrap/scss/button-group";
@import "../node_modules/bootstrap/scss/card";
@import "../node_modules/bootstrap/scss/tables";
@import "../node_modules/bootstrap/scss/forms";
@import "../node_modules/bootstrap/scss/transitions";
// @import "../node_modules/bootstrap/scss/accordion";
// @import "../node_modules/bootstrap/scss/alert";
// @import "../node_modules/bootstrap/scss/badge";
// @import "../node_modules/bootstrap/scss/breadcrumb";
// @import "../node_modules/bootstrap/scss/carousel";
// @import "../node_modules/bootstrap/scss/close";
// @import "../node_modules/bootstrap/scss/dropdown";
// @import "../node_modules/bootstrap/scss/list-group";
// @import "../node_modules/bootstrap/scss/modal"; // Requires transitions
// @import "../node_modules/bootstrap/scss/offcanvas"; // Requires transitions
// @import "../node_modules/bootstrap/scss/pagination";
// @import "../node_modules/bootstrap/scss/placeholders";
// @import "../node_modules/bootstrap/scss/popover";
// @import "../node_modules/bootstrap/scss/progress";
// @import "../node_modules/bootstrap/scss/spinners";
// @import "../node_modules/bootstrap/scss/toasts";
// @import "../node_modules/bootstrap/scss/tooltip";
@import "../../node_modules/bootstrap/scss/reboot";
@import "../../node_modules/bootstrap/scss/type";
@import "../../node_modules/bootstrap/scss/containers";
@import "../../node_modules/bootstrap/scss/grid";
@import "../../node_modules/bootstrap/scss/nav";
@import "../../node_modules/bootstrap/scss/navbar"; // Requires nav
@import "../../node_modules/bootstrap/scss/buttons";
@import "../../node_modules/bootstrap/scss/card";
@import "../../node_modules/bootstrap/scss/images";
@import "../../node_modules/bootstrap/scss/transitions";
// @import "../../node_modules/bootstrap/scss/accordion";
// @import "../../node_modules/bootstrap/scss/alert";
// @import "../../node_modules/bootstrap/scss/badge";
// @import "../../node_modules/bootstrap/scss/breadcrumb";
// @import "../../node_modules/bootstrap/scss/button-group";
// @import "../../node_modules/bootstrap/scss/carousel";
// @import "../../node_modules/bootstrap/scss/close";
// @import "../../node_modules/bootstrap/scss/dropdown";
// @import "../../node_modules/bootstrap/scss/forms";
// @import "../../node_modules/bootstrap/scss/list-group";
// @import "../../node_modules/bootstrap/scss/modal"; // Requires transitions
// @import "../../node_modules/bootstrap/scss/offcanvas"; // Requires transitions
// @import "../../node_modules/bootstrap/scss/pagination";
// @import "../../node_modules/bootstrap/scss/placeholders";
// @import "../../node_modules/bootstrap/scss/popover";
// @import "../../node_modules/bootstrap/scss/progress";
// @import "../../node_modules/bootstrap/scss/spinners";
// @import "../../node_modules/bootstrap/scss/tables";
// @import "../../node_modules/bootstrap/scss/toasts";
// @import "../../node_modules/bootstrap/scss/tooltip";
// Helpers
@import "../node_modules/bootstrap/scss/helpers";
@import "../../node_modules/bootstrap/scss/helpers";
// Utilities
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/utilities/api";
@import "../../node_modules/bootstrap/scss/utilities";
@import "../../node_modules/bootstrap/scss/utilities/api";
//
// Custom styles
@ -143,7 +143,7 @@ h6:hover .anchor-link {
.navbar {
background-image: none !important;
background-color: rgba(22, 23, 25, 0.4) !important;
background-color: rgba(22, 23, 25, 0.6) !important;
transition: background-color 0.5s;
}
@ -157,8 +157,8 @@ body.is-scrolled .navbar {
.nav-item,
.nav-link {
@extend .text-white;
font-family: 'Eras ITC', sans-serif;
color: var(--bs-body-color);
}
.navbar-nav .btn {