Addded min version for desktop.

frontend/src/lib/components/archive.svelte

@@ -7,7 +7,7 @@
 
 	export let fontPost = 1;
 	export let paddingPost = 0.5;
-	export let width = "100%";
+	export let customStyle = "";
 
 	const posts = {
 		'Août 2024': [
@@ -38,7 +38,6 @@
 	const size = Object.keys(posts).length;
 	let archiveRefs = Array(size);
 	let archivePostRefs = Array(size);
-	let containerRef;
 
 	let isActive = Array(size).fill(false);
 	let indexArchive = -1;
@@ -103,9 +102,8 @@
 </script>
 
 <div
-	class="archive-container"
+	class="archive-container {customStyle}"
-	style="--font-post: {fontPost}rem; --padding-post: {paddingPost}rem; width:{width};"
+	style="--font-post: {fontPost}rem; --padding-post: {paddingPost}rem;"
-	bind:this={containerRef}
 >
 	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	{#each Object.keys(posts) as date, index}

frontend/src/lib/components/social.svelte

@@ -9,34 +9,35 @@
 		{
 			pic: 'https://cdn.simpleicons.org/instagram',
 			color: 'E4405F',
-			alt: 'instagram',
+			alt: 'Instagram',
 			name: '@yo.boujon',
 			link: 'https://www.instagram.com/yoboujon/'
 		},
 		{
 			pic: 'https://cdn.simpleicons.org/github',
 			color: '181717',
-			alt: 'github',
+			alt: 'Github',
 			name: 'yoboujon',
 			link: 'https://github.com/yoboujon'
 		},
 		{
 			pic: 'https://cdn.simpleicons.org/youtube',
 			color: 'FF0000',
-			alt: 'youtube',
+			alt: 'Youtube',
 			name: '@yoboujon',
 			link: 'https://www.youtube.com/@yoboujon'
 		},
 		{
 			pic: 'https://img.icons8.com/?size=200&id=8808&format=png&color=0A66C2',
 			color: '0A66C2',
-			alt: 'linkedin',
+			alt: 'Linkedin',
 			name: 'Yohan Boujon',
 			link: 'https://www.linkedin.com/in/yohan-boujon-a08511202/'
 		},
 		{
 			icon: 'M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z',
 			color: 'AD62AA',
+			alt: 'Etheryo',
 			name: 'Etheryo',
 			link: 'https://www.etheryo.fr'
 		}
@@ -83,26 +84,28 @@
 	}
 </script>
 
-<div class="social" bind:this={div_social}>
+<div class="social social-width" bind:this={div_social}>
 	<h1>Liens</h1>
 	{#each social_list as s}
-		<div class="social-link align-center">
+		<div
-			{#if s.pic === undefined}
+			class="social-link align-center"
-				<SvgIcon size="32" type="mdi" path={s.icon}></SvgIcon>
-			{:else}
-				<img alt={s.alt} src={s.pic} />
-			{/if}
-			<a
-				href={s.link}
-				target="_blank"
 			style="--social-color: #{s.color};"
+			role="button"
+			tabindex="0"
+			title={s.alt}
 			on:mouseenter={() => {
 				changeBackground(s.color, false);
 			}}
 			on:mouseleave={() => {
 				changeBackground(s.color, true);
-				}}>{s.name}</a
+			}}
 		>
+			{#if s.pic === undefined}
+				<SvgIcon size="32" type="mdi" path={s.icon}></SvgIcon>
+			{:else}
+				<img alt={s.alt} src={s.pic} />
+			{/if}
+			<a href={s.link} target="_blank">{s.name}</a>
 		</div>
 	{/each}
 </div>

frontend/src/lib/css/base.css

@@ -44,7 +44,8 @@ h1 {
 
     --border-min: 0.5rem;
     --border-max: 2rem;
-    --profile-content-width: 40rem;
+    --profile-content-width-max: 40rem;
+    --profile-content-width-min: 36rem;
 
     --width-min-desktop: 1275px;
     --width-mobile: 875px;

frontend/src/lib/css/post-min.css

@@ -1,11 +1,39 @@
+@media screen and (max-width: 1275px) {
+    .post-min-container {
+        height: calc(var(--profile-content-width-min)/2);
+        width: calc((var(--profile-content-width-min) + 6rem - 4rem)/3);
+    }
+
+    .post-min {
+        height: calc(var(--profile-content-width-min)/2);
+    }
+
+    .post-min img {
+        max-height: calc(var(--profile-content-width-min)/4);
+    }
+}
+
+@media screen and (min-width: 1276px) {
+    .post-min-container {
+        height: calc(var(--profile-content-width-max)/2);
+        width: calc((var(--profile-content-width-max) + 6rem - 4rem)/3);
+    }
+
+    .post-min {
+        height: calc(var(--profile-content-width-max)/2);
+    }
+
+    .post-min img {
+        max-height: calc(var(--profile-content-width-max)/4);
+    }
+}
+
 .post-min-container {
     display: grid;
     grid-template-areas:
         "post-min-overlay-back"
         "post-min-overlay-front"
         "post-min";
-    height: calc(var(--profile-content-width)/2);
-    width: calc((var(--profile-content-width) + 6rem - 4rem)/3);
     margin-left: 1rem;
     margin-right: 1rem;
 }
@@ -15,13 +43,11 @@
     display: flex;
     flex-direction: column;
     grid-area: overlay;
-    height: calc(var(--profile-content-width)/2);
     z-index: var(--z-index-front);
 }
 
 .post-min img {
     width: auto;
-    max-height: calc(var(--profile-content-width)/4);
     width: 100%;
     object-fit: cover;
     border-top-left-radius: 1rem;

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

@@ -5,6 +5,26 @@
     --picture-border: 1.5rem;
 }
 
+@media screen and (max-width: 1275px) {
+    .profile-post-container {
+        width: calc(var(--profile-content-width-min) + 6rem);
+    }
+
+    .profile-content {
+        width: var(--profile-content-width-min);
+    }
+}
+
+@media screen and (min-width: 1276px) {
+    .profile-post-container {
+        width: calc(var(--profile-content-width-max) + 6rem);
+    }
+
+    .profile-content {
+        width: var(--profile-content-width-max);
+    }
+}
+
 .profile {
     font-family: 'JetBrains Mono';
     color: var(--color-text);
@@ -102,13 +122,9 @@
 .profile-post-container {
     display: flex;
     flex-direction: row;
-    width: calc(var(--profile-content-width) + 6rem);
 }
 
-/* Depending on media */
-
 .profile-content {
-    width: var(--profile-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;

frontend/src/lib/css/social.css

@@ -3,14 +3,52 @@
     --social-min-width: 2rem;
 }
 
+@media screen and (max-width: 1275px) {
+    .social-width {
+        width: var(--social-min-width);
+    }
+
+    .social-link a {
+        display: none;
+    }
+
+    .social h1 {
+        display: none;
+    }
+
+    .social-archive {
+        width: calc(var(--profile-content-width-min) + 6rem);
+    }
+}
+
+@media screen and (min-width: 1276px) {
+.social-width {
+        width: var(--social-max-width);
+    }
+
+    .social-link a {
+        text-decoration: none;
+        position: relative;
+        color: var(--color-text);
+        margin-left: auto;
+        font-size: 1.4rem;
+        font-weight: 500;
+    }
+
+    .social-archive {
+        width: calc(var(--social-max-width) + 4rem);
+    }
+}
+
 .social {
     padding: 3rem;
     padding-right: 2rem;
     padding-left: 2rem;
     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;
+    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);
-    width: var(--social-max-width);
 }
 
 .social-link {
@@ -26,15 +64,19 @@
 .social-link img {
     height: 2rem;
     width: 2rem;
+    transition: all .3s ease 0s;
 }
 
-.social-link a {
+.social-link img:hover {
-    text-decoration: none;
+    filter: drop-shadow(0px 4px 8px var(--social-color));
-    position: relative;
+}
-    color: var(--color-text);
+
-    margin-left: auto;
+.social-link svg {
-    font-size: 1.4rem;
+    transition: all .3s ease 0s;
-    font-weight: 500;
+}
+
+.social-link svg:hover {
+    filter: drop-shadow(0px 0px 8px var(--social-color));
 }
 
 /* Underline links */

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

@@ -4,7 +4,7 @@
 
 	import PostMin from '$lib/components/post-min.svelte';
 	import Social from '$lib/components/social.svelte';
-	import Archive from '$lib/components/archive.svelte'
+	import Archive from '$lib/components/archive.svelte';
 
 	let cover =
 		'https://share.etheryo.fr/Rando-01.11.2023/Groupe%20Ombre%20Lac%20Montagne%20Rouge%20Bleu.jpg';
@@ -13,8 +13,11 @@
 	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.';
+	let innerWidth;
 </script>
 
+<svelte:window bind:innerWidth />
+
 <div class="profile">
 	<div class="profile-banner">
 		<div class="profile-banner-gradient"></div>
@@ -29,9 +32,11 @@
 	</div>
 	<div class="profile-main justify-center">
 		<div class="profile-container">
-			<Social />
+			<Social showname={false} />
+			{#if innerWidth > 1275}
 				<h1 class="profile-title">Archives</h1>
-			<Archive width="24rem"/>
+				<Archive customStyle="social-archive" />
+			{/if}
 		</div>
 		<div class="profile-container">
 			<div class="profile-content">
@@ -52,6 +57,10 @@
 				/>
 				<PostMin title="Alix est beau" />
 			</div>
+			{#if innerWidth <= 1275}
+				<h1 class="profile-title">Archives</h1>
+				<Archive customStyle="social-archive" />
+			{/if}
 		</div>
 	</div>
 </div>