Services boxes

This commit is contained in:
ZettaScript 2022-09-26 09:15:39 +02:00
parent 447192dfdc
commit ed374b109a
No known key found for this signature in database
GPG Key ID: 3504BC6D362F7DCA
9 changed files with 110 additions and 1 deletions

View File

@ -8,4 +8,31 @@ title = "Librezo"
<img class="madein" alt="Made in Chez Vous" src="/img/madein.png"/> <img class="madein" alt="Made in Chez Vous" src="/img/madein.png"/>
<p class="slogan1">Gardez le contrôle de vos données</p> <span class="slogan1">Gardez le contrôle de vos données</span>
<span class="slogan2">Solutions libres en auto-hébergement</span>
<div class="services_by_need">
<div class="need_services">
{{ need_box(title="Publier des vidéos") }}
<div class="service_boxes">
{{ service_box(href="https://joinpeertube.org", title="PeerTube", img="/img/peertube.svg", description="Plateforme de vidéos") }}
</div>
</div>
<div class="need_services">
{{ need_box(title="Visioconférence") }}
<div class="service_boxes">
{{ service_box(href="https://bigbluebutton.org", title="BigBlueButton", img="/img/bigbluebutton.png", description="Visioconférence") }}
{{ service_box(href="https://jitsi.org", title="Jitsi", img="/img/jitsi.png", description="Visioconférence") }}
</div>
</div>
<div class="need_services">
{{ need_box(title="Partage de fichiers") }}
<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://linuxfr.org/news/un-nouveau-logiciel-libre-lufi", title="Lufi", img="/img/lufi.svg", description="Envoi de fichiers sécurisé") }}
</div>
</div>
</div>
<span class="slogan2">Et beaucoup, beaucoup d'autres...</span>

View File

@ -18,6 +18,7 @@ header {
height: 48px; height: 48px;
max-width: 1100px; max-width: 1100px;
margin: 0 auto 16px auto; margin: 0 auto 16px auto;
padding: 0 4px;
font-size: 24px; font-size: 24px;
} }
@ -65,6 +66,10 @@ a, a:visited {
border: 0; border: 0;
} }
.big-logo {
max-width: 100%;
}
.cities { .cities {
font-size: 18px; font-size: 18px;
} }
@ -77,3 +82,59 @@ a, a:visited {
font-size: 400%; font-size: 400%;
font-family: Amatic; font-family: Amatic;
} }
.slogan2 {
font-size: 300%;
font-family: Amatic;
}
.need_services {
display: flex;
align-items: center;
}
.need_box {
flex: 38%;
font-family: Amatic;
font-size: 42px;
}
.service_boxes {
flex: 62%;
text-align: center;
font-family: LunaSans;
}
.service_box {
display: inline-block;
width: 144px;
padding-top: 4px;
vertical-align: top;
}
.service_box-img {
max-width: 128px;
max-height: 128px;
}
.service_box-img_wrap {
width: 128px;
height: 128px;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
}
.service_box-link, .service_box-link:visited {
color: #000;
text-decoration: none;
}
.service_box-title {
position: relative;
top: 14px;
display: inline-block;
padding-bottom: 14px;
font-size: 24px;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
static/img/jirafeau.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
static/img/jitsi.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

7
static/img/lufi.svg Normal file
View File

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" width="282.701" height="282.539">
<g transform="rotate(-45 -494.978 801.968) scale(1.41712)">
<path d="m214.91 548.044-38.638 1.01-2.273 6.566 3.03 3.03 41.922.758 157.078 1.01h40.154l5.303-5.303-2.778-6.819-19.698-1.01-20.203.252-2.778-15.404-6.818-16.92-14.395-17.93-13.637-12.628-13.132-6.566-18.183-5.303-22.728 1.263-21.213 4.798-13.385 5.556-13.132 10.86-10.606 13.384-7.324 9.343-3.788 10.355-3.283 12.879z" style="fill:#ffd119;fill-opacity:1;stroke:#000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"/>
<rect ry="7.321" y="522.79" x="216.173" height="24.244" width="159.857" style="fill:#ff000a;fill-opacity:1;fill-rule:evenodd;stroke:#000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"/>
<path d="M191.541 487.67c-5.11-4.02-3.766-12.777 2.286-14.887 1.902-.663 9.868-1.135 19.14-1.135 11.858 0 15.967-.317 16.22-1.25.186-.688.813-3.788 1.393-6.89 3.712-19.86 19.217-41.972 37.206-53.061 24.328-14.997 56.897-16.927 82.61-4.895 23.515 11.004 42.69 34.144 48.048 57.981l1.782 7.932 18.368.341 17.104.342c9.452 1.084 8.29 17.087.242 17.5H314.998c-118.97 0-120.984-.032-123.457-1.978zm243.673-3.594c2.514-.828 3.439-3.94.372-6.228-2.53-1.886-29.037-1.2-120.465-1.2-116.89 0-119.286.038-120.3 1.934-1.406 2.628-1.307 3.652.536 5.494 1.411 1.411 13.665 1.572 119.929 1.572 106.264 0 116.732-.518 119.928-1.572zm-42.521-13.35c1.156-.731 1.21-1.87.302-6.392-.608-3.025-1.78-7.118-2.606-9.094l-1.501-3.592H239.813l-1.423 3.405c-1.945 4.656-3.88 14.34-3.113 15.58.797 1.29 155.382 1.381 157.416.094zm-25.907-24.391c0-1.247-5.704-11.732-7.623-14.014-2.888-3.434-3.053-5.673-.418-5.673 4.386 0 11.742 11.745 10.68 17.052l-.59 2.948h7.976c5.75 0 7.975-.352 7.975-1.26 0-2.268-8.582-14.11-14.606-20.155-15.054-15.107-33.863-22.606-56.602-22.568-22.088.038-39.402 6.88-54.364 21.483-6.946 6.78-15.428 18.41-15.428 21.155 0 1.112 10.65 1.345 61.5 1.345 33.825 0 61.5-.14 61.5-.313zm-93.592-3.065c-.662-1.726 3.908-10.693 6.77-13.283 1.633-1.479 2.069-1.515 3.272-.272 1.19 1.228.823 2.363-2.562 7.933-4.001 6.583-6.415 8.397-7.48 5.622zm74.817.128c-2.024-2.483-3.639-9.736-2.436-10.94 1.647-1.646 3.96.62 5.342 5.233 1.635 5.46-.188 9.04-2.906 5.707zm-87.873-3.275c-1.085-2.826 9.43-16.475 12.692-16.475 3.518 0 3.023 2.006-1.974 8.011-2.766 3.324-5.504 6.93-6.085 8.016-1.255 2.345-3.81 2.592-4.633.448zm27.069.18c-.662-1.724 2-6.22 4.177-7.054 2.192-.842 2.958 2.317 1.285 5.299-1.676 2.985-4.626 3.933-5.462 1.755z" style="fill:#000;fill-opacity:1" transform="translate(-17.8 72.845)"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.5 KiB

6
static/img/peertube.svg Normal file
View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="2799 -911 16 22">
<path fill="#211f20" d="M2799-911v11l8-5" data-name="Path 4"/>
<path fill="#737373" d="M2799-900v11l8-6" data-name="Path 5"/>
<path fill="#f1680d" d="M2807-905v10l8-5" data-name="Path 6"/>
<path fill="transparent" d="M2807-895v-10l-8 5z" data-name="Path 7"/>
</svg>

After

Width:  |  Height:  |  Size: 337 B

View File

@ -0,0 +1 @@
<div class="need_box"><span class="need_box-title">{{title|safe}}</span></div>

View File

@ -0,0 +1,7 @@
<div class="service_box">
<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 %}
<span class="service_box-title">{{title|safe}}</span><br/>
<span class="service_box-description">{{description|safe}}</span>
</a>
</div>