header, footer update
This commit is contained in:
parent
de90dacf6d
commit
889825672d
|
@ -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>
|
|
@ -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>
|
||||
<!-- 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>
|
|
@ -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>
|
Loading…
Reference in New Issue