tobias/librezo-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

index example with tailwind

Browse Source
This commit is contained in:
oiseauroch
2023-05-24 12:47:04 +02:00
parent ebedc206ff
commit 1c973fb5af
11 changed files with 1650 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
templates/base.html
View File

@@ -2,9 +2,12 @@
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<title>{% block title %}{% endblock title %}</title>
<link rel="stylesheet" href="/css/base.css"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Stylesheets -->
<link href="{{get_url(path='styles/main.css',cachebust=true)}}" rel="stylesheet" type="text/css" />
{% if page.extra.leaflet or section.extra.leaflet %}<link rel="stylesheet" href="/vendor/leaflet/leaflet.css"/>{% endif %}
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>
<meta name="viewport" content="width=device-width"/>
@@ -18,8 +21,8 @@
</p>
<a href="#" onclick="document.getElementById('dev-warning').remove()">fermer</a>
</div>
<header>
<a href="/">
<header class="w-full h-16 bg-white container px-4 md:px-0 h-full mx-auto flex justify-between items-center">
<a href="/" class="hover:drop-shadow-purple">
<picture>
<source srcset="/img/librezo-little-white.png" media="(prefers-color-scheme: dark)"/>
<source srcset="/img/librezo-little-black.png" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"/>
@@ -27,41 +30,57 @@
</picture>
<h1 class="sr-only">Librezo</h1>
</a>
<nav id="header-menu">
<ul>
<li><a href="/fonctionnement">Fonctionnement</a></li>
<li><a href="/tarifs">Services et tarifs</a></li>
<li><a href="/qui-sommes-nous">Qui sommes-nous</a></li>
<li><a href="/charte">Charte</a></li>
<li><a href="/contact">Contact</a></li>
<nav id="header-menu" class="text-2xl hidden xl:flex z-0">
<ul class="fixed top-0 left-0 px-10 py-16 bg-white w-full z-50 space-y-5 h-full
xl:relative xl:flex xl:p-0 xl:bg-transparent xl:flex-row xl:space-x-6 xl:space-y-0">
<li><a class="hover:drop-shadow-purple" href="/fonctionnement">Fonctionnement</a></li>
<li><a class="hover:drop-shadow-purple" href="/tarifs">Services et tarifs</a></li>
<li><a class="hover:drop-shadow-purple" href="/qui-sommes-nous">Qui sommes-nous</a></li>
<li><a class="hover:drop-shadow-purple" href="/charte">Charte</a></li>
<li><a class="hover:drop-shadow-purple" href="/contact">Contact</a></li>
</ul>
</nav>
<div class="flex items-center xl:hidden z-10">
<button class="texte-neutral-800 text-4xl font-bold hover:drop-shadow-purple duration-300"
onclick="toggleMenu()">
&#9776;
</button>
</div>
<script>
var menu = document.getElementById('header-menu');
function toggleMenu() {
menu.classList.toggle('hidden');
menu.classList.toggle('space-y-3');
}
</script>
</header>
{% block body %}{% endblock body %}
<footer>
<div class="footer-wrapper">
<div class="footer-pane">
<a href="/contact" class="footer-bigger">Contactez-nous</a>
<ul>
<li><a href="tel:+33782306653">07.82.30.66.53</a></li>
<li><a href="mailto:contact@librezo.fr">contact@librezo.fr</a></li>
<li><a href="/rejoignez-nous">Rejoignez-nous</a></li>
<footer class="w-full bg-gradient-to-r from-lib-blue to-lib-purple pt-5 text-neutral-200 pb-10">
<div class="grid grid-cols-3 container mx-auto">
<div class="">
<a href="/contact" class="hover:underline text-[#ffddbb] text-3xl">Contactez-nous</a>
<ul class="list-disc text-xl space-y-0.5 mt-5 pl-10">
<li><a class="hover:underline text-[#ffddbb]" href="tel:+33782306653">07.82.30.66.53</a></li>
<li><a class="hover:underline text-[#ffddbb]" href="mailto:contact@librezo.fr">contact@librezo.fr</a></li>
<li><a class="hover:underline text-[#ffddbb]" href="/rejoignez-nous">Rejoignez-nous</a></li>
</ul>
</div>
<div class="footer-pane">
<ul>
<li><a href="/mentions-legales">Mentions légales</a></li>
<li><a href="/rgpd">RGPD</a></li>
<div>
<ul class="list-disc text-xl space-y-0.5 mt-5 pl-10 pb-10">
<li><a class="hover:underline text-[#ffddbb]" href="/mentions-legales">Mentions légales</a></li>
<li><a class="hover:underline text-[#ffddbb]" href="/rgpd">RGPD</a></li>
<li>SIRET 91009661900028</li>
</ul>
<p>
<a href="https://git.txmn.tk/Librezo/website">Code source du site</a> sous licence <a href="http://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC BY-SA 4.0</a><br/>
Dessins de GRA, licence <a href="http://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC BY-SA 4.0</a>
<a class="hover:underline text-[#ffddbb]" href="https://git.txmn.tk/Librezo/website">Code source du site</a> sous licence <a class="hover:underline text-[#ffddbb]" href="http://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC BY-SA 4.0</a><br/>
Dessins de GRA, licence <a class="hover:underline text-[#ffddbb]" href="http://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC BY-SA 4.0</a>
</p>
</div>
<div class="footer-pane">
<div class="text-xl">
<p>
Librezo propose une alternative aux services en ligne en favorisant l'auto-hébergement. Avec un accompagnement sur mesure et des <a href="/logiciel-libre">solutions logicielles libres</a> installées sur votre serveur, reprendre et garder le contrôle de vos données n'a jamais été aussi facile.
Librezo propose une alternative aux services en ligne en favorisant l'auto-hébergement. Avec un accompagnement sur mesure et des <a class="hover:underline text-[#ffddbb]" href="/logiciel-libre">solutions logicielles libres</a> installées sur votre serveur, reprendre et garder le contrôle de vos données n'a jamais été aussi facile.
</p>
</div>
</div>

2
templates/index.html
View File

@@ -6,7 +6,7 @@
{% endblock head %}
{% block body %}
<main class="center">
<main class="flex flex-col">
{{section.content | safe}}
</main>
{% endblock body %}

11
templates/shortcodes/client_box.html
View File

@@ -1,6 +1,5 @@
<div class="client_box">
<div class="client_box-left">
<div class="client_box-left-row">
<div class="flex flex-col md:grid md:grid-cols-4 my-10 gap-x-3">
<div class="col-span-1 self-center justify-self-center mb-5">
<a class="client_box-link" href="{{href|safe}}">
{% if img_dark %}
<picture>
@@ -12,12 +11,10 @@
<img class="client_box-img" src="{{img|safe}}" alt="{{title}}" title="{{title}}" loading="lazy"/>
{% endif %}
</a>
</div>
</div>
<div class="client_box-right">
<p class="client_box-text">
<div class="col-span-3">
{{body|safe}}
{% if sign %}<br/><span class="client_box-sign">{{sign|safe}}</span>{% endif %}
{% if sign %}<br/><span class="text-neutral-700">{{sign|safe}}</span>{% endif %}
</p>
</div>
</div>

8
templates/shortcodes/process_box.html
View File

@@ -1,5 +1,5 @@
<div class="process_box">
<span class="process_box-number">{{number|safe}}</span><br/>
<span class="process_box-title">{{title|safe}}</span>{% if description %}<br/>
<span class="process_box-description">{{description|safe}}</span>{% endif %}
<div class="max-w-[250px] text-center font-librezo flex flex-col ">
<span class=" mx-auto py-4 text-3xl font-bold text-white w-16 h-16 rounded-full bg-gradient-to-r from-lib-blue to-lib-purple">{{number|safe}}</span><br/>
<span class="text-2xl font-bold mt-5">{{title|safe}}</span>{% if description %}<br/>
<span class="text-xl">{{description|safe}}</span>{% endif %}
</div>

6
templates/shortcodes/square_box.html
View File

@@ -1,4 +1,4 @@
<div class="square_box">
<span class="square_box-title">{{ title | safe }}</span>
<p class="square_box-text">{{ text | safe }}</p>
<div class="w-[200px] min-h-[200px] p-2 text-white from-lib-purple to-lib-blue bg-gradient-to-br rounded-md text-center">
<span class="mx-auto text-2xl font-librezo">{{ title | safe }}</span>
<p class="mt-5">{{ text | safe }}</p>
</div>