diff --git a/src/_includes/initiatives.html b/src/_includes/initiatives.html index 9e232dd0..2bf72022 100644 --- a/src/_includes/initiatives.html +++ b/src/_includes/initiatives.html @@ -18,10 +18,10 @@

Explore our initiatives

class="nav-link {{ initiative.active }}" id="pills-{{ initiative.slug }}-tab" data-bs-toggle="pill" - data-bs-target="#pills-{{ initiative.slug }}" + data-bs-target="#initiatives-{{ initiative.slug }}" type="button" role="tab" - aria-controls="pills-{{ initiative.slug }}" + aria-controls="initiatives-{{ initiative.slug }}" aria-selected="true" > {{ initiative.tag }} @@ -35,10 +35,10 @@

Explore our initiatives

{% for initiative in site.data.initiatives %}
Resources
{% endfor %}
+ + diff --git a/src/_layouts/default.html b/src/_layouts/default.html index 047ac4c7..e7b25e89 100644 --- a/src/_layouts/default.html +++ b/src/_layouts/default.html @@ -12,6 +12,7 @@ + crossorigin="anonymous" + > diff --git a/src/scripts/initiatives.js b/src/scripts/initiatives.js new file mode 100644 index 00000000..aa1af927 --- /dev/null +++ b/src/scripts/initiatives.js @@ -0,0 +1,16 @@ +window.addEventListener("load", () => { + const triggerTabList = document.querySelectorAll("#pills-tab button"); + triggerTabList.forEach((triggerEl) => { + const tabTrigger = new bootstrap.Tab(triggerEl); + + triggerEl.addEventListener("click", (event) => { + event.preventDefault(); + tabTrigger.show(); + }); + }); + + if (window.location.hash.startsWith("#initiatives")) { + const triggerEl = document.querySelector("button[data-bs-target='" + window.location.hash + "']"); + bootstrap.Tab.getInstance(triggerEl).show(); + } +}); diff --git a/src/stylesheets/main.css b/src/stylesheets/main.css index 9dd0eb1d..fa38d0dd 100644 --- a/src/stylesheets/main.css +++ b/src/stylesheets/main.css @@ -305,6 +305,10 @@ footer a:hover { border-style: solid; } +.scroll-link { + scroll-margin-top: 240px; +} + .black-on-white .nav-pills { --bs-nav-pills-link-active-color: var(--bs-white); --bs-nav-pills-link-active-bg: var(--bs-body-color);