initialise mapbox on contentReplaced event

site/layouts/partials/contact.html

@@ -1,4 +1,4 @@
-<article id="contact" class="l-relative l-screen-min-full">
+<article id="contact" class="l-relative l-screen-min-full contact-bg">
   <div class="l-wrapper">
     <h2>Contact</h2>
     <form action="https://mailthis.to/remailthis" method="POST" encType="multipart/form-data">

site/layouts/partials/hero.html

@@ -1,5 +1,5 @@
 <article id="home">
-  <div id="js-block-parent" class="l-screen-full l-relative l-flex l-flex-center l-flex-wrap l-justify-around u-overflow-hidden">
+  <div id="js-block-parent" class="l-screen-full l-relative l-flex l-flex-center l-flex-wrap l-justify-around u-overflow-hidden hero-bg">
     <div class="block-container block-grid">
     </div>
   </div>

site/layouts/partials/services.html

@@ -1,4 +1,4 @@
-<article id="services" class="l-relative l-screen-min-full">
+<article id="services" class="l-relative l-screen-min-full services-bg">
   <div class="l-wrapper">
     <h2>Services</h2>
     <ul>

src/css/imports/blocks.scss

@@ -210,7 +210,7 @@ $transition-img-out: opacity $duration $delay ease-out, transform $duration;
   margin-left: auto;
   margin-right: auto;
 
-  background-color: pink;
+  background-color: rgba(#000, 0.1);
 }
 
 .block-grid {

src/css/main.css

@@ -67,6 +67,24 @@ html.is-animating .transition-fade {
 .nav-item {
 }
 
+// hero
+
+.hero-bg {
+  background-color: var(--primary-500);
+}
+
+// services
+
+.services-bg {
+  background-color: var(--accent-primary-100);
+}
+
+// contact
+
+.contact-bg {
+  background-color: var(--primary-100);
+}
+
 // global
 
 .site-title {

src/css/milligram

@@ -1 +1 @@
-Subproject commit d244b516f3da521723664c2fe229ec22e710d2c3
+Subproject commit 0b46c4eef2df813bfa136f12cfbf332ae60ffa13

src/index.js

@@ -57,10 +57,10 @@ window.addEventListener("DOMContentLoaded", () => {
   // DOMContentLoaded is not triggered on page reloads via swup.js
   swup.on("contentReplaced", () => {
     initBlocks();
-  });
-
-  initBlocks();
-  swup.scrollTo(document.getElementById("#contact")); // TODO remove
+    initMapbox();
+  });
+
+  initBlocks();
   initMapbox();
 });