boîtes accueil qui bougent

content/_index.md

@@ -22,9 +22,11 @@ title = "Librezo"
 	<p><span class="city">Melun</span> <span class="city">Montreuil</span> <span class="city">Nantes</span> <span class="city">Pau</span> <span class="city">Rennes</span> <span class="city">Roanne</span> <span class="city">Toulouse</span></p>
 </div>
 
-<a href="/logiciel-libre" class="slogan1">Reprenez le contrôle</a>
+<div style="height: 32px;"> </div>
 
-<div class="square_boxes nn1400" style="margin-top: 64px;">
+<a href="/logiciel-libre" class="bigbutton">Reprenez le contrôle ↱</a>
+
+<div class="square_boxes nn1400" style="margin-top: 64px;margin-bottom: 64px;">
 {{ 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") }}
@@ -36,6 +38,9 @@ title = "Librezo"
 {{ square_box(title="Savoir-faire", text="Vous êtes en contact direct avec des experts") }}
 {{ square_box(title="Solidarité", text="15% de nos bénéfices sont reversés au développement des logiciels utilisés") }}
 </div>
+<script type="text/javascript" src="/js/square_box.js"></script>
+
+<a href="/logiciel-libre" class="bigbutton2">En savoir plus sur les logiciels libres</a>
 
 <h2 class="title-bar" style="margin-top: 96px;">Pour qui&#8239;?</h2>
 

content/qui-sommes-nous.md

@@ -163,11 +163,14 @@ carousel = true
 {{ carousel_item(msg='<img loading="lazy" class="prestaworkedfor"title="Air France" alt="Air France" src="/img/prestasworkedfor/airfrance.png"/>') }}
 {{ carousel_item(msg='<img loading="lazy" class="prestaworkedfor"title="EADS Astrium" alt="EADS Astrium" src="/img/prestasworkedfor/astrium.jpg"/>') }}
 {{ carousel_item(msg='<img loading="lazy" class="prestaworkedfor"title="Axiom-Team" alt="Axiom-Team" src="/img/prestasworkedfor/axiom.svg"/>') }}
+{{ carousel_item(msg='<img loading="lazy" class="prestaworkedfor"title="Car-Use.org" alt="Car-Use.org" src="/img/prestasworkedfor/car-use.jpg"/>') }}
+{{ carousel_item(msg='<img loading="lazy" class="prestaworkedfor"title="Clean Toilets" alt="Clean Toilets" src="/img/prestasworkedfor/cleantoilets.jpg"/>') }}
 {{ carousel_item(msg='<img loading="lazy" class="prestaworkedfor"title="CNES" alt="CNES" src="/img/prestasworkedfor/cnes.png"/>') }}
 {{ carousel_item(msg='<img loading="lazy" class="prestaworkedfor"title="EDF" alt="EDF" src="/img/prestasworkedfor/edf.svg"/>') }}
 {{ carousel_item(msg='<img loading="lazy" class="prestaworkedfor"title="Elsys Design" alt="Elsys Design" src="/img/prestasworkedfor/elsysdesign.svg"/>') }}
 {{ carousel_item(msg='<img loading="lazy" class="prestaworkedfor"title="FretLink" alt="FretLink" src="/img/prestasworkedfor/fretlink.png"/>') }}
 {{ carousel_item(msg='<img loading="lazy" class="prestaworkedfor"title="Hologic" alt="Hologic" src="/img/prestasworkedfor/hologic.webp"/>') }}
+{{ carousel_item(msg='<img loading="lazy" class="prestaworkedfor"title="Imago Process" alt="Imago Process" src="/img/prestasworkedfor/imagoprocess.jpg"/>') }}
 {{ carousel_item(msg='<img loading="lazy" class="prestaworkedfor"title="La Poste" alt="La Poste" src="/img/prestasworkedfor/laposte.svg"/>') }}
 {{ carousel_item(msg='<img loading="lazy" class="prestaworkedfor"title="La Ruche qui dit Oui" alt="La Ruche qui dit Oui" src="/img/prestasworkedfor/laruchequiditoui.svg"/>') }}
 {{ carousel_item(msg='<img loading="lazy" class="prestaworkedfor"title="Lycée professionnel Jean-Pierre Timbaud" alt="Lycée professionnel Jean-Pierre Timbaud" src="/img/prestasworkedfor/lyceejptimbaud.png"/>') }}
@@ -179,7 +182,9 @@ carousel = true
 {{ carousel_item(msg='<img loading="lazy" class="prestaworkedfor"title="Sagem" alt="Sagem" src="/img/prestasworkedfor/sagem.png"/>') }}
 {{ carousel_item(msg='<img loading="lazy" class="prestaworkedfor"title="SII" alt="SII" src="/img/prestasworkedfor/sii.png"/>') }}
 {{ carousel_item(msg='<img loading="lazy" class="prestaworkedfor"title="Solucom" alt="Solucom" src="/img/prestasworkedfor/solucom.webp"/>') }}
+{{ carousel_item(msg='<img loading="lazy" class="prestaworkedfor"title="Sports Santé" alt="Sports Santé" src="/img/prestasworkedfor/sportssante.png"/>') }}
 {{ carousel_item(msg='<img loading="lazy" class="prestaworkedfor"title="Tera" alt="Tera" src="/img/prestasworkedfor/tera.png"/>') }}
 {{ carousel_item(msg='<img loading="lazy" class="prestaworkedfor"title="Thales" alt="Thales" src="/img/prestasworkedfor/thales.svg"/>') }}
 {{ carousel_item(msg='<img loading="lazy" class="prestaworkedfor"title="Trainline" alt="Trainline" src="/img/prestasworkedfor/trainline.svg"/>') }}
+{{ carousel_item(msg='<img loading="lazy" class="prestaworkedfor"title="Undula" alt="Undula" src="/img/prestasworkedfor/undula.png"/>') }}
 {% end %}

sass/css/base.scss

@@ -212,3 +212,43 @@ h3 {
 .img-right img {
 	max-width: 100vw;
 }
+
+.bigbutton {
+	background: linear-gradient(-0.125turn, $blue, $violet);
+	border-radius: 4px;
+	font-family: Neucha;
+	font-size: 150%;
+	padding: 16px;
+}
+
+a.bigbutton, a.bigbutton:hover, a.bigbutton:focus {
+	color: white;
+	text-decoration: none;
+}
+
+a.bigbutton:hover, a.bigbutton:focus {
+	box-shadow: 4px 4px 0 $violet;
+}
+
+.bigbutton2 {
+	border: 1px solid $blue;
+	border-radius: 4px;
+	font-family: Neucha;
+	font-size: 150%;
+	padding: 16px;
+}
+
+a.bigbutton2, a.bigbutton2:hover, a.bigbutton2:focus {
+	color: black;
+	text-decoration: none;
+}
+
+a.bigbutton2:hover, a.bigbutton2:focus {
+	box-shadow: 4px 4px 0 $violet;
+}
+
+@media (prefers-color-scheme: dark) {
+	a.bigbutton2, a.bigbutton2:hover, a.bigbutton2:focus {
+		color: white;
+	}
+}

sass/css/square_box.scss

@@ -17,9 +17,33 @@
 	background: linear-gradient(-0.125turn, $blue, $violet);
 }
 
-.square_box-inner {
+.square_box-inner-bottom {
 	margin: 1px 1px 0 1px;
-	min-height: 199px;
+	border-bottom: 1px solid black;
+	min-height: 198px;
+	background-color: white;
+}
+
+.square_box-inner-top {
+	margin: 0 1px 1px 1px;
+	min-height: 198px;
+	border-top: 1px solid black;
+	background-color: white;
+}
+
+.square_box-inner-right {
+	margin: 1px 0 1px 1px;
+	min-width: 198px;
+	min-height: 198px;
+	border-right: 1px solid black;
+	background-color: white;
+}
+
+.square_box-inner-left {
+	margin: 1px 1px 1px 0;
+	min-width: 198px;
+	min-height: 198px;
+	border-left: 1px solid black;
 	background-color: white;
 }
 
@@ -42,8 +66,3 @@
 .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;
-}*/

static/js/square_box.js

@@ -0,0 +1,17 @@
+var square_box_classes = ["square_box-inner-left", "square_box-inner-right", "square_box-inner-top", "square_box-inner-bottom"];
+
+var randomize_square_box = function (elem) {
+	var r = Math.floor(Math.random()*4);
+	for(i in square_box_classes) {
+		if(i != r)
+			elem.classList.remove(square_box_classes[i]);
+	}
+	elem.classList.add(square_box_classes[r]);
+}
+
+window.onload = function() {
+	for(elem of document.getElementsByClassName("square_box-inner")) {
+		var elem = elem;
+		randomize_square_box(elem);
+	}
+};

templates/shortcodes/square_box.html

@@ -1,5 +1,5 @@
 <div class="square_box">
-	<div class="square_box-inner">
+	<div class="square_box-inner square_box-inner-bottom" onmouseenter="randomize_square_box(this)">
 		<span class="square_box-title">{{ title | safe }}</span>
 		<p class="square_box-text">{{ text | safe }}</p>
 	</div>