fix: make background color work on mobile header

unionlabs · Sep 27, 2023 · 348632e · 348632e
1 parent 21a10e1
commit 348632e
Show file tree

Hide file tree

Showing 7 changed files with 11 additions and 8 deletions.
diff --git a/site/src/lib/Footer.svelte b/site/src/lib/Footer.svelte
@@ -1,5 +1,5 @@
 <footer
-  class="flex items-center p-4 gap-4 flex justify-center text-lg text-gray-200"
+  class="bg-background flex items-center p-4 gap-4 flex justify-center text-lg text-gray-200"
 >
   <div>&copy; Union.fi Labs, Inc.</div>
 </footer>
diff --git a/site/src/lib/Logo.svelte b/site/src/lib/Logo.svelte
@@ -4,12 +4,12 @@
 </script>
 
 <div class="logo-and-grid-container block relative" >
-  <div class="pointer-events-none my-grid overflow-hidden text-xs border-sub border-[1px] md:border-2 absolute -z-50">
+  <div class="pointer-events-none my-grid overflow-hidden text-xs border-sub border-[1px] md:border-2 absolute z-10">
     {#each elements as _, i}
       <div class="box-border border-sub border-[1px] md:border-2 grid-box"/>
     {/each}
   </div>
-  <div class="pointer-events-none my-grid text-xs box-border m-[1px] md:m-[2px] z-10 absolute logo-container">
+  <div class="pointer-events-none my-grid text-xs box-border m-[1px] md:m-[2px] z-20 absolute logo-container">
     <!-- u !-->
     <Piece kind="A" x={3} y={2} origin="west" --duration="1s" --delay="0.2s"/>
     <Piece kind="B" x={3} y={3} origin="west" --duration="0.9s" --delay="0.4s" rotation={3}/>

diff --git a/site/src/lib/Tagline.svelte b/site/src/lib/Tagline.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <h2
-	class="text-lg md:text-3xl font-semibold h-[36px] mt-[15px] md:mt-[35px] mb-[12px] md:mb-[24px] tagline flex gap-1 md:gap-2"
+	class="z-20 text-lg md:text-3xl font-semibold h-[36px] mt-[15px] md:mt-[35px] mb-[12px] md:mb-[24px] tagline flex gap-1 md:gap-2"
 >
 	<span>Infrastructure for</span>
 	<Typewriter mode="loop" delay={5000} showCursorOnDelay={true} cursor={false}>

diff --git a/site/src/mdsvex/BlogLayout.svelte b/site/src/mdsvex/BlogLayout.svelte
@@ -6,6 +6,8 @@
 	export let published
 </script>
 
+
+<div class="bg-background flex flex-1 justify-center">
 <main
 	class="blog-post-container sm:text-xl p-4 sm:mt-4  justify-center max-w-2xl justify-center self-center"
 >
@@ -17,3 +19,4 @@
 	<slot />
 	{/if}
 </main>
+</div>
diff --git a/site/src/routes/+layout.svelte b/site/src/routes/+layout.svelte
@@ -16,7 +16,7 @@
 
 <style lang="postcss">
 	:global(body) {
-		background-color: theme(colors.background);
+		background-color: theme(colors.bgDark);
 		color: theme(colors.primary);
 	}
 </style>
diff --git a/site/src/routes/+page.svelte b/site/src/routes/+page.svelte
@@ -4,11 +4,11 @@
 	import Tagline from '$lib/Tagline.svelte';
 </script>
 
-<main class="flex-1 max-w-screen relative flex items-center justify-center overflow-hidden">
+<main class="bg-background flex-1 max-w-screen relative flex items-center justify-center overflow-hidden">
 	<div class="flex flex-col justify-center items-center">
 		<Logo />
 		<Tagline />
-		<div class="flex flex-row md:flex-row gap-[16px] md:gap-[32px]">
+		<div class="z-20 flex flex-row md:flex-row gap-[16px] md:gap-[32px]">
 			<div class="buttonFly"><ButtonA href="/blog">Read More &gt;</ButtonA></div>
 		</div>
 		<div class="h-[33px] md:h-[67px]" />

diff --git a/site/src/routes/blog/+page.svelte b/site/src/routes/blog/+page.svelte
@@ -15,7 +15,7 @@
 </script>
 
 
-<main class="flex flex-1 justify-center sm:mt-4 ">
+<main class="bg-background flex flex-1 justify-center sm:pt-4 ">
 	<div class="flex flex-col gap-4 max-w-2xl">
 		{#each filteredPosts as [path, {metadata}] }
 			<a class="block p-4" href={extractSlug(path)}>