added references page + references

src/components/CardEditorial.astro

@@ -1,20 +1,39 @@
 ---
 import ListTags from "./ListTags.astro";
-import { l, astroI18n } from "astro-i18n";
+import { l, t } from "astro-i18n";
 
 const { item, routeName } = Astro.props;
+
+// no link on references cards
+const isReference = routeName === t("references.slug");
 ---
 
-<div class="card">
+<div class:list={["card", { "card--link": !isReference }]}>
 	<div>
 		<h3>
-			<a
-				class="clean-link card__link"
-				href={`${l(`/${routeName}`)}/${item.slug}`}>{item.data.title}</a
-			>
+			{
+				!isReference ? (
+					<a
+						class="clean-link card__link"
+						href={`${l(`/${routeName}`)}/${item.slug}`}
+					>
+						{item.data.title}
+					</a>
+				) : (
+					<span>{item.data.title}</span>
+				)
+			}
 		</h3>
 		<h4>{item.data.subtitle}</h4>
 		<ListTags list={item.data.tags} />
+		{
+			isReference && (
+				<a href={item.data.url} rel="noopener noreferer">
+					{t("references.cta")}
+					<span class="sr-only"> {item.data.title}</span>
+				</a>
+			)
+		}
 	</div>
 </div>
 
@@ -25,17 +44,20 @@ const { item, routeName } = Astro.props;
 		display: block;
 		block-size: 100%;
 		overflow: hidden;
-		cursor: pointer;
 		box-shadow: var(--shadow-elevation-medium);
 		background-color: white;
 	}
-	.card:hover {
+	/*
+	* to be replaced with .card:has(a)
+	* when firefox supports it
+	*/
+	.card--link:hover {
 		box-shadow: var(--shadow-elevation-high);
 	}
-	.card:focus-within {
+	.card--link:focus-within {
 		box-shadow: var(--shadow-elevation-high);
 	}
-	.card::after {
+	.card--link::after {
 		content: "";
 		position: absolute;
 		inline-size: 30px;
@@ -49,19 +71,19 @@ const { item, routeName } = Astro.props;
 		background-size: contain;
 		transform: translateX(1rem);
 	}
-	.card:hover::after,
-	.card:focus-within::after {
+	.card--link:hover::after,
+	.card--link:focus-within::after {
 		transform: translateX(0);
 		opacity: 1;
 	}
-	.card:hover h3 a {
+	.card--link:hover h3 a {
 		text-decoration: underline;
 	}
-	.card:hover h3 a,
-	.card:focus-within h3 a {
+	.card--link:hover h3 a,
+	.card--link:focus-within h3 a {
 		color: var(--color-brique);
 	}
-	.card::before {
+	.card--link::before {
 		content: "";
 		position: absolute;
 		top: 0;
@@ -73,8 +95,8 @@ const { item, routeName } = Astro.props;
 		transform-origin: bottom;
 		background-color: var(--color-brique);
 	}
-	.card:hover::before,
-	.card:focus-within::before {
+	.card--link:hover::before,
+	.card--link:focus-within::before {
 		transform: scaleY(1);
 		transform-origin: top;
 	}

src/components/Navigation.astro

@@ -17,6 +17,12 @@ import LanguageSwitcher from "./LangSwitcher.astro";
 			>
 			<span aria-hidden="true">&middot;</span>
 		</li>
+		<li>
+			<a href={l("/references")} class="clean-link nice-link"
+				>{t("references.titre")}</a
+			>
+			<span aria-hidden="true">&middot;</span>
+		</li>
 		<li>
 			<a
 				href="mailto:contact@nardu.in"