fix bg image shrinking on small layout

aster-void · aster-void · commit 5bc90244e5be · 2025-04-22T23:35:29.000+09:00
diff --git a/src/global.css b/src/global.css
@@ -11,3 +11,7 @@
 .link:not(.link-uncolor) {
   color: var(--color-blue-500);
 }
+
+.bg-image {
+  @apply fixed top-0 -z-10 min-h-[100lvh] w-full object-cover object-center select-none;
+}
diff --git a/src/layouts/GlobalLayout.astro b/src/layouts/GlobalLayout.astro
@@ -21,7 +21,7 @@ const { title, description, focus, image } = Astro.props;
   <head>
     <Meta {title} {description} image={image} />
   </head>
-  <body class="min-h-full w-full">
+  <body class="min-h-[100vh]">
     <ClientRouter />
     <Header {focus} />
     <slot />
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -30,7 +30,7 @@ articles.splice(3);
     quality="mid"
     width="1920"
     height="1080"
-    class="skeleton fixed top-0 -z-10 h-[100lvh] max-w-full object-cover object-center select-none"
+    class="bg-image bg-neutral-400"
     src={Hero}
   />
   <div class="absolute top-[40%] left-10 mr-10 max-w-lg bg-gray-50 p-8 pb-24">
diff --git a/src/pages/members.astro b/src/pages/members.astro
@@ -23,7 +23,7 @@ const members = await getMembers();
     height="1080"
     quality="mid"
     src={Header}
-    class="fixed top-0 -z-100 h-[100lvh] bg-neutral-400 object-cover"
+    class="bg-image bg-neutral-400"
     style="object-position: 75% 20%;"
     aria-hidden
   />

Original file line number	Diff line number	Diff line change
`@@ -11,3 +11,7 @@`
`11`	`11`	`.link:not(.link-uncolor) {`
`12`	`12`	`color: var(--color-blue-500);`
`13`	`13`	`}`
	`14`	`+`
	`15`	`+.bg-image {`
	`16`	`+ @apply fixed top-0 -z-10 min-h-[100lvh] w-full object-cover object-center select-none;`
	`17`	`+}`