Dessin rejoignez-nous, boîtes accueil plus légères

content/_index.md

@@ -30,7 +30,7 @@ title = "Librezo"
 
 <a href="/logiciel-libre" class="slogan1">Reprenez le contrôle</a>
 
-<div class="square_boxes">
+<div class="square_boxes nn1400">
 {{ square_box(title="Confidentialité", text="Vos données personnelles le restent") }}
 {{ square_box(title="Résilience", text="Récupérez rapidement d'une panne avec des sauvegardes") }}
 {{ square_box(title="Souveraineté", text="Reprenez le contrôle de votre infrastructure informatique") }}
@@ -110,7 +110,3 @@ PME, Associations, Tout type de structure, Collectifs
 {% end %}
 
 </div>
-
-<div style="text-align:center">
-	<img style="max-width: 100%" alt="Librezo : Parce que oui !" src="/img/drawings/rejoignez-nous-affiche.webp" loading="lazy"/>
-</div>

content/qui-sommes-nous.md

@@ -8,7 +8,7 @@ carousel = true
 	<img style="max-width: 100%;max-height: 400px;" alt="Qui sommes-nous" src="/img/drawings/qui.webp" aria-hidden/>
 </div>
 
-Librezo est un collectif décentralisé, né de la rencontre d'ami·es libristes désirant partager leur passion et leur savoir-faire dans le domaine des réseaux et du logiciel libre.
+**Librezo est un collectif décentralisé, né de la rencontre d'ami·es libristes désirant partager leur passion et leur savoir-faire dans le domaine des réseaux et du logiciel libre.**
 
 <div class="team nn">
 {% team_box(

content/rejoignez-nous.md

@@ -3,7 +3,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/>
+	<img style="max-width: 100%;max-height: 600px;" alt="Rejoignez-nous" src="/img/drawings/rejoignez-nous.webp" aria-hidden/>
 </div>
 
 Vous connaissez bien GNU/Linux, le réseau, vous savez installer du hardware, un OS, ouvrir des ports sur une box, coder en bash, débugger un logiciel, identifier des failles, les licences libres sont vos livres de chevet... Ou simplement, vous voulez vous investir dans la promotion du logiciel libre au sein d'une équipe de personnes très diverses mais partageant des valeurs communes&#8239;? Devenez membre et prestataire Librezo&#8239;!

sass/css/base.scss

@@ -57,6 +57,13 @@ main.center {
 	}
 }
 
+@media screen and (min-width: 1400px) {
+	.nn1400 {
+		max-width: 1400px;
+		margin-left: calc(50% - 700px);
+	}
+}
+
 a, a:visited {
 	text-decoration: none;
 	color: $blue;

sass/css/square_box.scss

@@ -5,7 +5,7 @@
 	flex: 62%;
 	text-align: center;
 	font-family: LunaSans;
-	gap: 32px;
+	gap: 45px;
 	align-items: center;
 	justify-content: center;
 	flex-wrap: wrap;
@@ -14,12 +14,36 @@
 .square_box {
 	width: 200px;
 	min-height: 200px;
-	padding: 8px;
 	background: linear-gradient(-0.125turn, $blue, $violet);
-	color: white;
+}
+
+.square_box-inner {
+	margin: 1px;
+	min-height: 198px;
+	background-color: white;
+}
+
+@media (prefers-color-scheme: dark) {
+	.square_box-inner {
+		color: white;
+		background-color: black;
+	}
 }
 
 .square_box-title {
+	display: block;
+	width: 100%;
+	padding: 16px 6px 6px 6px;
+	box-sizing: border-box;
 	font-family: Neucha;
 	font-size: 175%;
 }
+
+.square_box-text {
+	padding: 6px;
+}
+
+.square_box:hover .square_box-title, .square_box:focus .square_box-title {
+	background: linear-gradient(-0.125turn, $blue, $violet);
+	color: white;
+}

templates/shortcodes/square_box.html

@@ -1,4 +1,6 @@
 <div class="square_box">
-	<span class="square_box-title">{{ title | safe }}</span>
-	<p class="square_box-text">{{ text | safe }}</p>
+	<div class="square_box-inner">
+		<span class="square_box-title">{{ title | safe }}</span>
+		<p class="square_box-text">{{ text | safe }}</p>
+	</div>
 </div>