update index

src/layouts/Layout.astro

@@ -1,4 +1,5 @@
 ---
+import "../styles/global.css";
 interface Props {
 	title: string;
 }
@@ -12,7 +13,6 @@ const { title } = Astro.props;
 		<meta charset="UTF-8" />
 		<meta name="description" content="Astro description" />
 		<meta name="viewport" content="width=device-width" />
-
 		<meta name="generator" content={Astro.generator} />
 		<title>{title}</title>
 	</head>
@@ -20,31 +20,3 @@ const { title } = Astro.props;
 		<slot />
 	</body>
 </html>
-<style is:global>
-	:root {
-		--accent: 136, 58, 234;
-		--accent-light: 224, 204, 250;
-		--accent-dark: 49, 10, 101;
-		--accent-gradient: linear-gradient(
-			45deg,
-			rgb(var(--accent)),
-			rgb(var(--accent-light)) 30%,
-			white 60%
-		);
-	}
-	html {
-		font-family: system-ui, sans-serif;
-		background: #13151a;
-	}
-	code {
-		font-family:
-			Menlo,
-			Monaco,
-			Lucida Console,
-			Liberation Mono,
-			DejaVu Sans Mono,
-			Bitstream Vera Sans Mono,
-			Courier New,
-			monospace;
-	}
-</style>

src/pages/index.astro

@@ -1,10 +1,13 @@
 ---
-//import Layout from '../layouts/Layout.astro';
+import Layout from '../layouts/Layout.astro';
 ---
 
+<Layout title="osbm index">
+  <h1>Welcome to my site</h1>
+  <p>This is a simple site built with Astro</p>
 
 I am building this site.
 
-
 please see <a href="https://osmanbayram.com">osmanbayram.com</a> my current main page
 
+</Layout>

src/styles/global.css

@@ -0,0 +1,21 @@
+html {
+    background-color: #f1f5f9;
+    font-family: sans-serif;
+}
+
+body {
+    margin: 0 auto;
+    width: 100%;
+    max-width: 80ch;
+    padding: 1rem;
+    line-height: 1.5;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+h1 {
+    margin: 1rem 0;
+    font-size: 2.5rem;
+}