fix: Style problems on vertical screens

package-lock.json

@@ -21,6 +21,7 @@
 			"devDependencies": {
 				"@playwright/test": "^1.28.1",
 				"@sveltejs/adapter-auto": "^3.0.0",
+				"@sveltejs/adapter-static": "^3.0.5",
 				"@sveltejs/kit": "^2.0.0",
 				"@sveltejs/vite-plugin-svelte": "^3.0.0",
 				"@tailwindcss/typography": "^0.5.15",
@@ -1016,6 +1017,16 @@
 				"@sveltejs/kit": "^2.0.0"
 			}
 		},
+		"node_modules/@sveltejs/adapter-static": {
+			"version": "3.0.5",
+			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-static/-/adapter-static-3.0.5.tgz",
+			"integrity": "sha512-kFJR7RxeB6FBvrKZWAEzIALatgy11ISaaZbcPup8JdWUdrmmfUHHTJ738YHJTEfnCiiXi6aX8Q6ePY7tnSMD6Q==",
+			"dev": true,
+			"license": "MIT",
+			"peerDependencies": {
+				"@sveltejs/kit": "^2.0.0"
+			}
+		},
 		"node_modules/@sveltejs/kit": {
 			"version": "2.5.26",
 			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.5.26.tgz",
@@ -4842,10 +4853,11 @@
 			}
 		},
 		"node_modules/vite": {
-			"version": "5.4.4",
-			"resolved": "https://registry.npmjs.org/vite/-/vite-5.4.4.tgz",
-			"integrity": "sha512-RHFCkULitycHVTtelJ6jQLd+KSAAzOgEYorV32R2q++M6COBjKJR6BxqClwp5sf0XaBDjVMuJ9wnNfyAJwjMkA==",
+			"version": "5.4.6",
+			"resolved": "https://registry.npmjs.org/vite/-/vite-5.4.6.tgz",
+			"integrity": "sha512-IeL5f8OO5nylsgzd9tq4qD2QqI0k2CQLGrWD0rCN0EQJZpBK5vJAx0I+GDkMOXxQX/OfFHMuLIx6ddAxGX/k+Q==",
 			"dev": true,
+			"license": "MIT",
 			"dependencies": {
 				"esbuild": "^0.21.3",
 				"postcss": "^8.4.43",

package.json

@@ -18,6 +18,7 @@
 	"devDependencies": {
 		"@playwright/test": "^1.28.1",
 		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/adapter-static": "^3.0.5",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
 		"@tailwindcss/typography": "^0.5.15",

src/content/metadata.json

@@ -6,9 +6,7 @@
 	"picture": "/favicon.svg",
 	"links": {
 		"github": "https://github.com",
-		"email": "cirno@gensokyo.jp",
-		"orcid": "cirno",
-		"instagram": "@",
-		"open-source": "unknown"
+		"email": "email:cirno@gensokyo.jp",
+		"orcid": "https://orcid.org/cirno"
 	}
 }

src/routes/+layout.svelte

@@ -91,8 +91,14 @@
 			;
 		*/
 	}
+	@media (max-width: 700px) {
+		#layout {
+			flex-direction: column;
+			gap: 20px;
+		}
+	}
 	#content {
-		width: max(50vw, 100vh);
+		width: min(100vw, max(50vw, 100vh));
 		grid-area: content;
 	}
 	#navbar {

src/routes/+layout.ts

@@ -0,0 +1 @@
+export const prerender = true;

src/routes/+page.svelte

@@ -52,7 +52,7 @@
 				<a class="navbar-link" href="#bio">Bio</a>
 				{#each routes as item}
 					{#if item.route !== "/"}
-						<Separator orientation="vertical" />
+						<Separator class="bg-gray-500 dark:bg-gray-100" orientation="vertical" />
 						{#if item.inactive ?? false}
 							<p class="navbar-link">{item.name}</p>
 						{:else}
@@ -99,7 +99,7 @@
 		background-attachment: fixed;
 		background-size: cover;
 		background-repeat: no-repeat;
-		background-position: center;
+		background-position: center center;
 		z-index: -10;
 		position: fixed;
 		min-width: 100vw;
@@ -134,14 +134,12 @@
 		max-width: max(50vw, 100vh);
 		margin-left: auto;
 		margin-right: auto;
-		padding-top: 20px;
-		padding-left: 10px;
-		padding-right: 10px;
+		padding: 20px 10px 50px 10px;
 		min-height: 100vh;
 	}
 	#bio-name {
 		font-family: serif;
-		font-size: 80px;
+		font-size: min(10vw, 60px);
 		display: inline-block;
 		color: theme('colors.java.800');
 	}
@@ -153,7 +151,7 @@
 		border: 4px solid theme('colors.eucalyptus.500');
 		border-radius: 50%;
 		aspect-ratio: 1;
-		width: 20%;
+		max-width: 20%;
 		@apply ml-auto mr-0;
 	}
 	#avatar-img {

src/routes/Navbar.svelte

@@ -7,7 +7,7 @@
 	}
 </script>
 
-<div id="navbar" class="h-5 space-x-4 justify-between">
+<div id="navbar" class="h-5 space-x-4">
 	{#each routes as item}
 		{#if item.inactive ?? false}
 			<p class="navbar-link"
@@ -25,5 +25,12 @@
 		display: flex;
 		flex-direction: column;
 		align-items: flex-end;
+		justify-content: between;
+	}
+	@media (max-width: 700px) {
+		#navbar {
+			flex-direction: row;
+			justify-content: start;
+		}
 	}
 </style>

src/routes/post/Heading.svelte

@@ -17,7 +17,7 @@
 	<div>
 		<p class="text-gray-500 h-8">{metadata.description}</p>
 	</div>
-	<div class="flex flex-row justify-between">
+	<div class="flex flex-row justify-between" style="width: 100%">
 		<p class="text-gray-200 flex justify-center">
 			{#each (metadata.tags ?? []) as tag, i}
 				{#if i > 0}
@@ -35,6 +35,7 @@
 <style>
 	#post-heading {
 		@apply flex flex-col;
+		width: 100%;
 	}
 	#post-title {
 		@apply text-3xl;

svelte.config.js

@@ -1,6 +1,6 @@
-import adapter from '@sveltejs/adapter-auto';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 import { mdsvex } from 'mdsvex';
+import adapter from '@sveltejs/adapter-static';
 
 import remarkAlert from './src/lib/markdown.js'
 import relativeImages from 'mdsvex-relative-images'