From 4f5b4dc52cba6bea227c9c4cb0c6507f8b25218a Mon Sep 17 00:00:00 2001
From: "Reid \"reidlab" <reidlab325@gmail.com>
Date: Tue, 9 Jul 2024 00:05:02 -0700
Subject: [PATCH] change how the transitions are handled

---
 src/layouts/Layout.astro | 126 ++++++++++++++++++++-------------------
 1 file changed, 66 insertions(+), 60 deletions(-)

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index d2ccf03..783dbb8 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -42,64 +42,70 @@ import "../styles/main.css";
         <Intro />
 
         <Sidebar />
-        <main
-            data-vtbot-replace="main"
-            transition:name="main"
-            transition:animate="initial"
-        >
-            <slot />
-        </main>
-    </body><style is:global>
-        body {
-            display: grid;
-            grid-template-columns: min-content auto;
-            grid-template-rows: auto auto;
-            grid-auto-flow: row;
-        }
-
-        /* mobile */
-        @media screen and (max-width: 600px) {
-            body {
-                grid-template-columns: auto auto;
-                grid-template-rows: min-content auto;
-                grid-auto-flow: column;
-            }
-        }
-
-        main {
-            background: linear-gradient(
-                    275deg,
-                    #f38ba8,
-                    #eba0ac 30%,
-                    transparent 0%
-                ),
-                linear-gradient(
-                    260deg,
-                    #74c7ec,
-                    #89b4fa 45%,
-                    transparent 0%
-                ),
-                linear-gradient(
-                    270deg,
-                    #fab387,
-                    #f9e2af 55%,
-                    transparent 0%
-                ),
-                linear-gradient(
-                    265deg,
-                    #a6e3a1,
-                    #94e2d5 70%,
-                    transparent 0%),
-                #181818;
-            background-attachment: fixed;
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: column;
-            gap: 1em;
-            padding: 1em;
-            min-height: 100vh;
-            height: 100%;
-            width: 100%;
-        }
-    </style>
+        <div class="container">
+            <main
+                data-vtbot-replace="main"
+                transition:name="main"
+                transition:animate="initial"
+            >
+                <slot />
+            </main>
+        </div>
+    </body>
 </html>
+<style is:global>
+    body {
+        display: grid;
+        grid-template-columns: min-content auto;
+        grid-template-rows: auto auto;
+        grid-auto-flow: row;
+    }
+
+    /* mobile */
+    @media screen and (max-width: 600px) {
+        body {
+            grid-template-columns: auto auto;
+            grid-template-rows: min-content auto;
+            grid-auto-flow: column;
+        }
+    }
+
+    .container {
+        background: linear-gradient(
+                275deg,
+                #f38ba8,
+                #eba0ac 30%,
+                transparent 0%
+            ),
+            linear-gradient(
+                260deg,
+                #74c7ec,
+                #89b4fa 45%,
+                transparent 0%
+            ),
+            linear-gradient(
+                270deg,
+                #fab387,
+                #f9e2af 55%,
+                transparent 0%
+            ),
+            linear-gradient(
+                265deg,
+                #a6e3a1,
+                #94e2d5 70%,
+                transparent 0%),
+            #181818;
+        background-attachment: fixed;
+    }
+
+    main {
+        display: flex;
+        flex-wrap: wrap;
+        flex-direction: column;
+        gap: 1em;
+        padding: 1em;
+        min-height: 100vh;
+        height: 100%;
+        width: 100%;
+    }
+</style>
\ No newline at end of file