improves home page

src/lib/components/Carousel.svelte

@@ -12,15 +12,15 @@
 	let touchEndX = 0;
 
 	const setIndex = (idx: number) => {
-		clearInterval(interval);
+		// clearInterval(interval);
 		const direction = idx > currentIndex ? 'fromRight' : 'fromLeft';
 		nextIndex = idx;
 		currentIndex = idx;
 		startTransition(direction);
 	};
 	const increaseIndex = () => {
 		const outgoing = document.querySelector('#outgoing');
-		outgoing?.classList.remove('outgoing-left');
+		// outgoing?.classList.remove('outgoing-left');
 		nextIndex = (currentIndex + 1) % data.length;
 		startTransition('fromRight');
 	};
@@ -195,8 +195,8 @@
 	}
 
 	.carousel-active {
-		background-color: var(--clr-accent);
-		border: solid 1px var(--clr-accent);
+		background-color: white;
+		border: solid 1px white;
 	}
 
 	@media screen and (max-width: 1024px) {

src/lib/components/HomeListItem.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	export let href: string;
+</script>
+
+<li class="home-list-item">
+	<a {href}>
+		<article>
+			<header>
+				<!-- contains span.document-tag -->
+				<slot name="document-tag" />
+
+				<!-- contains h1.card-item-title -->
+				<slot name="title" />
+			</header>
+
+			<div class="article-content">
+				<!-- contains h1.card-date -->
+				<slot name="date" />
+
+				<!-- contains span.card-time -->
+				<slot name="time" />
+
+				<!-- contains p.card-item-description -->
+				<slot name="description" />
+			</div>
+		</article>
+	</a>
+</li>
+
+<style>
+	:global(.home-list-item) {
+		--card-main-padding: 0.7rem;
+		--card-content-padding: 0.5rem;
+	}
+
+	li {
+		min-width: 10rem;
+		position: relative;
+	}
+
+	li:hover {
+		cursor: pointer;
+	}
+
+	li:hover::after {
+		position: absolute;
+		content: '';
+		width: calc(100% + 1rem);
+		height: calc(100% + 1rem);
+		top: -0.2rem;
+		left: -0.5rem;
+		cursor: pointer;
+		background-color: var(--clr-accent-light);
+		z-index: -1;
+	}
+
+	article {
+		position: relative;
+	}
+
+	article > * + * {
+		margin-top: var(--card-main-padding);
+	}
+
+	:global(.article-content > * + *) {
+		margin-top: var(--card-content-padding);
+	}
+
+	header {
+		padding-bottom: var(--card-main-padding);
+		border-bottom: solid 0.5px lightgrey;
+	}
+	:global(.home-list-item header > * + *) {
+		margin-top: var(--card-content-padding);
+	}
+</style>

src/lib/components/LandingPage.svelte

@@ -10,10 +10,6 @@
 
 <section class="presentation-wrapper fill-vh" id="presentation">
 	<article bind:this={presentationElt} class="presentation" out:fade={{ duration: 500 }}>
-		{#if $screenType === 'desktop'}
-			<div class="stroke-2"></div>
-			<div class="stroke-3"></div>
-		{/if}
 		<div class="title-container">
 			<div>
 				<h1>Laboratoire <span class="ovr">Ouvroir</span></h1>
@@ -23,9 +19,7 @@
 				<OuvroirPres width="7rem" />
 			</div>
 		</div>
-		{#if $screenType === 'desktop'}
-			<div class="stroke-1"></div>
-		{/if}
+
 		<p>
 			L’Ouvroir d’histoire de l’art et de muséologie numérique de l’Université de Montréal est un
 			laboratoire de recherche destiné à soutenir le travail conduit dans le cadre du Partenariat

src/lib/i18n/translations.ts

@@ -50,7 +50,7 @@ const translations: { [locale: string]: { [path: string]: string } } = {
         // 'route.services.meetups': `${base}/our-services#meet-ups`,
 
         // Homepage
-        'home.projects.title': 'Latest projects & publications',
+        'home.projects.title': 'CIÉCO projects',
         'home.events.title': 'Upcoming events',
         'home.news.latest': 'Latest news',
         'home.news.all': 'All news',
@@ -66,6 +66,7 @@ const translations: { [locale: string]: { [path: string]: string } } = {
         'home.services.meetups.title': 'Meet ups',
         'home.services.meetups': 'Many events are organized to help you with work in digital environments.',
         'home.services.meetups.cta': 'Get in touch',
+        'home.recurring': 'Get in touch with Ouvroir',
 
         // About
         'about.title': 'About',
@@ -162,7 +163,7 @@ const translations: { [locale: string]: { [path: string]: string } } = {
         'route.services.meetups': `${base}/nos-services`,
 
         // Homepage
-        'home.projects.title': 'Projets à l’affiche',
+        'home.projects.title': 'Les projets CIÉCO',
         'home.events.title': 'Nos événements',
         'home.news.latest': 'Dernières nouvelles',
         'home.news.all': "Toute l’actualité",
@@ -177,6 +178,8 @@ const translations: { [locale: string]: { [path: string]: string } } = {
         'home.services.meetups.title': 'Rencontres',
         'home.services.meetups': 'De nombreux événements sont organisés pour vous aider le travail en environnements numériques.',
         'home.services.meetups.cta': 'Nous rencontrer',
+        'home.recurring': 'Rencontrer l’Ouvroir',
+
 
         // About
         'about.title': 'À propos',

src/routes/+layout.svelte

@@ -18,6 +18,8 @@
 	}
 
 	$: addGap = $page && $page.route.id === '/[news=news]';
+
+	$: console.log($screenType, $screenWidth);
 </script>
 
 {#if $showPresentation}