| assets | ||
| content | ||
| kirby | ||
| site | ||
| .editorconfig | ||
| .gitignore | ||
| .htaccess | ||
| composer.json | ||
| index.php | ||
| README.md | ||
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.
Ajouter des contenus au site
Pour ajouter des contenus rédigés sous Word, il est recommandé de convertir vos fichiers .doc ou .docx en HTML compatible Kirby avant de les coller dans un bloc texte.
Convertisseur Doc → Kirby
Cet outil convertit un document Word en HTML prêt pour les blocs texte de Kirby. Son principal avantage est de transformer automatiquement les notes de bas de page en kirbytags au format (note: contenu de la note).
Utilisation :
- Déposer votre fichier
.docou.docx - Cliquer sur Convert
- Copier le HTML généré via le bouton Copy
- Coller le résultat dans un bloc Kirby
Bonnes pratiques : Pour que la conversion soit correcte, le document Word doit être bien structuré : utiliser les styles de titres pour les titres, et la fonction Notes de bas de page de Word pour les notes (et non une saisie manuelle).
Confidentialité : Les fichiers ne sont pas envoyés à un serveur et ne sont pas stockés. Ils sont uniquement utilisés localement le temps de la conversion.
Templates
| Template | Description |
|---|---|
home |
Version web du site |
print |
Version print du site |
Snippets
| Fichier | Description |
|---|---|
footer.php |
Footer du site |
head.php |
<head> du site |
header.php |
<header> 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.
<div class="blank-page"></div>
break — Saut de page
Insère un saut de page dans le document print.
<div class="pagebreak"></div>
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
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
.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
.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.
.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.
.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.
.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.
.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.
/* 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
.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 :
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) :
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 :
figure.top /* Aligné en haut */
figure.center /* Centré verticalement */
figure.bottom /* Aligné en bas */