8 files changed, 82 insertions(+), 41 deletions(-)

M apps/ehretdotme/src/routes/+layout.svelte
A apps/ehretdotme/src/routes/styles.css
M apps/meloedotfr/src/routes/(app)/+layout.svelte
M apps/meloedotfr/src/routes/+layout.svelte
A apps/meloedotfr/src/routes/styles.css
M apps/siegdotfr/src/routes/+layout.svelte
A apps/siegdotfr/src/routes/styles.css
M packages/ui/v2/app.css

@@ 1,5 1,6 @@
 <script>
 	import 'highlight.js/styles/monokai.css';
+    import './styles.css'
 </script>
 
 <slot />

@@ 0,0 1,22 @@
+:root {
+    /* From Farrow & Ball */
+    --ovalRoomBlue: #8b9d9b;
+    --railings: #45484b;
+    --imperial-purple: hsl(237, 11%, 38%);
+    --lake-red: hsl(348, 52%, 55%);
+    --wevet: hsl(17, 17%, 92%);
+    --code: #2d2d2d;
+
+    /*  theme vars */
+    --back: var(--wevet);
+    --prime: var(--lake-red);
+    --text: var(--imperial-purple);
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --back: var(--imperial-purple);
+        --prime: var(--lake-red);
+        --text: var(--wevet);
+    }
+}<
\ No newline at end of file

@@ 1,16 1,15 @@
 <script lang="ts">
-	import '@packages/ui/v1/app.css';
-	import Footer from '@packages/ui/v1/Footer.svelte';
-	import Header from '@packages/ui/v1/Header.svelte';
-	import Layout from '@packages/ui/v1/Layout.svelte';
+	import '@packages/ui/v2/app.css';
+	import Header from '@packages/ui/v2/Header.svelte';
+	import Layout from '@packages/ui/v2/Layout.svelte';
 </script>
 
-<Layout withNavLinks={false}>
+<Layout>
 	<Header slot="header">
-		<a slot="title" class="to-home" data-sveltekit:prefetch href="/">meloe.fr</a>
+		<a slot="title" class="link" data-sveltekit:prefetch href="/">meloe.fr</a>
 		<svelte:fragment slot="links">
-			<a data-sveltekit:prefetch href="/fichiers">/fichiers</a>
-			<a data-sveltekit:prefetch href="/a-propos">/a-propos</a>
+			<a data-sveltekit:prefetch class="link" href="/fichiers">/fichiers</a>
+			<a data-sveltekit:prefetch class="link" href="/a-propos">/a-propos</a>
 		</svelte:fragment>
 	</Header>
 


@@ 20,19 19,8 @@
 </Layout>
 
 <style>
-	.to-home {
-		font-weight: 800;
-		font-size: 2rem;
-	}
-
 	main {
-		width: 100%;
-		padding: 1rem;
-	}
-
-	@media screen and (min-width: 60rem) {
-		main {
-			max-width: 40rem;
-		}
+		max-width: 72ch;
+		margin: 0 auto;
 	}
 </style>

@@ 1,1 1,5 @@
+<script lang="ts">
+    import './styles.css'
+</script>
+
 <slot />

@@ 0,0 1,22 @@
+:root {
+    /* From Farrow & Ball */
+    --ovalRoomBlue: #8b9d9b;
+    --railings: #45484b;
+    --imperial-purple: hsl(237, 11%, 38%);
+    --lake-red: hsl(348, 52%, 55%);
+    --wevet: hsl(17, 17%, 92%);
+    --code: #2d2d2d;
+
+    /*  theme vars */
+    --back: var(--wevet);
+    --prime: var(--railings);
+    --text: var(--imperial-purple);
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --back: var(--railings);
+        --prime: var(--wevet);
+        --text: var(--wevet);
+    }
+}<
\ No newline at end of file

@@ 1,5 1,6 @@
 <script>
 	import 'highlight.js/styles/monokai.css';
+    import './styles.css'
 </script>
 
 <slot />

@@ 0,0 1,22 @@
+:root {
+    /* From Farrow & Ball */
+    --ovalRoomBlue: #8b9d9b;
+    --railings: #45484b;
+    --imperial-purple: hsl(237, 11%, 38%);
+    --lake-red: hsl(348, 52%, 55%);
+    --wevet: hsl(17, 17%, 92%);
+    --code: #2d2d2d;
+
+    /*  theme vars */
+    --back: var(--wevet);
+    --prime: var(--lake-red);
+    --text: var(--imperial-purple);
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --back: var(--imperial-purple);
+        --prime: var(--lake-red);
+        --text: var(--wevet);
+    }
+}<
\ No newline at end of file

@@ 1,17 1,4 @@
 :root {
-	/* From Farrow & Ball */
-	--ovalRoomBlue: #8b9d9b;
-	--railings: #45484b;
-	--imperial-purple: hsl(237, 11%, 38%);
-	--lake-red: hsl(348, 52%, 55%);
-	--wevet: hsl(17, 17%, 92%);
-	--code: #2d2d2d;
-
-	/*  theme vars */
-	--back: var(--wevet);
-	--prime: var(--lake-red);
-	--text: var(--imperial-purple);
-
 	/* fonts */
 	--fs-mobile: 1.2rem;
 	--fs-base: 1.5rem;


@@ 41,7 28,7 @@ body {
 	margin: 0;
 	overflow-wrap: break-word;
 	font-family: var(--font);
-	background-color: var(--lake-red);
+	background-color: var(--prime);
 	font-feature-settings: 'kern', 'liga';
 	color: var(--text);
 	line-height: 1.5;


@@ 129,12 116,6 @@ main > * + * {
 }
 
 @media (prefers-color-scheme: dark) {
-	:root {
-		--back: var(--imperial-purple);
-		--prime: var(--lake-red);
-		--text: var(--wevet);
-	}
-
 	.toc a {
 		color: var(--text);
 	}