feat: layout

2025-11-17 22:25:04 +08:00
parent e89c9a652f
commit 0a0c78635a
16 changed files with 747 additions and 39 deletions
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,22 +1,66 @@
+---
+import "@/styles/base.css";
+
+import BaseHeader from "@/components/BaseHeader.astro";
+import BaseFooter from "@/components/BaseFooter.astro";
+
+import { metadata } from "@/consts.ts";
+const { siteTitle } = metadata;
+---
+
 <!doctype html>
 <html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta name="viewport" content="width=device-width" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<meta name="generator" content={Astro.generator} />
-		<title>Astro Basics</title>
-	</head>
-	<body>
-		<slot />
-	</body>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="generator" content={Astro.generator} />
+    <title>{siteTitle}</title>
+  </head>
+  <body>
+    <BaseHeader />
+    <main class="grid-background">
+      <slot />
+    </main>
+    <BaseFooter />
+  </body>
 </html>

 <style>
-	html,
-	body {
-		margin: 0;
-		width: 100%;
-		height: 100%;
-	}
+  html,
+  body {
+    width: 100%;
+    height: 100%;
+  }
+
+  body {
+    display: flex;
+    flex-direction: column;
+  }
+
+  main {
+    flex: 1;
+    width: var(--layout-width);
+    margin: 0 auto;
+    padding: 16px;
+  }
+
+  .grid-background {
+    background-color: #ffffff;
+    opacity: 0.3;
+    background-image: linear-gradient(#d7edfb 2px, transparent 2px),
+      linear-gradient(90deg, #d7edfb 2px, transparent 2px),
+      linear-gradient(#d7edfb 1px, transparent 1px),
+      linear-gradient(90deg, #d7edfb 1px, #ffffff 1px);
+    background-size:
+      50px 50px,
+      50px 50px,
+      10px 10px,
+      10px 10px;
+    background-position:
+      -2px -2px,
+      -2px -2px,
+      -1px -1px,
+      -1px -1px;
+  }
 </style>