clean
This commit is contained in:
sarahgarcin1
parent
4f8e4a0f06
commit
23b546163e
11 changed files with 415 additions and 1533 deletions
234
README.md
234
README.md
|
|
@ -1,36 +1,206 @@
|
|||
<img src="http://getkirby.com/assets/images/github/plainkit.jpg" width="300">
|
||||
# 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` | `<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 */
|
||||
```
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -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;}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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) " ";
|
||||
}*/
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
:root{
|
||||
--margin: 1em;
|
||||
|
||||
/*--fontFamily: "Routed Gothic";*/
|
||||
--fontFamily: "JetBrains Mono NL";
|
||||
/*--textSize: 11pt;*/
|
||||
--textSize: 9pt;
|
||||
--ratio : auto;
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
/* 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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)}`);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
name: Add blank page
|
||||
name: Page blanche
|
||||
icon: page
|
||||
wysiwyg: true
|
||||
preview: box
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
name: Page Break
|
||||
name: Saut de page
|
||||
icon: box
|
||||
wysiwyg: true
|
||||
preview: box
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
<li class="col-xs-12 col-sm-6 col-md-4 col-xl-3">
|
||||
<a href="<?= $projet->url()?>" title="<?= $projet->title()?>">
|
||||
<?php if($image = $projet->cover()->toFile()):?>
|
||||
<div class="projets__projet__cover">
|
||||
<picture>
|
||||
<source
|
||||
srcset="<?= $image->thumb(['width' => 680, 'height' => 680, 'crop' => true, 'format' => 'webp'])->url() ?>"
|
||||
sizes="<?= $sizes ?>"
|
||||
type="image/webp"
|
||||
>
|
||||
<img
|
||||
loading="lazy"
|
||||
alt="<?= $image->alt() ?>"
|
||||
src="<?= $image->thumb(['width' => 680, 'height' => 680, 'crop' => true, 'format' => 'webp'])->url() ?>"
|
||||
srcset="<?= $image->srcset() ?>"
|
||||
sizes="<?= $sizes ?>"
|
||||
>
|
||||
</picture>
|
||||
</div>
|
||||
<?php endif;?>
|
||||
<p><?= $projet->title()?></p>
|
||||
</a>
|
||||
</li>
|
||||
Loading…
Add table
Add a link
Reference in a new issue