boîtes accueil qui bougent

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>
 

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>