Merge branch '3-create-the-partners-page' into 'beta'

Resolve "Create the partners page"

See merge request pls5618/website!4
This commit is contained in:
Olivier Demers 2023-02-26 19:49:12 +00:00
commit 6060a1dbd9
18 changed files with 104 additions and 2 deletions

7
global.d.ts vendored
View File

@ -1,4 +1,9 @@
declare module '*.jpg?width=600&webp' { declare module '*.jpg?width=600&webp' {
const out; const out: string;
export default out;
}
declare module '*.png?width=600&webp' {
const out: string;
export default out; export default out;
} }

Binary file not shown.

After

Width:  |  Height:  |  Size: 151 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 51 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 197 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 774 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 118 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 91 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 136 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 76 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 372 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

View File

@ -1,4 +1,101 @@
<script lang="ts"> <script lang="ts">
import primewood from '$lib/assets/partenaires/primewood.png?width=600&webp';
import machinex from '$lib/assets/partenaires/machinex.png?width=600&webp';
import atocas from '$lib/assets/partenaires/atocas.png?width=600&webp';
import usnr from '$lib/assets/partenaires/usnr.png?width=600&webp';
import boisdaction from '$lib/assets/partenaires/boisdaction.png?width=600&webp';
import jit from '$lib/assets/partenaires/jit.png?width=600&webp';
import batteriesexpert from '$lib/assets/partenaires/batteriesexpert.png?width=600&webp';
import carbotech from '$lib/assets/partenaires/carbotech.png?width=600&webp';
import festivalduboeuf from '$lib/assets/partenaires/festivalduboeuf.png?width=600&webp';
import mrc from '$lib/assets/partenaires/mrc.png?width=600&webp';
import robovic from '$lib/assets/partenaires/robovic.png?width=600&webp';
import ville from '$lib/assets/partenaires/ville.png?width=600&webp';
import homedepot from '$lib/assets/partenaires/homedepot.png?width=600&webp';
import manoir from '$lib/assets/partenaires/manoir.png?width=600&webp';
import bombardier from '$lib/assets/partenaires/bombardier.png?width=600&webp';
import hydroquebec from '$lib/assets/partenaires/hydroquebec.png?width=600&webp';
</script> </script>
Partenaires <div class="container">
<article>
<header>Platine</header>
<div class="partenaires" id="platine">
<img src={bombardier} alt="Fondation J Armand Bombardier" />
</div>
</article>
<article>
<header>Or</header>
<div class="partenaires" id="or">
<img src={atocas} alt="Atocas de l'érable" />
<img src={hydroquebec} alt="Hydro Québec" />
<img src={jit} alt="Jit Laser" />
<img src={machinex} alt="Machinex" />
<img src={usnr} alt="USNR" />
</div>
</article>
<article>
<header>Argent</header>
<div class="partenaires" id="argent">
<img src={primewood} alt="Primewood" />
<img src={batteriesexpert} alt="Batteries Expert" />
<img src={boisdaction} alt="Boisdaction" />
<img src={carbotech} alt="Carbotech" />
<img src={festivalduboeuf} alt="Festival du boeuf" />
<img src={mrc} alt="MRC de l'érable" />
<img src={robovic} alt="Robovic" />
<img src={ville} alt="Ville de Plessisville" />
</div>
</article>
<article>
<header>Bronze</header>
<div class="partenaires" id="bronze">
<img src={homedepot} alt="Home Dépot" />
<img src={manoir} alt="Manoir du Lac William" />
</div>
</article>
</div>
<style lang="scss">
.partenaires {
display: grid;
column-gap: 20px;
row-gap: 20px;
align-items: stretch;
justify-items: stretch;
img {
object-fit: contain;
filter: drop-shadow(1px 1px 1px white) drop-shadow(-1px 1px 1px white)
drop-shadow(1px -1px 1px white) drop-shadow(-1px -1px 1px white);
}
&#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);
}
}
}
</style>