Proposition de design pour Librezo https://librezo.fr
Find a file
2023-10-03 09:35:41 +02:00
content accueil: marge haut pour qui 2023-10-03 09:26:16 +02:00
sass/css gros boutons responsive 2023-10-03 09:30:29 +02:00
static dessin accueil: ancienne version 2023-10-03 09:35:41 +02:00
templates conçu par des humains, flèche bouton 2023-09-28 21:42:43 +02:00
.gitignore Initial commit 2022-09-26 08:11:43 +02:00
config.toml Initial commit 2022-09-26 08:11:43 +02:00
README.md mode dev avec LIBREZO_WEBSITE=dev 2023-07-31 11:04:00 +02:00

Nouveau site web de Librezo

voir le rendu

Utilisation

Installez Zola

# tester en local
zola serve

# compiler en démo publique
LIBREZO_WEBSITE=dev zola build

# compiler en prod
zola build

Contribution

Le site devrait respecter les points suivants.

Note : il n'est pas nécessaire de s'y conformer immédiatement en faisant une MR. La relecture de MR est là pour ça.

  • Validité
  • Accessibilité et Responsive
    • Testez votre code avec le validateur WAVE.
    • Suivez les recommandations d'accessibilité du W3C et du MDN.
    • Toutes les fonctionnalités doivent être accessibles au clavier exclusivement (tab, flèches, entrée, espace). Essayez éventuellement avec un lecteur d'écran comme Orca (Linux), NVDA (Windows) ou TalkBack (Android).
    • Les images doivent être optionnelles.
    • JavaScript doit être optionnel.
    • Les modes clair et sombres doivent être utilisables. (sous Firefox, CTRL+Maj+i puis icônes Soleil et Lune)
    • Testez la page avec différentes tailles d'écran. (sous Firefox, CTRL+Maj+m)
    • Testez la page avec des simulateurs de daltonisme. (sous Firefox, CTRL+Maj+i puis onglet Accessibilité)
  • Performance
    • Limitez l'utilisation de frameworks.
    • Compressez bien les images. YOGA Image Optimizer peut être utile.
    • Réduisez les requêtes externes.
    • Évitez les animations en continu et les lectures automatiques.
  • Style de code
    • Respectez l'indentation.
    • La convention de nommages des id et class est hiérarchique, avec les niveaux de hiérarchie séparés par des tirets -. Les underscores _ marquent un espace mais pas un niveau hiérarchique.
      Exemple : header-menu-button serait un bouton du menu de l'entête.
  • Légalité
    • Respectez le RGPD et la loi Informatique et Libertés.
    • Sauf exception, n'utilisez que des œuvres et formats libres, et respectez leur licence. (images, polices, bibliothèques)