From c694d2898274831e7107f8df12bed364295c9399 Mon Sep 17 00:00:00 2001
From: Peaceultime <clem31470@gmail.com>
Date: Wed, 28 Aug 2024 18:14:19 +0200
Subject: [PATCH] Progressing on the CSS rework

---
 app.vue                                    |  82 +++++++----
 components/SearchView.vue                  |  23 +--
 components/canvas/CanvasRenderer.vue       |  79 +++++-----
 components/explorer/ExplorerNavigation.vue |   6 +-
 components/explorer/NavigationLink.vue     |  26 ++--
 components/explorer/PreviewContent.vue     |  30 ++--
 components/prose/ProseA.vue                |  14 +-
 components/prose/ProseBlockquote.vue       | 161 ++++++++++++++++++++-
 components/prose/ProseH1.vue               |   2 +-
 components/prose/ProseH2.vue               |   2 +-
 components/prose/ProseH3.vue               |   2 +-
 components/prose/ProseH4.vue               |   2 +-
 components/prose/ProseH5.vue               |   2 +-
 components/prose/ProseHr.vue               |   2 +-
 components/prose/ProseLi.vue               |   2 +-
 components/prose/ProseP.vue                |   9 ++
 components/prose/ProseTable.vue            |   2 +-
 components/prose/ProseTd.vue               |   2 +-
 components/prose/ProseTh.vue               |   2 +-
 db.sqlite                                  | Bin 839680 -> 839680 bytes
 layouts/default.vue                        |  33 +++--
 layouts/explorer.vue                       |  34 +++--
 nuxt.config.ts                             |   7 +-
 pages/explorer/[projectId]/[...slug].vue   |  50 +++----
 pages/explorer/index.vue                   |  20 +--
 pages/index.vue                            |  10 +-
 26 files changed, 386 insertions(+), 218 deletions(-)

diff --git a/app.vue b/app.vue
index d804ca1..c47dbaa 100644
--- a/app.vue
+++ b/app.vue
@@ -1,35 +1,55 @@
-<script setup lang="ts">
-const layout = ref();
-const toggled = ref(false);
+<style>
+/* width */
+::-webkit-scrollbar {
+	width: 12px;
+}
+ 
+/* Track */
+::-webkit-scrollbar-track {
+}
+ 
+/* Handle */
+::-webkit-scrollbar-thumb {
+	@apply bg-light-40;
+	@apply dark:bg-dark-40;
+	@apply rounded-md;
+	@apply border-2;
+	@apply border-solid;
+	@apply border-transparent;
+	@apply bg-clip-padding;
+}
+ 
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+	@apply bg-light-50;
+	@apply dark:bg-dark-50;
+}
 
+.loading {
+	@apply w-full;
+	@apply h-full;
+	@apply flex;
+	@apply items-center;
+	@apply justify-center;
+	@apply before:border-4;
+	@apply before:border-accent-purple;
+	@apply before:border-t-transparent;
+	@apply before:rounded-full;
+	@apply before:w-8;
+	@apply before:h-8;
+	@apply before:animate-spin;
+}
+</style>
+
+<script setup lang="ts">
+const page = ref();
 </script>
+
 <template>
-  <div class="bg-light-0 dark:bg-dark-0">
-    <div class="bg-light-0 dark:bg-dark-0 px-12 py-3 sticky top-0 z-40 w-full flex align-middle justify-between lg:z-50 border-b gap-12 border-light-30 dark:border-dark-30">
-      <div class="flex flex-auto items-stretch gap-12">
-        <NuxtLink class="text-lg flex align-center font-semibold text-light-100 dark:text-dark-100 hover:text-opacity-70" aria-label="Accueil" :to="{ path: '/', force: true }"><ThemeIcon icon="logo" :width=40 :height=40 /></NuxtLink>
-        <NuxtLink class="text-lg flex align-center font-semibold text-light-100 dark:text-dark-100 hover:text-opacity-70" aria-label="Projets" :to="{ path: `/explorer`, force: true }">Projets</NuxtLink>
-        <NuxtLink class="text-lg flex align-center font-semibold text-light-100 dark:text-dark-100 hover:text-opacity-70" aria-label="Editeur" :to="{ path: '/editing', force: true }">Editeur</NuxtLink>
-      </div>
-      <div class="flex-auto"><SearchView /></div>
-      <div class="flex flex-auto align-center gap-6 justify-end">
-        <ThemeSwitch />
-        <NuxtLink class="" :to="{ path: '/user/profile', force: true }"><ThemeIcon icon="user" :width=32 :height=32 /></NuxtLink>
-      </div>
-    </div>
-    <NuxtLayout ref="layout">
-      <template #mobile>
-        <div class="">
-          <NuxtLink class="" aria-label="Accueil" :to="{ path: '/', force: true }">Accueil</NuxtLink>
-          <NuxtLink class="" aria-label="Projets" :to="{ path: `/explorer`, force: true }" active-class="">Projets</NuxtLink>
-          <NuxtLink class="" aria-label="Editeur" :to="{ path: '/editing', force: true }" active-class="">Editeur</NuxtLink>
-        </div>
-      </template>
-      <NuxtPage/>
-    </NuxtLayout>
-    <div class="">
-      <p>Copyright Peaceultime - 2024</p>
-      <NuxtLink :to="{ path: '/third-party', force: true }">Applications tierces et crédits</NuxtLink>
-    </div>
-  </div>
+	<div class="text-light-100 dark:text-dark-100 flex bg-light-0 dark:bg-dark-0 h-screen overflow-hidden">
+		<NuxtRouteAnnouncer></NuxtRouteAnnouncer>
+		<NuxtLayout>
+			<NuxtPage ref="page"></NuxtPage>
+		</NuxtLayout>
+	</div>
 </template>
diff --git a/components/SearchView.vue b/components/SearchView.vue
index bc8f081..422bcc6 100644
--- a/components/SearchView.vue
+++ b/components/SearchView.vue
@@ -42,40 +42,41 @@ async function debounced()
         <input class="caret-light-50 dark:caret-dark-50 text-light-100 dark:text-dark-100 placeholder:text-light-50 dark:placeholder:text-dark-50 bg-light-20 dark:bg-dark-20 appearance-none w-full outline-none px-3 py-1 focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40" type="text" placeholder="Recherche" v-model="input" @input="search">
     </div>
     <Teleport to="#teleports" v-if="input !== '' && !!pos">
-        <div class=""
+        <div class="absolute z-50 border border-light-35 dark:border-dark-35 bg-light-0 dark:bg-dark-0 text-light-100 dark:text-dark-100 divide-y divide-light-35 dark:divide-dark-35 max-h-96 overflow-auto
+        scroll"
             :style="{top: (pos.bottom + 4) + 'px', left: pos.left + 'px', width: pos.width + 'px'}">
             <div class="loading" v-if="loading"></div>
             <template v-else>
-                <div class="" v-for="result of results.projects" :key="result.id"
+                <div class="cursor-pointer hover:bg-light-25 dark:hover:bg-dark-25 px-4 py-1 " v-for="result of results.projects" :key="result.id"
                     @mouseenter="(e) => (e.target as HTMLElement).classList.add('is-selected')"
                     @mouseleave="(e) => (e.target as HTMLElement).classList.remove('is-selected')"
-                    @mousedown.prevent="navigateTo(`/explorer/${result.id}${result.home}`); input = ''">
+                    @mousedown.prevent="navigateTo(`/explorer/${result.id}/${result.home}`); input = ''">
                     <div class="">
-                        <BoldContent class="" :text="result.name" :matched="input" />
-                        <div class="">
+                        <BoldContent class="text-lg" :text="result.name" :matched="input" />
+                        <div class="flex justify-between text-sm">
                             <div class="">{{ result.username }}</div>
                             <div class="">{{ result.pages }} pages</div>
                         </div>
                     </div>
                 </div>
-                <div class="" v-for="result of results.files" :key="result.id"
+                <div class="cursor-pointer hover:bg-light-25 dark:hover:bg-dark-25 px-4 py-1 " v-for="result of results.files" :key="result.id"
                     @mouseenter="(e) => (e.target as HTMLElement).classList.add('is-selected')"
                     @mouseleave="(e) => (e.target as HTMLElement).classList.remove('is-selected')"
-                    @mousedown.prevent="navigateTo(`/explorer/${result.project}${result.path}`); input = ''">
+                    @mousedown.prevent="navigateTo(`/explorer/${result.project}/${result.path}`); input = ''">
                     <div class="">
-                        <BoldContent class="" :text="result.title" :matched="input" />
-                        <div class="">
+                        <BoldContent class="text-lg" :text="result.title" :matched="input" />
+                        <div class="flex justify-between text-sm">
                             <div class="">{{ result.username }}</div>
                             <div class="">{{ result.comments }} commentaires</div>
                         </div>
                     </div>
                 </div>
-                <div class="" v-for="result of results.users" :key="result.id"
+                <div class="cursor-pointer hover:bg-light-25 dark:hover:bg-dark-25 px-4 py-1 " v-for="result of results.users" :key="result.id"
                     @mouseenter="(e) => (e.target as HTMLElement).classList.add('is-selected')"
                     @mouseleave="(e) => (e.target as HTMLElement).classList.remove('is-selected')"
                     @mousedown.prevent="navigateTo(`/user/${result.id}`); input = ''">
                     <div class="">
-                        <BoldContent class="" :text="result.username" :matched="input" />
+                        <BoldContent class="text-lg" :text="result.username" :matched="input" />
                     </div>
                 </div>
                 <div class=""
diff --git a/components/canvas/CanvasRenderer.vue b/components/canvas/CanvasRenderer.vue
index 9250645..8f296a9 100644
--- a/components/canvas/CanvasRenderer.vue
+++ b/components/canvas/CanvasRenderer.vue
@@ -216,47 +216,45 @@ function getCenter(n: { x: number, y: number }, i: { x: number, y: number }, r:
     <Suspense>
         <template #default>
             <div id="canvas" ref="canvas" @pointerdown="onPointerDown" @wheel.passive="onWheel" @touchstart.passive="onTouchStart"
-                @dragstart.prevent="" class="canvas-wrapper node-insert-event mod-zoomed-out"
+                @dragstart.prevent="" class="relative overflow-hidden"
                 :style="{ '--zoom-multiplier': (1 / Math.pow(zoom, 0.7)) }">
-                <div class="canvas-controls" style="z-index: 999;">
-                    <div class="canvas-control-group">
-                        <div @click="zoom = clamp(zoom * 1.1, minZoom, 3)" class="canvas-control-item"
-                            aria-label="Zoom in" data-tooltip-position="left">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-                                stroke-linejoin="round" class="svg-icon lucide-plus">
-                                <path d="M5 12h14"></path>
-                                <path d="M12 5v14"></path>
-                            </svg>
-                        </div>
-                        <div @click="zoom = 1" class="canvas-control-item" aria-label="Reset zoom"
-                            data-tooltip-position="left">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-                                stroke-linejoin="round" class="svg-icon lucide-rotate-cw">
-                                <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"></path>
-                                <path d="M21 3v5h-5"></path>
-                            </svg>
-                        </div>
-                        <div @click="reset" class="canvas-control-item" aria-label="Zoom to fit"
-                            data-tooltip-position="left">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-                                stroke-linejoin="round" class="svg-icon lucide-maximize">
-                                <path d="M8 3H5a2 2 0 0 0-2 2v3"></path>
-                                <path d="M21 8V5a2 2 0 0 0-2-2h-3"></path>
-                                <path d="M3 16v3a2 2 0 0 0 2 2h3"></path>
-                                <path d="M16 21h3a2 2 0 0 0 2-2v-3"></path>
-                            </svg>
-                        </div>
-                        <div @click="zoom  = clamp(zoom * 0.9, minZoom, 3)" class="canvas-control-item"
-                            aria-label="Zoom out" data-tooltip-position="left">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-                                stroke-linejoin="round" class="svg-icon lucide-minus">
-                                <path d="M5 12h14"></path>
-                            </svg>
-                        </div>
+                <div class="border border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10 absolute top-2 left-2 z-[100] overflow-hidden">
+                    <div @click="zoom = clamp(zoom * 1.1, minZoom, 3)" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer"
+                        aria-label="Zoom in" data-tooltip-position="left">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                            stroke-linejoin="round">
+                            <path d="M5 12h14"></path>
+                            <path d="M12 5v14"></path>
+                        </svg>
+                    </div>
+                    <div @click="zoom = 1" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer" aria-label="Reset zoom"
+                        data-tooltip-position="left">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                            stroke-linejoin="round">
+                            <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"></path>
+                            <path d="M21 3v5h-5"></path>
+                        </svg>
+                    </div>
+                    <div @click="reset" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer" aria-label="Zoom to fit"
+                        data-tooltip-position="left">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                            stroke-linejoin="round">
+                            <path d="M8 3H5a2 2 0 0 0-2 2v3"></path>
+                            <path d="M21 8V5a2 2 0 0 0-2-2h-3"></path>
+                            <path d="M3 16v3a2 2 0 0 0 2 2h3"></path>
+                            <path d="M16 21h3a2 2 0 0 0 2-2v-3"></path>
+                        </svg>
+                    </div>
+                    <div @click="zoom  = clamp(zoom * 0.9, minZoom, 3)" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer"
+                        aria-label="Zoom out" data-tooltip-position="left">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                            stroke-linejoin="round">
+                            <path d="M5 12h14"></path>
+                        </svg>
                     </div>
                 </div>
                 <div class="canvas"
@@ -274,7 +272,6 @@ function getCenter(n: { x: number, y: number }, i: { x: number, y: number }, r:
                         </div>
                     </template>
                 </div>
-                <span v-if="TMP_dragPoint" :style="{ display: 'block', backgroundColor: 'red', borderRadius: '8px', width: '8px', height: '8px', transform: `translate(-4px, -4px) translate(${TMP_dragPoint.x}px, ${TMP_dragPoint.y}px)` }"></span>
             </div>
         </template>
         <template #fallback>
diff --git a/components/explorer/ExplorerNavigation.vue b/components/explorer/ExplorerNavigation.vue
index b172b0a..861be50 100644
--- a/components/explorer/ExplorerNavigation.vue
+++ b/components/explorer/ExplorerNavigation.vue
@@ -12,9 +12,9 @@ if(!isNaN(project.value))
 </script>
 
 <template>
-    <div class="tree-item">
-        <div class="tree-item-children">
-            <NavigationLink v-if="!!navigation" v-for="link of navigation" :project="project" :link="link" />
+    <div class="relative flex-auto">
+        <div class="absolute top-0 bottom-0 left-0 right-0 overflow-auto px-4">
+            <NavigationLink class="ps-2" v-if="!!navigation" v-for="link of navigation" :project="project" :link="link" />
         </div>
     </div>
 </template>
\ No newline at end of file
diff --git a/components/explorer/NavigationLink.vue b/components/explorer/NavigationLink.vue
index 333ab8b..98c8a19 100644
--- a/components/explorer/NavigationLink.vue
+++ b/components/explorer/NavigationLink.vue
@@ -15,28 +15,24 @@ const collapsed = ref(!unifySlug(useRoute().params.slug).startsWith(props.link.p
 </script>
 
 <template>
-    <div class="tree-item" v-if="project && !isNaN(project)">
+    <div class="py-1" v-if="project && !isNaN(project)">
         <template v-if="hasChildren">
-            <div class="tree-item-self"
-                :class="{ 'is-collapsed': collapsed, 'mod-collapsible is-clickable': hasChildren }"
-                data-path="{{ props.link.title }}" @click="collapsed = hasChildren && !collapsed"
-                :data-type="link.private ? 'privé' : undefined">
-                <div v-if="hasChildren" class="tree-item-icon collapse-icon">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
-                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-                        class="svg-icon right-triangle">
+            <div class="flex gap-2 items-center cursor-pointer hover:text-opacity-75 text-light-100 dark:text-dark-100" @click="collapsed = hasChildren && !collapsed" :data-type="link.private ? 'privé' : undefined">
+                <div v-if="hasChildren" class="w-4 h-4 transition-transform" :class="{'-rotate-90': collapsed}">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                         <path d="M3 8L12 17L21 8"></path>
                     </svg>
                 </div>
-                <div class="tree-item-inner">{{ link.title }}</div>
+                <div class="font-semibold">{{ link.title }}</div>
             </div>
-            <div v-if="!collapsed" class="tree-item-children">
-                <NavigationLink v-if="hasChildren" v-for="l of link.children" :link="l" :project="project" />
+            <div v-if="!collapsed">
+                <NavigationLink class="border-light-40 dark:border-dark-40 ms-2 ps-4 border-l" v-if="hasChildren" v-for="l of link.children" :link="l" :project="project" />
             </div>
         </template>
-        <NuxtLink v-else class="tree-item-self" :to="{ path: `/explorer/${project}/${link.path}`, force: true }"
-            :active-class="'mod-active'" :data-type="(link.type === 'Canvas' ? 'graph' : (link.private ? 'privé' : undefined))">
-            <div class="tree-item-inner">{{ link.title }}</div>
+        <NuxtLink v-else class="text-light-100 dark:text-dark-100 cursor-pointer hover:text-opacity-75" :to="{ path: `/explorer/${project}/${link.path}`, force: true }"
+            active-class="!text-accent-blue relative before:border-l-2 before:border-accent-blue before:absolute before:-top-1 before:-bottom-1 before:-left-4 before:-mx-px" :data-type="(link.type === 'Canvas' ? 'graph' : (link.private ? 'privé' : undefined))">
+            <div class="">{{ link.title }}</div>
         </NuxtLink>
     </div>
 </template>
\ No newline at end of file
diff --git a/components/explorer/PreviewContent.vue b/components/explorer/PreviewContent.vue
index 65d8cce..ae9fc65 100644
--- a/components/explorer/PreviewContent.vue
+++ b/components/explorer/PreviewContent.vue
@@ -1,32 +1,24 @@
 <template>
     <Teleport to="#teleports" v-if="display && (!fetched || loaded)">
-        <div class="popover hover-popover" :class="{'is-loaded': fetched}" :style="pos"
+        <div class="absolute border-2 border-light-35 dark:border-dark-35 max-w-[550px] max-h-[450px] overflow-auto bg-light-0 dark:bg-dark-0 text-light-100 dark:text-dark-100" :class="{'is-loaded': fetched}" :style="pos"
             @mouseenter="debounce(show, 250)" @mouseleave="debounce(() => display = false, 250)">
             <div v-if="pending" class="loading"></div>
             <template v-else-if="content !==''">
-                <div v-if="type === 'Markdown'" class=" markdown-embed">
-                    <div class="markdown-embed-content">
-                        <div class="markdown-preview-view markdown-rendered node-insert-event hide-title">
-                            <div class="markdown-preview-sizer markdown-preview-section">
-                                <h1>{{ title }}</h1>
-                                <Markdown v-model="content"></Markdown>
-                            </div>
-                        </div>
-                    </div>
+                <div v-if="type === 'Markdown'" class="p-6">
+                    <ProseH1>{{ title }}</ProseH1>
+                    <Markdown v-model="content"></Markdown>
                 </div>
-                <div v-else-if="type === 'Canvas'" class="canvas-embed is-loaded">
+                <div v-else-if="type === 'Canvas'" class="">
                     <CanvasRenderer :canvas="JSON.parse(content) " />
                 </div>
-                <div class="not-found-container" v-else>
-                    <div class="not-found-image"></div>
-                    <div class="not-found-title">Fichier vide</div>
-                    <div class="not-found-description">Cette page est vide</div>
+                <div class="h-100 w-100 flex flex-1 flex-col justify-center items-center" v-else>
+                    <div class="text-3xl font-extralight tracking-wide text-light-60 dark:text-dark-60">Fichier vide</div>
+                    <div class="text-lg text-light-60 dark:text-dark-60">Cette page est vide</div>
                 </div>
             </template>
-            <div class="not-found-container" v-else>
-                <div class="not-found-image"></div>
-                <div class="not-found-title">Impossible d'afficher</div>
-                <div class="not-found-description">Cette page est impossible à traiter</div>
+            <div class="h-100 w-100 flex flex-1 flex-col justify-center items-center" v-else>
+                <div class="text-3xl font-extralight tracking-wide text-light-60 dark:text-dark-60">Impossible d'afficher</div>
+                <div class="text-lg text-light-60 dark:text-dark-60">Cette page est impossible à traiter</div>
             </div>
         </div>
     </Teleport>
diff --git a/components/prose/ProseA.vue b/components/prose/ProseA.vue
index bdcb35e..af9046b 100644
--- a/components/prose/ProseA.vue
+++ b/components/prose/ProseA.vue
@@ -1,15 +1,17 @@
 <template>
-    <NuxtLink class="preview-link" v-if="data && data[0] && status !== 'pending'"
+    <NuxtLink class="text-accent-blue" v-if="data && data[0] && status !== 'pending'"
         :to="{ path: `/explorer/${project}/${data[0].path}`, hash: hash }" :class="class">
         <PreviewContent :project="project" :path="data[0].path" :anchor="hash">
-            <slot v-bind="$attrs"></slot>
-            <ThemeIcon class="link-icon" v-if="data && data[0] && data[0].type !== 'Markdown'" :height="20" :width="20"
-                :icon="`link-${data[0].type.toLowerCase()}`" />
+            <div class="inline-flex items-center">
+                <slot v-bind="$attrs"></slot>
+                <ThemeIcon class="w-4 h-4 inline-block" v-if="data && data[0] && data[0].type !== 'Markdown'" :height="20" :width="20"
+                    :icon="`link-${data[0].type.toLowerCase()}`" />
+            </div>
         </PreviewContent>
     </NuxtLink>
-    <NuxtLink v-else-if="href" :to="href" :class="class">
+    <NuxtLink v-else-if="href" :to="href" :class="class" class="text-accent-blue inline-flex items-center">
         <slot v-bind="$attrs"></slot>
-        <ThemeIcon class="link-icon" v-if="data && data[0] && data[0].type !== 'Markdown'" :height="20" :width="20"
+        <ThemeIcon class="w-4 h-4 inline-block" v-if="data && data[0] && data[0].type !== 'Markdown'" :height="20" :width="20"
             :icon="`link-${data[0].type.toLowerCase()}`" />
     </NuxtLink>
     <slot :class="class" v-else v-bind="$attrs"></slot>
diff --git a/components/prose/ProseBlockquote.vue b/components/prose/ProseBlockquote.vue
index f8cc9df..400a44f 100644
--- a/components/prose/ProseBlockquote.vue
+++ b/components/prose/ProseBlockquote.vue
@@ -20,4 +20,163 @@ onUnmounted(() => {
 function toggle() {
   el.value?.classList?.toggle('is-collapsed');
 }
-</script>
\ No newline at end of file
+</script>
+
+<style>
+blockquote:not(.callout)
+{
+  @apply ps-4;
+  @apply my-2;
+  @apply relative;
+  @apply before:absolute;
+  @apply before:-top-1;
+  @apply before:-bottom-1;
+  @apply before:left-0;
+  @apply before:w-1;
+  @apply before:bg-light-30;
+  @apply dark:before:bg-dark-30;
+}
+blockquote:empty
+{
+  @apply before:hidden;
+}
+.callout {
+  @apply bg-light-blue;
+  @apply dark:bg-dark-blue;
+}
+.callout.is-collapsible .callout-title
+{
+  @apply cursor-pointer;
+}
+.callout .fold
+{
+  @apply transition-transform;
+}
+.callout.is-collapsed .fold
+{
+  @apply -rotate-90;
+}
+.callout.is-collapsed > p
+{
+  @apply hidden;
+}
+.callout[datacallout="abstract"],
+.callout[datacallout="summary"],
+.callout[datacallout="tldr"] {
+  @apply bg-light-cyan;
+  @apply dark:bg-dark-cyan;
+  @apply text-light-cyan;
+  @apply dark:text-dark-cyan;
+}
+.callout[datacallout="info"] {
+  @apply bg-light-blue;
+  @apply dark:bg-dark-blue;
+  @apply text-light-blue;
+  @apply dark:text-dark-blue;
+}
+.callout[datacallout="todo"] {
+  @apply bg-light-blue;
+  @apply dark:bg-dark-blue;
+  @apply text-light-blue;
+  @apply dark:text-dark-blue;
+}
+.callout[datacallout="important"] {
+  @apply bg-light-cyan;
+  @apply dark:bg-dark-cyan;
+  @apply text-light-cyan;
+  @apply dark:text-dark-cyan;
+}
+.callout[datacallout="tip"],
+.callout[datacallout="hint"] {
+  @apply bg-light-cyan;
+  @apply dark:bg-dark-cyan;
+  @apply text-light-cyan;
+  @apply dark:text-dark-cyan;
+}
+.callout[datacallout="success"],
+.callout[datacallout="check"],
+.callout[datacallout="done"] {
+  @apply bg-light-green;
+  @apply dark:bg-dark-green;
+  @apply text-light-green;
+  @apply dark:text-dark-green;
+}
+.callout[datacallout="question"],
+.callout[datacallout="help"],
+.callout[datacallout="faq"] {
+  @apply bg-light-orange;
+  @apply dark:bg-dark-orange;
+  @apply text-light-orange;
+  @apply dark:text-dark-orange;
+}
+.callout[datacallout="warning"],
+.callout[datacallout="caution"],
+.callout[datacallout="attention"] {
+  @apply bg-light-orange;
+  @apply dark:bg-dark-orange;
+  @apply text-light-orange;
+  @apply dark:text-dark-orange;
+}
+.callout[datacallout="failure"],
+.callout[datacallout="fail"],
+.callout[datacallout="missing"] {
+  @apply bg-light-red;
+  @apply dark:bg-dark-red;
+  @apply text-light-red;
+  @apply dark:text-dark-red;
+}
+.callout[datacallout="danger"],
+.callout[datacallout="error"] {
+  @apply bg-light-red;
+  @apply dark:bg-dark-red;
+  @apply text-light-red;
+  @apply dark:text-dark-red;
+}
+.callout[datacallout="bug"] {
+  @apply bg-light-red;
+  @apply dark:bg-dark-red;
+  @apply text-light-red;
+  @apply dark:text-dark-red;
+}
+.callout[datacallout="example"] {
+  @apply bg-light-purple;
+  @apply dark:bg-dark-purple;
+  @apply text-light-purple;
+  @apply dark:text-dark-purple;
+}
+
+.callout
+{
+  @apply overflow-hidden;
+  @apply my-4;
+  @apply p-3;
+  @apply ps-6;
+  @apply bg-blend-lighten;
+  @apply !bg-opacity-25;
+  @apply border-l-4;
+  @apply inline-block;
+  @apply pe-8;
+}
+.callout-icon
+{
+  @apply w-6;
+  @apply h-6;
+  @apply stroke-2;
+}
+.callout-title
+{
+  @apply flex;
+  @apply items-center;
+  @apply gap-2;
+}
+.callout-title-inner
+{
+  @apply inline-block;
+  @apply font-bold;
+}
+.callout > p
+{
+  @apply mt-2;
+  @apply font-semibold;
+}
+</style>
\ No newline at end of file
diff --git a/components/prose/ProseH1.vue b/components/prose/ProseH1.vue
index 7a55f69..29021d9 100644
--- a/components/prose/ProseH1.vue
+++ b/components/prose/ProseH1.vue
@@ -1,5 +1,5 @@
 <template>
-  <h1 :id="id">
+  <h1 :id="id" class="text-3xl font-semibold my-3 first:pt-0 pt-2">
     <slot />
   </h1>
 </template>
diff --git a/components/prose/ProseH2.vue b/components/prose/ProseH2.vue
index 05335eb..97d3534 100644
--- a/components/prose/ProseH2.vue
+++ b/components/prose/ProseH2.vue
@@ -1,5 +1,5 @@
 <template>
-  <h2 :id="id">
+  <h2 :id="id" class="text-2xl font-semibold my-3 ms-1 first:pt-0 pt-2">
     <slot />
   </h2>
 </template>
diff --git a/components/prose/ProseH3.vue b/components/prose/ProseH3.vue
index 67d81c1..2a87941 100644
--- a/components/prose/ProseH3.vue
+++ b/components/prose/ProseH3.vue
@@ -1,5 +1,5 @@
 <template>
-  <h3 :id="id">
+  <h3 :id="id" class="text-xl font-semibold my-2 ms-4">
     <slot />
   </h3>
 </template>
diff --git a/components/prose/ProseH4.vue b/components/prose/ProseH4.vue
index b3f33b7..32b1fcb 100644
--- a/components/prose/ProseH4.vue
+++ b/components/prose/ProseH4.vue
@@ -1,5 +1,5 @@
 <template>
-  <h4 :id="id">
+  <h4 :id="id" class="text-lg font-semibold my-2 ms-4">
     <slot />
   </h4>
 </template>
diff --git a/components/prose/ProseH5.vue b/components/prose/ProseH5.vue
index bbcfeb7..3d07ccf 100644
--- a/components/prose/ProseH5.vue
+++ b/components/prose/ProseH5.vue
@@ -1,5 +1,5 @@
 <template>
-  <h5 :id="id">
+  <h5 :id="id" class="text-base font-semibold my-1 ms-4">
     <slot />
   </h5>
 </template>
diff --git a/components/prose/ProseHr.vue b/components/prose/ProseHr.vue
index d26dde6..5f70ba4 100644
--- a/components/prose/ProseHr.vue
+++ b/components/prose/ProseHr.vue
@@ -1,3 +1,3 @@
 <template>
-  <hr>
+  <hr class="border-light-35 dark:border-dark-35 m-4">
 </template>
diff --git a/components/prose/ProseLi.vue b/components/prose/ProseLi.vue
index 3bad7d1..3b3a838 100644
--- a/components/prose/ProseLi.vue
+++ b/components/prose/ProseLi.vue
@@ -1,3 +1,3 @@
 <template>
-  <li><slot /></li>
+  <li class="before:absolute before:top-2 before:left-0 before:inline-block before:w-2 before:h-2 before:rounded before:bg-light-40 dark:before:bg-dark-40 relative ps-4"><slot /></li>
 </template>
diff --git a/components/prose/ProseP.vue b/components/prose/ProseP.vue
index 14c310f..a5d480d 100644
--- a/components/prose/ProseP.vue
+++ b/components/prose/ProseP.vue
@@ -1,3 +1,12 @@
 <template>
   <p><slot /></p>
 </template>
+
+<style>
+.text-comment
+{
+  @apply text-light-50;
+  @apply dark:text-dark-50;
+  @apply text-sm;
+}
+</style>
\ No newline at end of file
diff --git a/components/prose/ProseTable.vue b/components/prose/ProseTable.vue
index 74b36d3..a8ca108 100644
--- a/components/prose/ProseTable.vue
+++ b/components/prose/ProseTable.vue
@@ -1,5 +1,5 @@
 <template>
-  <table>
+  <table class="mx-4 my-8 border-collapse border border-light-35 dark:border-dark-35">
     <slot />
   </table>
 </template>
diff --git a/components/prose/ProseTd.vue b/components/prose/ProseTd.vue
index 8bb1a9b..57d94fc 100644
--- a/components/prose/ProseTd.vue
+++ b/components/prose/ProseTd.vue
@@ -1,5 +1,5 @@
 <template>
-  <td>
+  <td class="border border-light-35 dark:border-dark-35 py-1 px-2">
     <slot />
   </td>
 </template>
diff --git a/components/prose/ProseTh.vue b/components/prose/ProseTh.vue
index 940a961..fd3a967 100644
--- a/components/prose/ProseTh.vue
+++ b/components/prose/ProseTh.vue
@@ -1,5 +1,5 @@
 <template>
-  <th>
+  <th class="border border-light-35 dark:border-dark-35 px-4 first:pt-0">
     <slot />
   </th>
 </template>
diff --git a/db.sqlite b/db.sqlite
index 921615792c5428c763e2cea96545bbad0330c7d3..f6a4ceb2c0cf657e2f9a8c0143b16c9b7d94ded3 100644
GIT binary patch
delta 154
zcmZozVBE04c!D%z^h6nF#^{X+bL?4W>iqk>$$@(UZ!rS{gBcKK0&&r1i3{nBtVKX(
z@$`$mtZL1xF1D|_$OyztK+FupEZbLIWG#1KoW5O2i0$ED#^UL9O6=m>r2{x$%D1x^
rumds2b`}H9|MJV31=s}`r$OZv*kAIuvlMUwF&7YXZ)Yjs`4bNSLasCt

delta 154
zcmZozVBE04c!D%z*hCp;#;}bEbL?3rS9}fF<iI_Fw}^p(!3>Bqfw*|H#D#Q5)?y&D
zX!^xoR<-6;7u#1|WCUU+AZ7+)mhG!9vX(nAPTQ^|#P;y-a^?U|0mh=~bwcdo+ocmY
rU-GxJ7_b8|$95J2&j0d^)1guV>@VfpSqeCTm<x!xx3d)R{D}tu1Jg6Z

diff --git a/layouts/default.vue b/layouts/default.vue
index 170f3e1..91a022d 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,22 +1,23 @@
-<script setup lang="ts">
-defineExpose({
-	navigation: false,
-});
-</script>
-
 <template>
-	<div class="site-body">
-		<div class="site-body-left-column desktop-hidden mobile-block">
-			<div class="site-body-left-column-inner">
-				<div class="nav-view-outer">
-					<div class="nav-view">
-						<div class="mobile-slot">
-							<slot name="mobile"></slot>
-						</div>
-					</div>
+	<div class="bg-light-0 my-8 dark:bg-dark-0 px-6 py-3 top-0 z-40 w-96 lg:z-50 border-r border-light-30 dark:border-dark-30 flex flex-col justify-between">
+		<div class="relative bottom-6 flex flex-col gap-4 overflow-auto">
+			<div class="flex justify-between items-center">
+				<NuxtLink class=" text-light-100 dark:text-dark-100 hover:text-opacity-70" aria-label="Accueil" :to="{ path: '/', force: true }"><ThemeIcon class="inline" icon="logo" :width=56 :height=56 /></NuxtLink>
+				<div class="flex gap-4 items-center">
+					<ThemeSwitch />
+					<NuxtLink class="" :to="{ path: '/user/profile', force: true }"><ThemeIcon icon="user" :width=32 :height=32 /></NuxtLink>
 				</div>
 			</div>
+			<div class="flex-auto"><SearchView /></div>
+			<NuxtLink class="px-6 text-lg flex items-center font-semibold text-light-100 dark:text-dark-100 hover:text-opacity-70" aria-label="Projets" :to="{ path: `/explorer`, force: true }">Projets</NuxtLink>
+			<NuxtLink class="px-6 text-lg flex items-center font-semibold text-light-100 dark:text-dark-100 hover:text-opacity-70" aria-label="Editeur" :to="{ path: '/editing', force: true }">Editeur</NuxtLink>
 		</div>
-		<slot />
+		<div class="text-center text-sm text-light-70 dark:text-dark-70">
+			<NuxtLink class="hover:underline italic" :to="{ path: '/third-party', force: true }">Mentions légales</NuxtLink>
+			<p>Copyright Peaceultime - 2024</p>
+		</div>
+	</div>
+	<div class="flex-1 flex items-baseline overflow-auto">
+		<slot></slot>
 	</div>
 </template>
\ No newline at end of file
diff --git a/layouts/explorer.vue b/layouts/explorer.vue
index c694e11..9f8ef56 100644
--- a/layouts/explorer.vue
+++ b/layouts/explorer.vue
@@ -1,23 +1,25 @@
-<script setup lang="ts">
-defineExpose({
-	navigation: true,
-});
-</script>
-
 <template>
-	<div class="site-body">
-		<div class="site-body-left-column">
-			<div class="site-body-left-column-inner">
-				<div class="nav-view-outer">
-					<div class="nav-view">
-						<div class="mobile-slot desktop-hidden mobile-block">
-							<slot name="mobile"></slot>
-						</div>
-						<ExplorerNavigation></ExplorerNavigation>
-					</div>
+	<div class="bg-light-0 my-8 py-3 dark:bg-dark-0 top-0 z-40 w-96 lg:z-50 border-r border-light-30 dark:border-dark-30 flex flex-col justify-between">
+		<div class="relative bottom-6 flex flex-1 flex-col gap-4 px-6">
+			<div class="flex justify-between items-center">
+				<NuxtLink class=" text-light-100 dark:text-dark-100 hover:text-opacity-70" aria-label="Accueil" :to="{ path: '/', force: true }"><ThemeIcon class="inline" icon="logo" :width=56 :height=56 /></NuxtLink>
+				<div class="flex gap-4 items-center">
+					<ThemeSwitch />
+					<NuxtLink class="" :to="{ path: '/user/profile', force: true }"><ThemeIcon icon="user" :width=32 :height=32 /></NuxtLink>
 				</div>
 			</div>
+			<div class="flex"><SearchView /></div>
+			<NuxtLink class="px-6 text-lg tracking-wider flex items-center font-semibold text-light-100 dark:text-dark-100 hover:text-opacity-70" aria-label="Projets" :to="{ path: `/explorer`, force: true }">Projets</NuxtLink>
+			<NuxtLink class="px-6 text-lg tracking-wider flex items-center font-semibold text-light-100 dark:text-dark-100 hover:text-opacity-70" aria-label="Editeur" :to="{ path: '/editing', force: true }">Editeur</NuxtLink>
+			<hr class="border-light-35 dark:border-dark-35"/>
+			<ExplorerNavigation></ExplorerNavigation>
 		</div>
+		<div class="text-center text-sm text-light-70 dark:text-dark-70">
+			<NuxtLink class="hover:underline italic" :to="{ path: '/third-party', force: true }">Mentions légales</NuxtLink>
+			<p>Copyright Peaceultime - 2024</p>
+		</div>
+	</div>
+	<div class="flex-1 flex items-baseline overflow-auto">
 		<slot></slot>
 	</div>
 </template>
\ No newline at end of file
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 059a20c..b707e06 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -19,7 +19,6 @@ export default defineNuxtConfig({
         colors: {
           transparent: 'transparent',
           current: 'currentColor',
-          accent: '#8a5cf5',
           light: {
             red: '#e93147',
             orange: '#ec7500',
@@ -63,7 +62,11 @@ export default defineNuxtConfig({
             60: '#999999',
             70: '#b3b3b3',
             100: '#dadada',
-          }
+          },
+          accent: {
+            purple: '#8a5cf5',
+            blue: '#53aaf5',
+          },
         }
       }
     }
diff --git a/pages/explorer/[projectId]/[...slug].vue b/pages/explorer/[projectId]/[...slug].vue
index 69921b9..137cb38 100644
--- a/pages/explorer/[projectId]/[...slug].vue
+++ b/pages/explorer/[projectId]/[...slug].vue
@@ -1,8 +1,4 @@
 <script setup lang="ts">
-definePageMeta({
-  layout: 'explorer'
-})
-
 const route = useRoute();
 
 const { data: content } = await useFetch(`/api/project/${route.params.projectId}/file`, {
@@ -10,40 +6,32 @@ const { data: content } = await useFetch(`/api/project/${route.params.projectId}
         path: unifySlug(route.params.slug)
     }
 });
+
+definePageMeta({
+    layout: "explorer",
+})
 </script>
 
 <template>
     <Head>
         <Title v-if="content && content[0]">{{ content[0].title }}</Title>
     </Head>
-    <div class="site-body-center-column">
-        <div class="render-container">
-            <template v-if="!!content && content[0] && content[0].type == 'Markdown' && !!content[0].content">
-                <div class="render-container-inner">
-                    <div class="publish-renderer">
-                        <div class="markdown-preview-view markdown-rendered node-insert-event hide-title">
-                            <div class="markdown-preview-sizer markdown-preview-section" style="padding-bottom: 0px;">
-                                <h1>{{ content[0].title }}</h1>
-                                <Markdown v-model="content[0].content"></Markdown>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <CommentSide></CommentSide>
-            </template>
-            <CanvasRenderer v-else-if="!!content && content[0] && content[0].type == 'Canvas' && !!content[0].content" :canvas="JSON.parse(content[0].content)"></CanvasRenderer>
-            <div v-else-if="!!content && content[0]">
-                <div class="not-found-container">
-                    <div class="not-found-image"></div>
-                    <div class="not-found-title">Impossible d'afficher (ou vide)</div>
-                    <div class="not-found-description">Cette page est actuellement vide ou impossible à traiter</div>
-                </div>
-            </div>
-            <div v-else class="not-found-container">
-                <div class="not-found-image"></div>
-                <div class="not-found-title">Introuvable</div>
-                <div class="not-found-description">Cette page n'existe pas</div>
+    <div class="flex-1 flex overflow-hidden">
+        <template v-if="!!content && content[0] && content[0].type == 'Markdown' && !!content[0].content">
+            <div>
+                <ProseH1>{{ content[0].title }}</ProseH1>
+                <Markdown v-model="content[0].content"></Markdown>
             </div>
+            <CommentSide class="hidden"></CommentSide>
+        </template>
+        <CanvasRenderer v-else-if="!!content && content[0] && content[0].type == 'Canvas' && !!content[0].content" :canvas="JSON.parse(content[0].content)"></CanvasRenderer>
+        <div v-else-if="!!content && content[0]" class="h-100 w-100 flex flex-1 flex-col justify-center items-center">
+            <div class="text-3xl font-extralight tracking-wide text-light-60 dark:text-dark-60">Impossible d'afficher (ou vide)</div>
+            <div class="text-lg text-light-60 dark:text-dark-60">Cette page est actuellement vide ou impossible à traiter</div>
+        </div>
+        <div v-else class="h-100 w-100 flex flex-1 flex-col justify-center items-center">
+            <div class="text-3xl font-extralight tracking-wide text-light-60 dark:text-dark-60">Introuvable</div>
+            <div class="text-lg text-light-60 dark:text-dark-60">Cette page n'existe pas</div>
         </div>
     </div>
 </template>
\ No newline at end of file
diff --git a/pages/explorer/index.vue b/pages/explorer/index.vue
index b3e5bea..ae5cec4 100644
--- a/pages/explorer/index.vue
+++ b/pages/explorer/index.vue
@@ -8,17 +8,19 @@ const { data: projects, status, error } = await useFetch('/api/project');
     <Head>
         <Title>Liste des projets</Title>
     </Head>
-    <div class="site-body-center-column">
-        <div class="projects-container">
-            <div v-if="status === 'success'" class="project-list">
-                <div v-for="p of projects" class="project-item">
-                    <NuxtLink class="project-title" :to="{ path: `/explorer/${p.id}/${p.home}`, force: true }">{{ p.name }}</NuxtLink>
-                    <div class="project-user">Par {{ p.username }}</div>
-                    <div class="project-pages">{{ p.pages }} pages</div>
-                    <div class="project-summary">{{ p.summary ?? "Sans contenu" }}</div>
+    <div v-if="status === 'success'" class="grid grid-cols-2 gap-4">
+        <div v-for="p of projects" class="border border-light-35 dark:border-dark-35 px-4 py-2">
+            <div class="flex justify-between">
+                <div>
+                    <NuxtLink class="text-accent-blue text-xl font-semibold hover:text-opacity-75" :to="{ path: `/explorer/${p.id}/${p.home}`, force: true }">{{ p.name }}</NuxtLink>
+                    <div class="italic">Par <NuxtLink class="font-semibold hover:underline" :to="{ path: `/users/${p.owner}`, force: true }">{{ p.username }}</NuxtLink></div>
+                </div>
+                <div>
+                    <div class="">{{ p.pages }} pages</div>
                 </div>
             </div>
-            <div v-else-if="status === 'pending'" class="loading"></div>
+            <div class="">{{ p.summary ?? "Sans contenu" }}</div>
         </div>
     </div>
+    <div v-else-if="status === 'pending'" class="loading"></div>
 </template>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index 5e4006d..ed32d0e 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -2,12 +2,8 @@
     <Head>
         <Title>Accueil</Title>
     </Head>
-    <div class="site-body-center-column">
-        <div class="render-container">
-            <div class="not-found-container">
-                <ThemeIcon icon="logo" :width=128 :height=128 />
-                <div class="not-found-title">Coucou :) :) :) :)</div>
-            </div>
-        </div>
+    <div class="h-100 w-100 flex flex-1 flex-col justify-center items-center">
+        <ThemeIcon icon="logo" :width=128 :height=128 />
+        <div class="text-3xl font-extralight tracking-wide text-light-60 dark:text-dark-60">Coucou :) :) :) :)</div>
     </div>
 </template>
\ No newline at end of file