feat: use div for background

intergrav · intergrav · commit b2a3937f5820 · 2025-07-26T18:54:42.000-04:00
i dont really like this method but it seems like it fixes the flashing and works better on mobile devices, its the same as the old website. if it causes issues ill revert this
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -7,6 +7,10 @@ import DownloadButton from "./ui/DownloadButton.astro";
 <header
 	class="p-4 pb-0 flex flex-col gap-4 sm:flex-row sm:justify-between sm:items-center"
 >
+	<div
+		class="w-screen h-screen fixed top-0 left-0 -z-50 bg-center bg-no-repeat bg-cover bg-[url('/img/background/prism-backgroundLight.svg')] dark:bg-[url('/img/background/prism-backgroundDark.svg')]"
+	>
+	</div>
 	<div
 		class="flex flex-col items-center text-center gap-4 sm:text-left sm:flex-row sm:justify-start"
 	>
diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro
@@ -26,7 +26,7 @@ const {
 		<link rel="sitemap" href="/sitemap-index.xml" />
 	</head>
 	<body
-		class="flex flex-col min-h-screen max-w-4xl min-[128rem]:max-w-6xl mx-auto gap-4 sm:pb-4 bg-center bg-no-repeat bg-cover bg-fixed bg-prism-background-light dark:bg-prism-background-dark bg-[url('/img/background/prism-backgroundLight.svg')] dark:bg-[url('/img/background/prism-backgroundDark.svg')]"
+		class="flex flex-col min-h-screen max-w-4xl min-[128rem]:max-w-6xl mx-auto gap-4 sm:pb-4 bg-prism-background-light dark:bg-prism-background-dark"
 	>
 		<Header />
 		<main class="flex-1 flex flex-col gap-4">

Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,10 @@ import DownloadButton from "./ui/DownloadButton.astro";`
`7`	`7`	`<header`
`8`	`8`	`class="p-4 pb-0 flex flex-col gap-4 sm:flex-row sm:justify-between sm:items-center"`
`9`	`9`	`>`
	`10`	`+ <div`
	`11`	`+ class="w-screen h-screen fixed top-0 left-0 -z-50 bg-center bg-no-repeat bg-cover bg-[url('/img/background/prism-backgroundLight.svg')] dark:bg-[url('/img/background/prism-backgroundDark.svg')]"`
	`12`	`+ >`
	`13`	`+ </div>`
`10`	`14`	`<div`
`11`	`15`	`class="flex flex-col items-center text-center gap-4 sm:text-left sm:flex-row sm:justify-start"`
`12`	`16`	`>`
Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,7 @@ const {`
`26`	`26`	`<link rel="sitemap" href="/sitemap-index.xml" />`
`27`	`27`	`</head>`
`28`	`28`	`<body`
`29`		`- class="flex flex-col min-h-screen max-w-4xl min-[128rem]:max-w-6xl mx-auto gap-4 sm:pb-4 bg-center bg-no-repeat bg-cover bg-fixed bg-prism-background-light dark:bg-prism-background-dark bg-[url('/img/background/prism-backgroundLight.svg')] dark:bg-[url('/img/background/prism-backgroundDark.svg')]"`
	`29`	`+ class="flex flex-col min-h-screen max-w-4xl min-[128rem]:max-w-6xl mx-auto gap-4 sm:pb-4 bg-prism-background-light dark:bg-prism-background-dark"`
`30`	`30`	`>`
`31`	`31`	`<Header />`
`32`	`32`	`<main class="flex-1 flex flex-col gap-4">`