# Revue Décor 6 — Site Web-to-Print Repo du site de la revue décor 6 (ENSAD), réalisé en web-to-print avec Kirby CMS et Paged.js. --- ## Templates | Template | Description | |---|---| | `home` | Version web du site | | `print` | Version print du site | --- ## Snippets | Fichier | Description | |---|---| | `footer.php` | Footer du site | | `head.php` | `` du site | | `header.php` | `
` du site (contient la navigation et le logo) | | `nav.php` | Menu du site | | `logo.php` | Logo du site | --- ## Blocks personnalisés Le projet comporte de nombreux blocks personnalisés : ### `blank` — Page blanche Insère une page blanche dans le document print. ```html
``` ### `break` — Saut de page Insère un saut de page dans le document print. ```html
``` ### `fullpageimage` — Image pleine page Insère une image en pleine page avec effet full-bleed. ### `gallery` — Galerie d'images Insère une galerie d'images. ### `image` — Image (web + print) Insère une image avec une séparation en couches pour le print (trichromie). Le block génère deux figures distinctes : - **`.web-image`** — figure affichée uniquement en version web, avec une image unique. - **`.print-image.float-image`** — figure affichée uniquement en version print, décomposée en trois couches colorées : - `.print-red` / `.red-layer` — couche rouge - `.print-green` / `.green-layer` — couche verte - `.print-blue` / `.blue-layer` — couche bleue Chaque couche accepte une image séparée, permettant une impression en trichromie. Une légende optionnelle (`figcaption`) est partagée entre les deux versions. ### `imagefloat` — Image flottante Insère une image flottante dans le texte. Utilise la classe `.float-image`. ### `interview` — Interview *(en cours)* Insère un bloc interview. Utilise la classe `.interview-block`. ### `spreadimage` — Image en double page Insère une image s'étendant sur une double page. Utilise la classe `.spread-image`. ### `video` — Vidéo Insère une vidéo. ### `text` — Texte formaté Insère un bloc de texte avec mise en forme. --- ## Fichiers CSS Tous les fichiers CSS se trouvent dans `assets/css/`. | Fichier | Description | |---|---| | `main.css` | Fichier partagé entre la version web et la version print | | `print-template.css` | Fichier de classes pré-faites pour le print — **ne pas modifier** | | `print.css` | Styles exclusifs à la version print | | `reset.css` | Reset CSS | | `responsive.css` | Styles responsive pour la version web | | `variables.css` | Déclaration des variables CSS — **définir les variables ici** | | `web.css` | Styles exclusifs à la version web | --- ## Documentation de `print-template.css` Ce fichier contient des classes utilitaires prêtes à l'emploi pour la mise en page print. **Ne pas écrire dedans.** ### Gestion des images ```css figure img.fill /* Remplit le conteneur en déformant l'image si nécessaire */ figure img.contain /* Affiche l'image en entier sans la rogner */ figure img.cover /* Remplit le conteneur en rognant l'image */ ``` ### Sauts de page ```css .page /* Insère une page après l'élément */ .pagebreak /* Insère un saut de page après l'élément */ .blank-page /* Insère une page blanche (sans en-têtes ni pieds de page) */ ``` ### Alignement de blocs de texte ```css .alignment-left /* Texte aligné à gauche, sans césure */ .alignment-right /* Texte aligné à droite, sans césure */ .alignment-center /* Texte centré, sans césure */ .alignment-justify /* Texte justifié avec césure automatique */ ``` ### Images de fond et pleine page #### Image pleine page (`.full-bleed-image`) Positionne une image en pleine page avec bleed, s'adaptant selon la page gauche ou droite. ```css .full-bleed-image /* Image full-bleed positionnée en absolu */ .full-bleed-image.full-page /* Image couvrant la hauteur totale de la page */ ``` #### Image en double page (`.spread-image`) S'étend sur une double page grâce à `--pagedjs-full-page: spread`. ```css .spread-image /* Image couvrant le spread complet */ ``` #### Image d'intervalle (`.interval-image` et `.spread-interval-image`) Pages d'illustration entre des chapitres, avec fond via `--backgroundImage`. ```css .interval-image /* Page d'image seule, fond via CSS variable */ .spread-interval-image-left /* Première page du spread d'intervalle */ .spread-interval-image-right /* Seconde page du spread (image étendue à 200%) */ ``` #### Image de fond (`.background-image`) Image positionnée en fond de page, couvrant toute la surface de la page courante. ```css .background-image /* Image de fond pleine page */ ``` #### Légendes (`figcaption`) Les légendes sur fond image ont un style commun : fond blanc, bordure arrondie, couleur `--green`. ```css /* Positionnement selon le type d'image */ .full-bleed-image figcaption /* Bas de page, aligné gauche ou droite selon la page */ .spread-image figcaption /* Bas gauche du spread */ .interval-image figcaption /* Bas gauche de la page d'intervalle */ ``` ### Colonnes de texte ```css .col-2 /* Texte sur 2 colonnes */ .col-3 /* Texte sur 3 colonnes */ ``` ### Grille d'images Le système de grille est basé sur 12 colonnes avec `grid-gap: 0.5cm`. **Largeur des figures :** ```css figure /* 3 colonnes (défaut) */ figure.third /* 4 colonnes */ figure.half /* 6 colonnes */ figure.twothird /* 8 colonnes */ figure.threequarter /* 9 colonnes */ figure.full /* 12 colonnes (pleine largeur) */ ``` **Décalage (offset) :** ```css figure.offset2 /* Commence à la colonne 3 */ figure.offset4 /* Commence à la colonne 5 */ figure.offset6 /* Commence à la colonne 7 */ figure.offset8 /* Commence à la colonne 9 */ /* Combinable avec les classes de largeur, ex : figure.half.offset4 */ ``` **Alignement vertical :** ```css figure.top /* Aligné en haut */ figure.center /* Centré verticalement */ figure.bottom /* Aligné en bas */ ```