From 889825672d83aa6680daecbf050222fb5c647536 Mon Sep 17 00:00:00 2001
From: matthieu42morin <matthieu.bernard.morin@gmail.com>
Date: Sat, 11 Nov 2023 16:29:47 +0100
Subject: [PATCH] header, footer update

---
 src/lib/components/Logo.svelte         |  0
 src/lib/components/MainFooter.svelte   | 26 ++++++++
 src/lib/components/MainHeader.svelte   | 91 +++++++++++---------------
 src/lib/components/SocialsCloud.svelte | 32 +++++++++
 4 files changed, 98 insertions(+), 51 deletions(-)
 create mode 100644 src/lib/components/Logo.svelte
 create mode 100644 src/lib/components/MainFooter.svelte
 create mode 100644 src/lib/components/SocialsCloud.svelte

diff --git a/src/lib/components/Logo.svelte b/src/lib/components/Logo.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/lib/components/MainFooter.svelte b/src/lib/components/MainFooter.svelte
new file mode 100644
index 0000000..9b9d52d
--- /dev/null
+++ b/src/lib/components/MainFooter.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import SocialsCloud from './SocialsCloud.svelte';
+	// Social Icons
+	const socialLinks = [
+		{ title: 'GitHub', href: 'https://github.com/skeletonlabs/skeleton', icon: 'fa-github' },
+		{ title: 'Discord', href: 'https://discord.gg/EXqV7W8MtY', icon: 'fa-discord' },
+		{ title: 'X (Twitter)', href: 'https://x.com/SkeletonUI', icon: 'fa-x-twitter' },
+		{ title: 'YouTube', href: 'https://www.youtube.com/@skeletonlabs', icon: 'fa-youtube' }
+	];
+</script>
+
+<footer
+	class="page-footer bg-surface-50 dark:bg-surface-900 border-t border-surface-500/10 text-xs mt-4 md:text-base"
+>
+	<div
+		class="w-full max-w-7xl mx-auto p-4 py-8 md:py-12 space-y-10 flex items-center justify-center"
+	>
+		<!-- <div class="container px-5 py-8 mx-auto flex items-center sm:flex-row flex-col"> -->
+		<a class="flex items-center md:justify-start justify-center" href="/">
+			<img class="w-4 h-4 md:w-8 md:h-8" src="\images\Logo.png" />
+			<p class="sm:pl-4 text-base sm:py-2 sm:mt-0 mt-4">© 2023 Matthieu Morin</p>
+		</a>
+	</div>
+	<hr class="opacity-20" />
+	<SocialsCloud />
+</footer>
diff --git a/src/lib/components/MainHeader.svelte b/src/lib/components/MainHeader.svelte
index 0ea4f79..bde146f 100644
--- a/src/lib/components/MainHeader.svelte
+++ b/src/lib/components/MainHeader.svelte
@@ -1,56 +1,45 @@
 <script lang="ts">
-    import { AppBar, LightSwitch } from '@skeletonlabs/skeleton';
-    import * as config from '$lib/config';
-
-    //Current Dark/Light Mode
-	import { modeCurrent } from '@skeletonlabs/skeleton';
-	console.log(modeCurrent);
-	let iconGitHub: string;
-
-	$: {
-		iconGitHub = $modeCurrent ? '/logos/github-mark.png' : '/logos/github-mark-white.png';
-	}
+	import { AppBar, LightSwitch } from '@skeletonlabs/skeleton';
+	import * as config from '$lib/config';
 </script>
+
 <AppBar>
-    <!-- Left-side Header -->
-    <svelte:fragment slot="lead">
-        <a href="/">
-            <div class="items-center align-middle flex gap-2">
-                <img src="/images/Logo.png" alt="Logo" class="w-8 h-8" />
+	<!-- Left-side Header -->
+	<svelte:fragment slot="lead">
+		<a href="/">
+			<div class="items-center align-middle flex gap-2">
+				<img src="/images/Logo.png" alt="Logo" class="w-8 h-8" />
 
-                <strong class="text-3xl uppercase">{config.title}</strong>
-            </div>
-        </a>
-    </svelte:fragment>
-    <svelte:fragment slot="headline">
-        <strong>Blog about the struggles of building a blog!</strong>
-    </svelte:fragment>
-    <!-- Right-side Header -->
-    <svelte:fragment slot="trail">
-        <!-- LinkedIn -->
-        <a
-            class="btn btn-sm variant-ghost-surface"
-            href="https://www.linkedin.com/in/matthieu-morin-7524731a9/"
-            target="_blank"
-            rel="noreferrer"
-        >
-            <img
-                src="/logos/LI-In-Bug.png"
-                width="24"
-                height="24"
-                alt="Matt's LinkedIn Acount"
-            />
-        </a>
-        <!-- github -->
-        <a
-            class="btn btn-sm variant-ghost-surface"
-            href="https://github.com/matthieu42morin"
-            target="_blank"
-            rel="noreferrer"
-        >
-            <img src={iconGitHub} width="24" height="24" alt="Github account" />
-        </a>
+				<strong class="text-3xl uppercase">{config.title}</strong>
+			</div>
+		</a>
+	</svelte:fragment>
 
-        <LightSwitch />
-    </svelte:fragment>
-</AppBar>
\ No newline at end of file
+	<!-- Right-side Header -->
+	<svelte:fragment slot="trail">
+		<!-- Links -->
+		<a href="/blog">Blog</a>
+		<a href="/projects">Projects</a>
+		<a href="/about">About</a>
+		<!-- Social -->
+		<section class="hidden sm:inline-flex space-x-1">
+			<a
+				class="btn-icon hover:variant-soft-primary"
+				href="https://github.com/matthieu42morin"
+				target="_blank"
+				rel="noreferrer"
+			>
+				<i class="fa-brands fa-github text-lg" />
+			</a>
+			<a
+				class="btn-icon hover:variant-soft-primary"
+				href="https://discord.gg/EXqV7W8MtY"
+				target="_blank"
+				rel="noreferrer"
+			>
+				<i class="fa-brands fa-linkedin text-lg" />
+			</a>
+		</section>
+		<LightSwitch />
+	</svelte:fragment>
+</AppBar>
diff --git a/src/lib/components/SocialsCloud.svelte b/src/lib/components/SocialsCloud.svelte
new file mode 100644
index 0000000..e35d681
--- /dev/null
+++ b/src/lib/components/SocialsCloud.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	//Current Dark/Light Mode
+	import { modeCurrent } from '@skeletonlabs/skeleton';
+	console.log(modeCurrent);
+	let iconGitHub: string;
+
+	$: {
+		iconGitHub = $modeCurrent ? '/logos/GitHub_Logo.png' : '/logos/GitHub_Logo_White.png';
+	}
+</script>
+
+<div class="flex sm:flex-row flex-col LogoCloud grid-cols-1 lg:!grid-cols-2 gap-1 max-h-[128px]">
+	<a
+		class="logo-item"
+		href="https://www.linkedin.com/in/matthieu-morin-7524731a9/"
+		target="_blank"
+		rel="noreferrer"
+	>
+		<img class="max-h-[64px]" src="/logos/LI-Logo.png" alt="Matt's LinkedIn Acount" />
+	</a>
+	<a class="logo-item" href="https://github.com/matthieu42morin" target="_blank" rel="noreferrer">
+		<img class="max-h-[64px]" src={iconGitHub} alt="Github account" />
+	</a>
+</div>
+
+<style>
+	.LogoCloud {
+		display: grid;
+
+		border-radius: var(--theme-rounded-container);
+	}
+</style>