Allow hero route full width

Author: quantuminformation

css/common.css

@@ -33,6 +33,11 @@ main {
   width: 100%;
 }
 
+main.full-width {
+  max-width: none;
+  margin: 0;
+}
+
 footer {
   bottom: 0;
   width: 100%;

js/components/router.js

@@ -42,6 +42,7 @@ export default async (hostComponent, baseUrl = config.BASE_URL) => {
    */
   const loadRoute = async (url) => {
     try {
+      hostComponent.classList.remove('full-width');
       const routePath =
           url === '/' || url === '' ? `${baseUrl}/routes/index.js` : `${baseUrl}/routes${url}.js`;
 

js/routes/heros.js

@@ -1,4 +1,5 @@
 export default (hostComponent) => {
+  hostComponent.classList.add('full-width');
   // Define HTML structure with data attributes directly in the template
   const indexHTML = `
     <div data-component="fullscreen-hero"