230 lines
No EOL
7.2 KiB
Markdown
230 lines
No EOL
7.2 KiB
Markdown
# 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
|
|
|
|
**[sarahgarcin.com/doc-converter](https://sarahgarcin.com/doc-converter/)**
|
|
|
|
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 :**
|
|
1. Déposer votre fichier `.doc` ou `.docx`
|
|
2. Cliquer sur *Convert*
|
|
3. Copier le HTML généré via le bouton *Copy*
|
|
4. 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.
|
|
```html
|
|
<div class="blank-page"></div>
|
|
```
|
|
|
|
### `break` — Saut de page
|
|
Insère un saut de page dans le document print.
|
|
```html
|
|
<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
|
|
|
|
```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 */
|
|
``` |