Updated to only 'Etheryo'. Added base "link" component.

frontend/src/lib/components/footer.svelte

@@ -41,7 +41,7 @@
 <div class="footer-container">
 	<div class="footer-content">
 		<div class="footer-left">
-			<h1 class="title">Etheryo Blog</h1>
+			<h1 class="title">Etheryo</h1>
 		</div>
 		<div class="footer-right">
 			<div class="footer-page justify-center" bind:this={pageDiv}>

frontend/src/lib/components/link.svelte

@@ -0,0 +1,11 @@
+<script>
+	import '$lib/css/base.css';
+	import '$lib/css/link.css';
+	import SvgIcon from '$lib/components/svg-icon-custom.svelte';
+	import { mdiChevronRight } from '@mdi/js';
+</script>
+
+<div class="link-container flex-row center">
+	<span>Link</span>
+	<SvgIcon type="mdi" path={mdiChevronRight} size={80}></SvgIcon>
+</div>

frontend/src/lib/components/navbar.svelte

@@ -10,7 +10,7 @@
 	const SCROLL = 150;
 
 	$: pageUrl = $page.url.pathname;
-	let scrollY;
+	let scrollY=0;
 	let cursorX;
 	let cursorY;
 
@@ -62,7 +62,7 @@
 <nav class={scrollY < SCROLL ? 'flex-row' : 'flex-row floating'}>
 	<div
 		role="banner"
-		class="navbar-height flex-row container"
+		class="{scrollY < SCROLL ? 'disabled' : 'navbar-height flex-row container'}"
 		on:mousemove={(event) => {
 			update_gradient(event, navbar_title);
 		}}
@@ -74,10 +74,8 @@
 		}}
 	>
 		<div class="navbar-title content">
-			<h1 class="title">Etheryo Blog</h1>
+			<h1 class="title">Etheryo</h1>
 		</div>
-		<div class={scrollY < SCROLL ? 'navbar-overlay-front' : ''} />
-		<div class={scrollY < SCROLL ? 'navbar-overlay-back' : ''} bind:this={navbar_title} />
 	</div>
 
 	<div
@@ -105,7 +103,7 @@
 			<div>
 				<a class={isActive('/categories', pageUrl)} href="/categories">Catégories</a>
 			</div>
-			<Search width="15rem" font_size="0.8rem" padding="0rem" logo_size=25/>
+			<Search width="15rem" font_size="0.8rem" padding="0rem" logo_size="25" />
 		</div>
 		<div class={scrollY < SCROLL ? 'navbar-overlay-front' : ''} />
 		<div class={scrollY < SCROLL ? 'navbar-overlay-back' : ''} bind:this={navbar_category} />

frontend/src/lib/css/archive.css

@@ -1,8 +1,8 @@
 .archive-container {
-    box-shadow: rgba(52, 42, 58, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
     border-radius: 1rem;
     color: var(--color-text);
     background-image: var(--background-light);
+    box-shadow: rgba(79, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
 }
 
 .archive {

frontend/src/lib/css/article.css

@@ -0,0 +1,29 @@
+:root {
+    --banner-height: 60vh;
+}
+
+.article-banner {
+    display: grid;
+    grid-template-areas:
+        "article-banner-gradient"
+        "article-banner-content";
+    height: var(--banner-height);
+    width: 100dvw;
+}
+
+.article-banner-background {
+    grid-area: overlay;
+    width: 100dvw;
+    height: var(--banner-height);
+    z-index: var(--z-index-last);
+    background-image: linear-gradient(to right, var(--navbar-dark) 0%, var(--navbar-light) 100%);
+    border-bottom-left-radius: 2rem;
+    border-bottom-right-radius: 2rem;
+    box-shadow: rgba(79, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
+}
+
+.article-banner-content {
+    grid-area: overlay;
+    width: 100dvw;
+    height: var(--banner-height);
+}

frontend/src/lib/css/base.css

@@ -77,6 +77,8 @@ h2 {
     font-weight: 700;
     cursor: default;
     transition: var(--transition);
+    font-size: 1.5rem;
+    margin: 0;
 }
 
 .flex-row {
@@ -174,3 +176,7 @@ h2 {
     text-align: justify;
     text-justify: inter-word;
 }
+
+.disabled {
+    display: none !important;
+}

frontend/src/lib/css/link.css

@@ -0,0 +1,52 @@
+:root {
+    --link-color: #0174BE;
+    --line-size: 5px;
+}
+
+.link-container {
+    width: 60rem;
+    height: 20rem;
+    margin-bottom: 2rem;
+    margin-left: 1rem;
+    margin-right: 1rem;
+    box-shadow: rgba(79, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
+}
+
+.link-container svg {
+    margin-left: 1rem;
+}
+
+/* Link Underlined */
+
+.link-container > span {
+    font-family: 'JetBrains Mono';
+    font-weight: 500;
+    font-size: 2.5rem;
+    text-decoration: none;
+    position: relative;
+    transition: all .3s ease 0s;
+}
+
+.link-container > span:hover {
+    cursor: pointer;
+    color: var(--link-color);
+}
+
+.link-container > span::after {
+    content: "";
+    position: absolute;
+    width: 0;
+    background-color: var(--link-color);
+    transition: all .3s ease 0s;
+    height: var(--line-size);
+}
+
+.link-container > span::after {
+    bottom: calc(0px - var(--line-size));
+    height: var(--line-size);
+    left: 0;
+}
+
+.link-container > span:hover::after {
+    width: 100%;
+}

frontend/src/lib/css/main.css

@@ -0,0 +1,32 @@
+:root {
+    --banner-height: 60vh;
+}
+
+.main-banner {
+    display: grid;
+    grid-template-areas:
+        "overlay";
+    width: 100%;
+}
+
+.main-banner-gradient {
+    grid-area: overlay;
+    background: linear-gradient(0deg, #00000000, #261C2C20 50%, #261c2c40 100%);
+    height: calc(var(--navbar-height)*2);
+}
+
+.main-banner-content {
+    grid-area: overlay;
+    margin-top: var(--navbar-height);
+}
+
+.main-banner-content img {
+    width: 40dvw;
+}
+
+.main-banner-content h1 {
+    color: var(--color-text);
+    font-family: Gabarito;
+    font-weight: 700;
+    font-size: 3rem;
+}

frontend/src/lib/css/post.css

@@ -83,7 +83,7 @@
     flex-direction: row;
 }
 
-h1 {
+.post-text h1 {
     font-weight: 800;
     font-size: var(--1-6-rem);
     margin-top: 1rem;

frontend/src/routes/+layout.svelte

@@ -1,9 +1,12 @@
-<!-- svelte-ignore a11y-missing-content -->
 <script>
+	import { page } from '$app/stores';
 	import '$lib/css/base.css';
 	import '$lib/css/navbar.css';
+
 	import Navbar from '$lib/components/navbar.svelte';
 	import Footer from '$lib/components/footer.svelte';
+
+	// $: pageUrl = $page.url.pathname;
 </script>
 
 <Navbar />

frontend/src/routes/+page.js

@@ -1,6 +1,8 @@
+/* 
 import { redirect } from '@sveltejs/kit';
 
 export async function load(context)
 {
     redirect(301, '/articles')
 }
+*/

frontend/src/routes/+page.svelte

@@ -0,0 +1,21 @@
+<script>
+	import '$lib/css/base.css';
+	import '$lib/css/main.css';
+	import Link from '$lib/components/link.svelte';
+
+	let img = 'placeholder.png';
+</script>
+
+<div class="main-banner">
+	<div class="main-banner-gradient" />
+	<div class="main-banner-content">
+		<div class="flex-row center">
+			<img alt="logo" src={img} />
+			<h1>Welcome to Etheryo</h1>
+		</div>
+	</div>
+</div>
+<!-- content -->
+<div class="flex-col center">
+	<Link />
+</div>

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

@@ -1,19 +1,17 @@
 <script>
 	import '$lib/css/base.css';
 	import '$lib/css/article.css';
-	import CarouselVertical from '$lib/components/carousel-vertical.svelte';
 
 	export let data;
 	// Database
 	const article = data.status == 0 ? data : undefined;
+	// article.content
 </script>
 
-<div>
+<div class="article-banner">
-	<h1>Etheryo Blog</h1>
+	<div class="article-banner-background" />
-	{#if data != undefined}
+	<div class="article-banner-content">
-		<CarouselVertical posts={article.content} />
+		<p>Prout</p>
-		<div style="height: 6rem;"/>
+	</div>
-	{:else}
-		<p>Loading failed :c</p>
-	{/if}
 </div>
+<div style="height: 10rem;" />	

frontend/src/routes/profile/+layout.svelte

@@ -32,7 +32,7 @@
 
 <div class="profile">
 	<div class="profile-banner">
-		<div class="profile-banner-gradient"></div>
+		<div class="profile-banner-gradient" />
 		<div class="profile-banner-img"><img alt="banner" src={cover} /></div>
 		<div class="profile-banner-profile">
 			<img alt="profile" src={profile} />

frontend/src/routes/profile/+page.js

@@ -0,0 +1,6 @@
+import { redirect } from '@sveltejs/kit';
+
+export async function load()
+{
+    throw redirect(301, '/profile/bio');
+}