update to full width

Author: Nikos Katsikanis

css/common.css

@@ -23,8 +23,8 @@ body {
   padding: 0;
   height: 100vh;
   transition:
-    background-color 0.5s,
-    color 0.5s;
+          background-color 0.5s,
+          color 0.5s;
 }
 
 main {
@@ -65,3 +65,25 @@ a {
   margin: 0;
   font-weight: normal;
 }
+
+/* -------------------------------------------------
+ * Utility: Full-bleed breakout (safe “50vw” method)
+ * Use to make an element span the full viewport
+ * even inside padded / max-width containers.
+ * Example: <section class="u-breakout u-breakout--clip">…</section>
+ * ------------------------------------------------- */
+.u-breakout {
+  position: relative;
+  left: 50%;
+  right: 50%;
+  margin-left: -50vw;
+  margin-right: -50vw;
+  width: 100vw;
+  max-width: 100vw;
+  display: block;
+}
+
+/* Optional: hide any overflow to avoid stray scrollbars */
+.u-breakout--clip {
+  overflow: hidden;
+}

js/components/fullscreen-hero.js

@@ -1,4 +1,4 @@
-// File: js/components/hero.js
+// File: js/components/fullscreen-hero.js
 // Repository: https://github.com/quantuminformation/vanillajs-patterns
 
 /**
@@ -93,13 +93,15 @@ export default (hostComponent) => {
         margin-bottom: 1.5rem;
       }
     </style>
-    <div class="hero-container">
-      <div class="hero-overlay"></div>
-      <div class="hero-content">
-        <h1 class="hero-header">${header}</h1>
-        <p class="hero-text">${text}</p>
-        <a href="${buttonLink}" class="button transparent squarify">${buttonText}</a>
+    <section class="u-breakout u-breakout--clip">
+      <div class="hero-container">
+        <div class="hero-overlay"></div>
+        <div class="hero-content">
+          <h1 class="hero-header">${header}</h1>
+          <p class="hero-text">${text}</p>
+          <a href="${buttonLink}" class="button transparent squarify">${buttonText}</a>
+        </div>
       </div>
-    </div>
+    </section>
   `;
 };

js/components/narrow-hero.js

@@ -1,4 +1,5 @@
-// Updated narrow-hero component to maintain padding and a fixed height
+// File: js/components/narrow-hero.js
+// Repository: https://github.com/quantuminformation/vanillajs-patterns
 
 export default (hostComponent) => {
     const { header = "Default Header", text = "" } = hostComponent.dataset;
@@ -45,13 +46,15 @@ export default (hostComponent) => {
         }
       </style>
 
-      <section class="narrow-hero">
-        <div class="narrow-hero-overlay">
-          <div class="narrow-hero-content">
-            <h1>${header}</h1>
-            <p>${text}</p>
+      <section class="u-breakout u-breakout--clip">
+        <section class="narrow-hero">
+          <div class="narrow-hero-overlay">
+            <div class="narrow-hero-content">
+              <h1>${header}</h1>
+              <p>${text}</p>
+            </div>
           </div>
-        </div>
+        </section>
       </section>
     `;
     };