diff --git a/README.md b/README.md index 7772e95..36ada22 100644 --- a/README.md +++ b/README.md @@ -1,36 +1,206 @@ - +# Revue Décor 6 — Site Web-to-Print -**Kirby: the CMS that adapts to any project, loved by developers and editors alike.** -The Plainkit is a minimal Kirby setup with the basics you need to start a project from scratch. It is the ideal choice if you are already familiar with Kirby and want to start step-by-step. - -You can learn more about Kirby at [getkirby.com](https://getkirby.com). - -### Try Kirby for free - -You can try Kirby and the Plainkit on your local machine or on a test server as long as you need to make sure it is the right tool for your next project. … and when you’re convinced, [buy your license](https://getkirby.com/buy). - -### Get going - -Read our guide on [how to get started with Kirby](https://getkirby.com/docs/guide/quickstart). - -You can [download the latest version](https://github.com/getkirby/plainkit/archive/main.zip) of the Plainkit. -If you are familiar with Git, you can clone Kirby's Plainkit repository from Github. - - git clone https://github.com/getkirby/plainkit.git - -## What's Kirby? - -- **[getkirby.com](https://getkirby.com)** – Get to know the CMS. -- **[Try it](https://getkirby.com/try)** – Take a test ride with our online demo. Or download one of our kits to get started. -- **[Documentation](https://getkirby.com/docs/guide)** – Read the official guide, reference and cookbook recipes. -- **[Issues](https://github.com/getkirby/kirby/issues)** – Report bugs and other problems. -- **[Feedback](https://feedback.getkirby.com)** – You have an idea for Kirby? Share it. -- **[Forum](https://forum.getkirby.com)** – Whenever you get stuck, don't hesitate to reach out for questions and support. -- **[Discord](https://chat.getkirby.com)** – Hang out and meet the community. -- **[Mastodon](https://mastodon.social/@getkirby)** – Spread the word. -- **[Bluesky](https://bsky.app/profile/getkirby.com)** – Spread the word. +Repo du site de la revue décor 6 (ENSAD), réalisé en web-to-print avec Kirby CMS et Paged.js. --- -© 2009 Bastian Allgeier -[getkirby.com](https://getkirby.com) · [License agreement](https://getkirby.com/license) +## 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 */ +``` \ No newline at end of file diff --git a/assets/css/libs/flexboxgrid.css b/assets/css/libs/flexboxgrid.css deleted file mode 100644 index 5153eb8..0000000 --- a/assets/css/libs/flexboxgrid.css +++ /dev/null @@ -1,1196 +0,0 @@ -.container-fluid, -.container { - margin-right: auto; - margin-left: auto; -} - -.container-fluid { - padding-right: 2rem; - padding-left: 2rem; -} - -.row { - box-sizing: border-box; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-flex: 0; - -ms-flex: 0 1 auto; - flex: 0 1 auto; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - margin-right: -0.8rem; - margin-left: -0.8rem; -} - -.row.reverse { - -webkit-box-orient: horizontal; - -webkit-box-direction: reverse; - -ms-flex-direction: row-reverse; - flex-direction: row-reverse; -} - -.col.reverse { - -webkit-box-orient: vertical; - -webkit-box-direction: reverse; - -ms-flex-direction: column-reverse; - flex-direction: column-reverse; -} - -.col-xs, -.col-xs-1, -.col-xs-2, -.col-xs-3, -.col-xs-4, -.col-xs-5, -.col-xs-6, -.col-xs-7, -.col-xs-8, -.col-xs-9, -.col-xs-10, -.col-xs-11, -.col-xs-12, -.col-xs-offset-0, -.col-xs-offset-1, -.col-xs-offset-2, -.col-xs-offset-3, -.col-xs-offset-4, -.col-xs-offset-5, -.col-xs-offset-6, -.col-xs-offset-7, -.col-xs-offset-8, -.col-xs-offset-9, -.col-xs-offset-10, -.col-xs-offset-11, -.col-xs-offset-12 { - box-sizing: border-box; - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - padding-right: 0.8rem; - padding-left: 0.8rem; -} - -.col-xs { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-preferred-size: 0; - flex-basis: 0; - max-width: 100%; -} - -.col-xs-1 { - -ms-flex-preferred-size: 8.33333333%; - flex-basis: 8.33333333%; - max-width: 8.33333333%; -} - -.col-xs-2 { - -ms-flex-preferred-size: 16.66666667%; - flex-basis: 16.66666667%; - max-width: 16.66666667%; -} - -.col-xs-3 { - -ms-flex-preferred-size: 25%; - flex-basis: 25%; - max-width: 25%; -} - -.col-xs-4 { - -ms-flex-preferred-size: 33.33333333%; - flex-basis: 33.33333333%; - max-width: 33.33333333%; -} - -.col-xs-5 { - -ms-flex-preferred-size: 41.66666667%; - flex-basis: 41.66666667%; - max-width: 41.66666667%; -} - -.col-xs-6 { - -ms-flex-preferred-size: 50%; - flex-basis: 50%; - max-width: 50%; -} - -.col-xs-7 { - -ms-flex-preferred-size: 58.33333333%; - flex-basis: 58.33333333%; - max-width: 58.33333333%; -} - -.col-xs-8 { - -ms-flex-preferred-size: 66.66666667%; - flex-basis: 66.66666667%; - max-width: 66.66666667%; -} - -.col-xs-9 { - -ms-flex-preferred-size: 75%; - flex-basis: 75%; - max-width: 75%; -} - -.col-xs-10 { - -ms-flex-preferred-size: 83.33333333%; - flex-basis: 83.33333333%; - max-width: 83.33333333%; -} - -.col-xs-11 { - -ms-flex-preferred-size: 91.66666667%; - flex-basis: 91.66666667%; - max-width: 91.66666667%; -} - -.col-xs-12 { - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - max-width: 100%; -} - -.col-xs-offset-0 { - margin-left: 0; -} - -.col-xs-offset-1 { - margin-left: 8.33333333%; -} - -.col-xs-offset-2 { - margin-left: 16.66666667%; -} - -.col-xs-offset-3 { - margin-left: 25%; -} - -.col-xs-offset-4 { - margin-left: 33.33333333%; -} - -.col-xs-offset-5 { - margin-left: 41.66666667%; -} - -.col-xs-offset-6 { - margin-left: 50%; -} - -.col-xs-offset-7 { - margin-left: 58.33333333%; -} - -.col-xs-offset-8 { - margin-left: 66.66666667%; -} - -.col-xs-offset-9 { - margin-left: 75%; -} - -.col-xs-offset-10 { - margin-left: 83.33333333%; -} - -.col-xs-offset-11 { - margin-left: 91.66666667%; -} - -.start-xs { - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; - text-align: start; -} - -.center-xs { - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - text-align: center; -} - -.end-xs { - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; - text-align: end; -} - -.top-xs { - -webkit-box-align: start; - -ms-flex-align: start; - align-items: flex-start; -} - -.middle-xs { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.bottom-xs { - -webkit-box-align: end; - -ms-flex-align: end; - align-items: flex-end; -} - -.around-xs { - -ms-flex-pack: distribute; - justify-content: space-around; -} - -.between-xs { - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; -} - -.first-xs { - -webkit-box-ordinal-group: 0; - -ms-flex-order: -1; - order: -1; -} - -.last-xs { - -webkit-box-ordinal-group: 2; - -ms-flex-order: 1; - order: 1; -} - -@media only screen and (min-width: 48em) { - .container { - width: 49rem; - } - - .col-sm, - .col-sm-1, - .col-sm-2, - .col-sm-3, - .col-sm-4, - .col-sm-5, - .col-sm-6, - .col-sm-7, - .col-sm-8, - .col-sm-9, - .col-sm-10, - .col-sm-11, - .col-sm-12, - .col-sm-offset-0, - .col-sm-offset-1, - .col-sm-offset-2, - .col-sm-offset-3, - .col-sm-offset-4, - .col-sm-offset-5, - .col-sm-offset-6, - .col-sm-offset-7, - .col-sm-offset-8, - .col-sm-offset-9, - .col-sm-offset-10, - .col-sm-offset-11, - .col-sm-offset-12 { - box-sizing: border-box; - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - padding-right: 0.8rem; - padding-left: 0.8rem; - } - - .col-sm { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-preferred-size: 0; - flex-basis: 0; - max-width: 100%; - } - - .col-sm-1 { - -ms-flex-preferred-size: 8.33333333%; - flex-basis: 8.33333333%; - max-width: 8.33333333%; - } - - .col-sm-2 { - -ms-flex-preferred-size: 16.66666667%; - flex-basis: 16.66666667%; - max-width: 16.66666667%; - } - - .col-sm-3 { - -ms-flex-preferred-size: 25%; - flex-basis: 25%; - max-width: 25%; - } - - .col-sm-4 { - -ms-flex-preferred-size: 33.33333333%; - flex-basis: 33.33333333%; - max-width: 33.33333333%; - } - - .col-sm-5 { - -ms-flex-preferred-size: 41.66666667%; - flex-basis: 41.66666667%; - max-width: 41.66666667%; - } - - .col-sm-6 { - -ms-flex-preferred-size: 50%; - flex-basis: 50%; - max-width: 50%; - } - - .col-sm-7 { - -ms-flex-preferred-size: 58.33333333%; - flex-basis: 58.33333333%; - max-width: 58.33333333%; - } - - .col-sm-8 { - -ms-flex-preferred-size: 66.66666667%; - flex-basis: 66.66666667%; - max-width: 66.66666667%; - } - - .col-sm-9 { - -ms-flex-preferred-size: 75%; - flex-basis: 75%; - max-width: 75%; - } - - .col-sm-10 { - -ms-flex-preferred-size: 83.33333333%; - flex-basis: 83.33333333%; - max-width: 83.33333333%; - } - - .col-sm-11 { - -ms-flex-preferred-size: 91.66666667%; - flex-basis: 91.66666667%; - max-width: 91.66666667%; - } - - .col-sm-12 { - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - max-width: 100%; - } - - .col-sm-offset-0 { - margin-left: 0; - } - - .col-sm-offset-1 { - margin-left: 8.33333333%; - } - - .col-sm-offset-2 { - margin-left: 16.66666667%; - } - - .col-sm-offset-3 { - margin-left: 25%; - } - - .col-sm-offset-4 { - margin-left: 33.33333333%; - } - - .col-sm-offset-5 { - margin-left: 41.66666667%; - } - - .col-sm-offset-6 { - margin-left: 50%; - } - - .col-sm-offset-7 { - margin-left: 58.33333333%; - } - - .col-sm-offset-8 { - margin-left: 66.66666667%; - } - - .col-sm-offset-9 { - margin-left: 75%; - } - - .col-sm-offset-10 { - margin-left: 83.33333333%; - } - - .col-sm-offset-11 { - margin-left: 91.66666667%; - } - - .start-sm { - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; - text-align: start; - } - - .center-sm { - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - text-align: center; - } - - .end-sm { - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; - text-align: end; - } - - .top-sm { - -webkit-box-align: start; - -ms-flex-align: start; - align-items: flex-start; - } - - .middle-sm { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - } - - .bottom-sm { - -webkit-box-align: end; - -ms-flex-align: end; - align-items: flex-end; - } - - .around-sm { - -ms-flex-pack: distribute; - justify-content: space-around; - } - - .between-sm { - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - } - - .first-sm { - -webkit-box-ordinal-group: 0; - -ms-flex-order: -1; - order: -1; - } - - .last-sm { - -webkit-box-ordinal-group: 2; - -ms-flex-order: 1; - order: 1; - } -} - -@media only screen and (min-width: 64em) { - .container { - width: 65rem; - } - - .col-md, - .col-md-1, - .col-md-2, - .col-md-3, - .col-md-4, - .col-md-5, - .col-md-6, - .col-md-7, - .col-md-8, - .col-md-9, - .col-md-10, - .col-md-11, - .col-md-12, - .col-md-offset-0, - .col-md-offset-1, - .col-md-offset-2, - .col-md-offset-3, - .col-md-offset-4, - .col-md-offset-5, - .col-md-offset-6, - .col-md-offset-7, - .col-md-offset-8, - .col-md-offset-9, - .col-md-offset-10, - .col-md-offset-11, - .col-md-offset-12 { - box-sizing: border-box; - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - padding-right: 0.8rem; - padding-left: 0.8rem; - } - - .col-md { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-preferred-size: 0; - flex-basis: 0; - max-width: 100%; - } - - .col-md-1 { - -ms-flex-preferred-size: 8.33333333%; - flex-basis: 8.33333333%; - max-width: 8.33333333%; - } - - .col-md-2 { - -ms-flex-preferred-size: 16.66666667%; - flex-basis: 16.66666667%; - max-width: 16.66666667%; - } - - .col-md-3 { - -ms-flex-preferred-size: 25%; - flex-basis: 25%; - max-width: 25%; - } - - .col-md-4 { - -ms-flex-preferred-size: 33.33333333%; - flex-basis: 33.33333333%; - max-width: 33.33333333%; - } - - .col-md-5 { - -ms-flex-preferred-size: 41.66666667%; - flex-basis: 41.66666667%; - max-width: 41.66666667%; - } - - .col-md-6 { - -ms-flex-preferred-size: 50%; - flex-basis: 50%; - max-width: 50%; - } - - .col-md-7 { - -ms-flex-preferred-size: 58.33333333%; - flex-basis: 58.33333333%; - max-width: 58.33333333%; - } - - .col-md-8 { - -ms-flex-preferred-size: 66.66666667%; - flex-basis: 66.66666667%; - max-width: 66.66666667%; - } - - .col-md-9 { - -ms-flex-preferred-size: 75%; - flex-basis: 75%; - max-width: 75%; - } - - .col-md-10 { - -ms-flex-preferred-size: 83.33333333%; - flex-basis: 83.33333333%; - max-width: 83.33333333%; - } - - .col-md-11 { - -ms-flex-preferred-size: 91.66666667%; - flex-basis: 91.66666667%; - max-width: 91.66666667%; - } - - .col-md-12 { - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - max-width: 100%; - } - - .col-md-offset-0 { - margin-left: 0; - } - - .col-md-offset-1 { - margin-left: 8.33333333%; - } - - .col-md-offset-2 { - margin-left: 16.66666667%; - } - - .col-md-offset-3 { - margin-left: 25%; - } - - .col-md-offset-4 { - margin-left: 33.33333333%; - } - - .col-md-offset-5 { - margin-left: 41.66666667%; - } - - .col-md-offset-6 { - margin-left: 50%; - } - - .col-md-offset-7 { - margin-left: 58.33333333%; - } - - .col-md-offset-8 { - margin-left: 66.66666667%; - } - - .col-md-offset-9 { - margin-left: 75%; - } - - .col-md-offset-10 { - margin-left: 83.33333333%; - } - - .col-md-offset-11 { - margin-left: 91.66666667%; - } - - .start-md { - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; - text-align: start; - } - - .center-md { - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - text-align: center; - } - - .end-md { - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; - text-align: end; - } - - .top-md { - -webkit-box-align: start; - -ms-flex-align: start; - align-items: flex-start; - } - - .middle-md { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - } - - .bottom-md { - -webkit-box-align: end; - -ms-flex-align: end; - align-items: flex-end; - } - - .around-md { - -ms-flex-pack: distribute; - justify-content: space-around; - } - - .between-md { - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - } - - .first-md { - -webkit-box-ordinal-group: 0; - -ms-flex-order: -1; - order: -1; - } - - .last-md { - -webkit-box-ordinal-group: 2; - -ms-flex-order: 1; - order: 1; - } -} - -@media only screen and (min-width: 75em) { - .container { - width: 76rem; - } - - .col-lg, - .col-lg-1, - .col-lg-2, - .col-lg-3, - .col-lg-4, - .col-lg-5, - .col-lg-6, - .col-lg-7, - .col-lg-8, - .col-lg-9, - .col-lg-10, - .col-lg-11, - .col-lg-12, - .col-lg-offset-0, - .col-lg-offset-1, - .col-lg-offset-2, - .col-lg-offset-3, - .col-lg-offset-4, - .col-lg-offset-5, - .col-lg-offset-6, - .col-lg-offset-7, - .col-lg-offset-8, - .col-lg-offset-9, - .col-lg-offset-10, - .col-lg-offset-11, - .col-lg-offset-12 { - box-sizing: border-box; - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - padding-right: 0.8rem; - padding-left: 0.8rem; - } - - .col-lg { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-preferred-size: 0; - flex-basis: 0; - max-width: 100%; - } - - .col-lg-1 { - -ms-flex-preferred-size: 8.33333333%; - flex-basis: 8.33333333%; - max-width: 8.33333333%; - } - - .col-lg-2 { - -ms-flex-preferred-size: 16.66666667%; - flex-basis: 16.66666667%; - max-width: 16.66666667%; - } - - .col-lg-3 { - -ms-flex-preferred-size: 25%; - flex-basis: 25%; - max-width: 25%; - } - - .col-lg-4 { - -ms-flex-preferred-size: 33.33333333%; - flex-basis: 33.33333333%; - max-width: 33.33333333%; - } - - .col-lg-5 { - -ms-flex-preferred-size: 41.66666667%; - flex-basis: 41.66666667%; - max-width: 41.66666667%; - } - - .col-lg-6 { - -ms-flex-preferred-size: 50%; - flex-basis: 50%; - max-width: 50%; - } - - .col-lg-7 { - -ms-flex-preferred-size: 58.33333333%; - flex-basis: 58.33333333%; - max-width: 58.33333333%; - } - - .col-lg-8 { - -ms-flex-preferred-size: 66.66666667%; - flex-basis: 66.66666667%; - max-width: 66.66666667%; - } - - .col-lg-9 { - -ms-flex-preferred-size: 75%; - flex-basis: 75%; - max-width: 75%; - } - - .col-lg-10 { - -ms-flex-preferred-size: 83.33333333%; - flex-basis: 83.33333333%; - max-width: 83.33333333%; - } - - .col-lg-11 { - -ms-flex-preferred-size: 91.66666667%; - flex-basis: 91.66666667%; - max-width: 91.66666667%; - } - - .col-lg-12 { - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - max-width: 100%; - } - - .col-lg-offset-0 { - margin-left: 0; - } - - .col-lg-offset-1 { - margin-left: 8.33333333%; - } - - .col-lg-offset-2 { - margin-left: 16.66666667%; - } - - .col-lg-offset-3 { - margin-left: 25%; - } - - .col-lg-offset-4 { - margin-left: 33.33333333%; - } - - .col-lg-offset-5 { - margin-left: 41.66666667%; - } - - .col-lg-offset-6 { - margin-left: 50%; - } - - .col-lg-offset-7 { - margin-left: 58.33333333%; - } - - .col-lg-offset-8 { - margin-left: 66.66666667%; - } - - .col-lg-offset-9 { - margin-left: 75%; - } - - .col-lg-offset-10 { - margin-left: 83.33333333%; - } - - .col-lg-offset-11 { - margin-left: 91.66666667%; - } - - .start-lg { - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; - text-align: start; - } - - .center-lg { - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - text-align: center; - } - - .end-lg { - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; - text-align: end; - } - - .top-lg { - -webkit-box-align: start; - -ms-flex-align: start; - align-items: flex-start; - } - - .middle-lg { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - } - - .bottom-lg { - -webkit-box-align: end; - -ms-flex-align: end; - align-items: flex-end; - } - - .around-lg { - -ms-flex-pack: distribute; - justify-content: space-around; - } - - .between-lg { - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - } - - .first-lg { - -webkit-box-ordinal-group: 0; - -ms-flex-order: -1; - order: -1; - } - - .last-lg { - -webkit-box-ordinal-group: 2; - -ms-flex-order: 1; - order: 1; - } -} - - -@media only screen and (min-width: 90em) { - .container { - width: 91rem; - } - - .col-xl, - .col-xl-1, - .col-xl-2, - .col-xl-3, - .col-xl-4, - .col-xl-5, - .col-xl-6, - .col-xl-7, - .col-xl-8, - .col-xl-9, - .col-xl-10, - .col-xl-11, - .col-xl-12, - .col-xl-offset-0, - .col-xl-offset-1, - .col-xl-offset-2, - .col-xl-offset-3, - .col-xl-offset-4, - .col-xl-offset-5, - .col-xl-offset-6, - .col-xl-offset-7, - .col-xl-offset-8, - .col-xl-offset-9, - .col-xl-offset-10, - .col-xl-offset-11, - .col-xl-offset-12 { - box-sizing: border-box; - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - padding-right: 0.8rem; - padding-left: 0.8rem; - } - - .col-xl { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-preferred-size: 0; - flex-basis: 0; - max-width: 100%; - } - - .col-xl-1 { - -ms-flex-preferred-size: 8.33333333%; - flex-basis: 8.33333333%; - max-width: 8.33333333%; - } - - .col-xl-2 { - -ms-flex-preferred-size: 16.66666667%; - flex-basis: 16.66666667%; - max-width: 16.66666667%; - } - - .col-xl-3 { - -ms-flex-preferred-size: 25%; - flex-basis: 25%; - max-width: 25%; - } - - .col-xl-4 { - -ms-flex-preferred-size: 33.33333333%; - flex-basis: 33.33333333%; - max-width: 33.33333333%; - } - - .col-xl-5 { - -ms-flex-preferred-size: 41.66666667%; - flex-basis: 41.66666667%; - max-width: 41.66666667%; - } - - .col-xl-6 { - -ms-flex-preferred-size: 50%; - flex-basis: 50%; - max-width: 50%; - } - - .col-xl-7 { - -ms-flex-preferred-size: 58.33333333%; - flex-basis: 58.33333333%; - max-width: 58.33333333%; - } - - .col-xl-8 { - -ms-flex-preferred-size: 66.66666667%; - flex-basis: 66.66666667%; - max-width: 66.66666667%; - } - - .col-xl-9 { - -ms-flex-preferred-size: 75%; - flex-basis: 75%; - max-width: 75%; - } - - .col-xl-10 { - -ms-flex-preferred-size: 83.33333333%; - flex-basis: 83.33333333%; - max-width: 83.33333333%; - } - - .col-xl-11 { - -ms-flex-preferred-size: 91.66666667%; - flex-basis: 91.66666667%; - max-width: 91.66666667%; - } - - .col-xl-12 { - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - max-width: 100%; - } - - .col-xl-offset-0 { - margin-left: 0; - } - - .col-xl-offset-1 { - margin-left: 8.33333333%; - } - - .col-xl-offset-2 { - margin-left: 16.66666667%; - } - - .col-xl-offset-3 { - margin-left: 25%; - } - - .col-xl-offset-4 { - margin-left: 33.33333333%; - } - - .col-xl-offset-5 { - margin-left: 41.66666667%; - } - - .col-xl-offset-6 { - margin-left: 50%; - } - - .col-xl-offset-7 { - margin-left: 58.33333333%; - } - - .col-xl-offset-8 { - margin-left: 66.66666667%; - } - - .col-xl-offset-9 { - margin-left: 75%; - } - - .col-xl-offset-10 { - margin-left: 83.33333333%; - } - - .col-xl-offset-11 { - margin-left: 91.66666667%; - } - - .start-xl { - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; - text-align: start; - } - - .center-xl { - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - text-align: center; - } - - .end-xl { - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; - text-align: end; - } - - .top-xl { - -webkit-box-align: start; - -ms-flex-align: start; - align-items: flex-start; - } - - .middle-xl { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - } - - .bottom-xl { - -webkit-box-align: end; - -ms-flex-align: end; - align-items: flex-end; - } - - .around-xl { - -ms-flex-pack: distribute; - justify-content: space-around; - } - - .between-xl { - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - } - - .first-xl { - -webkit-box-ordinal-group: 0; - -ms-flex-order: -1; - order: -1; - } - - .last-xl { - -webkit-box-ordinal-group: 2; - -ms-flex-order: 1; - order: 1; - } -} - - - - diff --git a/assets/css/main.css b/assets/css/main.css index c0738dd..515d1f3 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1,5 +1,3 @@ -/* MOBILE FIRST */ - * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; @@ -49,12 +47,6 @@ h3{ font-size: 1em; } -/*h2 + h3{ - margin-top: 0.5em; - opacity: 0.8; - font-weight: normal; -}*/ - h5, h6{ font-size: var(--textSize); margin-top: 1mm; @@ -133,198 +125,9 @@ figure[data-crop="false"] img { object-fit: contain; } -.pagedjs_page_content table{ - column-width: auto!important; -} - -.print-image{ - position: relative; -} - -.print-image div{ - position: absolute; - top: 0; - left: 0; - mix-blend-mode: multiply; - vertical-align: top; -} - -.print-image figcaption{ - position: absolute; - bottom: 0; -} - -.print-image .print-red{ - position: relative; - background: var(--rouge); -} - -.print-image .print-green{ - background: var(--vert); -} - -.print-image .print-blue{ - background: var(--bleu); -} - -.print-image > div > img{ - mix-blend-mode: screen; - -webkit-filter: grayscale(100%) contrast(200%); - filter: grayscale(100%) contrast(200%); - opacity: 1; -} - -body[data-template="print"] .print-image { - display: block; -} - -body[data-template="print"] .web-image { - display: none; -} - -table { - border-collapse: collapse; - width: 100%; - border: 1px solid grey; - font-size: 12px; - table-layout: fixed; - margin-top: 2em; -} - -th { - color: var(--green); - font-weight: bold; - text-align: left; - border-bottom: 1px solid grey; -} - -th, td { - padding: 12px 8px; - padding-bottom: 12px !important; - border-right: 1px solid lightgrey; -} - -tr{ - border-bottom: 1px solid lightgrey; -} - -tr:last-child{ - border: none; -} - -tr > th:first-child, -tr > th:nth-child(2){ - width:20%; -} - -tr > td:first-child, -tr > td:nth-child(2){ - width:20%; -} - -td:last-child{ - display: none; -} - - -/* Gestion des couches */ -body.isolate-red-layer .green-layer, -body.isolate-red-layer .blue-layer, -body.isolate-red-layer .black-layer { display: none; } - -body.isolate-green-layer .red-layer, -body.isolate-green-layer .blue-layer, -body.isolate-green-layer .black-layer { display: none; } - -body.isolate-blue-layer .red-layer, -body.isolate-blue-layer .green-layer, -body.isolate-blue-layer .black-layer { display: none; } - -body.isolate-black-layer .red-layer, -body.isolate-black-layer .green-layer, -body.isolate-black-layer .blue-layer { display: none; } - -/* Noir et blanc */ -body.mode-black .print-image > div { - background: transparent; -} - -/* fade entre les pages */ -#fade{ - opacity: 0; - transition: opacity 1s ease-out; -} - -#fade.loaded{ - opacity: 1; -} - -.glightbox-clean .gslide-title{ - font-family: var(--fontFamily); - font-weight: 600; - line-height: 1.2; -} - -.show-for-small-only{ - display: block; -} - -.hide-for-small-only{ - display: none; -} - -/* ---- H E A D E R -----*/ -header{ - position: fixed; - width: 100%; - top:0; - left:0; - right: 0; - padding: 15px; - z-index: 1000; - background: #FFF; -} - -header.row{ - margin:0; -} - -header .mobile__menu_btn { - display: block; - position: absolute; - right: 15px; - top: 15px; - cursor: pointer; - height: 24px; - width: 24px; -} - -header .mobile__menu_btn span { - display: block; - background: #000; - height: 2px; - width: 26px; - position: absolute; - transition: all 0.5s ease; -} - -header .mobile__menu_btn span:nth-child(1) { top: 0px; } -header .mobile__menu_btn span:nth-child(2) { top: 8px; } -header .mobile__menu_btn span:nth-child(3) { top: 16px; } -header .mobile__menu_btn .transparent { opacity: 0; } - -header .mobile__menu_btn .rotate-top { - -ms-transform: rotate(45deg); - transform: rotatez(45deg); - -webkit-transform-origin: 0%; - left: 2px; -} - -header .mobile__menu_btn .rotate-bottom { - -ms-transform: rotate(-45deg); - transform: rotatez(-45deg); - -webkit-transform-origin: 15%; -} +/* Classes pour le responsive */ +.show-for-small-only{ display: block;} +.hide-for-small-only{ display: none;} diff --git a/assets/css/print-template.css b/assets/css/print-template.css index 9fcf5db..150f1e3 100644 --- a/assets/css/print-template.css +++ b/assets/css/print-template.css @@ -264,7 +264,6 @@ figure img.cover{ object-fit: cover; max-width: none; width:100%; height:100%;} .background-image{ page: backgroundImage; -/* page-break-after: always;*/ margin-top: -1cm; position: relative; } @@ -275,8 +274,6 @@ figure img.cover{ object-fit: cover; max-width: none; width:100%; height:100%;} margin-top: 0; padding: 1mm 1mm; top: 0; -/* left: 10mm;*/ -/* top: calc(9in - 15mm);*/ } .background-image figcaption p{ @@ -388,13 +385,7 @@ figure img.cover{ object-fit: cover; max-width: none; width:100%; height:100%;} /* ------- TABLE OF CONTENTS --------- */ - -.toc{ - break-before: right; -} - /* counters */ - #list-toc-generated{ counter-reset: counterTocLevel1; list-style: none; @@ -414,36 +405,13 @@ figure img.cover{ object-fit: cover; max-width: none; width:100%; height:100%;} content: target-counter(attr(href), page); position: absolute; right:0; - font-size: 13pt; text-align: right; } -#list-toc-generated .toc-element-level-2 a::after{ - font-size: 10pt; -} - -#list-toc-generated .toc-element-level-1{ - font-size: 13pt; -} - -#list-toc-generated .toc-element-level-2{ - font-weight: bold; - margin-bottom: 20px; -} - #list-toc-generated li span{ display: block; } -/* -------- FOOTNOTES ---------- */ -/*span.footnote { - float: footnote; -} - -.footnote::footnote-call { - content: counter(footnote, decimal) " "; -}*/ - diff --git a/assets/css/print.css b/assets/css/print.css index 3836f32..018e28b 100644 --- a/assets/css/print.css +++ b/assets/css/print.css @@ -116,58 +116,77 @@ left: 0; } -} + /* ---- TOC ---- */ + .toc{ + break-before: right; + } -/* ---- INTERPAGES ------ */ + #list-toc-generated .toc-element a::after{ + font-size: 13pt; + } -.interpage figure{ - height: calc(var(--pagedjs-height) - (var(--border) * 2)) !important; - margin-top: calc(var(--border) + 3mm); - width: 100%; -} + #list-toc-generated .toc-element-level-2 a::after{ + font-size: 10pt; + } -/* ---- PAGE DE TITRE ------ */ + #list-toc-generated .toc-element-level-1{ + font-size: 13pt; + } -.chapter-title{ - page: chapterTitle; - display: flex; - flex-direction: column; - align-items: center; -} + #list-toc-generated .toc-element-level-2{ + font-weight: bold; + margin-bottom: 20px; + } -@page chapterTitle{ - background: var(--bleu); - margin: 12mm 0mm; - @top-left-corner {content: none;} - @top-left {content: none;} - @top-center {content: none;} - @top-right {content: none;} - @top-right-corner {content: none;} - @left-top {content: none;} - @left-middle {content: none;} - @left-bottom {content: none;} - @right-top {content: none;} - @right-middle {content: none;} - @right-bottom {content: none;} - @bottom-left-corner {content: none;} - @bottom-left {content: none;} - @bottom-center {content: none;} - @bottom-right {content: none;} - @bottom-right-corner {content: none;} -} + /* ---- INTERPAGES ------ */ + .interpage figure{ + height: calc(var(--pagedjs-height) - (var(--border) * 2)) !important; + margin-top: calc(var(--border) + 3mm); + width: 100%; + } -.chapter-title h2, -.chapter-title h3, -.chapter-title p { - display: inline-block; - position: relative; - margin: 0; - color: #FFF; - font-size: var(--textSize); - text-align: center; -} + /* ---- PAGE DE TITRE ------ */ -/* ascii-fill : pas de flex:1, hauteur fixée par JS */ + .chapter-title{ + page: chapterTitle; + display: flex; + flex-direction: column; + align-items: center; + } + + @page chapterTitle{ + background: var(--bleu); + margin: 12mm 0mm; + @top-left-corner {content: none;} + @top-left {content: none;} + @top-center {content: none;} + @top-right {content: none;} + @top-right-corner {content: none;} + @left-top {content: none;} + @left-middle {content: none;} + @left-bottom {content: none;} + @right-top {content: none;} + @right-middle {content: none;} + @right-bottom {content: none;} + @bottom-left-corner {content: none;} + @bottom-left {content: none;} + @bottom-center {content: none;} + @bottom-right {content: none;} + @bottom-right-corner {content: none;} + } + + .chapter-title h2, + .chapter-title h3, + .chapter-title p { + display: inline-block; + position: relative; + margin: 0; + color: #FFF; + font-size: var(--textSize); + text-align: center; + } + + /* ascii-fill : pas de flex:1, hauteur fixée par JS */ .ascii-fill { white-space: pre; overflow: hidden; @@ -339,6 +358,71 @@ margin-left: 1mm; } + /* ----- IMAGES (SEPARATION DES COUCHES) ----- */ + .print-image{ + position: relative; + } + + .print-image div{ + position: absolute; + top: 0; + left: 0; + mix-blend-mode: multiply; + vertical-align: top; + } + + .print-image figcaption{ + position: absolute; + bottom: 0; + } + + .print-image .print-red{ + position: relative; + background: var(--rouge); + } + + .print-image .print-green{ + background: var(--vert); + } + + .print-image .print-blue{ + background: var(--bleu); + } + + .print-image > div > img{ + mix-blend-mode: screen; + -webkit-filter: grayscale(100%) contrast(200%); + filter: grayscale(100%) contrast(200%); + opacity: 1; + } + + .print-image { display: block;} + .web-image { display: none;} + +} + + +/* Gestion des couches */ +body.isolate-red-layer .green-layer, +body.isolate-red-layer .blue-layer, +body.isolate-red-layer .black-layer { display: none; } + +body.isolate-green-layer .red-layer, +body.isolate-green-layer .blue-layer, +body.isolate-green-layer .black-layer { display: none; } + +body.isolate-blue-layer .red-layer, +body.isolate-blue-layer .green-layer, +body.isolate-blue-layer .black-layer { display: none; } + +body.isolate-black-layer .red-layer, +body.isolate-black-layer .green-layer, +body.isolate-black-layer .blue-layer { display: none; } + +/* Noir et blanc */ +body.mode-black .print-image > div { + background: transparent; +} diff --git a/assets/css/variables.css b/assets/css/variables.css index 1bf84e7..cf79c89 100644 --- a/assets/css/variables.css +++ b/assets/css/variables.css @@ -1,9 +1,7 @@ :root{ --margin: 1em; - /*--fontFamily: "Routed Gothic";*/ --fontFamily: "JetBrains Mono NL"; - /*--textSize: 11pt;*/ --textSize: 9pt; --ratio : auto; diff --git a/assets/css/web.css b/assets/css/web.css index 30f996f..8f9e9c3 100644 --- a/assets/css/web.css +++ b/assets/css/web.css @@ -1,8 +1,85 @@ @media screen{ + + /* ---- H E A D E R -----*/ + header{ + position: fixed; + width: 100%; + top:0; + left:0; + right: 0; + padding: 15px; + z-index: 1000; + background: #FFF; + } + + header.row{ + margin:0; + } + + header .mobile__menu_btn { + display: block; + position: absolute; + right: 15px; + top: 15px; + cursor: pointer; + height: 24px; + width: 24px; + } + + header .mobile__menu_btn span { + display: block; + background: #000; + height: 2px; + width: 26px; + position: absolute; + transition: all 0.5s ease; + } + + header .mobile__menu_btn span:nth-child(1) { top: 0px; } + header .mobile__menu_btn span:nth-child(2) { top: 8px; } + header .mobile__menu_btn span:nth-child(3) { top: 16px; } + header .mobile__menu_btn .transparent { opacity: 0; } + + header .mobile__menu_btn .rotate-top { + -ms-transform: rotate(45deg); + transform: rotatez(45deg); + -webkit-transform-origin: 0%; + left: 2px; + } + + header .mobile__menu_btn .rotate-bottom { + -ms-transform: rotate(-45deg); + transform: rotatez(-45deg); + -webkit-transform-origin: 15%; + } + + /* ---- M A I N -----*/ main{ padding-top: 250px; max-width: 42em; margin: auto; } -} \ No newline at end of file + /* fade entre les pages */ + #fade{ + opacity: 0; + transition: opacity 1s ease-out; + } + + #fade.loaded{ + opacity: 1; + } + + /* ---- IMAGES GESTION WEB / PRINT --- */ + .web-image { display: block;} + .print-image { display: none;} + + + /* ---- IMAGES LIGHT BOX ---- */ + .glightbox-clean .gslide-title{ + font-family: var(--fontFamily); + font-weight: 600; + line-height: 1.2; + } + +} diff --git a/assets/csspageweaver/modules/dict.js b/assets/csspageweaver/modules/dict.js index ad5b62d..7e28a74 100644 --- a/assets/csspageweaver/modules/dict.js +++ b/assets/csspageweaver/modules/dict.js @@ -128,6 +128,7 @@ class CssPageWeaver_Dict { async importJson(dir, file) { try { + console.log(`${dir}/${file}`); const response = await fetch(`${dir}/${file}`); if (!response.ok) { throw new Error(`🚨 Oups. Can't find ${file} in ${this.getIdFromPath(dir)}`); diff --git a/site/blueprints/blocks/blank.yml b/site/blueprints/blocks/blank.yml index 66470a9..4231aaf 100644 --- a/site/blueprints/blocks/blank.yml +++ b/site/blueprints/blocks/blank.yml @@ -1,4 +1,4 @@ -name: Add blank page +name: Page blanche icon: page wysiwyg: true preview: box \ No newline at end of file diff --git a/site/blueprints/blocks/break.yml b/site/blueprints/blocks/break.yml index d261b46..41cf898 100644 --- a/site/blueprints/blocks/break.yml +++ b/site/blueprints/blocks/break.yml @@ -1,4 +1,4 @@ -name: Page Break +name: Saut de page icon: box wysiwyg: true preview: box \ No newline at end of file diff --git a/site/snippets/item.php b/site/snippets/item.php deleted file mode 100644 index 80105fe..0000000 --- a/site/snippets/item.php +++ /dev/null @@ -1,23 +0,0 @@ -
  • - - cover()->toFile()):?> -
    - - - <?= $image->alt() ?> - -
    - -

    title()?>

    -     -
    • \ No newline at end of file