Git/Librezo
1
0
Fork 0
mirror of https://git.librezo.fr/Librezo/website.git synced 2024-12-04 16:55:12 +01:00
Code Issues Packages Projects Releases Wiki Activity

boîtes accueil qui bougent

Browse Source
This commit is contained in:
Pascal Engélibert 2023-06-05 18:27:32 +02:00
parent b465f0f19a
commit 12547f2611
4 changed files with 45 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
content/_index.md
View File

@ -38,6 +38,7 @@ title = "Librezo"
{{ square_box(title="Savoir-faire", text="Vous êtes en contact direct avec des experts") }} {{ 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") }} {{ square_box(title="Solidarité", text="15% de nos bénéfices sont reversés au développement des logiciels utilisés") }}
</div> </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> <a href="/logiciel-libre" class="bigbutton2">En savoir plus sur les logiciels libres</a>

33
sass/css/square_box.scss
View File

@ -17,9 +17,33 @@
background: linear-gradient(-0.125turn, $blue, $violet); background: linear-gradient(-0.125turn, $blue, $violet);
} }
.square_box-inner { .square_box-inner-bottom {
margin: 1px 1px 0 1px; 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; background-color: white;
} }
@ -42,8 +66,3 @@
.square_box-text { .square_box-text {
padding: 6px; padding: 6px;
} }
/*.square_box:hover .square_box-title, .square_box:focus .square_box-title {
background: linear-gradient(-0.125turn, $blue, $violet);
color: white;
}*/

17
static/js/square_box.js Normal file
View File

@ -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);
}
};

2
templates/shortcodes/square_box.html
View File

@ -1,5 +1,5 @@
<div class="square_box"> <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> <span class="square_box-title">{{ title | safe }}</span>
<p class="square_box-text">{{ text | safe }}</p> <p class="square_box-text">{{ text | safe }}</p>
</div> </div>