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

Compare commits

base: tobias:tailwind
Branches Tags
tobias:tailwind
tobias:main
..
compare: tobias:main
Branches Tags
tobias:tailwind
tobias:main

No commits in common. "tailwind" and "main" have entirely different histories.
tailwind ... main

11 changed files with 75 additions and 1650 deletions
Show Stats Expand all files Collapse all files

2
config.toml
View File

@ -1,7 +1,5 @@
base_url = "/"
ignored_content = ["*.kate-swp"]
compile_sass = true
build_search_index = false

53
content/_index.md
View File

@ -2,24 +2,31 @@
title = "Librezo"
+++
<picture class="mx-auto container flex flex-col max-w-3xl my-10 justify-center">
<picture>
<source srcset="/img/logo-color-dark.png" media="(prefers-color-scheme: dark)" />
<source srcset="/img/logo-color-light.png" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" />
<img decoding="async" class="" src="/img/logo-color-light.png" alt="Logo Librezo" aria-hidden/>
<img decoding="async" class="big-logo" src="/img/logo-color-light.png" alt="Logo Librezo" aria-hidden/>
</picture>
<span class=" my-10 text-center text-6xl font-librezo">Collectif d'artisans numériques</span>
<div class=" my-20 flex flex-row justify-center items-center font-librezo text-xl md:text-3xl gap-x-2 md:gap-x-7 text-opacity-70 ">
<p class="gap-x-8 place-content-center flex flex-row max-w-[30%] flex-wrap"><span class="city">Aix</span> <span class="city">Bastia</span> <span class="city">Cajarc</span> <span class="city">Grasse</span> <span class="city">Le&nbsp;Havre</span> <span class="city">Limoux</span> <span class="city">Marseille</p>
<div class="">
<img class="-rotate-45" alt="Made in Chez Vous" src="/img/madein-purple.png"/>
<span class="slogan3">Collectif d'artisans numériques</span>
<div class="cities nn">
<p><span class="city">Aix</span> <span class="city">Bastia</span> <span class="city">Cajarc</span> <span class="city">Grasse</span> <span class="city">Le&nbsp;Havre</span> <span class="city">Limoux</span> <span class="city">Marseille</p>
<div class="madein-wrapper">
<img class="madein" alt="Made in Chez Vous" src="/img/madein-purple.png"/>
</div>
<p class="gap-x-5 place-content-center flex flex-row max-w-[30%] flex-wrap"><span class="city">Montreuil</span> <span class="city">Nantes</span> <span class="city">Paris</span> <span class="city">Pau</span> <span class="city">Rennes</span> <span class="city">Rohanne</span> <span class="city">Toulouse</span></p>
<p><span class="city">Montreuil</span> <span class="city">Nantes</span> <span class="city">Paris</span> <span class="city">Pau</span> <span class="city">Rennes</span> <span class="city">Rohanne</span> <span class="city">Toulouse</span></p>
</div>
<a class="mx-auto my-10" href="https://www.francenum.gouv.fr/activateurs/librezo" target="_blank">
<div style="text-align: center; margin: 32px 0;">
<a href="https://www.francenum.gouv.fr/activateurs/librezo" target="_blank">
<img alt="Activateur France Num" src="/img/francenum-activateur.jpg" style="width: 128px;"/>
</a>
<a href="/logiciel-libre" class="hover:underline text-center font-librezo text-4xl md:text-8xl text-lib-blue">Reprenez le contrôle</a>
<div class="container mx-auto flex flex-row gap-x-5 my-10 flex-wrap gap-y-5 justify-center">
</div>
<a href="/logiciel-libre" class="slogan1">Reprenez le contrôle</a>
<div class="square_boxes">
{{ square_box(title="Confidentialité", text="Vos données personnelles le restent") }}
{{ square_box(title="Résilience", text="Récupérez rapidement d'une panne avec des sauvegardes") }}
{{ square_box(title="Souveraineté", text="Reprenez le contrôle de votre infrastructure informatique") }}
@ -31,31 +38,33 @@ title = "Librezo"
{{ square_box(title="Savoir-faire", text="Vous êtes au contact des experts") }}
{{ square_box(title="Solidarité", text="15% de nos bénéfices sont reversés au développement des logiciels utilisés") }}
</div>
<h2 class="text-5xl text-center w-full bg-gradient-to-r from-lib-blue to-lib-purple text-white py-3 font-librezo" style="margin-top: 96px;">Pour qui&#8239;?</h2>
<p class="text-center my-5">PME, Associations, Tout type de structure, Collectifs<p>
<h2 class="text-5xl text-center w-full bg-gradient-to-r from-lib-blue to-lib-purple text-white py-3 font-librezo">Comment ça se passe&#8239;?</h2>
<h2 class="title-bar" style="margin-top: 96px;">Pour qui&#8239;?</h2>
<h3 class="text-4xl text-center w-full font-librezo my-5">Autonomisation de l'infrastructure réseau</h3>
PME, Associations, Tout type de structure, Collectifs
<div class="flex flex-row flex-wrap gap-x-1 container mx-auto justify-center">
<h2 class="title-bar">Comment ça se passe&#8239;?</h2>
<h3 class="title-bar2">Autonomisation de l'infrastructure réseau</h3>
<div class="process_boxes">
{{ process_box(number="1", title="Étude", description="Définition du besoin et propositions de solutions adaptées.") }}
{{ process_box(number="2", title="Installation", description="Montage du serveur à domicile et installation du système et des composants logiciels.") }}
{{ process_box(number="3", title="Configuration", description="Réglages sur mesure et configurations de sécurité.") }}
{{ process_box(number="4", title="Acquisition", description="Votre serveur GNU/Linux est prêt et 100% entre vos mains. Tests.") }}
</div>
<h3 class="text-4xl text-center w-full font-librezo my-5">Accompagnements optionnels</h3>
<h3 class="title-bar2">Accompagnements optionnels</h3>
<div class="flex flex-row flex-wrap gap-x-5 container mx-auto justify-center">
<div class="process_boxes">
{{ process_box(number="5", title="Accompagnement utilisateur", description="Apprenez en quelques heures à utiliser vos outils.") }}
{{ process_box(number="6", title="Accompagnement administrateur", description="Devenez administrateur-système de votre propre infrastructure (plusieurs semaines).") }}
{{ process_box(number="7", title="Autonomie", description="Vous êtes capable de gérer votre système et vos applications : vous êtes autonome et n'avez plus besoin de tiers de confiance.") }}
</div>
<h2 class="text-5xl text-center w-full bg-gradient-to-r from-lib-blue to-lib-purple text-white py-3 font-librezo" style="margin-top: 96px;">Ils nous font confiance</h2>
<h2 class="title-bar" style="margin-top: 96px;">Ils nous font confiance</h2>
<div class="flex flex-col container mx-auto">
<div class="client_boxes">
{% client_box(
title = "Novelcast"
href = "https://novelcast.com"
@ -94,6 +103,6 @@ title = "Librezo"
</div>
<div class="container mx-auto" style="text-align:center">
<img class="inline mb-5" style="max-width: 100%" alt="Librezo : Parce que oui !" src="/img/drawings/rejoignez-nous-affiche.webp" loading="lazy"/>
<div style="text-align:center">
<img style="max-width: 100%" alt="Librezo : Parce que oui !" src="/img/drawings/rejoignez-nous-affiche.webp" loading="lazy"/>
</div>

17
src-styles/base.scss
View File

@ -1,17 +0,0 @@
@import "./markdown.scss";
@tailwind base;
@tailwind components;
@tailwind utilities;
@font-face {
font-family: "LunaSans";
src: url("../fonts/LunaSans-Regular.ttf");
}
@font-face {
font-family: "Neucha";
src: url("../fonts/Neucha.ttf");
}

168
src-styles/markdown.scss
View File

@ -1,168 +0,0 @@
.markdown {
@apply text-lg;
@apply font-serif;
}
/* Font class used for headers */
.markdown-header {
@apply font-sans;
}
/* Base spacing between paragraph */
.markdown-p-spacing {
@apply mb-4;
}
.markdown-list-styling {
@apply list-inside;
@apply markdown-p-spacing;
}
.markdown:last-child {
@apply mb-0;
}
/* Header styling */
.markdown h1 {
@apply mb-6;
@apply text-5xl;
}
.markdown h2 {
@apply mb-5;
@apply text-4xl;
}
.markdown h3 {
@apply mb-4;
@apply text-3xl;
}
.markdown h4 {
@apply mb-3;
@apply text-2xl;
}
.markdown h5 {
@apply mb-2;
@apply text-xl;
}
.markdown h6 {
@apply mb-1;
@apply text-lg;
}
/* Highlighting styling */
.markdown em {
@apply italic;
}
.markdown strong {
@apply font-bold;
}
.markdown del {
@apply line-through;
}
/* Link styling */
.markdown a {
@apply underline;
@apply text-blue-400;
}
/* Code/Verbatim styling */
.markdown pre {
@apply p-4;
@apply text-lg;
@apply font-mono;
@apply bg-gray-100;
@apply markdown-p-spacing;
}
.markdown code {
@apply px-1;
@apply font-mono;
@apply bg-gray-100;
}
/* Blockquote styling */
.markdown blockquote {
@apply py-4;
@apply px-2;
@apply markdown-p-spacing;
@apply border-2;
@apply border-l-0;
@apply border-r-0;
@apply border-gray-900;
@apply bg-gray-400;
@apply bg-opacity-50;
}
/* Fix embedded blockquotes */
.markdown blockquote>blockquote {
@apply ml-4;
@apply mt-1;
@apply mb-0;
}
/* List styling */
.markdown ul {
@apply markdown-list-styling;
@apply list-disc;
}
.markdown ol {
@apply markdown-list-styling;
@apply list-decimal;
}
.markdown ul li > ul {
@apply ml-4;
@apply mb-0;
}
.markdown ol li > ol {
@apply ml-4;
@apply mb-0;
}
.markdown ol li p {
@apply inline;
}
/* Img styling */
.markdown img {
@apply max-w-full;
}
/* Table Styling */
.markdown p {
@apply markdown-p-spacing;
}
/* Table Styling */
.markdown table {
@apply border-2;
@apply border-b-0;
@apply border-black;
}
.markdown table thead {
@apply border-b-4;
@apply border-black;
}
.markdown table tbody tr {
@apply border-b-2;
@apply border-black;
}
.markdown table tr th {
@apply border-r-2;
@apply border-black;
@apply px-1;
}
.markdown table tr th:last-of-type {
@apply border-r-0;
}
.markdown table tr td {
@apply border-r-2;
@apply border-black;
@apply px-1;
}
.markdown table tr td:last-of-type {
@apply border-r-0;
}
/* Footnote Styling */
.markdown .footnote-definition p {
@apply inline;
}

1343
static/styles/main.css
View File

File diff suppressed because it is too large Load Diff

38
tailwind.config.js
View File

@ -1,38 +0,0 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./templates/**/*.html",
"./content/**/*.md",
],
theme: {
extend: {
fontFamily: {
'sans': ['LunaSans', 'system-ui', 'sans-serif'],
'librezo': ["Neucha"],
},
dropShadow: {
'purple' : '1px 2px 1px rgba(172, 68, 255, 1)',
},
colors: {
"mattermost": "#734596",
"nexctloud": "#99cde9",
"bbb": "#83d0f5",
"lib-purple": "#ac44ff",
"lib-blue": "#0294d9",
},
},
container: {
padding: {
DEFAULT: '1rem',
sm: '2rem',
lg: '4rem',
xl: '5rem',
'2xl': '6rem',
},
},
},
plugins: [
require('@tailwindcss/typography'),
],
}

73
templates/base.html
View File

@ -2,12 +2,9 @@
<!doctype html>
<html lang="fr">
<head>
<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" />
<title>{% block title %}{% endblock title %}</title>
<link rel="stylesheet" href="/css/base.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"/>
@ -21,8 +18,8 @@
</p>
<a href="#" onclick="document.getElementById('dev-warning').remove()">fermer</a>
</div>
<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">
<header>
<a href="/">
<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)"/>
@ -30,57 +27,41 @@
</picture>
<h1 class="sr-only">Librezo</h1>
</a>
<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>
<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>
</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 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>
<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>
</ul>
</div>
<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>
<div class="footer-pane">
<ul>
<li><a href="/mentions-legales">Mentions légales</a></li>
<li><a href="/rgpd">RGPD</a></li>
<li>SIRET 91009661900028</li>
</ul>
<p>
<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>
<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>
</p>
</div>
<div class="text-xl">
<div class="footer-pane">
<p>
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.
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.
</p>
</div>
</div>

2
templates/index.html
View File

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

11
templates/shortcodes/client_box.html
View File

@ -1,5 +1,6 @@
<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">
<div class="client_box">
<div class="client_box-left">
<div class="client_box-left-row">
<a class="client_box-link" href="{{href|safe}}">
{% if img_dark %}
<picture>
@ -12,9 +13,11 @@
{% endif %}
</a>
</div>
<div class="col-span-3">
</div>
<div class="client_box-right">
<p class="client_box-text">
{{body|safe}}
{% if sign %}<br/><span class="text-neutral-700">{{sign|safe}}</span>{% endif %}
{% if sign %}<br/><span class="client_box-sign">{{sign|safe}}</span>{% endif %}
</p>
</div>
</div>

8
templates/shortcodes/process_box.html
View File

@ -1,5 +1,5 @@
<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 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>

6
templates/shortcodes/square_box.html
View File

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