From 763b07cbd12ac4d8d62fff3312c081cfc0b2788a Mon Sep 17 00:00:00 2001
From: liyunze <50455574+liyunze-coding@users.noreply.github.com>
Date: Mon, 14 Aug 2023 16:26:28 +0800
Subject: [PATCH] fixed viewTransition bug

---
 src/components/navBar.astro |  2 +-
 src/layouts/Layout.astro    | 99 ++++++++++++++++++-------------------
 2 files changed, 50 insertions(+), 51 deletions(-)

diff --git a/src/components/navBar.astro b/src/components/navBar.astro
index 0007d58..bdf8423 100644
--- a/src/components/navBar.astro
+++ b/src/components/navBar.astro
@@ -1,4 +1,4 @@
-<div class="w-full">
+<div transition:persist class="w-full">
 	<label
 		class="fixed flex hamburger-menu bg-primary border-2 border-solid border-gray-100 p-2 rounded-lg"
 	>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 7ecb170..8ff2985 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -35,60 +35,59 @@ const { title, description } = Astro.props;
 			rel="stylesheet"
 		/>
 		<script defer src="/_vercel/insights/script.js"></script>
+		<ViewTransitions />
 		<meta name="generator" content={Astro.generator} />
 		<title>{title}</title>
 	</head>
 	<body>
 		<NavBar />
 		<slot />
-		<ViewTransitions />
-	</body>
+	</body><style is:global>
+		* {
+			box-sizing: border-box;
+			margin: 0;
+			padding: 0;
+		}
+
+		html {
+			font-family: "Montserrat", system-ui, sans-serif;
+			background-color: #29233f;
+		}
+
+		html,
+		body {
+			min-height: 100%;
+		}
+
+		body {
+			height: 100vh;
+			font-family: "Montserrat", system-ui, sans-serif;
+		}
+
+		code {
+			font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
+				DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New,
+				monospace;
+		}
+
+		nav {
+			font-family: "Montserrat", system-ui, sans-serif;
+			font-weight: 500;
+		}
+
+		nav ul a {
+			text-decoration: none;
+		}
+
+		a.preview {
+			text-decoration: none;
+		}
+
+		p code {
+			word-break: break-all; /* This will allow the URL to break at any character */
+			display: block; /* Ensures the entire URL is on its own line */
+			width: 100%; /* Make sure the code element takes up the full width of its container */
+			overflow-x: auto;
+		}
+	</style>
 </html>
-
-<style is:global>
-	* {
-		box-sizing: border-box;
-		margin: 0;
-		padding: 0;
-	}
-
-	html {
-		font-family: "Montserrat", system-ui, sans-serif;
-		background-color: #29233f;
-	}
-
-	html,
-	body {
-		min-height: 100%;
-	}
-
-	body {
-		height: 100vh;
-		font-family: "Montserrat", system-ui, sans-serif;
-	}
-
-	code {
-		font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
-			DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
-	}
-
-	nav {
-		font-family: "Montserrat", system-ui, sans-serif;
-		font-weight: 500;
-	}
-
-	nav ul a {
-		text-decoration: none;
-	}
-
-	a.preview {
-		text-decoration: none;
-	}
-
-	p code {
-		word-break: break-all; /* This will allow the URL to break at any character */
-		display: block; /* Ensures the entire URL is on its own line */
-		width: 100%; /* Make sure the code element takes up the full width of its container */
-		overflow-x: auto;
-	}
-</style>