3 files changed, 38 insertions, 25 deletions
diff --git a/src/layout/Base.astro b/src/layout/Base.astro
new file mode 100644
index 0000000..a67fc9f
--- /dev/null
+++ b/src/layout/Base.astro
@@ -0,0 +1,16 @@
+---
+const { title = "Arnaud Hergès" } = Astro.props;
+---
+
+<html lang="fr">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width" />
+    <meta name="generator" content={Astro.generator} />
+    <title>{title}</title>
+  </head>
+  <body>
+    <slot />
+  </body>
+</html>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 39e338f..d648c4b 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -2,31 +2,24 @@
 import "../scss/style.scss";
 import MosaicBackground from "../component/MosaicBackground.astro";
 import VideoAuto from "../component/VideoAuto.astro";
+import Base from "../layout/Base.astro";
 ---
 
-<html lang="fr">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="viewport" content="width=device-width" />
-    <meta name="generator" content={Astro.generator} />
-    <title>Arnaud Hergès</title>
-  </head>
-  <body>
-    <header>
-      <h1>Arnaud Hergès</h1>
-      <div class="tags">
-        <p class="tag">batteur</p>
-        <p class="tag">-</p>
-        <p class="tag">compositeur</p>
-        <p class="tag">-</p>
-        <p class="tag">producteur</p>
-        <p class="tag">-</p>
-        <p class="tag">références</p>
-        <p class="tag">-</p>
-        <p class="tag">contact</p>
-      </div>
-    </header>
+<Base>
+  <header>
+    <h1>Arnaud Hergès</h1>
+    <div class="tags">
+      <p class="tag">batteur</p>
+      <p class="tag">-</p>
+      <p class="tag">compositeur</p>
+      <p class="tag">-</p>
+      <p class="tag">producteur</p>
+      <p class="tag">-</p>
+      <p class="tag">références</p>
+      <p class="tag">-</p>
+      <p class="tag">contact</p>
+    </div>
+  </header>
   </body>
   <main>
     <section class="batteur">
@@ -66,7 +59,7 @@ import VideoAuto from "../component/VideoAuto.astro";
       </div>
     </section>
   </main>
-</html>
+</Base>
 
 <script is:inline defer>
   const sections = document.querySelectorAll("section");
diff --git a/src/scss/style.scss b/src/scss/style.scss
index cfa646b..1b6e93d 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -1,8 +1,12 @@
 @use "reset";
 
+$background: hsl(15, 10%, 5%);
+
 body {
   font-size: 22px;
   font-family: sans-serif;
+  background: $background;
+  color: white;
 }
 
 h1 {
@@ -59,7 +63,7 @@ section {
   top: 60%;
   transform: translate(-50%, -50%);
   gap: 1rem;
-  background: hsl(15, 10%, 5%);
+  background: $background;
   color: white;
   max-width: 800px;
   margin: auto;