From 12547f2611013178909723e202ff6a3c0377b8af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pascal=20Eng=C3=A9libert?= <tuxmain@zettascript.org>
Date: Mon, 5 Jun 2023 18:27:32 +0200
Subject: [PATCH] =?UTF-8?q?bo=C3=AEtes=20accueil=20qui=20bougent?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 content/_index.md                    |  1 +
 sass/css/square_box.scss             | 33 ++++++++++++++++++++++------
 static/js/square_box.js              | 17 ++++++++++++++
 templates/shortcodes/square_box.html |  2 +-
 4 files changed, 45 insertions(+), 8 deletions(-)
 create mode 100644 static/js/square_box.js

diff --git a/content/_index.md b/content/_index.md
index a8a7793..925d9c6 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -38,6 +38,7 @@ 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>
 
diff --git a/sass/css/square_box.scss b/sass/css/square_box.scss
index 8e617c0..6a0a5f9 100644
--- a/sass/css/square_box.scss
+++ b/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;
-}*/
diff --git a/static/js/square_box.js b/static/js/square_box.js
new file mode 100644
index 0000000..4c2119f
--- /dev/null
+++ b/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);
+	}
+};
diff --git a/templates/shortcodes/square_box.html b/templates/shortcodes/square_box.html
index ea062f2..03cd922 100644
--- a/templates/shortcodes/square_box.html
+++ b/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>