Set bg color of main depending on child page

This is more of a workaround to set the background color for the question pages so that the blue background expands to the footer. Expanding the whole page <div> is not easily possible with CSS since the <main> element is child of a flex and does not have a pre-defined height. If one finds a better solution, please feel free to replace this.
digitalservicebund · Jan 9, 2025 · 21d3565 · 21d3565
1 parent 0018c5b
commit 21d3565
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 3 deletions.
diff --git a/packages/dito/app/root.tsx b/packages/dito/app/root.tsx
@@ -299,7 +299,7 @@ export default function App() {
         />
       }
     >
-      <main className="grow">
+      <main className="grow [&:has(.main-bg-blue)]:bg-blue-100">
         <Outlet context={{ featureFlags }} />
       </main>
     </Document>

diff --git a/packages/dito/app/routes/vorpruefung.$questionId/route.tsx b/packages/dito/app/routes/vorpruefung.$questionId/route.tsx
@@ -154,7 +154,7 @@ export default function Index() {
   );
 
   return (
-    <div className="flex bg-blue-100 sm:pt-32">
+    <div className="flex bg-blue-100 sm:pt-32 main-bg-blue">
       <div className="hidden lg:block flex-none pl-32">
         <PreCheckNavigation question={question} answers={answers ?? {}} />
       </div>

diff --git a/packages/dito/app/routes/vorpruefung.hinweise.tsx b/packages/dito/app/routes/vorpruefung.hinweise.tsx
@@ -26,7 +26,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
 export default function GeneralInfo() {
   const { answers } = useLoaderData<typeof loader>();
   return (
-    <div className="flex grow bg-blue-100 sm:pt-32 w-full h-full">
+    <div className="flex bg-blue-100 sm:pt-32 main-bg-blue">
       <div className="hidden lg:block flex-none pl-32">
         <PreCheckNavigation answers={answers ?? {}} />
       </div>