fix styles

src/components/ClientLink.astro

@@ -14,27 +14,31 @@ const { image, lastItem, title, ...props } = Astro.props;
 	span {
 		display: inline-block;
 		text-decoration: none;
-		position: relative;
-		cursor: pointer;
+		cursor: help;
+		font-style: italic;
 	}
 	span:not(.lastItem) {
 		margin-right: calc(var(--size) / 4);
 	}
 
 	img {
-		display: none;
 		position: absolute;
 		bottom: 0;
 		left: 0;
-		top: 100%;
+		top: 0;
 		left: 0;
-		transform: translate(-50%, 0);
-		width: max-content;
-		max-width: 20rem;
-		z-index: 1;
+		width: 100%;
+		height: 100%;
+		z-index: -1;
+		opacity: 0;
+		transition: opacity 222ms ease-in-out;
+		object-fit: cover;
+	}
+	span:hover {
+		text-decoration: underline;
 	}
-
 	span:hover img {
 		display: block;
+		opacity: 1;
 	}
 </style>

src/content/clients/goodpatch.md

@@ -1,5 +1,5 @@
 ---
 title: "Goodpatch"
 description: "goodpatch"
-heroImage: "/goodpatch.jpg"
+heroImage: "goodpatch.jpg"
 ---

src/content/clients/holoplot.md

@@ -1,7 +1,7 @@
 ---
 title: "Holoplot"
 description: "Holoplot audio"
-heroImage: "/holoplot.jpg"
+heroImage: "holoplot.jpg"
 ---
 
 This gig was great!

src/content/clients/renault-nissan.md

@@ -1,5 +1,5 @@
 ---
 title: "Renault-nissan"
 description: "renault nissan"
-heroImage: "/renault-nissan.jpeg"
+heroImage: "renault-nissan.jpeg"
 ---

src/content/clients/tourradar.md

@@ -1,5 +1,5 @@
 ---
 title: "Tourradar"
 description: "tourradar"
-heroImage: "/tourradar.jpg"
+heroImage: "tourradar.jpg"
 ---

src/content/clients/zalando.md

@@ -1,5 +1,5 @@
 ---
 title: "Zalando"
 description: "Zalando retails"
-heroImage: "/zalando.jpg"
+heroImage: "zalando.jpg"
 ---

src/pages/index.astro

@@ -35,8 +35,11 @@ and lead designer positions at
 			</article>
 		</main>
 		<footer>
-			Need some design work, strategy or management help?
-			<a href="mailto:sylvain.maretto@gmail.com">email me</a>, or <a href="https://linkedin.com/in/sylvain-maretto">linkedin</a>
+			<article>
+				Need some design work, strategy or management help?
+				</br>
+				Find me by <a href="mailto:sylvain.maretto@gmail.com">email me</a>, or <a href="https://linkedin.com/in/sylvain-maretto">linkedin</a>.
+			</article>
 		</footer>
 	</body>
 </html>
@@ -45,14 +48,17 @@ and lead designer positions at
 	main {
 		flex-grow: 1;
 	}
-	main article {
+	article {
 		display: inline;
 	}
 	main,
 	footer {
 		padding: var(--size);
 		font-size: 1.5rem;
 	}
+	article {
+		background-color: var(--color-background);
+	}
 	a {
 		text-decoration: none;
 		color: var(--color-text);