add design

src/layouts/default.vue

@@ -1,38 +1,10 @@
 <template>
   <div class="default">
-    <header>
-      <div class="wrapper">
-        <julien-calixte size="big" />
-        <div id="nav">
-          <router-link to="/">Home</router-link>
-          <router-link to="/about">About</router-link>
-        </div>
-      </div>
-    </header>
-
+    <app-header />
     <slot />
   </div>
 </template>
 
-<style>
-@import "@/assets/base.css";
-
-/* #nav a.router-link-exact-active {
-  background-color: var(--color-text);
-} */
-
-#nav a {
-  display: inline-block;
-  padding: 0 1rem;
-}
-
-.default {
-  padding: 0 1rem;
-}
-
-.wrapper {
-  display: flex;
-  align-items: center;
-  gap: 2rem;
-}
+<style lang="scss">
+@import "@/assets/base";
 </style>

src/layouts/post.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="post">
+    <app-header />
+
+    <article id="main-article">
+      <slot />
+    </article>
+  </div>
+</template>
+
+<style lang="scss">
+@import "@/assets/base";
+
+article#main-article {
+  max-width: 650px;
+  margin: auto;
+}
+</style>