chore: add basic layout

app/app.config.ts

@@ -0,0 +1,4 @@
+export default defineAppConfig({
+  title: 'La Boîte aux lettres',
+  description: "Characters with character, by type designer Laurette Colmard."
+})

app/app.vue

@@ -3,3 +3,12 @@
     <NuxtPage />
   </NuxtLayout>
 </template>
+
+<style lang="css">
+@import '@unocss/reset/eric-meyer.css';
+
+:root {
+  --primary-color: #fff;
+  --secondary-color: #000;
+}
+</style>

app/components/AppFooter.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+const appConfig = useAppConfig()
+</script>
+
+<template>
+  <footer>
+    <img src="~/assets/images/brand-mobile.svg" :alt="appConfig.title"></img>
+    <address>
+      Laurette Colmard
+      laurette.colmard@gmail.com
+      29 rue Colonel Bougault, 38100 Grenoble (FR)
+      06 01 93 75 87
+    </address>
+  </footer>
+</template>
+
+<style lang="css" scoped>
+footer {
+  background-color: var(--primary-color);
+  color: var(--secondary-color);
+}
+</style>

app/components/AppHeader.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+const appConfig = useAppConfig()
+</script>
+
+<template>
+  <header>
+    <img src="~/assets/icons/brand-logo.svg" :alt="`${appConfig.title} - Logo`"></img>
+    <img src="~/assets/images/brand-mobile.svg" :alt="appConfig.title"></img>
+    <p>{{ appConfig.description }}</p>
+  </header>
+</template>
+
+<style lang="css" scoped>
+header {
+  background-color: var(--primary-color);
+  color: var(--secondary-color);
+  height: 68vh;
+  padding: 3rem 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+img:first-of-type {
+  align-self: flex-end;
+  margin-bottom: auto;
+  width: 36vw;
+}
+</style>

app/layouts/default.vue

@@ -0,0 +1,7 @@
+<template>
+  <main>
+    <AppHeader />
+    <slot />
+    <AppFooter />
+  </main>
+</template>

app/pages/index.vue

@@ -1,13 +1,21 @@
 <script setup lang="ts">
+const appConfig = useAppConfig()
 const { data: home } = await useAsyncData(() => queryCollection('content').path('/').first())
 
 useSeoMeta({
-  title: home.value?.title,
+  title: appConfig.title,
-  description: home.value?.description
+  description: appConfig.description
 })
 </script>
 
 <template>
-  <ContentRenderer v-if="home" :value="home" />
+  <ContentRenderer class="nuxt-content" v-if="home" :value="home" />
   <div v-else>Home not found</div>
 </template>
+
+<style lang="css" scoped>
+.nuxt-content {
+  background-color: var(--secondary-color);
+  color: var(--primary-color);
+}
+</style>

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@nuxt/content": "^3.8.2",
+    "@unocss/reset": "66.5.10-beta.1",
     "better-sqlite3": "^12.5.0",
     "nuxt": "^4.2.1",
     "vue": "^3.5.25",

pnpm-lock.yaml

@@ -11,6 +11,9 @@ importers:
       '@nuxt/content':
         specifier: ^3.8.2
         version: 3.8.2(better-sqlite3@12.5.0)(magicast@0.5.1)
+      '@unocss/reset':
+        specifier: 66.5.10-beta.1
+        version: 66.5.10-beta.1
       better-sqlite3:
         specifier: ^12.5.0
         version: 12.5.0
@@ -1132,6 +1135,9 @@ packages:
     peerDependencies:
       vue: '>=3.5.18'
 
+  '@unocss/reset@66.5.10-beta.1':
+    resolution: {integrity: sha512-XLysNLeuSF58K6BpGR4C8DXkiwsFGn1XnGUhIC2srDvK6Vddaggea68UgtjFytbR1nPJqKubh2kkaMjht7+MJA==}
+
   '@vercel/nft@0.30.4':
     resolution: {integrity: sha512-wE6eAGSXScra60N2l6jWvNtVK0m+sh873CpfZW4KI2v8EHuUQp+mSEi4T+IcdPCSEDgCdAS/7bizbhQlkjzrSA==}
     engines: {node: '>=18'}
@@ -5025,6 +5031,8 @@ snapshots:
       unhead: 2.0.19
       vue: 3.5.25(typescript@5.9.3)
 
+  '@unocss/reset@66.5.10-beta.1': {}
+
   '@vercel/nft@0.30.4(rollup@4.53.3)':
     dependencies:
       '@mapbox/node-pre-gyp': 2.0.3