Added base for profile section.

frontend/src/lib/components/navbar.svelte

@@ -111,4 +111,3 @@
 		<div class={scrollY < SCROLL ? 'navbar-overlay-back' : ''} bind:this={navbar_category} />
 	</div>
 </nav>
-<div class="navbar-fake" />

frontend/src/lib/css/base.css

@@ -33,10 +33,16 @@ h1 {
     --palette-purple: #4B1E78;
     --palette-brown: #3c2317;
 
+    --background-light: linear-gradient(180deg, rgba(248, 241, 241, 1) 0%, rgba(221, 212, 223, 1) 100%);
+
     --z-index-last: -1;
     --z-index-normal: 0;
     --z-index-front: 1;
-    --z-index-popup: 2;
+    --z-index-navbar: 2;
+    --z-index-popup: 3;
+
+    --border-min: 0.5rem;
+    --border-max: 2rem;
 
     --width-mobile: 875px;
     /*  https://clamp.font-size.app/ 
@@ -44,6 +50,13 @@ h1 {
     --1-rem: clamp(0.75rem, -0.2222rem + 1.7778vw, 1rem);
     --1-2-rem: clamp(0.9rem, -0.2667rem + 2.1333vw, 1.2rem);
     --1-6-rem: clamp(1.2rem, -0.3556rem + 2.8444vw, 1.6rem);
+
+    --navbar-height: 6rem;
+}
+
+.base {
+    z-index: var(--z-index-front);
+    position: relative;
 }
 
 .title {

frontend/src/lib/css/button-slider.css

@@ -2,7 +2,7 @@
     display: flex;
     width: 100%;
     height: 3.5rem;
-    background: linear-gradient(180deg, rgba(248, 241, 241, 1) 0%, rgba(221, 212, 223, 1) 100%);
+    background: var(--background-light);
     border-radius: 3rem;
     padding: 0 !important;
 }

frontend/src/lib/css/footer.css

@@ -11,7 +11,7 @@
     top: -2rem;
     width: 100%;
     background-color: var(--color-background);
-    border-radius: 2rem;
+    border-radius: var(--border-max);
 }
 
 .footer-container {
@@ -21,8 +21,7 @@
     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;
+    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 {

frontend/src/lib/css/navbar.css

@@ -1,5 +1,4 @@
 :root {
-    --navbar-height: 6rem;
     --transition: all .4s ease 0s;
     --navbar-dark: #261C2CFF;
     --navbar-darker: #261C2CFF;
@@ -24,17 +23,12 @@ a {
 }
 
 .navbar-background {
-    border-radius: 0.5rem;
+    border-radius: var(--border-min);
     background-image: linear-gradient(to right, var(--navbar-dark) 0%, var(--navbar-light) 100%);
     height: 90%;
     margin: 0.5rem;
 }
 
-.navbar-fake {
-    height: var(--navbar-height);
-    width: 100%;
-}
-
 /* Background */
 
 .container {
@@ -50,7 +44,7 @@ a {
     background-image: linear-gradient(to right, var(--navbar-dark) 0%, var(--navbar-light) 100%);
     width: inherit;
     height: inherit;
-    border-radius: 0.5rem;
+    border-radius: var(--border-min);
     box-shadow: rgba(52, 42, 58, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, var(--navbar-inset);
     outline: 2px solid rgb(40, 32, 44, 0.5);
 }
@@ -59,7 +53,7 @@ a {
     grid-area: overlay;
     width: inherit;
     height: inherit;
-    border-radius: 0.5rem;
+    border-radius: var(--border-min);
     box-shadow: var(--navbar-inset);
     outline: var(--navbar-outline)
 }

frontend/src/lib/css/post.css

@@ -22,14 +22,14 @@
 
 .post-overlay-front {
     grid-area: overlay;
-    background-image: linear-gradient(180deg, rgba(248, 241, 241, 1) 0%, rgba(221, 212, 223, 1) 100%);
+    background-image: var(--background-light);
-    border-radius: 0.5rem;
+    border-radius: 1rem;
     box-shadow: rgba(79, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
 }
 
 .post-overlay-back {
     grid-area: overlay;
-    border-radius: 0.5rem;
+    border-radius: 1rem;
 }
 
 .post {

frontend/src/lib/css/profile/base.css

@@ -0,0 +1,95 @@
+:root {
+    --banner-height: 30vw;
+    --picture-width: 15rem;
+    --picture-left: 5vw;
+    --picture-border: 1.5rem;
+    --content-width: 40rem;
+}
+
+.profile {
+    font-family: 'JetBrains Mono';
+    color: var(--color-text);
+}
+
+.profile h1 {
+    font-weight: 800;
+    font-size: 2rem;
+    margin: 0;
+}
+
+.profile p {
+    text-align: justify;
+    text-justify: auto;
+}
+
+.profile-banner {
+    display: grid;
+    grid-template-areas:
+        "profile-banner-gradient"
+        "profile-banner-img"
+        "profile-banner-profile";
+    height: var(--banner-height);
+    width: 100%;
+}
+
+.profile-banner-gradient {
+    grid-area: overlay;
+    background: linear-gradient(0deg, #00000000, #261C2C70 50%, #261C2CC0 100%);
+    height: calc(var(--navbar-height)*2);
+}
+
+.profile-banner-img {
+    grid-area: overlay;
+    z-index: var(--z-index-last);
+}
+
+.profile-banner-img img {
+    object-fit: cover;
+    width: 100dvw;
+    height: var(--banner-height);
+}
+
+.profile-banner-profile {
+    grid-area: overlay;
+    position: absolute;
+    top: calc(var(--banner-height) - var(--picture-width)*2/5);
+    left: var(--picture-left);
+}
+
+.profile-banner-profile img {
+    width: var(--picture-width);
+    height: var(--picture-width);
+    border-radius: 100%;
+    border: var(--picture-border) solid;
+    color: var(--color-background);
+}
+
+.profile-name {
+    display: flex;
+    margin-top: 2rem;
+    margin-left: calc(var(--picture-left) + var(--picture-width) + var(--picture-border)*2);
+}
+
+.profile-name span {
+    background-color: var(--color-pill);
+    margin-left: 1rem;
+    margin-right: 1rem;
+    padding: 0.5rem;
+    border-radius: var(--border-min);
+}
+
+.profile-container {
+    width: 100%;
+    display: flex;
+}
+
+/* Depending on media */
+
+.profile-content {
+    margin-top: 8rem;
+    width: var(--content-width);
+    padding: 3rem;
+    border-radius: 1rem;
+    box-shadow: rgba(79, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
+    background-image: var(--background-light);
+}

frontend/src/routes/+layout.svelte

@@ -6,8 +6,8 @@
 	import Footer from '$lib/components/footer.svelte';
 </script>
 
-<Navbar/>
+<Navbar />
-<slot />
+<div class="base">
+	<slot />
+</div>
 <Footer />
-
-<!-- Footer -->

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

@@ -0,0 +1,31 @@
+<script>
+	import '$lib/css/base.css';
+	import '$lib/css/profile/base.css';
+
+	let cover =
+		'https://share.etheryo.fr/Rando-01.11.2023/Groupe%20Ombre%20Lac%20Montagne%20Rouge%20Bleu.jpg';
+	let profile = 'https://cloud.etheryo.fr/s/JrKoP57R4qHcR4A/download/pfp.jpg';
+	let name = 'Yohan Boujon';
+	let pronoun = 'il/lui';
+	let description = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Qui atque praesentium et culpa. Qui aliquam nobis error id praesentium quam reprehenderit.<br><br>Corrupti voluptas amet ut. Ratione neque fugit nam vel incidunt. Blanditiis sit vel et occaecati. Expedita necessitatibus sit et minima recusandae pariatur explicabo. Aspernatur nam laborum corrupti quisquam vero repellat soluta. Aliquid magni fugiat sint sunt. Natus ut architecto magni harum et quam. Eaque dicta quo ex inventore.<br><br>Aut odio et sunt et dicta quo non. Impedit debitis omnis in nihil. Deleniti quaerat aut quia molestias. Neque voluptatum deleniti dolore aliquam. Delectus saepe aliquam doloremque fugit voluptas laborum dolorem nobis. Eveniet est repellat autem sunt. Repudiandae repellendus incidunt est eveniet ut. Similique quis vero dolorum. Debitis dolores atque ullam quia repellat repudiandae. Consequuntur voluptatem quia vel repellendus sed asperiores. Modi rerum alias voluptatem in quia quasi quos et. Quae quisquam quis repellendus tenetur. Incidunt accusantium fugiat veritatis molestiae. Corporis nemo odio dolorem perferendis praesentium et impedit saepe.'
+</script>
+
+<div class="profile">
+	<div class="profile-banner">
+		<div class="profile-banner-gradient"></div>
+		<div class="profile-banner-img"><img alt="banner" src={cover} /></div>
+		<div class="profile-banner-profile">
+			<img alt="profile" src={profile} />
+		</div>
+	</div>
+	<div class="profile-name center">
+		<h1>{name}</h1>
+		<span>{pronoun}</span>
+	</div>
+	<div class="center profile-container">
+		<div class="profile-content">
+			<h1>À propos</h1>
+			<p>{@html description}</p>
+		</div>
+	</div>
+</div>

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

@@ -7,24 +7,22 @@
 	import Archive from '$lib/components/archive.svelte';
 </script>
 
-<div class="base">
+<div class="blank" />
-	<div class="blank" />
+<Post
-	<Post
+	cover="https://share.etheryo.fr/Rando-01.11.2023/Groupe%20Ombre%20Lac%20Montagne%20Rouge%20Bleu.jpg"
-		cover="https://share.etheryo.fr/Rando-01.11.2023/Groupe%20Ombre%20Lac%20Montagne%20Rouge%20Bleu.jpg"
+	profile="https://cloud.etheryo.fr/s/JrKoP57R4qHcR4A/download/pfp.jpg"
-		profile="https://cloud.etheryo.fr/s/JrKoP57R4qHcR4A/download/pfp.jpg"
+	title="Le lorem est-il 'Ipsum' ? C'est une question que je me pose souvent"
-		title="Le lorem est-il 'Ipsum' ? C'est une question que je me pose souvent"
+	text="Petit texte explicatif sans vraiment de grande importance, hormis le fait que ce soit le meilleur texte de tous les temps, après je ne suis pas ouvert au débat mais on peut essayer... bref"
-		text="Petit texte explicatif sans vraiment de grande importance, hormis le fait que ce soit le meilleur texte de tous les temps, après je ne suis pas ouvert au débat mais on peut essayer... bref"
+	author="Yohan Boujon"
-		author="Yohan Boujon"
+	date="26/07/2024"
-		date="26/07/2024"
+/>
-	/>
+<div class="blank" />
-	<div class="blank" />
+<div class="margin-left-3">
-	<div class="margin-left-3">
+	<Search logo_size="48" />
-		<Search logo_size="48" />
+</div>
-	</div>
+<div class="blank" />
-	<div class="blank" />
+<Post />
-	<Post />
+<div class="blank" />
-	<div class="blank" />
+<div class="margin-left-3">
-	<div class="margin-left-3">
+	<Archive />
-		<Archive />
-	</div>
 </div>