Refactor CSS styles and update HTML structure for improved layout and responsiveness

- Updated padding values for sections in custom CSS files to enhance spacing.
- Introduced new card styles with hover effects for better user interaction.
- Added new gradient card layout in the chill theme for a visually appealing design.
- Removed obsolete sector layout and replaced it with a more flexible gradient card layout.
- Enhanced feature list layout with improved pagination and sidebar integration.
- Created a new shortcode for gradient card sections to streamline feature presentation.
This commit is contained in:
Boris Waaub
2026-02-24 15:32:06 +01:00
parent 923b4c4d7f
commit c350ea3dcd
15 changed files with 622 additions and 635 deletions
+44 -25
View File
@@ -1,32 +1,51 @@
---
title: Installation
layout: "simple-card"
developers:
title: "Échanger avec les développeurs"
description: "Il existe un salon sur la messagerie Matrix, pour échanger avec les développeurs de Chill."
linkDescription: "Pour le rejoindre cliquez sur le lien ci-dessous :"
linkLabel: "#chill-social-admin:matrix.org"
linkUrl: "https://matrix.to/#/#chill-social-admin:matrix.org"
qrLabel: "ou scannez le code QR :"
qrImg: "/images/chill-admin.png"
description: Installation et hébergement de Chill
card: "Chill est un logiciel open-source disponible sous licence libre AGPL. Vous pouvez l'auto-héberger ou faire appel à un prestataire pour son installation et sa maintenance."
bgColor: "activity-sector"
layout: "gradient-card"
---
<h3 class="content-subtitle bord-1 mb-2 mt-5">Auto-hébergé</h3>
{{< gradient-card-section title="Auto-hébergé" description="Installez Chill sur votre propre serveur à partir des images Docker." >}}
<div class="space-y-4">
<p>Chill est un logiciel open-source disponible sous licence libre AGPL, dont le code source est hébergé sur <a href="https://gitlab.com/Chill-Projet" target="_blank" class="nav-link">son dépôt gitlab</a>.</p>
<p>Avant de l'installer, n'hésitez pas à tester <a href="http://demo.chill.social/" target="_blank" class="nav-link">la démo</a>.</p>
<p>Chill est une application web à installer sur un serveur dédié. L'application est alors disponible pour plusieurs utilisateurs sur une adresse internet, par exemple un sous-domaine du site web de votre organisation.</p>
<p>Chill est installable à partir d'images Docker. Moyennant des ressources internes en informatique, vous pouvez installer vous-même Chill en vous référant à la documentation d'installation.</p>
<p>La plupart des organisations utilisant Chill passent par un prestataire informatique pour son installation, son hébergement et sa maintenance.</p>
<a href="https://chill.readthedocs.io/en/latest/installation/index.html" target="_blank" class="btn btn-primary mt-4">
Consulter la documentation d'installation
</a>
</div>
{{< /gradient-card-section >}}
Chill est un logiciel open-source disponible sous licence libre AGPL, dont le code source est hébergé sur <a href="https://gitlab.com/Chill-Projet" target="_blank" class="nav-link">son dépôt gitlab</a>.
{{< gradient-card-section title="Par Champs Libres coopérative" description="Faites appel à Champs Libres pour l'installation, l'hébergement et la maintenance de Chill." >}}
<div class="space-y-4">
<ul class="list-disc list-inside">
<li>Localisé en Belgique, à Namur</li>
<li>Hébergement sécurisé et maintenance</li>
<li>Support technique professionnel</li>
</ul>
<a href="https://www.champs-libres.coop/page/social/" target="_blank" class="btn btn-primary mt-4">
Visiter le site de Champs-Libres
</a>
</div>
{{< /gradient-card-section >}}
Avant de l'installer, n'hésitez pas à tester <a href="http://demo.chill.social/" target="_blank" class="nav-link">la démo</a>.
<br>
<br>
Chill est une application web à installer sur un serveur dédié. L'application est alors disponible pour plusieurs utilisateurs sur une adresse internet, par exemple un sous-domaine du site web de votre organisation.
<br>
<br>
Chill est installable à partir d'images Docker. Moyennant des ressources internes en informatique, vous pouvez installer vous-même Chill en vous référant à la <a href="https://chill.readthedocs.io/en/latest/installation/index.html" target="_blank" class="nav-link"><strong>documentation d'installation</strong></a>.
La plupart des organisations utilisant Chill passent par un prestataire informatique pour son installation, son hébergement et sa maintenance.
<h3 class="content-subtitle bord-2 mb-2 mt-5">Par Champs Libres coopérative</h3>
- Localisé en Belgique, à Namur
- Site web: <a href="https://www.champs-libres.coop/page/social/" target="_blank" class="nav-link">Champs-Libres</a>
{{< gradient-card-section title="Échanger avec les développeurs" description="Il existe un salon sur la messagerie Matrix, pour échanger avec les développeurs de Chill." >}}
<div class="flex flex-col items-center gap-4">
<p>Pour le rejoindre cliquez sur le lien ci-dessous :</p>
<a href="https://matrix.to/#/#chill-social-admin:matrix.org" target="_blank" class="btn btn-primary">
#chill-social-admin:matrix.org
</a>
<p>ou scannez le code QR :</p>
<img src="/images/chill-admin.png" alt="QR Code Matrix" class="w-48 h-48">
</div>
{{< /gradient-card-section >}}
+19 -22
View File
@@ -1,29 +1,26 @@
---
title: Manuels
layout: "simple-card"
description: Manuels d'utilisation de Chill
card: "Il existe un manuel d'utilisation à l'usage des utilisateurs et un autre à l'usage des administrateurs.<br><br>
- L'**utilisateur** est le travailleur social qui **utilise Chill dans son quotidien**.<br>
- L'**administrateur** est un rôle spécifique, qui peut accéder à une interface d'administration de l'application, lui permettant de régler la **configuration de Chill**"
bgColor: "activity-sector"
layout: "gradient-card"
---
<h5 class="content-subtitle bord-1 mb-2 mt-5">Manuels d'utilisation de Chill</h5>
<div class="mb-4">
Il existe un manuel d'utilisation à l'usage des utilisateurs et un autre à l'usage des administrateurs.
L'utilisateur est le travailleur social qui utilise Chill dans son quotidien.
{{< gradient-card-section title="Téléchargement des manuels" description="Accédez aux manuels d'utilisation de Chill pour les administrateurs et les utilisateurs." >}}
<div class="flex flex-col gap-4 items-center">
<a href="https://gitea.champs-libres.be/Chill-project/manuals/releases/download/latest/Manuel%20administrateur.pdf" target="blank" class="btn btn-primary">
Télécharger le manuel administrateur
</a>
<a href="https://gitea.champs-libres.be/Chill-project/manuals/releases/download/latest/Manuel%20utilisateur.pdf" target="blank" class="btn btn-primary">
Télécharger le manuel utilisateur
</a>
</div>
{{< /gradient-card-section >}}
L'administrateur est un rôle spécifique, qui peut accèder à une interface d'administration de l'application, lui permettant de régler la configuration de Chill.
</div>
<div class="flex flex-col gap-4 items-center">
<a href="https://gitea.champs-libres.be/Chill-project/manuals/releases/download/latest/Manuel%20administrateur.pdf" target="blank" class="col text-center px-5 py-3 rounded-lg bg-primary-400 text-white hover:bg-primary-700 font-medium transition duration-300">
Télecharger le manuel administrateur
</a>
<a href="https://gitea.champs-libres.be/Chill-project/manuals/releases/download/latest/Manuel%20utilisateur.pdf" target="blank" class="text-center px-5 py-3 rounded-lg bg-primary-400 text-white hover:bg-primary-700 font-medium transition duration-300">
Télecharger le manuel utilisateur
</a>
</div>
<h5 class="content-subtitle bord-2 mb-2 mt-5">Formation des utilisateurs</h5>
<div class="mb-4">
Renseignez-vous pour organiser une journée de formation à l'utilisation de Chill depuis la <a href="/contact" class="nav-link">page contact</a>
</div>
{{< gradient-card-section title="Formation des utilisateurs" description="Organisez une journée de formation à l'utilisation de Chill." >}}
<a href="/contact" class="btn btn-primary mt-4">Contactez-nous</a>
{{< /gradient-card-section >}}
+43 -24
View File
@@ -1,32 +1,51 @@
---
title: Documentation technique
layout: "simple"
developers:
title: "Échanger avec les développeurs"
description: "Il existe un salon sur la messagerie Matrix, pour échanger avec les développeurs de Chill."
linkDescription: "Pour le rejoindre cliquez sur le lien ci-dessous :"
linkLabel: "#chill-social-admin:matrix.org"
linkUrl: "https://matrix.to/#/#chill-social-admin:matrix.org"
qrLabel: "ou scannez le code QR :"
qrImg: "/images/chill-admin.png"
description: Ressources techniques pour développeurs Chill
card: "Accédez au code source, à la documentation technique et aux outils de développement de Chill."
bgColor: "activity-sector"
layout: "gradient-card"
---
<div class="max-w-xxl mx-auto p-6 bg-white rounded shadow" >
<h3 class="content-subtitle bord-1 mb-2 mt-5">Code source de Chill</h3>
Le code source de CHILL est hébergé sur GitLab.
Le dépôt <a class="nav-link" href="https://gitlab.com/Chill-Projet/chill-bundles" target="blank">chill-bundles</a> comporte les fonctionnalités principales de Chill. Ce dépôt est un ensemble de bundles Symfony.
{{< gradient-card-section title="Code source de Chill" description="Le code source de Chill est hébergé sur GitLab." >}}
<div class="space-y-4">
<p>Le dépôt <a class="nav-link" href="https://gitlab.com/Chill-Projet/chill-bundles" target="_blank">chill-bundles</a> comporte les fonctionnalités principales de Chill. Ce dépôt est un ensemble de bundles Symfony.</p>
<p>Pour être déployées, il est préférable de les inclure dans une application Symfony en les incluant dans les dépendances Composer. De cette manière, il est aussi possible de personnaliser la configuration et l'exécution de l'application.</p>
<a href="https://gitlab.com/Chill-Projet/chill-bundles" target="_blank" class="btn btn-primary mt-4">
Accéder au dépôt GitLab
</a>
</div>
{{< /gradient-card-section >}}
{{< gradient-card-section title="Issues et tickets" description="Signalez des bugs ou proposez des améliorations." >}}
<div class="space-y-4">
<p>Les tickets concernant le code de Chill se situent dans le dépôt chill-bundles.</p>
<a href="https://gitlab.com/Chill-Projet/chill-bundles/-/issues" target="_blank" class="btn btn-primary mt-4">
Consulter les tickets
</a>
</div>
{{< /gradient-card-section >}}
Pour être déployées, il est préférable de les inclure dans une application Symfony en les incluant dans les dépendances Composer. De cette manière, il est aussi possible de personnaliser la configuration et l'exécution de l'application. La procédure est expliquée dans la <a class="nav-link" href="https://docs.chill.social/en/latest" target="blank"> documentation</a>.
{{< gradient-card-section title="Documentation technique" description="Consultez la documentation complète pour développeurs." >}}
<div class="space-y-4">
<p>La documentation technique de Chill explique la procédure d'installation, la configuration et le développement de modules personnalisés.</p>
<a href="https://docs.chill.social/en/latest/" target="_blank" class="btn btn-primary mt-4">
Consulter la documentation
</a>
</div>
{{< /gradient-card-section >}}
<h5 class="content-subtitle bord-2 mb-2 mt-5">Issues</h5>
Les tickets concernant le code de Chill se situent par conséquent dans ce dépôt chill-bundles, voir <a class="nav-link" href="https://gitlab.com/Chill-Projet/chill-bundles/-/issues" target="blank"> tickets CHILL</a>.
<h5 class="content-subtitle bord-3 mb-2 mt-5">Documentation technique</h5>
La documentation technique de Chill se trouve à l'adresse suivante: <a class="nav-link" href="https://docs.chill.social/en/latest/" target="blank">documentation CHILL</a>
</div>
{{< gradient-card-section title="Échanger avec les développeurs" description="Il existe un salon sur la messagerie Matrix, pour échanger avec les développeurs de Chill." >}}
<div class="flex flex-col items-center gap-4">
<p>Pour le rejoindre cliquez sur le lien ci-dessous :</p>
<a href="https://matrix.to/#/#chill-social-admin:matrix.org" target="_blank" class="btn btn-primary">
#chill-social-admin:matrix.org
</a>
<p>ou scannez le code QR :</p>
<img src="/images/chill-admin.png" alt="QR Code Matrix" class="w-48 h-48">
</div>
{{< /gradient-card-section >}}