From bba0f560d84a3d840417c29c706151f098e15f14 Mon Sep 17 00:00:00 2001
From: "h.u.g.u.rp" <h.u.g.u.rp@pm.me>
Date: Sat, 4 Nov 2023 09:53:12 +0100
Subject: [PATCH] fix styles

---
 src/components/ClientLink.astro       | 22 +++++++++++++---------
 src/content/clients/goodpatch.md      |  2 +-
 src/content/clients/holoplot.md       |  2 +-
 src/content/clients/renault-nissan.md |  2 +-
 src/content/clients/tourradar.md      |  2 +-
 src/content/clients/zalando.md        |  2 +-
 src/pages/index.astro                 | 12 +++++++++---
 7 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/src/components/ClientLink.astro b/src/components/ClientLink.astro
index 9fc5548..2896191 100644
--- a/src/components/ClientLink.astro
+++ b/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>
diff --git a/src/content/clients/goodpatch.md b/src/content/clients/goodpatch.md
index b03cdde..5d86feb 100644
--- a/src/content/clients/goodpatch.md
+++ b/src/content/clients/goodpatch.md
@@ -1,5 +1,5 @@
 ---
 title: "Goodpatch"
 description: "goodpatch"
-heroImage: "/goodpatch.jpg"
+heroImage: "goodpatch.jpg"
 ---
diff --git a/src/content/clients/holoplot.md b/src/content/clients/holoplot.md
index 253d0b6..8efb0bb 100644
--- a/src/content/clients/holoplot.md
+++ b/src/content/clients/holoplot.md
@@ -1,7 +1,7 @@
 ---
 title: "Holoplot"
 description: "Holoplot audio"
-heroImage: "/holoplot.jpg"
+heroImage: "holoplot.jpg"
 ---
 
 This gig was great!
diff --git a/src/content/clients/renault-nissan.md b/src/content/clients/renault-nissan.md
index 149e0c6..cf81781 100644
--- a/src/content/clients/renault-nissan.md
+++ b/src/content/clients/renault-nissan.md
@@ -1,5 +1,5 @@
 ---
 title: "Renault-nissan"
 description: "renault nissan"
-heroImage: "/renault-nissan.jpeg"
+heroImage: "renault-nissan.jpeg"
 ---
diff --git a/src/content/clients/tourradar.md b/src/content/clients/tourradar.md
index d90e3ff..2d32858 100644
--- a/src/content/clients/tourradar.md
+++ b/src/content/clients/tourradar.md
@@ -1,5 +1,5 @@
 ---
 title: "Tourradar"
 description: "tourradar"
-heroImage: "/tourradar.jpg"
+heroImage: "tourradar.jpg"
 ---
diff --git a/src/content/clients/zalando.md b/src/content/clients/zalando.md
index 704af22..7a561a5 100644
--- a/src/content/clients/zalando.md
+++ b/src/content/clients/zalando.md
@@ -1,5 +1,5 @@
 ---
 title: "Zalando"
 description: "Zalando retails"
-heroImage: "/zalando.jpg"
+heroImage: "zalando.jpg"
 ---
diff --git a/src/pages/index.astro b/src/pages/index.astro
index c9c6782..3a392a3 100644
--- a/src/pages/index.astro
+++ b/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,7 +48,7 @@ and lead designer positions at
 	main {
 		flex-grow: 1;
 	}
-	main article {
+	article {
 		display: inline;
 	}
 	main,
@@ -53,6 +56,9 @@ and lead designer positions at
 		padding: var(--size);
 		font-size: 1.5rem;
 	}
+	article {
+		background-color: var(--color-background);
+	}
 	a {
 		text-decoration: none;
 		color: var(--color-text);