From 7275b72e88eba7cc8138cf010f7fd3d15ac1768a Mon Sep 17 00:00:00 2001 From: Leni Aniva Date: Thu, 19 Sep 2024 13:26:56 -0700 Subject: [PATCH] fix: Style problems on vertical screens --- package-lock.json | 18 +++++++++++++++--- package.json | 1 + src/content/metadata.json | 6 ++---- src/routes/+layout.svelte | 8 +++++++- src/routes/+layout.ts | 1 + src/routes/+page.svelte | 12 +++++------- src/routes/Navbar.svelte | 9 ++++++++- src/routes/post/Heading.svelte | 3 ++- svelte.config.js | 2 +- 9 files changed, 42 insertions(+), 18 deletions(-) create mode 100644 src/routes/+layout.ts diff --git a/package-lock.json b/package-lock.json index d9f3738..3a8c52b 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index ae4d380..855fcfb 100644 --- a/package.json +++ b/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", diff --git a/src/content/metadata.json b/src/content/metadata.json index c330d5a..3d9974a 100644 --- a/src/content/metadata.json +++ b/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" } } diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index b5022b5..f152ced 100644 --- a/src/routes/+layout.svelte +++ b/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 { diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts new file mode 100644 index 0000000..189f71e --- /dev/null +++ b/src/routes/+layout.ts @@ -0,0 +1 @@ +export const prerender = true; diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index feeedbc..3f3b409 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -52,7 +52,7 @@ Bio {#each routes as item} {#if item.route !== "/"} - + {#if item.inactive ?? false}

{item.name}

{: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 { diff --git a/src/routes/Navbar.svelte b/src/routes/Navbar.svelte index 67f64aa..3dd5789 100644 --- a/src/routes/Navbar.svelte +++ b/src/routes/Navbar.svelte @@ -7,7 +7,7 @@ } -