Dessins charte, tarifs, rejoignez-nous

content/charte.md

@@ -2,6 +2,10 @@
 title = "Charte"
 +++
 
+<div class="img-right">
+	<img style="height:400px" alt="Charte" src="/img/drawings/charte.webp" aria-hidden/>
+</div>
+
 Librezo est un collectif autogéré d'individus, d’associations et d’entreprises qui mutualisent leurs ressources, compétences et connaissances au sein d'une structure à taille humaine dans le but de&nbsp;:
 
 * promouvoir des solutions informatiques en licences libres comme alternatives aux systèmes privateurs des GAFAM

content/rejoignez-nous.md

@@ -0,0 +1,7 @@
++++
+title = "Rejoignez-nous"
++++
+
+<div style="text-align:center">
+	<img style="max-width: 100%" alt="Rejoignez-nous" src="/img/drawings/rejoignez-nous.webp" aria-hidden/>
+</div>

content/tarifs.md

@@ -2,6 +2,10 @@
 title = "Services et tarifs"
 +++
 
+<div class="img-right">
+	<img style="height:400px" alt="Services et tarifs" src="/img/drawings/tarifs.webp" aria-hidden/>
+</div>
+
 ## Auto-hébergement
 
 Chaque service informatique en ligne, que ce soit un site web, une boîte mail, un document partagé, etc. fonctionne en général sur un ordinateur relié à Internet en permanence, que l'on nomme un _serveur_. On dit que le serveur héberge le service. Beaucoup de ces serveurs sont gérés par très peu d'acteurs ([les géants du web](https://degooglisons-internet.org/fr/)) et regroupés par milliers dans des datacenters.

sass/css/base.scss

@@ -189,3 +189,18 @@ h3 {
 		color: $grey2;
 	}
 }
+
+@media screen and (min-width: 641px) {
+	.img-right {
+		float: right;
+	}
+}
+@media screen and (max-width: 640px) {
+	.img-right {
+		text-align: center;
+	}
+}
+
+.img-right img {
+	max-width: 100vw;
+}

templates/base.html

@@ -45,7 +45,7 @@
 					<ul>
 						<li><a href="tel:+33782306653">07.82.30.66.53</a></li>
 						<li><a href="mailto:contact@librezo.fr">contact@librezo.fr</a></li>
-						<li>Rejoignez-nous</li>
+						<li><a href="/rejoignez-nous">Rejoignez-nous</a></li>
 					</ul>
 				</div>
 				<div class="footer-pane">