Site title config, cleaning

src/layouts/article.svelte

@@ -1,5 +1,6 @@
 <script>
     import Tag from '$lib/components/Tag.svelte';
+    import { config } from '$lib/config/settings.json'
 
     export let title;
     export let author;
@@ -10,7 +11,7 @@
 
 
 <svelte:head>
-    <title>{title} - Faoilean</title>
+    <title>{title} - {config.sitename}</title>
 </svelte:head>
 
 <div id="article-head">

src/lib/components/Head.svelte

@@ -0,0 +1,13 @@
+<script>
+	import { config } from '../config/settings.json';
+
+	export let title;
+</script>
+
+<svelte:head>
+	{#if title}
+		<title>{title} - {config.sitename}</title>
+    {:else}
+		<title>{config.sitename}</title>
+	{/if}
+</svelte:head>

src/lib/components/Header.svelte

@@ -1,12 +1,21 @@
 <script>
 	import { config } from '../config/settings.json';
+
+	export let title;
 </script>
 
+<svelte:head>
+	{#if title}
+		<title>{title} - {config.sitename}</title>
+	{/if}
+</svelte:head>
+
 <header>
 	<div id="site-title">
-		<img src="/faoilean_icon_transparent.png" alt="" class="site-icon">
+		<img src="{config.siteicon}" alt="" class="site-icon">
 		<a href="/">
 			<h1>{config.sitename}</h1>
+			<span id="site-subtitle">{config.sitedesc}</span>
 		</a>
 	</div>
 
@@ -28,7 +37,7 @@
 
 		height: 3em;
 
-		background: linear-gradient(15deg, #3d74c5, #d872b6);
+		background: linear-gradient(15deg, #3d74c5, #c0589d);
 		color: white;
 
 		box-shadow: 0 0 10px #0000008a;
@@ -36,22 +45,37 @@
 
 	header h1 {
 		margin: 0;
-		color: white;
-		font-size: 1.2em;
-		font-family: "OPTIVagRound-Bold";
+		font-size: 1em;
 		text-transform: initial;
-		font-variant: small-caps;
-	}
+		/* font-variant: small-caps; */
+	} 
 
 	#site-title {
 		display: flex;
 		align-items: center;
-
 		margin-left: 1em;
 	}
 
+	#site-title a {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		line-height: 1;
+	}
+
+	#site-title a:hover {
+		text-decoration: none;
+	}
+
+	#site-title #site-subtitle {
+		font-size: 0.65em;
+		letter-spacing: .08em;
+		opacity: 0.8;
+	}
+
 	#site-title .site-icon {
 		height: 2em;
+		margin-right: 0.3em;
 	}
 
 	#links {
@@ -61,7 +85,7 @@
 		margin-right: 3em;
 	}
 
-	#links a {
+	header * {
 		color: white;
 		font-family: "OPTIVagRound-Bold";
 	}

src/routes/about.svelte

@@ -1,5 +1,6 @@
 <script context="module">
 	import { browser, dev } from '$app/env';
+    import { config } from '$lib/config/settings.json'
 
 	// we don't need any JS on this page, though we'll load
 	// it in dev so that we get hot module replacement...
@@ -15,7 +16,7 @@
 </script>
 
 <svelte:head>
-	<title>About</title>
+	<title>About - {config.sitename}</title>
 </svelte:head>
 
 <div class="content">

src/routes/articles/index.svelte

@@ -1,9 +1,7 @@
 
-<script context="module">
-    console.log("Here");    
-</script>
-
 <script>
+    import { config } from '$lib/config/settings.json'
+
     export const layout = '';
     export let articles;
 
@@ -15,10 +13,15 @@
     }
 </script>
 
+<svelte:head>
+    <title>Articles - {config.sitename}</title>
+</svelte:head>
+
+<h1>All Articles</h1>
+There are {articles.length} articles on this blog.
 
-Tada
 <ul>
-    <button on:click={printArticles}>Debug Articles</button>
+    <!-- <button on:click={printArticles}>Debug Articles</button> -->
 
     {#each articles as { title, author, path }}
         <li>

src/routes/index.svelte

@@ -1,4 +1,5 @@
 <script context="module">
+    import { config } from '$lib/config/settings.json'
 	export const prerender = true;
 </script>
 
@@ -6,14 +7,15 @@
 </script>
 
 <svelte:head>
-	<title>Faoilean</title>
+	<title>{config.sitename}</title>
 </svelte:head>
 
 <section>
-	<h1>Look at me !</h1>
+	<h1>Welcome !</h1>
 	wait what this shit really works?
 
-	<a href="articles" sveltekit:prefetch>All articles</a>
+	<br>
+	<a href="articles" sveltekit:prefetch>All articles</a><br>
 	<a href="articles/test" sveltekit:prefetch>Test article</a>
 </section>