PL — site vitrine
Page d'accueil des outils pédagogiques que je construis pour mes élèves au Cycle d'Orientation : PL-planif’, PL-lect’, PL-CPS’ et PL-restart’.
En ligne : https://7nel.github.io/PL/
Structure
index.html accueil : outils, à propos, contact
reflexions.html page secondaire : les textes de réflexion
style.css styles partagés par les deux pages
icon-*.png icône du site (onglet, écran d'accueil) en 32, 180 et 512 px
manifest.json nom et couleurs pour l'ajout à l'écran d'accueil
img/
lac-valais.jpg photo du lac de Salanfe (section "À propos")
lac-valais-1000.jpg même photo en 1000 px (version légère servie via srcset)
pl-planif.jpg capture de PL-planif’ (hero)
pl-lect.jpg capture de PL-lect’ (carte outil)
pl-cps.jpg capture de PL-CPS (carte outil)
pl-restart.jpg capture de PL-restart’ (carte outil)
fonts/
atkinson-*.woff2 Atkinson Hyperlegible auto-hébergée (aucun appel à Google Fonts)
lexend.woff2 Lexend auto-hébergée (titres et chiffres)
Mettre à jour le site
Le site tient en deux pages HTML et une feuille de style, sans dépendance de build : il suffit de modifier index.html, reflexions.html ou style.css directement (dans l'éditeur GitHub en ligne, ou en clonant le dépôt) et de valider (« commit ») sur la branche main. GitHub Pages republie automatiquement en une à deux minutes.
Identité visuelle
Le site applique le système d'identité des outils PL : palette sobre, police Atkinson Hyperlegible pour le texte et Lexend pour les titres et les chiffres (toutes deux servies depuis fonts/), monogramme PL. Direction « Le trait » : filets et traits d’épaisseur constante (--trait), blocs droits, actions en forme de pilule, un seul aplat de profondeur par page. Voir le design system pour les tokens complets (couleurs, typographie, espacement).
Formulaire de contact
Le formulaire utilise Web3Forms pour transmettre les messages par e-mail sans exposer d'adresse dans le code source ni afficher de boîte mail publique.
Licence
Voir LICENSE — tous droits réservés.
