Footer, SocialCloud and copyright + responsivity
TODO: add legal docs
This commit is contained in:
matthieu42morin
parent
e9726bd39a
commit
ab61a720f3
|
|
@ -1,26 +1,21 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
import GiteaLogo from './logos/GiteaLogo.svelte';
|
||||||
import SocialsCloud from './SocialsCloud.svelte';
|
import SocialsCloud from './SocialsCloud.svelte';
|
||||||
// Social Icons
|
|
||||||
const socialLinks = [
|
const year = new Date().getFullYear();
|
||||||
{ 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>
|
</script>
|
||||||
|
|
||||||
<footer
|
<footer
|
||||||
class="page-footer bg-surface-50 dark:bg-surface-900 border-t border-surface-500/10 text-xs mt-4 md:text-base"
|
class="page-footer bg-surface-50 dark:bg-surface-900 border-t border-surface-500/10 text-xs mt-4 md:text-base"
|
||||||
>
|
>
|
||||||
<div
|
<SocialsCloud />
|
||||||
class="w-full max-w-7xl mx-auto p-4 py-8 md:py-12 space-y-10 flex items-center justify-center"
|
<hr class="opacity-20" />
|
||||||
>
|
<div class="w-full max-w-7xl mx-auto p-4 md:py-8 flex items-center justify-center">
|
||||||
<!-- <div class="container px-5 py-8 mx-auto flex items-center sm:flex-row flex-col"> -->
|
<!-- <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="/">
|
<a class="items-center md:justify-start justify-center" href="/">
|
||||||
<img class="w-4 h-4 md:w-8 md:h-8" src="/images/Logo.png" alt="logo" />
|
<p class="sm:pl-4 text-base sm:py-2 sm:mt-0 mt-4">
|
||||||
<p class="sm:pl-4 text-base sm:py-2 sm:mt-0 mt-4">© 2023 Matthieu Morin</p>
|
© {year} Matthieu Morin
|
||||||
|
</p>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<hr class="opacity-20" />
|
|
||||||
<SocialsCloud />
|
|
||||||
</footer>
|
</footer>
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,43 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
//Current Dark/Light Mode
|
import MatrixLogo from './logos/MatrixLogo.svelte';
|
||||||
import { modeCurrent } from '@skeletonlabs/skeleton';
|
|
||||||
console.log(modeCurrent);
|
|
||||||
let iconGitHub: string;
|
|
||||||
|
|
||||||
$: {
|
import GiteaLogo from './logos/GiteaLogo.svelte';
|
||||||
iconGitHub = $modeCurrent ? '/logos/GitHub_Logo.png' : '/logos/GitHub_Logo_White.png';
|
// Social Icons
|
||||||
}
|
const socialLinks = [
|
||||||
|
{
|
||||||
|
title: 'LinkedIn',
|
||||||
|
href: 'https://www.linkedin.com/in/matthieu-morin-7524731a9/',
|
||||||
|
icon: 'fa-brands fa-linkedin'
|
||||||
|
},
|
||||||
|
{ title: 'Matrix', href: '', icon: './MatrixLogo' },
|
||||||
|
{ title: 'Gitea', href: 'https://git.mattmor.in', icon: './GiteaLogo' },
|
||||||
|
{ title: 'X (Twitter)', href: 'https://x.com/SkeletonUI', icon: 'fa-brands fa-x-twitter' },
|
||||||
|
{ title: 'RSS', href: '/blog/feed', icon: 'fa-regular fa-square-rss' }
|
||||||
|
];
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="flex sm:flex-row flex-col LogoCloud grid-cols-1 lg:!grid-cols-2 gap-1 max-h-[128px]">
|
<div class="grid grid-cols-5 gap-1 max-h-[128px]">
|
||||||
|
{#each socialLinks as link}
|
||||||
|
<a
|
||||||
|
class="logo-item"
|
||||||
|
href={link.href}
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
aria-label={link.title}
|
||||||
|
>
|
||||||
|
{#if link.icon === './GiteaLogo'}
|
||||||
|
<GiteaLogo />
|
||||||
|
{:else if link.icon === './MatrixLogo'}
|
||||||
|
<MatrixLogo />
|
||||||
|
{:else}
|
||||||
|
<i class={link.icon + ' text-3xl md:text-6xl'} />
|
||||||
|
{/if}
|
||||||
|
</a>
|
||||||
|
{/each}
|
||||||
|
<!-- <div class="col-span-2 lg:col-span-1 p-4">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
<a
|
<a
|
||||||
class="logo-item"
|
class="logo-item"
|
||||||
href="https://www.linkedin.com/in/matthieu-morin-7524731a9/"
|
href="https://www.linkedin.com/in/matthieu-morin-7524731a9/"
|
||||||
|
|
@ -18,15 +46,40 @@
|
||||||
>
|
>
|
||||||
<img class="max-h-[64px]" src="/logos/LI-Logo.png" alt="Matt's LinkedIn Acount" />
|
<img class="max-h-[64px]" src="/logos/LI-Logo.png" alt="Matt's LinkedIn Acount" />
|
||||||
</a>
|
</a>
|
||||||
<a class="logo-item" href="https://github.com/matthieu42morin" target="_blank" rel="noreferrer">
|
<a
|
||||||
<img class="max-h-[64px]" src={iconGitHub} alt="Github account" />
|
class="logo-item"
|
||||||
|
href="https://git.mattmor.in"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
aria-label="My personal Git instance"
|
||||||
|
>
|
||||||
|
<GiteaLogo />
|
||||||
|
<p class="text-base md:text-xl text-token">My selfhosted Gitea</p>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="flex sm:flex-row flex-col LogoCloud grid-cols-3 md:grid-cols-3 lg:grid-cols-auto gap-1 max-h-[128px]"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
class="logo-item"
|
||||||
|
href="https://git.mattmor.in"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
aria-label="My personal Git instance"
|
||||||
|
>
|
||||||
|
<i class="fa-brands fa-x-twitter text-6xl" />
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
class="logo-item"
|
||||||
|
href="https://git.mattmor.in"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
aria-label="My matrix"
|
||||||
|
>
|
||||||
|
<MatrixLogo />
|
||||||
|
</a>
|
||||||
|
<a class="logo-item" href="/blog/feed" target="_blank" rel="noreferrer" aria-label="Feed">
|
||||||
|
<i class="fa-solid text-6xl" />
|
||||||
|
</a>
|
||||||
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
|
||||||
.LogoCloud {
|
|
||||||
display: grid;
|
|
||||||
|
|
||||||
border-radius: var(--theme-rounded-container);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
<script lang="ts">
|
||||||
|
let clazz = 'w-12 md:w-16';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svg class={clazz} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"
|
||||||
|
><path
|
||||||
|
d="M395.9 484.2l-126.9-61c-12.5-6-17.9-21.2-11.8-33.8l61-126.9c6-12.5 21.2-17.9 33.8-11.8 17.2 8.3 27.1 13 27.1 13l-.1-109.2 16.7-.1.1 117.1s57.4 24.2 83.1 40.1c3.7 2.3 10.2 6.8 12.9 14.4 2.1 6.1 2 13.1-1 19.3l-61 126.9c-6.2 12.7-21.4 18.1-33.9 12z"
|
||||||
|
fill="#fff"
|
||||||
|
/><g fill="#609926"
|
||||||
|
><path
|
||||||
|
d="M622.7 149.8c-4.1-4.1-9.6-4-9.6-4s-117.2 6.6-177.9 8c-13.3.3-26.5.6-39.6.7v117.2c-5.5-2.6-11.1-5.3-16.6-7.9 0-36.4-.1-109.2-.1-109.2-29 .4-89.2-2.2-89.2-2.2s-141.4-7.1-156.8-8.5c-9.8-.6-22.5-2.1-39 1.5-8.7 1.8-33.5 7.4-53.8 26.9C-4.9 212.4 6.6 276.2 8 285.8c1.7 11.7 6.9 44.2 31.7 72.5 45.8 56.1 144.4 54.8 144.4 54.8s12.1 28.9 30.6 55.5c25 33.1 50.7 58.9 75.7 62 63 0 188.9-.1 188.9-.1s12 .1 28.3-10.3c14-8.5 26.5-23.4 26.5-23.4S547 483 565 451.5c5.5-9.7 10.1-19.1 14.1-28 0 0 55.2-117.1 55.2-231.1-1.1-34.5-9.6-40.6-11.6-42.6zM125.6 353.9c-25.9-8.5-36.9-18.7-36.9-18.7S69.6 321.8 60 295.4c-16.5-44.2-1.4-71.2-1.4-71.2s8.4-22.5 38.5-30c13.8-3.7 31-3.1 31-3.1s7.1 59.4 15.7 94.2c7.2 29.2 24.8 77.7 24.8 77.7s-26.1-3.1-43-9.1zm300.3 107.6s-6.1 14.5-19.6 15.4c-5.8.4-10.3-1.2-10.3-1.2s-.3-.1-5.3-2.1l-112.9-55s-10.9-5.7-12.8-15.6c-2.2-8.1 2.7-18.1 2.7-18.1L322 273s4.8-9.7 12.2-13c.6-.3 2.3-1 4.5-1.5 8.1-2.1 18 2.8 18 2.8L467.4 315s12.6 5.7 15.3 16.2c1.9 7.4-.5 14-1.8 17.2-6.3 15.4-55 113.1-55 113.1z"
|
||||||
|
/><path
|
||||||
|
d="M326.8 380.1c-8.2.1-15.4 5.8-17.3 13.8-1.9 8 2 16.3 9.1 20 7.7 4 17.5 1.8 22.7-5.4 5.1-7.1 4.3-16.9-1.8-23.1l24-49.1c1.5.1 3.7.2 6.2-.5 4.1-.9 7.1-3.6 7.1-3.6 4.2 1.8 8.6 3.8 13.2 6.1 4.8 2.4 9.3 4.9 13.4 7.3.9.5 1.8 1.1 2.8 1.9 1.6 1.3 3.4 3.1 4.7 5.5 1.9 5.5-1.9 14.9-1.9 14.9-2.3 7.6-18.4 40.6-18.4 40.6-8.1-.2-15.3 5-17.7 12.5-2.6 8.1 1.1 17.3 8.9 21.3 7.8 4 17.4 1.7 22.5-5.3 5-6.8 4.6-16.3-1.1-22.6 1.9-3.7 3.7-7.4 5.6-11.3 5-10.4 13.5-30.4 13.5-30.4.9-1.7 5.7-10.3 2.7-21.3-2.5-11.4-12.6-16.7-12.6-16.7-12.2-7.9-29.2-15.2-29.2-15.2s0-4.1-1.1-7.1c-1.1-3.1-2.8-5.1-3.9-6.3 4.7-9.7 9.4-19.3 14.1-29-4.1-2-8.1-4-12.2-6.1-4.8 9.8-9.7 19.7-14.5 29.5-6.7-.1-12.9 3.5-16.1 9.4-3.4 6.3-2.7 14.1 1.9 19.8l-24.6 50.4z"
|
||||||
|
/></g
|
||||||
|
></svg
|
||||||
|
>
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import { modeCurrent } from '@skeletonlabs/skeleton';
|
||||||
|
let clazz = 'w-6 md:w-16';
|
||||||
|
let fillStyle = 'fill: #000000';
|
||||||
|
$: {
|
||||||
|
fillStyle = $modeCurrent ? 'fill: #000000' : 'fill: #ffffff';
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svg class={clazz} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path style={fillStyle} d="M 30,2.0000001 V 30 h -1 -2 v 2 h 5 V -3.3333334e-8 L 27,0 v 2 z" />
|
||||||
|
<path
|
||||||
|
style={fillStyle}
|
||||||
|
d="M 9.9515939,10.594002 V 12.138 h 0.043994 c 0.3845141,-0.563728 0.8932271,-1.031728 1.4869981,-1.368 0.580003,-0.322998 1.244999,-0.485 1.993002,-0.485 0.72,0 1.376999,0.139993 1.971998,0.42 0.595,0.279004 1.047001,0.771001 1.355002,1.477001 0.338003,-0.500001 0.795999,-0.941 1.376999,-1.323001 0.579999,-0.382998 1.265998,-0.574 2.059998,-0.574 0.602003,0 1.160002,0.074 1.674002,0.220006 0.514,0.148006 0.953998,0.382998 1.321999,0.706998 0.36601,0.322999 0.653001,0.746 0.859,1.268002 0.205001,0.521998 0.307994,1.15 0.307994,1.887001 v 7.632997 h -3.127 v -6.463997 c 0,-0.383002 -0.01512,-0.743002 -0.04399,-1.082003 -0.02079,-0.3072 -0.103219,-0.607113 -0.242003,-0.881998 -0.133153,-0.25081 -0.335962,-0.457777 -0.584001,-0.596002 -0.257008,-0.146003 -0.605998,-0.220006 -1.046997,-0.220006 -0.440002,0 -0.796003,0.085 -1.068,0.253002 -0.272013,0.170003 -0.485001,0.390002 -0.639001,0.662003 -0.159119,0.287282 -0.263585,0.601602 -0.307994,0.926997 -0.05197,0.346923 -0.07801,0.697217 -0.07801,1.048002 v 6.353999 h -3.128005 v -6.398 c 0,-0.338003 -0.0072,-0.673001 -0.02116,-1.004001 -0.01134,-0.313663 -0.07487,-0.623229 -0.187994,-0.915999 -0.107943,-0.276623 -0.300435,-0.512126 -0.550001,-0.673001 -0.25799,-0.168 -0.636,-0.253002 -1.134999,-0.253002 -0.198123,0.0083 -0.394383,0.04195 -0.584002,0.100006 -0.258368,0.07446 -0.498455,0.201827 -0.704999,0.373985 -0.227981,0.183987 -0.421999,0.449 -0.583997,0.794003 -0.161008,0.345978 -0.242003,0.797998 -0.242003,1.356998 v 6.618999 H 6.99942 V 10.590001 Z"
|
||||||
|
/>
|
||||||
|
<path style={fillStyle} d="M 2,2.0000001 V 30 h 3 v 2 H 0 V 9.2650922e-8 L 5,0 v 2 z" />
|
||||||
|
</svg>
|
||||||
Loading…
Reference in New Issue