feat: add info boxes to project page

finxol.io 99d26e9d 8eab645f

verified
Changed files
+43 -5
src
assets
styles
projects
pages
en
projects
fr
projects
+11 -3
src/assets/styles/projects/karr.css
···
"back-btn title"
". subtitle"
". img"
-
". body";
+
". description"
+
". boxes";
gap: var(--spacing);
margin-inline-end: 3rem;
font-size: 1.1rem;
···
}
}
-
& > * {
-
grid-area: body;
+
& > p.description {
+
grid-area: description;
+
}
+
+
& > div.boxes {
+
grid-area: boxes;
+
display: grid;
+
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+
gap: var(--spacing);
}
}
+16 -1
src/pages/en/projects/karr.astro
···
<img src={karrJpg.src} alt="Karr" />
</picture>
-
<p>
+
<p class="description">
This entrepreneurial project was carried out for 5 months with
<a href="https://www.pepitebretagne.fr/"> Pépite Bretagne</a>. The
project was discontinued after a market study revealed a
well-established competition, already subsidized by public funds.
</p>
+
+
<div class="boxes">
+
<div class="container">
+
Github repo
+
<a href="https://github.com/karr-mobi/karr">
+
https://github.com/karr-mobi/karr
+
</a>
+
</div>
+
<div class="container">
+
Github repo
+
<a href="https://github.com/karr-mobi/karr">
+
https://github.com/karr-mobi/karr
+
</a>
+
</div>
+
</div>
</article>
</Layout>
+16 -1
src/pages/fr/projects/karr.astro
···
<img src={karrJpg.src} alt="Karr" />
</picture>
-
<p>
+
<p class="description">
Ce projet entrepreneurial a été porté pendant 5 mois avec
<a href="https://www.pepitebretagne.fr/"> Pépite Bretagne</a>.
L'arrêt du projet a été décidé après une étude de marché révélant
une concurrence déjà fortement présente et subventionnée par des
fonds publics.
</p>
+
+
<div class="boxes">
+
<div class="container">
+
Github repo
+
<a href="https://github.com/karr-mobi/karr">
+
https://github.com/karr-mobi/karr
+
</a>
+
</div>
+
<div class="container">
+
Github repo
+
<a href="https://github.com/karr-mobi/karr">
+
https://github.com/karr-mobi/karr
+
</a>
+
</div>
+
</div>
</article>
</Layout>