diff options
| author | William Hergès <william@herges.fr> | 2025-08-09 17:21:33 +0200 |
|---|---|---|
| committer | William Hergès <william@herges.fr> | 2025-08-09 17:21:33 +0200 |
| commit | 1b763e17ecbe46a3cee806a7177b0bd60e15bf44 (patch) | |
| tree | 45cd4cd4be93ce0c4b80cb86ec21ee882c0afc56 | |
| parent | e5c92241cf23546e8fdccd92050c02516f0abd9a (diff) | |
refactor(html): create layout
| -rw-r--r-- | src/layout/Base.astro | 16 | ||||
| -rw-r--r-- | src/pages/index.astro | 41 | ||||
| -rw-r--r-- | src/scss/style.scss | 6 |
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; |