Added articles section on profile.

frontend/src/lib/components/post.svelte

@@ -69,11 +69,11 @@
 				<p>{text}</p>
 			</div>
 			<div class="text-container">
-				<div class="pill pill-profile post-pill">
+				<div class="pill pill-profile post-author-pill">
 					<img alt="profile" src={profile} />
 					<span>{author}</span>
 				</div>
-				<div class="pill pill-reversed post-pill">
+				<div class="pill pill-reversed flex-end">
 					<span>{date}</span>
 					<SvgIcon type="mdi" path={mdiCalendarRange} size="120"></SvgIcon>
 				</div>

frontend/src/lib/css/base.css

@@ -12,6 +12,13 @@ html {
 h1 {
     margin-top: 0.5rem;
     margin-bottom: 1rem;
+    font-weight: 800;
+    font-size: var(--2-rem);
+}
+
+h2 {
+    font-weight: 600;
+    font-size: var(--1-4-rem);
 }
 
 :root {
@@ -50,10 +57,11 @@ h1 {
     --width-min-desktop: 1275px;
     --width-mobile: 875px;
     /*  https://clamp.font-size.app/ 
-        min=875px       max=110px       */
+        min=875px       max=1100px       */
     --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);
+    --2-rem: clamp(1.4rem, -0.834rem + 4.0851vw, 2rem);
 
     --navbar-height: 6rem;
 }

frontend/src/lib/css/post.css

@@ -1,10 +1,31 @@
 :root {
-    /*  min vp: 875px       max vp: 1250px 
+    --width-max-post: 60rem;
-        min:    750ox       max:    1125px  */
+    --width-min-post: 50rem;
-    --width-post: clamp(46.875rem, -7.8125rem + 100vw, 70.3125rem);
+    --height-post: 20rem;
+    --width-picture: 25rem;
     --ratio-picture: 0.5;
 }
 
+@media screen and (max-width: 1075px) {
+    .post-container {
+        width: var(--width-min-post);
+    }
+
+    .post-text {
+        width: calc(var(--width-min-post) - var(--width-picture) - 4rem);
+    }
+}
+
+@media screen and (min-width: 1076px) {
+    .post-container {
+        width: var(--width-max-post);
+    }
+
+    .post-text {
+        width: calc(var(--width-max-post) - var(--width-picture) - 4rem);
+    }
+}
+
 /* Post */
 
 .post-container {
@@ -13,8 +34,7 @@
         "post-overlay-back"
         "post-overlay-front"
         "post";
-    height: 20rem;
+    height: var(--height-post);
-    width: var(--width-post);
 }
 
 .post-overlay-front {
@@ -37,9 +57,8 @@
 }
 
 .post img {
-    width: auto;
+    width: var(--width-picture);
-    max-width: calc(var(--ratio-picture)*var(--width-post));
+    height: var(--height-post);
-    height: 100%;
     object-fit: cover;
     border-top-left-radius: 1rem;
     border-bottom-left-radius: 1rem;
@@ -53,7 +72,6 @@
     justify-content: space-between;
     display: flex;
     flex-direction: column;
-    width: 100%;
     margin: 1rem;
     margin-right: 2rem;
 }
@@ -90,12 +108,10 @@ h1 {
     display: -webkit-box;
     -webkit-box-orient: vertical;
     text-overflow: ellipsis;
-    -webkit-line-clamp: 4;
+    -webkit-line-clamp: 3;
-    line-clamp: 4;
+    line-clamp: 3;
 }
 
-.post-pill {
+.post-author-pill {
-    height: 3rem;
+    width: 100%;
-    width: fit-content;
-    flex-grow: 1;
 }

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

@@ -31,8 +31,6 @@
 }
 
 .profile h1 {
-    font-weight: 800;
-    font-size: 2rem;
     margin: 0;
 }
 
@@ -100,6 +98,7 @@
     margin-right: 1rem;
     padding: 0.5rem;
     border-radius: var(--border-min);
+    font-size: var(--1-2-rem);
 }
 
 .profile-slider {

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

@@ -23,10 +23,13 @@
 
 	function changeDir(click) {
 		const id = click.detail.id;
-		goto(idUrl.getStr(id));
+		goto(idUrl.getStr(id), { noScroll: true });
 	}
+    let innerWidth;
 </script>
 
+<svelte:window bind:innerWidth />
+
 <div class="profile">
 	<div class="profile-banner">
 		<div class="profile-banner-gradient"></div>

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

@@ -1,8 +1,73 @@
 <script>
 	import '$lib/css/base.css';
 	import '$lib/css/profile/base.css';
+
+	import Post from '$lib/components/post.svelte';
+
+	const posts = [
+		{
+			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',
+			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',
+			title: "Le lorem est-il 'Ipsum' ? C'est une question que je me pose souvent",
+			author: 'Yohan Boujon',
+			date: '26/07/2024'
+		},
+		{
+			cover: 'https://share.etheryo.fr/Rando-01.11.2023/Groupe%20Lac%20Roche%20Rouge%20Bleu.jpg',
+			profile: 'https://saoulbonmonsieur.etheryo.fr/assets/pers6.jpg',
+			text: 'Découvrez comment installer Linus Torvalds sur votre tablette avec ces étapes simples et rapides. Un guide essentiel pour les passionnés de technologie.',
+			title: 'Comment installer Linus Torvalds sur ma Tablette ?',
+			author: 'Laurent Cunier',
+			date: '12/11/2023'
+		},
+		{
+			cover: 'https://share.etheryo.fr/Rando-01.11.2023/Vert%20Rouge%20Vue%20Montagne%20Aerien%20Ciel%20Electrique.jpg',
+			profile: 'https://saoulbonmonsieur.etheryo.fr/assets/pers2.jpg',
+			text: "Un aperçu de ce qui rend Minecraft si captivant et pourquoi tant de gens y sont accros. Explorez les raisons derrière l'engouement pour ce jeu phénoménal.",
+			title: "J'aime le jeu Minecraft",
+			author: 'Marion Nete',
+			date: '23/01/2024'
+		},
+		{
+			cover: 'https://share.etheryo.fr/Rando-01.11.2023/Yohan%20Pose%20GrosRocher%20Cascade%20Orange%20Roche.jpg',
+			profile: 'https://cloud.etheryo.fr/s/JrKoP57R4qHcR4A/download/pfp.jpg',
+			text: "Plongez dans l'univers musical de 'Le miam' et découvrez pourquoi ce groupe pourrait devenir votre nouvel favori. Une analyse qui pourrait vous surprendre.",
+			title: "Pourquoi 'Le miam' pourrait être votre groupe de musique préféré ?",
+			author: 'Yohan Boujon',
+			date: '07/03/2024'
+		},
+		{
+			cover: 'https://share.etheryo.fr/Rando-01.11.2023/Alix%20Groupe%20Roche%20Cascade%20Orange%20Roche%20Lac.jpg',
+			profile: 'https://saoulbonmonsieur.etheryo.fr/assets/pers6.jpg',
+			text: 'Les mystères des algorithmes de recommandation sur YouTube dévoilés. Découvrez comment ces systèmes influencent ce que vous regardez.',
+			title: 'Le mystère des algorithmes de recommandation sur YouTube',
+			author: 'Laurent Cunier',
+			date: '15/05/2023'
+		},
+		{
+			cover: 'https://share.etheryo.fr/Rando-01.11.2023/Cyril%20Lac%20Rouge%20Bleu%20Aventure%20Cascade%20Nuage.jpg',
+			profile: 'https://saoulbonmonsieur.etheryo.fr/assets/pers2.jpg',
+			text: "Explorez les secrets des graphismes modernes dans les jeux vidéo et comment ils transforment l'expérience de jeu. Un regard fascinant sur la technologie derrière les images.",
+			title: 'Les secrets cachés derrière les graphismes de jeux vidéo modernes',
+			author: 'Marion Nete',
+			date: '30/06/2024'
+		}
+	];
 </script>
 
 <div class="profile-main justify-center">
-    <p> ARTICCCLES </p>
+	<div class="profile-container">
-</div>
+		{#each posts as p}
+			<Post
+				cover={p.cover}
+				profile={p.profile}
+				text={p.text}
+				title={p.title}
+				author={p.author}
+				date={p.date}
+			/>
+		{/each}
+	</div>
+</div>