partenaires 2025

src/app.d.ts

@@ -26,6 +26,10 @@ declare global {
 			const out: string;
 			export default out;
 		}
+		declare module '*.png?background=transparent&webp' {
+			const out: string;
+			export default out;
+		}
 	}
 }
 

src/routes/partenaires/+page.svelte

@@ -1,121 +1,22 @@
 <script lang="ts">
-	import assnat from '$lib/assets/partenaires/assnat.png?width=1100&fit=contain&background=transparent&webp';
-	import atocas from '$lib/assets/partenaires/atocas.png?height=600&width=600&fit=contain&background=transparent&webp';
-	import belleripe from '$lib/assets/partenaires/belleripe.jpeg?height=600&width=600&fit=contain&background=transparent&webp';
-	import boisdaction from '$lib/assets/partenaires/boisdaction.png?height=600&width=600&fit=contain&background=transparent&webp';
-	import bombardier from '$lib/assets/partenaires/bombardier.png?height=600&width=600&fit=contain&background=transparent&webp';
-	import carbotech from '$lib/assets/partenaires/carbotech.png?height=600&width=600&fit=contain&background=transparent&webp';
-	import fermeforestiere from '$lib/assets/partenaires/fermeforestiere.jpeg?height=600&width=600&fit=contain&background=transparent&webp';
-	import festivalduboeuf from '$lib/assets/partenaires/festivalduboeuf.png?height=600&width=600&fit=contain&background=transparent&webp';
-	import festo from '$lib/assets/partenaires/festo.png?height=600&width=600&fit=contain&background=transparent&webp';
-	import fruitdor from '$lib/assets/partenaires/fruitdor.jpeg?height=600&width=600&fit=contain&background=transparent&webp';
-	import fusee from '$lib/assets/partenaires/fusee.jpg?height=600&width=600&fit=contain&background=transparent&webp';
-	import homedepot from '$lib/assets/partenaires/homedepot.png?height=600&width=600&fit=contain&background=transparent&webp';
-	import hydroquebec from '$lib/assets/partenaires/hydroquebec.png?width=1100&fit=contain&background=transparent&webp';
-	import lumicom from '$lib/assets/partenaires/lumicom.png?height=600&width=600&fit=contain&background=transparent&webp';
-	import machinex from '$lib/assets/partenaires/machinex.png?height=600&width=600&fit=contain&background=transparent&webp';
-	import mcwane from '$lib/assets/partenaires/mcwane.jpeg?height=600&width=600&fit=contain&background=transparent&webp';
-	import metalpless from '$lib/assets/partenaires/metalpless.jpg?height=600&width=600&fit=contain&background=transparent&webp';
-	import mrc from '$lib/assets/partenaires/mrc.png?height=600&width=600&fit=contain&background=transparent&webp';
-	import primewood from '$lib/assets/partenaires/primewood.png?height=600&width=600&fit=contain&background=transparent&webp';
-	import robovic from '$lib/assets/partenaires/robovic.png?height=600&width=600&fit=contain&background=transparent&webp';
-	import rtaschereau from '$lib/assets/partenaires/rtaschereau.jpg?height=600&width=600&fit=contain&background=transparent&webp';
-	import usnr from '$lib/assets/partenaires/usnr.png?height=600&width=600&fit=contain&background=transparent&webp';
-	import vexco from '$lib/assets/partenaires/vexco.png?height=600&width=600&fit=contain&background=transparent&webp';
-	import ville from '$lib/assets/partenaires/ville.png?height=600&width=600&fit=contain&background=transparent&webp';
+	import or from '$lib/assets/partenaires/or-2025.png?background=transparent&webp';
+	import argent from '$lib/assets/partenaires/argent-2025.png?background=transparent&webp';
+	import bronze from '$lib/assets/partenaires/bronze-2025.png?background=transparent&webp';
 </script>
 
 <div class="container">
-	<article>
-		<header>Platine</header>
-		<div class="partenaires" id="platine">
-			<img
-				src={assnat}
-				alt="Assemblée Nationale"
-				style="padding-inline: 2rem; padding-bottom: 2rem"
-			/>
-			<img src={hydroquebec} alt="Hydro Québec" />
-		</div>
-	</article>
-	<article>
-		<header>Or</header>
-		<div class="partenaires" id="or">
-			<img src={atocas} alt="Atocas de l'érable" />
-			<img src={belleripe} alt="Belle-Ripe" />
-			<img src={boisdaction} alt="Boisdaction" />
-			<img src={bombardier} alt="Fondation J Armand Bombardier" />
-			<img src={festo} alt="Festo" />
-			<img src={mcwane} alt="McWane Canada" />
-			<img src={metalpless} alt="Metal Pless" />
-			<img src={primewood} alt="Primewood" />
-			<img src={usnr} alt="USNR" />
-			<img src={ville} alt="Ville de Plessisville" />
-		</div>
-	</article>
-	<article>
-		<header>Argent</header>
-		<div class="partenaires" id="argent">
-			<img src={carbotech} alt="Carbotech" />
-			<img src={fermeforestiere} alt="Ferme Forestière R Marcoux" />
-			<img src={festivalduboeuf} alt="Festival du boeuf" />
-			<img src={fruitdor} alt="Fruit d'or" />
-			<img src={lumicom} alt="Lumicom" />
-			<img src={machinex} alt="Machinex" />
-			<img src={mrc} alt="MRC de l'érable" />
-			<img src={rtaschereau} alt="Richard Taschereau" />
-			<img src={robovic} alt="Robovic" />
-			<img src={fusee} alt="Rotisserie Fusée" />
-		</div>
-	</article>
-	<article>
-		<header>Bronze</header>
-		<div class="partenaires" id="bronze">
-			<img src={homedepot} alt="Home Dépot" />
-			<img src={vexco} alt="Vexco" />
-		</div>
-	</article>
+	<img src={or} alt="Partenaires Or" />
+	<img src={argent} alt="Partenaires Argent" />
+	<img src={bronze} alt="Partenaires Bronze" />
 </div>
 
 <style lang="scss">
-	article {
-		background-color: white;
-		// background-color: var(--partenaires-background);
-		border-radius: calc(var(--border-radius) + 3px) calc(var(--border-radius) + 3px)
-			var(--border-radius) var(--border-radius);
-	}
-
-	.partenaires {
-		display: grid;
-		gap: 1.5rem;
-		align-items: stretch;
-		justify-items: stretch;
-
-		&#platine {
-			grid-template-columns: repeat(1, 1fr);
-		}
-		&#or {
-			grid-template-columns: repeat(2, 1fr);
-		}
-		&#argent {
-			grid-template-columns: repeat(3, 1fr);
-		}
-		&#bronze {
-			grid-template-columns: repeat(4, 1fr);
-		}
-
-		@media (min-width: 576px) {
-			&#platine {
-				grid-template-columns: repeat(1, 1fr);
-			}
-			&#or {
-				grid-template-columns: repeat(3, 1fr);
-			}
-			&#argent {
-				grid-template-columns: repeat(4, 1fr);
-			}
-			&#bronze {
-				grid-template-columns: repeat(5, 1fr);
-			}
-		}
+	.container {
+		margin-top: 2rem;
+		display: flex;
+		flex-flow: column nowrap;
+		width: fit-content;
+		align-items: center;
+		gap: 2rem;
 	}
 </style>