Improved need boxes appearance

This commit is contained in:
ZettaScript 2022-09-26 10:09:17 +02:00
parent ed374b109a
commit ca7ec37a9c
Signed by: tuxmain
GPG key ID: 3504BC6D362F7DCA
3 changed files with 17 additions and 9 deletions

View file

@ -16,21 +16,21 @@ title = "Librezo"
<div class="need_services"> <div class="need_services">
{{ need_box(title="Publier des vidéos") }} {{ need_box(title="Publier des vidéos") }}
<div class="service_boxes"> <div class="service_boxes">
{{ service_box(href="https://joinpeertube.org", title="PeerTube", img="/img/peertube.svg", description="Plateforme de vidéos") }} {{ service_box(href="https://joinpeertube.org", title="PeerTube", img="/img/peertube.svg") }}
</div> </div>
</div> </div>
<div class="need_services"> <div class="need_services">
{{ need_box(title="Visioconférence") }} {{ need_box(title="Visioconférence") }}
<div class="service_boxes"> <div class="service_boxes">
{{ service_box(href="https://bigbluebutton.org", title="BigBlueButton", img="/img/bigbluebutton.png", description="Visioconférence") }} {{ service_box(href="https://bigbluebutton.org", title="BigBlueButton", img="/img/bigbluebutton.png") }}
{{ service_box(href="https://jitsi.org", title="Jitsi", img="/img/jitsi.png", description="Visioconférence") }} {{ service_box(href="https://jitsi.org", title="Jitsi", img="/img/jitsi.png") }}
</div> </div>
</div> </div>
<div class="need_services"> <div class="need_services">
{{ need_box(title="Partage de fichiers") }} {{ need_box(title="Partage de fichiers") }}
<div class="service_boxes"> <div class="service_boxes">
{{ service_box(href="https://framalibre.org/content/jirafeau", title="Jirafeau", img="/img/jirafeau.png", description="Envoi de fichiers sécurisé") }} {{ service_box(href="https://framalibre.org/content/jirafeau", title="Jirafeau", img="/img/jirafeau.png") }}
{{ service_box(href="https://linuxfr.org/news/un-nouveau-logiciel-libre-lufi", title="Lufi", img="/img/lufi.svg", description="Envoi de fichiers sécurisé") }} {{ service_box(href="https://linuxfr.org/news/un-nouveau-logiciel-libre-lufi", title="Lufi", img="/img/lufi.svg") }}
</div> </div>
</div> </div>
</div> </div>

View file

@ -89,14 +89,22 @@ a, a:visited {
} }
.need_services { .need_services {
margin-top: 16px;
display: flex; display: flex;
align-items: center; align-items: stretch;
justify-content: center;
} }
.need_box { .need_box {
flex: 38%; flex: 38%;
font-family: Amatic; font-family: Amatic;
font-size: 42px; font-size: 42px;
background: linear-gradient(0.25turn, #0294d9, #ac44ff);
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
} }
.service_boxes { .service_boxes {
@ -133,7 +141,7 @@ a, a:visited {
.service_box-title { .service_box-title {
position: relative; position: relative;
top: 14px; top: 8px;
display: inline-block; display: inline-block;
padding-bottom: 14px; padding-bottom: 14px;
font-size: 24px; font-size: 24px;

View file

@ -1,7 +1,7 @@
<div class="service_box"> <div class="service_box">
<a class="service_box-link" href="{{href|safe}}"> <a class="service_box-link" href="{{href|safe}}">
{% if img %}<div class="service_box-img_wrap"><img class="service_box-img" src="{{img|safe}}" alt="{{title}}" aria-hidden/></div>{% endif %} {% if img %}<div class="service_box-img_wrap"><img class="service_box-img" src="{{img|safe}}" alt="{{title}}" aria-hidden/></div>{% endif %}
<span class="service_box-title">{{title|safe}}</span><br/> <span class="service_box-title">{{title|safe}}</span>{% if description %}<br/>
<span class="service_box-description">{{description|safe}}</span> <span class="service_box-description">{{description|safe}}</span>{% endif %}
</a> </a>
</div> </div>