Added base footer.

frontend/src/lib/components/archive.svelte

@@ -105,7 +105,6 @@
 
 	function scrollToPosition() {
 		const rect = containerRef.getBoundingClientRect().top + window.scrollY;
-		console.log(rect);
 		window.scrollTo({
 			top: rect,
 			behavior: 'smooth'

frontend/src/lib/components/footer.svelte

@@ -0,0 +1,39 @@
+<script>
+	import '$lib/css/base.css';
+	import '$lib/css/footer.css';
+	import SvgIcon from '@jamescoyle/svelte-icon';
+	import { mdiFormatQuoteClose, mdiFormatQuoteOpen } from '@mdi/js';
+</script>
+
+<div class="footer-container">
+	<div class="footer-content">
+		<div class="footer-left">
+			<h1 class="title">Etheryo Blog</h1>
+		</div>
+		<div class="footer-right">
+			<div class="footer-icon-text">
+				<img alt="github" src="https://cdn.simpleicons.org/github/F8F1F1" />
+				<a target="_blank" href="https://github.com/yoboujon/etheryo-blog">Lien Github</a>
+			</div>
+			<div class="footer-icon-text">
+				<img alt="raspberrypi" src="https://cdn.simpleicons.org/raspberrypi/F8F1F1" />
+				<a target="_blank" href="https://fr.wikipedia.org/wiki/Raspberry_Pi"
+					>Hébergé sur Raspberry Pi</a
+				>
+			</div>
+			<div class="footer-icon-text">
+				<img alt="crowcpp" src="https://crowcpp.org/master/assets/favicon.svg" />
+				<a target="_blank" href="https://github.com/CrowCpp/Crow">Réalisé avec CrowCpp</a>
+			</div>
+			<div class="footer-icon-text footer-special">
+				<SvgIcon type="mdi" path={mdiFormatQuoteOpen} />
+				<span><i>Keep the web free</i></span>
+				<SvgIcon type="mdi" path={mdiFormatQuoteClose} />
+			</div>
+		</div>
+	</div>
+	<div class="footer-slider">
+		<span>{new Date().getFullYear()} • Tous droits réservés • Yohan Boujon</span>
+		<div class="flex-end">ButtonSlider</div>
+	</div>
+</div>

frontend/src/lib/components/navbar.svelte

@@ -74,7 +74,7 @@
 		}}
 	>
 		<div class="navbar-title content">
-			<h1>Etheryo Blog</h1>
+			<h1 class="title">Etheryo Blog</h1>
 		</div>
 		<div class={scrollY < SCROLL ? 'navbar-overlay-front' : ''} />
 		<div class={scrollY < SCROLL ? 'navbar-overlay-back' : ''} bind:this={navbar_title} />

frontend/src/lib/css/base.css

@@ -20,6 +20,7 @@ h1 {
     --color-special: #0174BE;
     --color-text: #261C2C;
     --color-subtext: #413543;
+    --color-hiddentext: #AA94AD;
     --color-background: #F8F1F1;
     --color-code: #ECE6F1;
     --color-pill: #D0D4CA;
@@ -31,6 +32,19 @@ h1 {
     --palette-green: #0d9276;
     --palette-purple: #4B1E78;
     --palette-brown: #3c2317;
+
+    --z-index-last: -1;
+    --z-index-normal: 0;
+    --z-index-front: 1;
+    --z-index-popup: 2;
+}
+
+.title {
+    color: var(--color-background);
+    font-family: Gabarito;
+    font-weight: 700;
+    cursor: default;
+    transition: var(--transition);
 }
 
 .flex-row {

frontend/src/lib/css/footer.css

@@ -0,0 +1,121 @@
+:root {
+    --footer-height: 20rem;
+    --ratio-container: 70%;
+    --ratio-content: 50%;
+    --font-size: 1.2rem;
+}
+
+.footer-container:before {
+    content: "";
+    position: absolute;
+    left: 0;
+    height: 4rem;
+    top: -2rem;
+    width: 100%;
+    background-color: var(--color-background);
+    border-radius: 2rem;
+}
+
+.footer-container {
+    position: relative;
+    flex-direction: column;
+    margin-top: 3rem;
+    padding-top: 2rem;
+    height: fit-content;
+    background-image: linear-gradient(to right, var(--navbar-dark) 0%, var(--navbar-light) 100%);
+    box-shadow: rgba(72, 50, 93, 0.2) 0px 120px 60px -20px inset, rgba(0, 0, 0, 0.4) 0px 100px 60px -18px inset;
+    z-index: var(--z-index-last);
+}
+
+.footer-content {
+    width: inherit;
+    display: flex;
+    flex-direction: row;
+}
+
+.footer-left {
+    flex-basis: calc(100% - var(--ratio-content));
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.footer-left h1 {
+    font-size: 3rem;
+}
+
+.footer-right {
+    flex-basis: var(--ratio-content);
+    padding: 2rem;
+    overflow: hidden;
+}
+
+.footer-icon-text a {
+    text-decoration: none;
+    position: relative;
+    transition: all .3s ease 0s;
+}
+
+.footer-icon-text a:hover {
+    color: var(--palette-pink);
+}
+
+.footer-icon-text a::after {
+    content: ""; 
+    display: block; /* Ensure the pseudo-element takes up space */
+    position: absolute;
+    height: 0.2rem;
+    background-color: var(--palette-pink);
+    width: 0%;
+    transition: all .3s ease 0s;
+}
+
+.footer-icon-text a:hover::after {
+    width: 100%;
+}
+
+.footer-icon-text {
+    color: var(--color-background);
+    font-family: 'JetBrains Mono';
+    font-weight: 500;
+    font-size: var(--font-size);
+    display: flex;
+    align-items: center;
+    padding: 0.5rem;
+}
+
+.footer-icon-text i {
+    font-weight: 700;
+    font-size: 1.6rem;
+    color: var(--color-hiddentext);
+    cursor: default;
+}
+
+.footer-special svg {
+    padding-left: 2rem;
+    color: var(--color-hiddentext);
+}
+
+.footer-icon-text img, .footer-icon-text svg {
+    /* width: calc(calc(((var(--footer-height)*var(--ratio-container-float))) - 4rem)*(1/4)); */
+    width: 1.8rem;
+    height: auto;
+    padding-right: 2rem;
+}
+
+.footer-slider {
+    width: inherit;
+    height: calc(100% - var(--ratio-container));
+    padding: 1rem;
+    display: flex;
+}
+
+.footer-slider span {
+    font-family: 'JetBrains Mono';
+    padding-left: 2rem;
+    color: var(--color-hiddentext);
+}
+
+.footer-slider div {
+    padding-right: 2rem;
+}

frontend/src/lib/css/navbar.css

@@ -83,14 +83,6 @@ a {
     margin-right: 3rem;
 }
 
-.navbar-title h1 {
-    color: var(--color-background);
-    font-family: Gabarito;
-    font-weight: 700;
-    cursor: default;
-    transition: var(--transition);
-}
-
 .navbar-categories {
     align-items: center;
     height: var(--navbar-height);
@@ -162,8 +154,8 @@ a {
 .floating {
     background-image: linear-gradient(to right, #241d25e5 0%, #3d2b47e5 100%);
     box-shadow: rgba(52, 42, 58, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
-    border-bottom-left-radius: 1rem;
+    border-bottom-left-radius: 2rem;
-    border-bottom-right-radius: 1rem;
+    border-bottom-right-radius: 2rem;
     padding-top: 0;
     -webkit-backdrop-filter: var(--navbar-blur);
     backdrop-filter: var(--navbar-blur);

frontend/src/routes/+layout.svelte

@@ -3,9 +3,11 @@
 	import '$lib/css/base.css';
 	import '$lib/css/navbar.css';
 	import Navbar from '$lib/components/navbar.svelte';
+	import Footer from '$lib/components/footer.svelte';
 </script>
 
 <Navbar/>
 <slot />
+<Footer />
 
 <!-- Footer -->

frontend/src/routes/style/+page.svelte

@@ -19,15 +19,6 @@
 		/>
 	</div>
 	<div class="blank" />
-	<div class="blank" />
-	<div class="blank" />
-	<div class="blank" />
-	<div class="blank" />
-	<div class="blank" />
-	<div class="blank" />
-	<div class="blank" />
-	<div class="blank" />
-	<div class="blank" />
 	<div class="margin-left-3">
 		<Search logo_size=48 />
 	</div>
@@ -35,11 +26,8 @@
 	<div class="margin-left-3">
 		<Post />
 	</div>
-
 	<div class="blank" />
 	<div class="margin-left-3">
 		<Archive />
 	</div>
-	
-	<div class="blank" />
 </div>