index example with tailwind
This commit is contained in:
oiseauroch
parent
ebedc206ff
commit
1c973fb5af
|
|
@ -1,5 +1,7 @@
|
|||
base_url = "/"
|
||||
|
||||
ignored_content = ["*.kate-swp"]
|
||||
|
||||
compile_sass = true
|
||||
|
||||
build_search_index = false
|
||||
|
|
|
|||
|
|
@ -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="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 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"/>
|
||||
<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 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"/>
|
||||
</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>
|
||||
|
||||
<div style="text-align: center; margin: 32px 0;">
|
||||
<a href="https://www.francenum.gouv.fr/activateurs/librezo" target="_blank">
|
||||
<a class="mx-auto my-10" 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="slogan1">Reprenez le contrôle</a>
|
||||
|
||||
<div class="square_boxes">
|
||||
<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">
|
||||
{{ 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 ?</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 ?</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 ?</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 ?</h2>
|
||||
|
||||
<h3 class="title-bar2">Autonomisation de l'infrastructure réseau</h3>
|
||||
|
||||
<div class="process_boxes">
|
||||
<div class="flex flex-row flex-wrap gap-x-1 container mx-auto justify-center">
|
||||
{{ 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">
|
||||
<img style="max-width: 100%" alt="Librezo : Parce que oui !" src="/img/drawings/rejoignez-nous-affiche.webp" loading="lazy"/>
|
||||
<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>
|
||||
|
|
|
|||
17
src-styles/base.scss
Normal file
17
src-styles/base.scss
Normal file
|
|
@ -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");
|
||||
}
|
||||
168
src-styles/markdown.scss
Normal file
168
src-styles/markdown.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
1343
static/styles/main.css
Normal file
1343
static/styles/main.css
Normal file
File diff suppressed because it is too large
Load Diff
38
tailwind.config.js
Normal file
38
tailwind.config.js
Normal file
|
|
@ -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'),
|
||||
],
|
||||
}
|
||||
|
||||
|
|
@ -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>
|
||||
<link rel="stylesheet" href="/css/base.css"/>
|
||||
<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()">
|
||||
☰
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
{% endblock head %}
|
||||
|
||||
{% block body %}
|
||||
<main class="center">
|
||||
<main class="flex flex-col">
|
||||
{{section.content | safe}}
|
||||
</main>
|
||||
{% endblock body %}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -13,11 +12,9 @@
|
|||
{% 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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user