Add website in progress landing page

2026-04-20 12:14:06 +02:00
parent 3d73eaf5f9
commit b1409188cd
1 changed files with 83 additions and 3 deletions
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -2,16 +2,96 @@

 ---

-<html lang="en">
+<html lang="de">
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 		<link rel="icon" href="/favicon.ico" />
 		<meta name="viewport" content="width=device-width" />
 		<meta name="generator" content={Astro.generator} />
-		<title>Astro</title>
+		<title>Website im Aufbau</title>
+		<style>
+			:root {
+				color-scheme: light;
+				font-family: "Georgia", "Times New Roman", serif;
+				background: linear-gradient(180deg, #f7f3eb 0%, #ece4d7 100%);
+				color: #1f1811;
+			}
+
+			* {
+				box-sizing: border-box;
+			}
+
+			body {
+				margin: 0;
+				min-height: 100vh;
+				display: grid;
+				place-items: center;
+				padding: 24px;
+				background:
+					radial-gradient(circle at top, rgba(255, 255, 255, 0.85), transparent 40%),
+					linear-gradient(180deg, #f7f3eb 0%, #ece4d7 100%);
+			}
+
+			main {
+				width: min(100%, 560px);
+				padding: 40px 32px;
+				border: 1px solid rgba(64, 43, 24, 0.14);
+				border-radius: 24px;
+				background: rgba(255, 252, 247, 0.88);
+				box-shadow: 0 20px 60px rgba(60, 41, 24, 0.12);
+				text-align: center;
+			}
+
+			h1 {
+				margin: 0 0 16px;
+				font-size: clamp(2rem, 5vw, 3.25rem);
+				line-height: 1.1;
+			}
+
+			p {
+				margin: 0;
+				font-size: 1.0625rem;
+				line-height: 1.7;
+			}
+
+			p + p {
+				margin-top: 16px;
+			}
+
+			a {
+				color: #6d2f14;
+				font-weight: 700;
+				text-decoration-thickness: 0.08em;
+				text-underline-offset: 0.18em;
+				word-break: break-word;
+			}
+
+			a:hover,
+			a:focus-visible {
+				color: #8a3a18;
+			}
+
+			@media (max-width: 640px) {
+				body {
+					padding: 16px;
+				}
+
+				main {
+					padding: 32px 22px;
+					border-radius: 20px;
+				}
+			}
+		</style>
 	</head>
 	<body>
-		<h1>Astro</h1>
+		<main>
+			<h1>Website in Arbeit</h1>
+			<p>Ich arbeite gerade an dieser Website.</p>
+			<p>
+				Bei Fragen oder Anliegen erreichen Sie mich unter
+				<a href="mailto:support@matthiasmeister.dev">support@matthiasmeister.dev</a>.
+			</p>
+		</main>
 	</body>
 </html>