/* =========================================================================== 3 — IDENTITE PAR PAGE --------------------------------------------------------------------------- LE PROBLEME QUE CE FICHIER RESOUT La maquette precedente donnait a chaque page son ambiance en dupliquant 335 lignes de CSS, cinq fois. Cinq fichiers identiques a trois couleurs pres. Corriger une marge demandait cinq modifications ; il en manquait toujours une. LA SOLUTION Le corps de la page porte un attribut `data-page` (pose par layout.njk depuis la variable `page` deja presente dans les vues). Chaque page n'a alors besoin QUE de redefinir deux variables : --scene la photographie de haut de page --scene-position le point de l'image a garder visible au recadrage Deux lignes par page au lieu de 335. Le traitement graphique — voile, cartouche, ombres, animations — reste unique et partage, donc toujours coherent. AJOUTER UNE PAGE 1. deposer l'image dans /public/img/scenes/ma-page.webp 2. ajouter le bloc de deux lignes ci-dessous 3. c'est fini. Rien d'autre a toucher. DEUX TAILLES PAR PAGE. `--scene` fait 1800 px pour les ecrans larges, `--scene-mobile` 900 px pour les telephones. La bascule se fait par requete media en bas de ce fichier. Un telephone en 4G rurale ne telecharge donc pas 440 Ko pour une bande de 380 px de large : l'economie est de 71 % sur les huit images. IMAGES : format WebP, 1800 x 1200 px (3:2), qualite 74. Le cadre est volontairement plus haut que la bande affichee : c'est `background-size: cover` + `--scene-position` qui choisissent la zone visible selon la largeur de l'ecran. Livrer une image deja recadree en bande obligerait a en refaire une pour chaque format d'ecran. Ce sont de vraies photographies de la maison. Les contraintes, la commande de conversion et la marche a suivre pour en remplacer une sont dans docs/IMAGES.md. =========================================================================== */ /* --- Accueil — la maison vue du jardin, balcon et pelouse ---------------- */ [data-page="accueil"] { --scene: url('/public/img/scenes/accueil.webp'); --scene-mobile: url('/public/img/scenes/accueil-mobile.webp'); --scene-position: center 46%; } /* --- Le gite — la salle a manger ---------------------------------------- */ [data-page="gite"] { --scene: url('/public/img/scenes/gite.webp'); --scene-mobile: url('/public/img/scenes/gite-mobile.webp'); --scene-position: center 55%; } /* --- Photos — la facade cote jardin, au printemps ------------------------ */ [data-page="galerie"] { --scene: url('/public/img/scenes/galerie.webp'); --scene-mobile: url('/public/img/scenes/galerie-mobile.webp'); --scene-position: center 52%; } /* --- Disponibilites — la cuisine ---------------------------------------- */ [data-page="disponibilites"] { --scene: url('/public/img/scenes/disponibilites.webp'); --scene-mobile: url('/public/img/scenes/disponibilites-mobile.webp'); --scene-position: center 55%; } /* --- Reserver — le sejour et la table ----------------------------------- */ [data-page="reservation"] { --scene: url('/public/img/scenes/reservation.webp'); --scene-mobile: url('/public/img/scenes/reservation-mobile.webp'); --scene-position: center 50%; } /* --- Avis — l'interieur, vu depuis l'arche ------------------------------ */ [data-page="avis"] { --scene: url('/public/img/scenes/avis.webp'); --scene-mobile: url('/public/img/scenes/avis-mobile.webp'); --scene-position: center 48%; } /* --- La region — le jardin ouvert sur les collines ---------------------- Faute de photographie du lac ou des Glieres sur laquelle nous ayons des droits, on reutilise la vue du jardin : elle montre l'horizon depuis la maison, ce qui est exactement le propos de la page. Aucune image generee sur ce site. */ [data-page="region"] { --scene: url('/public/img/scenes/galerie.webp'); --scene-mobile: url('/public/img/scenes/galerie-mobile.webp'); --scene-position: center 45%; } /* --- Decouvrir — le jardin et la vue sur les collines -------------------- Faute de photo de la region appartenant aux proprietaires, on reutilise la vue depuis le jardin : elle montre le paysage alentour, ce qui est exactement le sujet de la page. A remplacer par une vraie photo du lac ou des cretes le jour ou ils en ont une. */ [data-page="decouvrir"] { --scene: url('/public/img/scenes/galerie.webp'); --scene-mobile: url('/public/img/scenes/galerie-mobile.webp'); --scene-position: center 40%; } /* --- Acces — la maison vue depuis la rue -------------------------------- */ [data-page="acces"] { --scene: url('/public/img/scenes/acces.webp'); --scene-mobile: url('/public/img/scenes/acces-mobile.webp'); --scene-position: center 55%; } /* --- Contact — le portail et l'entree ----------------------------------- */ [data-page="contact"] { --scene: url('/public/img/scenes/contact.webp'); --scene-mobile: url('/public/img/scenes/contact-mobile.webp'); --scene-position: center 58%; } /* --- Alentours — le jardin, qui evoque le dehors ------------------------- */ [data-page="alentours"] { --scene: url('/public/img/scenes/galerie.webp'); --scene-mobile: url('/public/img/scenes/galerie-mobile.webp'); --scene-position: center 52%; } /* --- Mentions legales, erreurs, suivi de reservation --------------------- Pages utilitaires : pas de photographie. Un aplat sobre suffit et evite de faire telecharger 200 Ko pour lire un texte juridique. */ [data-page="mentions"], [data-page="erreur"], [data-page="suivi"] { --scene: linear-gradient(160deg, #2a3b32 0%, #16191a 100%); } /* =========================================================================== AJUSTEMENTS PROPRES A UNE PAGE --------------------------------------------------------------------------- Tout ce qui suit concerne une seule page. La regle : si un ajustement apparait sur deux pages, il n'a plus rien a faire ici — il doit remonter dans 2-composants.css sous forme de composant ou de variante. =========================================================================== */ /* Accueil : la premiere photo de la galerie prend deux cases, ce qui donne du rythme au bloc « En images » sans avoir a trier les photos a la main. */ [data-page="accueil"] .galerie--apercu { --colonnes: 3; } /* Disponibilites : le calendrier est le contenu principal de la page, il respire davantage qu'ailleurs. */ [data-page="disponibilites"] .calendriers { margin-block: var(--e6); } /* Acces : l'adresse et les liens d'itineraire sont prioritaires. Elles sont donc mises en avant plus fortement qu'un simple paragraphe. */ [data-page="acces"] .coordonnees { font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem); } /* Erreur : page volontairement courte et centree. Personne n'a envie de lire une page d'erreur, autant qu'elle soit vite traversee. */ [data-page="erreur"] main { text-align: center; } [data-page="erreur"] .actions { justify-content: center; } /* =========================================================================== BANNIERES MOBILES --------------------------------------------------------------------------- En dessous de 760 px, on sert la variante 900 px. POURQUOI UNE REQUETE MEDIA ET NON `image-set()` OU `` `` supposerait de transformer la banniere en balise , alors qu'elle est decorative et doit rester un fond CSS (voir partials/scene). `image-set()` choisit sur la densite d'ecran, pas sur la largeur : un telephone haute densite y recuperait la grande image, c'est-a-dire exactement ce qu'on cherche a eviter. Une requete media sur la largeur correspond au vrai critere : la place disponible pour afficher l'image. Ce bloc doit rester APRES toutes les declarations de page ci-dessus, sans quoi il serait ecrase par elles. =========================================================================== */ @media (max-width: 760px) { [data-page] { --scene: var(--scene-mobile, var(--scene)); } }