fix light mode background

Took 9 minutes
2024-10-06 19:36:24 -04:00 · 2024-10-06 19:36:24 -04:00 · 90faa80fe8
commit 90faa80fe8
parent fbddc47582
3 changed files with 6 additions and 3 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@ -44,8 +44,7 @@ const RootLayout = ({
        <body
            className="scroll-smooth antialiased"
            style={{
-                background:
-                    "linear-gradient(to top, hsl(240, 6%, 10%), hsl(var(--background)))",
+                background: "var(--background-gradient)",
            }}
        >
            <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
--- a/src/app/styles/globals.css
+++ b/src/app/styles/globals.css
@ -39,6 +39,8 @@ body {
        --chart-4: 43 74% 66%;
        --chart-5: 27 87% 67%;
        --radius: 0.5rem;
+
+        --background-gradient: hsl(var(--background));
    }

    .dark {
@ -66,6 +68,8 @@ body {
        --chart-3: 30 80% 55%;
        --chart-4: 280 65% 60%;
        --chart-5: 340 75% 55%;
+
+        --background-gradient: linear-gradient(to top, hsl(240, 6%, 10%), hsl(var(--background)));
    }
 }

--- a/src/components/docs-footer.tsx
+++ b/src/components/docs-footer.tsx
@ -22,7 +22,7 @@ const DocsFooter = ({
        current < pages.length - 1 ? pages[current + 1] : undefined;

    return (
-        <footer className="mx-14 my-5 flex flex-col select-none">
+        <footer className="xs:mx-5 sm:mx-10 my-5 flex flex-col select-none transition-all transform-gpu">
            <Separator className="mb-4" />
            <div className="flex justify-between">
                {previous && (