Post is now reactive. Modified overlay.

frontend/src/lib/components/post-min.svelte

@@ -19,8 +19,8 @@
 	let cursorY = 0;
 	let updateX = true;
 
-	function update_gradient(event) {
+	function update_gradient(event, div) {
-		const rect = post_div.getBoundingClientRect();
+		const rect = div.getBoundingClientRect();
 		if (updateX) {
 			cursorX = event.clientX - rect.left;
 		}
@@ -28,15 +28,14 @@
 		post_div.style.backgroundImage = `radial-gradient(circle farthest-corner at ${Math.floor(cursorX)}px ${Math.floor(cursorY)}px, var(--color-background) 0%, #958a98 100%)`;
 	}
 
-	function animateForeground(isEntering) {
+	function animateForeground(isEntering, div_back) {
 		const targetOpacity = isEntering ? 1 : 0;
-		title_h1.style.textDecoration = isEntering ? 'underline 3px' : '';
+
 		anime({
-			targets: post_div,
+			targets: div_back,
 			opacity: [1 - targetOpacity, targetOpacity],
 			duration: 400,
-			easing: 'easeInOutQuad',
+			easing: 'easeInOutQuad'
-			autoplay: true
 		});
 	}
 </script>
@@ -44,12 +43,19 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
 	class="post-container"
-	on:mousemove={update_gradient}
+	on:mousemove={(event) => {
-	on:mouseenter={() => animateForeground(true)}
+		update_gradient(event, post_div);
-	on:mouseleave={() => animateForeground(false)}
+	}}
+	on:mouseenter={() => {
+		animateForeground(true, post_div);
+		title_h1.style.textDecoration = 'underline 3px';
+	}}
+	on:mouseleave={() => {
+		animateForeground(false, post_div);
+		title_h1.style.textDecoration = '';
+	}}
 >
-	<div class="post-foreground post-overlay" bind:this={post_div} />
+	<div class="post">
-	<div class="post post-overlay">
 		<img
 			alt="imgcool"
 			src={cover}
@@ -73,4 +79,6 @@
 			</div>
 		</div>
 	</div>
+	<div class="post-overlay-front" />
+	<div class="post-overlay-back" bind:this={post_div} />
 </div>

frontend/src/lib/css/base.css

@@ -37,6 +37,13 @@ h1 {
     --z-index-normal: 0;
     --z-index-front: 1;
     --z-index-popup: 2;
+
+    --width-mobile: 875px;
+    /*  https://clamp.font-size.app/ 
+        min=875px       max=110px       */
+    --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);
 }
 
 .title {
@@ -117,6 +124,10 @@ h1 {
     margin-left: 3rem;
 }
 
+.margin-right-2 {
+    margin-right: 2rem;
+}
+
 .margin-05 {
     margin-left: 0.5rem;
 }

frontend/src/lib/css/footer.css

@@ -59,6 +59,7 @@
     font-family: 'JetBrains Mono';
     padding-left: 2rem;
     color: var(--color-hiddentext);
+    font-size: var(--1-rem);
 }
 
 .footer-slider div {

frontend/src/lib/css/footer/page.css

@@ -1,15 +1,14 @@
-:root {
-    --a-size: 1.2rem;
-    --p-size: 1rem;
-}
-
 .page-icon-text a {
     text-decoration: none;
     position: relative;
-    font-size: var(--a-size);
+    font-size: var(--1-2-rem);
     transition: all .3s ease 0s;
 }
 
+.page-icon-text h1 {
+    font-size: var(--1-6-rem);
+}
+
 .page-icon-text a:hover {
     color: var(--palette-pink);
 }
@@ -39,7 +38,7 @@
 
 .page-icon-text i {
     font-weight: 700;
-    font-size: 1.6rem;
+    font-size: var(--1-6-rem);
     color: var(--color-hiddentext);
     cursor: default;
 }
@@ -60,7 +59,7 @@
     color: var(--color-hiddentext);
     font-family: 'JetBrains Mono';
     font-weight: 400;
-    font-size: var(--p-size);
+    font-size: var(--1-rem);
     display: flex;
     align-items: center;
     padding: 0.5rem;

frontend/src/lib/css/navbar.css

@@ -42,7 +42,7 @@ a {
     grid-template-areas:
         "navbar-overlay-back"
         "navbar-overlay-front"
-        "navbar-content";
+        "content";
 }
 
 .navbar-overlay-front {

frontend/src/lib/css/post.css

@@ -1,38 +1,47 @@
+:root {
+    /*  min vp: 875px       max vp: 1250px 
+        min:    750ox       max:    1125px  */
+    --width-post: clamp(46.875rem, -7.8125rem + 100vw, 70.3125rem);
+    /*  min vp: 875px       max vp: 1250px 
+        min:    5rem        max:    15rem  */
+    --width-pill: clamp(5rem, -18.3333rem + 42.6667vw, 15rem);
+    --ratio-picture: 0.5;
+}
+
 /* Post */
 
 .post-container {
+    display: grid;
+    grid-template-areas:
+        "post-overlay-back"
+        "post-overlay-front"
+        "post";
     height: 20rem;
-    width: 60rem;
+    width: var(--width-post);
-    border-radius: 1rem;
-    box-shadow: rgba(52, 42, 58, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
-    flex-direction: row;
-    margin-top: 3rem;
-    margin-bottom: 3rem;
-    position: relative;
-    background: linear-gradient(180deg, rgba(248, 241, 241, 1) 0%, rgba(221, 212, 223, 1) 100%);
 }
 
-.post-overlay {
+.post-overlay-front {
-    position: absolute;
+    grid-area: overlay;
-    top: 0;
+    background-image: linear-gradient(180deg, rgba(248, 241, 241, 1) 0%, rgba(221, 212, 223, 1) 100%);
-    left: 0;
+    border-radius: 0.5rem;
-    width: 100%;
+    box-shadow: rgba(79, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
-    height: 100%;
-    border-radius: 1rem;
 }
 
-.post-foreground {
+.post-overlay-back {
-    opacity: 0;
+    grid-area: overlay;
+    border-radius: 0.5rem;
 }
 
 .post {
     cursor: pointer;
     display: flex;
+    grid-area: overlay;
+    z-index: var(--z-index-front);
 }
 
 .post img {
     width: auto;
-    max-width: 28rem;
+    max-width: calc(var(--ratio-picture)*var(--width-post));
     height: 100%;
     object-fit: cover;
     border-top-left-radius: 1rem;
@@ -44,12 +53,12 @@
 
 .post-text {
     font-family: 'JetBrains Mono';
-    margin: 1rem;
-    margin-right: 2rem;
     justify-content: space-between;
     display: flex;
     flex-direction: column;
     width: 100%;
+    margin: 1rem;
+    margin-right: 2rem;
 }
 
 .text-container {
@@ -71,7 +80,6 @@
     margin: 0.5rem;
     height: 3rem;
     flex-grow: 1;
-    width: 100%;
 }
 
 /*
@@ -113,19 +121,15 @@
     color: var(--color-background) !important;
 }
 
-/*
-    color: var(--color-text);
-    background: var(--color-background);
-*/
 .pill-reversed svg {
 
-    margin-left: 1.5rem;
+    margin-left: 1rem;
     margin-right: 0;
 }
 
 h1 {
     font-weight: 800;
-    font-size: 1.5rem;
+    font-size: var(--1-6-rem);
     margin-top: 1rem;
     margin-bottom: 1rem;
     /* Overflow */
@@ -148,13 +152,24 @@ h1 {
     display: -webkit-box;
     -webkit-box-orient: vertical;
     text-overflow: ellipsis;
-    -webkit-line-clamp: 3;
+    -webkit-line-clamp: 4;
-    line-clamp: 3;
+    line-clamp: 4;
 }
 
 .pill span {
-    font-size: 1rem;
+    font-size: var(--1-rem);
     font-style: normal;
     color: var(--color-text);
     transition: all .4s ease 0s;
+    /* Overflow */
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ".";
+    max-width: var(--width-pill);
+    padding-right: 1rem;
+}
+
+.pill-reversed span {
+    padding-right: 0;
+    padding-left: 1rem;
 }

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

@@ -12,8 +12,7 @@
 	<h1>Etheryo Blog</h1>
 	{#if data != undefined}
 		<CarouselVertical posts={article.content} />
-		<!-- debug purpose -->
+		<div style="height: 6rem;"/>
-		<div style="height: 100rem;"></div>
 	{:else}
 		<p>Loading failed :c</p>
 	{/if}

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

@@ -8,24 +8,21 @@
 </script>
 
 <div class="base">
-	<div class="margin-left-3">
+	<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>
 	<div class="blank" />
 	<div class="margin-left-3">
-		<Search logo_size=48 />
+		<Search logo_size="48" />
 	</div>
 	<div class="blank" />
-	<div class="margin-left-3">
+	<Post />
-		<Post />
-	</div>
 	<div class="blank" />
 	<div class="margin-left-3">
 		<Archive />