index example with tailwind

config.toml

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

content/_index.md

@@ -2,31 +2,24 @@
 title = "Librezo"
 +++
 
-<picture>
+<picture class="mx-auto container flex flex-col max-w-3xl my-10 justify-center">
 	<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="big-logo" src="/img/logo-color-light.png" alt="Logo Librezo" aria-hidden/>
+	<img decoding="async" class="" 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>
-<span class="slogan3">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="cities nn">
+	<div class="">
-	<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>
+		<img class="-rotate-45" alt="Made in Chez Vous" src="/img/madein-purple.png"/>
-	<div class="madein-wrapper">
-		<img class="madein" alt="Made in Chez Vous" src="/img/madein-purple.png"/>
 	</div>
-	<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>
+	<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>
 </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>
-</div>
+<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">
-<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") }}
@@ -38,33 +31,31 @@ 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="title-bar" style="margin-top: 96px;">Pour qui&#8239;?</h2>
+<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>
 
-PME, Associations, Tout type de structure, Collectifs
+<h3 class="text-4xl text-center w-full font-librezo my-5">Autonomisation de l'infrastructure réseau</h3>
 
-<h2 class="title-bar">Comment ça se passe&#8239;?</h2>
+<div class="flex flex-row flex-wrap gap-x-1 container mx-auto justify-center">
-
-<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="title-bar2">Accompagnements optionnels</h3>
+<h3 class="text-4xl text-center w-full font-librezo my-5">Accompagnements optionnels</h3>
 
-<div class="process_boxes">
+<div class="flex flex-row flex-wrap gap-x-5 container mx-auto justify-center">
 {{ 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="title-bar" style="margin-top: 96px;">Ils nous font confiance</h2>
+<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>
 
-<div class="client_boxes">
+<div class="flex flex-col container mx-auto">
 {% client_box(
 	title = "Novelcast"
 	href = "https://novelcast.com"
@@ -103,6 +94,6 @@ PME, Associations, Tout type de structure, Collectifs
 
 </div>
 
-<div style="text-align:center">
+<div  class="container mx-auto" style="text-align:center">
-	<img style="max-width: 100%" alt="Librezo : Parce que oui !" src="/img/drawings/rejoignez-nous-affiche.webp" loading="lazy"/>
+	<img class="inline mb-5" style="max-width: 100%" alt="Librezo : Parce que oui !" src="/img/drawings/rejoignez-nous-affiche.webp" loading="lazy"/>
 </div>

src-styles/base.scss

@@ -0,0 +1,17 @@
+
+@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");
+}

src-styles/markdown.scss

@@ -0,0 +1,168 @@
+.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;
+}

tailwind.config.js

@@ -0,0 +1,38 @@
+/** @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'),
+    ],
+}
+

templates/base.html

@@ -2,9 +2,12 @@
 <!doctype html>
 <html lang="fr">
 	<head>
+		 <meta name="apple-mobile-web-app-capable" content="yes">
     <meta charset="utf-8" />
-		<title>{% block title %}{% endblock title %}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<link rel="stylesheet" href="/css/base.css"/>
+
+  <!-- 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>
+		<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="/">
+			<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">
+			<nav id="header-menu" class="text-2xl hidden xl:flex z-0">
-				<ul>
+				<ul class="fixed top-0 left-0 px-10 py-16 bg-white w-full z-50 space-y-5 h-full
-					<li><a href="/fonctionnement">Fonctionnement</a></li>
+                xl:relative xl:flex xl:p-0 xl:bg-transparent xl:flex-row xl:space-x-6 xl:space-y-0">
-					<li><a href="/tarifs">Services et tarifs</a></li>
+					<li><a class="hover:drop-shadow-purple" href="/fonctionnement">Fonctionnement</a></li>
-					<li><a href="/qui-sommes-nous">Qui sommes-nous</a></li>
+					<li><a class="hover:drop-shadow-purple" href="/tarifs">Services et tarifs</a></li>
-					<li><a href="/charte">Charte</a></li>
+					<li><a class="hover:drop-shadow-purple" href="/qui-sommes-nous">Qui sommes-nous</a></li>
-					<li><a href="/contact">Contact</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>
+		<footer class="w-full bg-gradient-to-r from-lib-blue to-lib-purple pt-5 text-neutral-200 pb-10">
-			<div class="footer-wrapper">
+			<div class="grid grid-cols-3 container mx-auto">
-				<div class="footer-pane">
+				<div class="">
-					<a href="/contact" class="footer-bigger">Contactez-nous</a>
+					<a href="/contact" class="hover:underline text-[#ffddbb] text-3xl">Contactez-nous</a>
-					<ul>
+					<ul class="list-disc text-xl space-y-0.5 mt-5 pl-10">
-						<li><a href="tel:+33782306653">07.82.30.66.53</a></li>
+						<li><a class="hover:underline text-[#ffddbb]" href="tel:+33782306653">07.82.30.66.53</a></li>
-						<li><a href="mailto:contact@librezo.fr">contact@librezo.fr</a></li>
+						<li><a class="hover:underline text-[#ffddbb]" href="mailto:contact@librezo.fr">contact@librezo.fr</a></li>
-						<li><a href="/rejoignez-nous">Rejoignez-nous</a></li>
+						<li><a  class="hover:underline text-[#ffddbb]" href="/rejoignez-nous">Rejoignez-nous</a></li>
 					</ul>
 				</div>
-				<div class="footer-pane">
+				<div>
-					<ul>
+					<ul class="list-disc text-xl space-y-0.5 mt-5 pl-10 pb-10">
-						<li><a href="/mentions-legales">Mentions légales</a></li>
+						<li><a class="hover:underline  text-[#ffddbb]" href="/mentions-legales">Mentions légales</a></li>
-						<li><a href="/rgpd">RGPD</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/>
+						<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 href="http://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC BY-SA 4.0</a> 
+						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>

templates/index.html

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

templates/shortcodes/client_box.html

@@ -1,6 +1,5 @@
-<div class="client_box">
+<div class="flex flex-col md:grid md:grid-cols-4 my-10 gap-x-3">
-	<div class="client_box-left">
+	<div class="col-span-1 self-center justify-self-center mb-5">
-		<div class="client_box-left-row">
 			<a class="client_box-link" href="{{href|safe}}">
 				{% if img_dark %}
 				<picture>
@@ -13,11 +12,9 @@
 				{% endif %}
 			</a>
 	</div>
-	</div>
+	<div class="col-span-3">
-	<div class="client_box-right">
-		<p class="client_box-text">
 			{{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>

templates/shortcodes/process_box.html

@@ -1,5 +1,5 @@
-<div class="process_box">
+<div class="max-w-[250px] text-center font-librezo flex flex-col ">
-	<span class="process_box-number">{{number|safe}}</span><br/>
+	<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="process_box-title">{{title|safe}}</span>{% if description %}<br/>
+	<span class="text-2xl font-bold mt-5">{{title|safe}}</span>{% if description %}<br/>
-	<span class="process_box-description">{{description|safe}}</span>{% endif %}
+	<span class="text-xl">{{description|safe}}</span>{% endif %}
 </div>

templates/shortcodes/square_box.html

@@ -1,4 +1,4 @@
-<div class="square_box">
+<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="square_box-title">{{ title | safe }}</span>
+	<span class="mx-auto text-2xl font-librezo">{{ title | safe }}</span>
-	<p class="square_box-text">{{ text | safe }}</p>
+	<p class="mt-5">{{ text | safe }}</p>
 </div>