Added PostMin. New post style. Added animejs and mdi packages.

frontend/package-lock.json

@@ -10,7 +10,8 @@
 			"dependencies": {
 				"@jamescoyle/svelte-icon": "^0.1.1",
 				"@mdi/js": "^7.4.47",
-				"@sveltejs/adapter-node": "^5.0.1"
+				"@sveltejs/adapter-node": "^5.0.1",
+				"animejs": "^3.2.2"
 			},
 			"devDependencies": {
 				"@sveltejs/adapter-auto": "^3.0.0",
@@ -382,7 +383,8 @@
 		"node_modules/@jamescoyle/svelte-icon": {
 			"version": "0.1.1",
 			"resolved": "https://registry.npmjs.org/@jamescoyle/svelte-icon/-/svelte-icon-0.1.1.tgz",
-			"integrity": "sha512-7zDOSm3UQ4Onk2JWI4Zp8vjfK1pA8LQDBIBHRCuKB36kk+ZQY2/oXGIneVOyPJawVjRLkKK5Xv8hY0I2iyaiNQ=="
+			"integrity": "sha512-7zDOSm3UQ4Onk2JWI4Zp8vjfK1pA8LQDBIBHRCuKB36kk+ZQY2/oXGIneVOyPJawVjRLkKK5Xv8hY0I2iyaiNQ==",
+			"license": "MIT"
 		},
 		"node_modules/@jridgewell/gen-mapping": {
 			"version": "0.3.5",
@@ -430,7 +432,8 @@
 		"node_modules/@mdi/js": {
 			"version": "7.4.47",
 			"resolved": "https://registry.npmjs.org/@mdi/js/-/js-7.4.47.tgz",
-			"integrity": "sha512-KPnNOtm5i2pMabqZxpUz7iQf+mfrYZyKCZ8QNz85czgEt7cuHcGorWfdzUMWYA0SD+a6Hn4FmJ+YhzzzjkTZrQ=="
+			"integrity": "sha512-KPnNOtm5i2pMabqZxpUz7iQf+mfrYZyKCZ8QNz85czgEt7cuHcGorWfdzUMWYA0SD+a6Hn4FmJ+YhzzzjkTZrQ==",
+			"license": "Apache-2.0"
 		},
 		"node_modules/@polka/url": {
 			"version": "1.0.0-next.25",
@@ -819,6 +822,12 @@
 				"node": ">=0.4.0"
 			}
 		},
+		"node_modules/animejs": {
+			"version": "3.2.2",
+			"resolved": "https://registry.npmjs.org/animejs/-/animejs-3.2.2.tgz",
+			"integrity": "sha512-Ao95qWLpDPXXM+WrmwcKbl6uNlC5tjnowlaRYtuVDHHoygjtIPfDUoK9NthrlZsQSKjZXlmji2TrBUAVbiH0LQ==",
+			"license": "MIT"
+		},
 		"node_modules/aria-query": {
 			"version": "5.3.0",
 			"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",

frontend/package.json

@@ -22,6 +22,7 @@
 	"dependencies": {
 		"@jamescoyle/svelte-icon": "^0.1.1",
 		"@mdi/js": "^7.4.47",
-		"@sveltejs/adapter-node": "^5.0.1"
+		"@sveltejs/adapter-node": "^5.0.1",
+		"animejs": "^3.2.2"
 	}
 }

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

@@ -0,0 +1,76 @@
+<script>
+	import '$lib/css/base.css';
+	import '$lib/css/post.css';
+	import SvgIcon from '@jamescoyle/svelte-icon';
+	import { mdiCalendarRange } from '@mdi/js';
+	import anime from 'animejs';
+
+	export let cover =
+		'https://share.etheryo.fr/Rando-01.11.2023/Alix%20Mange%20Lac%20Rouge%20Bleu%20Orange%20Midi.jpg';
+	export let title = 'Title';
+	export let text = 'Little description.';
+	export let author = 'Author';
+	export let date = '01/01/1997';
+	export let profile = 'https://i.pravatar.cc/300';
+
+	let post_div;
+    let title_h1;
+	let cursorX = 0;
+	let cursorY = 0;
+	let updateX = true;
+
+	function update_gradient(event) {
+		const rect = post_div.getBoundingClientRect();
+		if (updateX) {
+			cursorX = event.clientX - rect.left;
+		}
+		cursorY = event.clientY - rect.top;
+		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) {
+		const targetOpacity = isEntering ? 1 : 0;
+        title_h1.style.textDecoration = isEntering ? "underline 3px" : "";
+		animation = anime({
+			targets: post_div,
+			opacity: [1 - targetOpacity, targetOpacity],
+			duration: 400,
+			easing: 'easeInOutQuad',
+			autoplay: true
+		});
+	}
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+	class="post-container"
+	on:mousemove={update_gradient}
+	on:mouseenter={() => animateForeground(true)}
+	on:mouseleave={() => animateForeground(false)}
+>
+	<div class="post-foreground post-overlay" bind:this={post_div} />
+	<div class="post post-overlay">
+		<img
+			alt="imgcool"
+			src={cover}
+			on:mouseenter={() => (updateX = false)}
+			on:mouseleave={() => (updateX = true)}
+		/>
+		<div class="post-text">
+			<div>
+				<h1 bind:this={title_h1}>{title}</h1>
+				<p>{text}</p>
+			</div>
+			<div class="text-container">
+				<div class="pill pill-profile">
+					<img alt="profile" src={profile} />
+					<span>{author}</span>
+				</div>
+				<div class="pill pill-reversed">
+					<span>{date}</span>
+					<SvgIcon type="mdi" path={mdiCalendarRange} size="120"></SvgIcon>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>

frontend/src/lib/css/base.css

@@ -1,4 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@500;700&family=Urbanist:wght@500;600;900&family=Sometype+Mono:wght@500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
 
 body,
 html {

frontend/src/lib/css/post.css

@@ -0,0 +1,160 @@
+/* Post */
+
+.post-container {
+    height: 20rem;
+    width: 60rem;
+    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 {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 1rem;
+}
+
+.post-foreground {
+    opacity: 0;
+}
+
+.post {
+    cursor: pointer;
+    display: flex;
+}
+
+.post img {
+    width: auto;
+    max-width: 28rem;
+    height: 100%;
+    object-fit: cover;
+    border-top-left-radius: 1rem;
+    border-bottom-left-radius: 1rem;
+    border-top-right-radius: 0.6rem;
+    border-bottom-right-radius: 0.6rem;
+    margin-right: 1rem;
+}
+
+.post-text {
+    font-family: 'JetBrains Mono';
+    margin: 1rem;
+    margin-right: 2rem;
+    justify-content: space-between;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+.text-container {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    display: flex;
+    flex-direction: row;
+}
+
+.pill {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    font-weight: 600;
+    background-color: #00000000;
+    border-radius: 3rem;
+    width: fit-content;
+    box-shadow: 0px 8px 18px -1px rgba(52, 42, 58, 0.2);
+    margin: 0.5rem;
+    height: 3rem;
+    flex-grow: 1;
+    width: 100%;
+}
+
+/*
+    background: linear-gradient(90deg, rgb(52, 42, 58), rgb(38, 28, 44)) !important;
+    color: var(--color-background);
+*/
+.pill-reversed {
+    padding: 0 !important;
+    justify-content: flex-end;
+}
+
+.pill img {
+    border-radius: 100% !important;
+    width: 3rem !important;
+    height: 3rem !important;
+    margin-right: 1rem !important;
+}
+
+.pill svg {
+    border-radius: 100% !important;
+    width: 1.8rem !important;
+    height: 1.8rem !important;
+    padding: calc((3rem - 1.8rem)/2);
+    color: var(--color-background);
+    background: linear-gradient(180deg, rgb(52, 42, 58), rgb(38, 28, 44));
+    margin-right: 1rem;
+}
+
+.pill-profile {
+    transition: all .4s ease 0s;
+}
+
+.pill-profile:hover {
+    background: var(--color-text);
+    box-shadow: 0px 8px 18px -1px #413543A0;
+}
+
+.pill-profile:hover span {
+    color: var(--color-background) !important;
+}
+
+/*
+    color: var(--color-text);
+    background: var(--color-background);
+*/
+.pill-reversed svg {
+
+    margin-left: 1.5rem;
+    margin-right: 0;
+}
+
+h1 {
+    font-weight: 800;
+    font-size: 1.5rem;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    /* Overflow */
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+}
+
+.post-text p {
+    font-size: 1rem;
+    font-style: italic;
+    color: var(--color-subtext);
+    text-align: justify;
+    text-justify: auto;
+    /* Overflow */
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 3;
+    line-clamp: 3;
+}
+
+.pill span {
+    font-size: 1rem;
+    font-style: normal;
+    color: var(--color-text);
+    transition: all .4s ease 0s;
+}