Refactor width CSS classes from header, breadcrumbs, content, and footer to page container

Author: webstackdev

.cache/pages.json

@@ -20,6 +20,7 @@
   },
   "consent",
   "contact",
+  "hero",
   "offline",
   {
     "privacy": [

eslint.config.ts

@@ -15,7 +15,7 @@ import noHtmlElementAssertionsRule from './test/eslint/no-html-element-assertion
 import noQuerySelectorOutsideSelectorsRule from './test/eslint/no-query-selector-outside-selectors-rule'
 
 const level: Linter.StringSeverity = 'error'
-const astroParser = (astroPlugin as unknown as { parser: typeof tsPlugin.parser }).parser
+const astroParser = (astroPlugin as unknown as { parser: Linter.Parser }).parser
 const tsconfigRootDir = path.dirname(fileURLToPath(import.meta.url))
 
 export default [
@@ -351,6 +351,7 @@ export default [
         project: './tsconfig.json',
         tsconfigRootDir,
         extraFileExtensions: ['.astro'],
+        programs: undefined,
       },
     },
     rules: {

src/components/Breadcrumbs/index.astro

@@ -34,7 +34,7 @@ const breadcrumbSchema =
 
 {
   breadcrumbs.length > 1 && (
-    <div class="mx-auto max-w-300 w-[90%] mt-4">
+    <div id="breadcrumbs" class="mt-4">
       <nav aria-label="Breadcrumbs" class="breadcrumbs pl-8">
         <ol class="flex items-center space-x-2 text-sm text-content-offset">
           {breadcrumbs.map((item, index) => (

src/components/Footer/index.astro

@@ -13,9 +13,10 @@ const year = new Date().getFullYear()
 <site-footer transition:persist>
   <footer class="bg-page-base-offset w-full mt-6 pt-4" role="contentinfo">
     <div
+      id="footer-inner"
       class:list={[
         styles.footerGrid,
-        'flex flex-col mx-auto max-w-300 w-[90%] px-4 sm:px-6 lg:px-8 pb-3',
+        'flex flex-col px-4 sm:px-6 lg:px-8 pb-3',
       ]}
     >
       {/* Page footer company contact */}

src/components/Header/index.astro

@@ -50,7 +50,7 @@ const { path } = Astro.props
 {/* Header for all pages */}
 <header
   id="header"
-  class="flex flex-row items-center justify-between py-2 lg:py-3 relative mx-auto max-w-300 w-[90%] px-4 sm:px-6 lg:px-8"
+  class="flex flex-row items-center justify-between py-2 lg:py-3 relative px-4 sm:px-6 lg:px-8"
   role="banner"
 >
   {/*- Element for animated background behind mobile navigation menu -*/}

src/components/Layout/Container/index.astro

@@ -10,7 +10,11 @@ const { id } = Astro.props
 ---
 
 <div
-  class="flex flex-col min-h-screen relative transition-transform duration-300 ease-[cubic-bezier(0.25,0.46,0.45,0.94)]"
+  class="flex flex-col min-h-screen relative transition-transform duration-300 ease-[cubic-bezier(0.25,0.46,0.45,0.94)]
+    [&_#header]:mx-auto [&_#header]:max-w-300 [&_#header]:w-[90%]
+    [&_#main]:mx-auto [&_#main]:max-w-300 [&_#main]:w-[90%]
+    [&_#breadcrumbs]:mx-auto [&_#breadcrumbs]:max-w-300 [&_#breadcrumbs]:w-[90%]
+    [&_#footer-inner]:mx-auto [&_#footer-inner]:max-w-300 [&_#footer-inner]:w-[90%]"
   style="padding-top: env(titlebar-area-height, 0);"
   id={id}
 >

src/components/Layout/Content/index.astro

@@ -6,7 +6,7 @@
 
 <main
   id="main"
-  class="flex flex-col flex-[0_1_auto] mx-auto max-w-300 w-[90%]"
+  class="flex flex-col flex-[0_1_auto]"
   role="main"
   tabindex="-1"
 >