Madmin
/
its-personal
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

header, footer update

This commit is contained in:
matthieu42morin 2023-11-11 16:29:47 +01:00
parent de90dacf6d
commit 889825672d
4 changed files with 98 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
src/lib/components/Logo.svelte Normal file
View File

26
src/lib/components/MainFooter.svelte Normal file
View File

@ -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>

91
src/lib/components/MainHeader.svelte
View File

@ -1,56 +1,45 @@
<script lang="ts"> <script lang="ts">
import { AppBar, LightSwitch } from '@skeletonlabs/skeleton'; import { AppBar, LightSwitch } from '@skeletonlabs/skeleton';
import * as config from '$lib/config'; 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';
}
</script> </script>
<AppBar> <AppBar>
<!-- Left-side Header --> <!-- Left-side Header -->
<svelte:fragment slot="lead"> <svelte:fragment slot="lead">
<a href="/"> <a href="/">
<div class="items-center align-middle flex gap-2"> <div class="items-center align-middle flex gap-2">
<img src="/images/Logo.png" alt="Logo" class="w-8 h-8" /> <img src="/images/Logo.png" alt="Logo" class="w-8 h-8" />
<strong class="text-3xl uppercase">{config.title}</strong> <strong class="text-3xl uppercase">{config.title}</strong>
</div> </div>
</a> </a>
</svelte:fragment> </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>
<LightSwitch /> <!-- Right-side Header -->
</svelte:fragment> <svelte:fragment slot="trail">
</AppBar> <!-- 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>

32
src/lib/components/SocialsCloud.svelte Normal file
View File

@ -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>