Commit 05d424cf authored by Dorian's avatar Dorian
Browse files

layout entretien

parent 1f1ecd22
......@@ -6,7 +6,7 @@
Les articles se divisent en différents layouts prédéfinis.
Pour mettre en page un article
1. couler l'article dans le wagtail
1. couler l'article dans le Wagtail
2. copier-coller le dossier dans ```/layout``` correspond et le renomer
3. introduire l'id de l'article dans l'url à la fin de l'HTML
```HTML
......@@ -94,6 +94,22 @@ Elle peuvent être récupérées ailleurs.
**une ligne**
* ```@line-height: 12pt;```
## Caractères spéciaux
### HTML en balises
On peut insérer des balises HTML directement dans le Wagtail.
Un usage est par exemple pour les notes de bas de page ```<sup>1</sup>```
### entités HTML
Insérer des entités HTML directement dans le Wagtail, par exemple un non-breakable-space ```&nbsp;``` ou des espaces fins, ne fonctionne pas car certain scripts vont vouloir corriger la mise en forme typographique et ajouter des espaces fins avant les points-virgules, ce qui va briser le ```&nbsp;```.
La meilleur façon d'ajouter des caractères spéciaux est de les entrer directement dans le Wagtail en utilisant ```Ctrl+Shift+u``` puis le code du caractère, par exemple ```00a0``` pour le non-breakable-space, puis enter.
Liste des codes des entités HTML [https://unicode-table.com/en/html-entities/](https://unicode-table.com/en/html-entities/).
## Global CSS
### Notes pour récupérer des éléments en CSS
......@@ -117,6 +133,136 @@ Sinon on peu inspecter l'élément, afin de voir quelle classe applique le style
}
```
### Variables de couleurs
Si une couleur se répète à plusieurs reprises, cela peut être pratique d'en faire une variable pour pouvoir la changer sur plusieurs éléments d'un coup.
```CSS
@acc_color: midnightblue;
.headline{
color: @acc_color;
}
.enquete .pull-out{
color: @acc_color;
}
```
La feuille de style ```colors.less``` contient **déjà des variables de couleurs propre à l'identité de Médor** à utiliser directement.
### Ajouter une font
Ajouter les fichiers de font est préférable **dans le dossier de l'article**, et non dans le dossier fonts, afin de garder séparé les fonts de la maquette Médor et celle de customisation d'article et d'éviter une accumulation.
```CSS
@font-face {
font-family: "Garamondt";
src: url("Garamondt-Regular.otf");
font-weight: normal;
font-style: normal;
}
```
### Scinder un titre sur plusieurs lignes
Pour scinder un titre sur plusieurs lignes il vaut mieux éviter d'ajouter ```<br/>``` dans le Wagtail car:
* il serait visible sous forme de texte brut dans les titres courants, en bas de page.
* il sera appliqué dans la mise en page web de l'article.
Une solution simple est de changer la largeur du container pour faire passer à la ligne, cependant ça n'est pas toujours applicable.
Une petite fonction javascript est laissée dans le ```main.js``` du layout qui permet d'ajouter un ```<br/>``` après le n<sup>ième</sup> mot
```javascript
function add_br_at(i){
let headline = document.querySelector(".headline");
hdl_wordlist = headline.innerHTML.split(" ");
hdl_wordlist[i] = "<br/>" + hdl_wordlist[i];
headline.innerHTML = hdl_wordlist.join(" ");
}
add_br_at(2);
add_br_at(5);
```
### Lettrine
Un exemple de lettrine.
Noter que pas beaucoup de propriétés fonctionne sur ce pseudo-élément, par exemple ```position:relative``` ne fonctionne pas.
```CSS
.enquete .body > p:nth-of-type(1)::first-letter{
@lettrine-height: 3;
font-family: 'Erbarre';
font-weight: bold;
font-size: @lettrine-height * @line-height *(6/5);
line-height: @lettrine-height * @line-height *(6/5);
height: @lettrine-height * @line-height;
float: left;
padding-right: .1em;
}
```
### Forcer l'indentation d'un paragraphe
Si les paragraphes ne s'indentent pas comme désiré on peut les forcer.
Colorer le paragraphe aide à visualiser ou il se trouve dans l'article.
```CSS
p:nth-of-type(7){
text-indent: 12pt;
/* ou */
text-indent: 0pt;
color:red;
}
```
### Modifier/Enlever les titres courants ou les numéros de pages
Les titres courant sont des pseudo-éléments ```:before``` de ```.main```, et les numéros de page sont en ```:after```
```CSS
.sheet:nth-child(odd) .main:before {
/* tout les titres courants */
content: "Nouveau titre courant" !important;
}
.sheet:nth-of-type(1) .main:after{
/* numeros de page sur la 1ere page*/
color: beige !important;
}
```
Pour les **enlever complètement** les deux sur un page, on utilise la fonction ```no-footer()``` définie dans ```mixins.less```
```CSS
.no-footer(1);
.no-footer(2);
```
### Clipping bug
En utilisant CSS regions, certains accents ou descendantes de textes italic
sont clippés par leur boite contenante. La manière la plus simple de fixer le bug est
d'ajouter du padding et ensuite d'annuler le décalage avec une marge négative.
Le bug est documenté ici: [https://github.com/annulen/webkit/issues/278](https://github.com/annulen/webkit/issues/278)
```CSS
.enquete .lead{
margin-left: -10pt;
padding-left: 10pt;
}
```
Parfois l'effet ne fonctionne pas car le bloc n'est pas positionné sur la grille de manière a prendre en compte les margins.
Il est préférable de les positionner en **top, bottom, left, right** dans ce cas.
### Dingbat de fin d'article
On peut changer le dingbat de fin.
```CSS
body > p:last-of-type::after {
content: '\00A0\e005';
}
```
[Completer avec une table de possibilitées]
## Exergues
HTML Exergues structure
......@@ -248,9 +394,9 @@ figure:nth-of-type(2) > img{
}
```
### Gérer les images en CSS background
### Gérer les images de fond en CSS background
Pour les image qui remplisse toute une zone de la page, ça peut être utile de les ajouter en tant que ```background-image``` en reprennant son url entier dans le wagtail.
Pour les image de fond, qui remplisse toute une zone de la page, on peut les ajouter en tant que ```background-image``` en reprenant son url entier dans le Wagtail.
De cette manière on peut utiliser ```background-position```.
```CSS
.fond{
......@@ -264,12 +410,13 @@ De cette manière on peut utiliser ```background-position```.
```HTML
<div class="bloc t-1 b-1 l-1 r-1 fond1"></div>
```
#### Une image divisée sur deux pages face-à-face qui se rejoins proprement au milieu
#### Une image sur une double qui se rejoins proprement au milieu
La méthode précédente permet de facilement diviser une grande image sur deux pages.
```CSS
@fond_decal_top: 12pt;
@fond_decal_left: -8pt;
@fond_top: 12pt;
@fond_left: -8pt;
.fond1, .fond2 {
background-image: url('https://medor.coop/media/images/example.original.jpg');
......@@ -278,17 +425,17 @@ La méthode précédente permet de facilement diviser une grande image sur deux
z-index: 0;
}
.fond1 {
background-position: @fond_decal_left @fond_decal_top;
background-position: @fond_left @fond_top;
}
.fond2 {
background-position: -@page-width+@fond_decal_left @fond_decal_top;
background-position: -@page-width+@fond_left @fond_top;
}
```
L'idée est de déplacer vers la gauche (d'ou le signe moins) l'image sur la seconde page de la taille de l'intérieure d'une page, ```482pt```.
Celle-ci est défini dans ```layout.less``` avec la variable ```@page-width``` qu'on récupère.
Deux variables ont étés ajoutées ```@fond_decal_top``` et ```@fond_decal_left``` ce qui permet de translater toute l'image à travers les deux pages en même temps (0 et 0 veut dire que top-left corner de l'image coïncide avec le top-left corner de la page).
**On peut changer la valeur de ```background-size``` comme on veut pour l’agrandir/rétrécir et les deux parties vont rester collées comme il faut**.
Deux variables ont étés ajoutées ```@fond_top``` et ```@fond_left``` ce qui permet de translater toute l'image à travers les deux pages en même temps (0 et 0 veut dire que son top-left corner de l'image coïncide avec le top-left corner de la page).
On peut changer la valeur de ```background-size```, dans l'unité qu'on veut, et les deux parties resteront collées comme il faut.
Si on veut faire que l'**image prenne toute la hauteur**:
```CSS
......@@ -319,150 +466,6 @@ Les notes de bas de page viennent dans un flow séparé, et peuvent-être positi
<div class="bloc x0 y11 w3 h1 flow-fn1"></div>
```
## Basic Text Formating
### HTML en balises
On peut inserer des balises HTML directement dans le wagtail.
Un usage est par exemple pour les notes de bas de page ```<sup>1</sup>```
### entitées HTML
Insérer des entitées html, par exemple un non-breakable-space ```&nbsp;``` ou des espaces fins, directement dans le wagtail ne fonctionne pas car certain scripts vont vouloir corriger la mise en forme typographique et ajouter des espace avant les points-virgules, ce qui va briser le ```&nbsp;```.
La meilleur façon d'ajouter des caractères spéciaux est de les entrer directement dans le wagtail en utilisant ```Ctrl+Shift+u``` puis le code du caractère, par exemple ```00a0``` pour le non-breakable-space, puis enter.
Liste des codes des entitées HTML [https://unicode-table.com/en/html-entities/](https://unicode-table.com/en/html-entities/).
## Styling
### Variables de Couleurs
Les feuilles CSS sont en [less](http://lesscss.org/features/), ce qui permet d'utiliser des variables.
Si une couleur se répète à plusieurs reprises, cela peut être pratique d'en faire une variable pour pouvoir la changer sur plusieurs éléments d'un coup.
```CSS
@acc_color: midnightblue;
.headline{
color: @acc_color;
}
.enquete .pull-out{
color: @acc_color;
}
```
La feuille de style ```colors.less``` contient **déjà des variables de couleurs propre à l'identité de Médor** à utiliser directement.
### Ajouter une font
Ajouter les fichiers de font **dans le dossier de l'article**, et non dans le dossier fonts (afin de garder séparé les fonts de la maquette Médor et celle de customisation d'article et d'éviter une accumulation).
```CSS
@font-face {
font-family: "Garamondt";
src: url("Garamondt-Regular.otf");
font-weight: normal;
font-style: normal;
}
```
### Scinder un titre sur plusieurs lignes
Pour scinder un titre sur plusieurs lignes il vaut mieux éviter d'ajouter ```<br/>``` dans le wagtail car:
* celui-ci serait visible sous forme de texte brut dans les titres courants, en bas de page.
* celui-ci sera appliqué dans la mise en page web de l'article.
Une solution simple est de changer la largeur du container pour faire passer à la ligne, cependant ça n'est pas applicable dans tout les cas.
Une solution plus précise est d'ajouter une petite fonction javascript dans le ```main.js``` du layout qui ajoute un ```<br/>``` après le n<sup>ième</sup> mot
```javascript
function add_br_at(i){
let headline = document.querySelector(".headline");
hdl_wordlist = headline.innerHTML.split(" ");
hdl_wordlist[i] = "<br/>" + hdl_wordlist[i];
headline.innerHTML = hdl_wordlist.join(" ");
}
add_br_at(2);
add_br_at(5);
```
### Lettrine
Un exemple de lettrine.
Noter que pas beaucoup de propriétés fonctionne sur ce pseudo-élément, par exemple ```position:relative``` ne fonctionne pas.
```CSS
.enquete .body > p:nth-of-type(1)::first-letter{
@lettrine-height: 3;
font-family: 'Erbarre';
font-weight: bold;
font-size: @lettrine-height * @line-height *(6/5);
line-height: @lettrine-height * @line-height *(6/5);
height: @lettrine-height * @line-height;
float: left;
padding-right: .1em;
}
```
### Forcer l'indentation d'un paragraphe
Si les paragraphes ne s'indentent pas comme désiré on peut les forcer.
Colorer le paragraphe aide à visualiser ou il se trouve dans l'article.
```CSS
p:nth-of-type(7){
text-indent: 12pt;
/* ou */
text-indent: 0pt;
color:red;
}
```
### Modifier/Enlever les titres courants ou les numéros de pages
```CSS
html.facing .sheet:nth-child(odd) .main:before {
/* tout les titres courants */
content: "Nouveau titre courant" !important;
}
html.facing .sheet:nth-of-type(1) .main:after{
/* numeros de page sur la 1ere page*/
color: beige;
}
```
ou plus simple pour les enlever complètement sur la première et deuxième pages, en utilisant la fonction ```no-footer()``` définie dans ```mixins.less```
```CSS
.no-footer(1);
.no-footer(2);
```
### Clipping bug
En utilisant CSS regions, certains ascents ou descendantes de texts mis en italic
sont clippés par sa boite contenante. La manière la plus simple de fixer le bug est
d'ajouter du padding et ensuite d'annuler le décalage avec une marge négative.
Le bug est documenté ici: [https://github.com/annulen/webkit/issues/278](https://github.com/annulen/webkit/issues/278)
```CSS
.enquete .lead{
margin-left: -10pt;
padding-left: 10pt;
}
```
### Dingbat de fin d'article
On peut changer le dingbat de fin (voir les anciens numéro).
```CSS
body > p:last-of-type::after {
content: '\00A0\e005';
}
```
[Completer avec une table de possibilitées]
## Le Sommaire
[à completer]
......
......@@ -54,7 +54,7 @@
src: url('');
}
.enquete h1.headline {
color: red;
color: white;
}
.enquete h2.subhead {
color: blue;
......@@ -62,6 +62,13 @@
.enquete p.header-byline {
}
// fond
.fond-intro {
background: red;
z-index: 0;
}
// exergues
.pull-out-in(4);
......
......@@ -17,8 +17,11 @@
<div class="page">
<!-- PAGE-1 -->
<div class="main">
<div class="bloc l-1 t-1 b-1 r-1 flow-fig1" ></div>
<div class="bloc l-1 t-1 b-1 r-1 fond1"></div>
<div class="bloc x0 t-1 w6 flow-slug"></div>
<div class="bloc x1 y0 w7 h1 flow-subhead"></div>
<div class="bloc x0 y3 h1 w9 flow-header-byline"></div>
<div class="bloc x0 t2 h1 w9 flow-headline"></div>
</div>
</div>
</div>
......@@ -27,9 +30,10 @@
<div class="page">
<!-- PAGE-2 -->
<div class="main">
<div class="bloc x1 y1 w8 h2 flow-headline" style="margin-top:-16pt;"></div>
<div class="bloc x1 y5 w7 flow-header-byline" style="margin-top:-28pt;"></div>
<div class="bloc x1 y8 w8 flow-lead"></div>
<div class="bloc l-1 t-1 b-1 r-1 fond2"></div>
<div class="bloc x0 y0 h1 w8 flow-lead"></div>
<div class="bloc x1 t8 w4 b0 flow-main"></div>
<div class="bloc x5 t8 w4 b0 flow-main"></div>
</div>
</div>
</div>
......@@ -38,8 +42,8 @@
<div class="page">
<!-- PAGE-3 -->
<div class="main">
<div class="bloc y0 l0 walf b0 flow-main" style="margin-top:2pt;"></div>
<div class="bloc y0 r0 walf b0 flow-main" style="margin-top:1pt;"></div>
<div class="bloc x1 y0 w4 b0 flow-main"></div>
<div class="bloc x5 y0 w4 b0 flow-main"></div>
</div>
</div>
</div>
......@@ -48,8 +52,9 @@
<div class="page">
<!-- PAGE-4 -->
<div class="main">
<div class="bloc y0 l0 walf b0 flow-main" style="margin-top:3pt;"></div>
<div class="bloc y0 r0 walf b0 flow-main" style="margin-top:1pt; margin-bottom: 6pt"></div>
<div class="bloc x0 y0 w5 h6 flow-fig3"></div>
<div class="bloc x1 t12 w4 b0 flow-main"></div>
<div class="bloc x5 t0 w4 b0 flow-main"></div>
</div>
</div>
</div>
......@@ -58,8 +63,8 @@
<div class="page">
<!-- PAGE-5 -->
<div class="main">
<div class="bloc y0 l0 walf b0 flow-main" style="margin-top:1pt;"></div>
<div class="bloc y0 r0 walf b0 flow-main" style="margin-top:0.5pt;"></div>
<div class="bloc x1 y0 w4 b0 flow-main" ></div>
<div class="bloc x5 y0 w4 b0 flow-main" ></div>
</div>
</div>
</div>
......@@ -68,10 +73,9 @@
<div class="page">
<!-- PAGE-6 -->
<div class="main">
<div class="bloc l-1 t-1 w5 b5 flow-fig2" style="margin-bottom:15pt; width: 260pt"></div>
<div class="bloc t17 l0 walf b0 flow-main" style="margin-top:1pt;"></div>
<div class="bloc r0 y0 walf b0 flow-main" style="margin-top:0.5pt;"></div>
<div class="bloc l-1 t-1 r-1 h7 flow-fig2"></div>
<div class="bloc x1 t13 w4 b0 flow-main"></div>
<div class="bloc x5 t13 w4 b0 flow-main"></div>
</div>
</div>
</div>
......@@ -80,12 +84,8 @@
<div class="page">
<!-- PAGE-7 -->
<div class="main">
<div class="bloc l-1 y3 r8 b0 flow-fig3" style="margin-bottom:0pt;"></div>
<!-- <div class="bloc y0 l0 walf b0 flow-main"></div>
<div class="bloc y0 r0 walf b0 flow-main"></div> -->
<div class="bloc x0 y0 walf h4 flow-main" style="margin-top:0.5pt;"></div>
<div class="bloc r0 y0 walf b17 flow-main" style="margin-top:2.5pt;"></div>
<div class="bloc r0 t5 w4 b0 flow-main" style="margin-top:-1.5pt;"></div>
<div class="bloc x1 y0 w4 b0 flow-main" ></div>
<div class="bloc x5 y0 w4 b0 flow-main" ></div>
</div>
</div>
</div>
......@@ -94,18 +94,17 @@
<div class="page">
<!-- PAGE-8 -->
<div class="main">
<div class="bloc y0 l0 walf b0 flow-main" style="margin-top:0.5pt;"></div>
<div class="bloc y0 r0 walf b0 flow-main" style="margin-top:0.5pt;"></div>
<!-- <div class="bloc x1 y0 w4 b0 flow-main"></div>
<div class="bloc x5 y0 w4 b0 flow-main"></div> -->
<div class="bloc x1 y0 w4 b0 flow-main" ></div>
<div class="bloc x5 y0 w4 b0 flow-main" ></div>
</div>
</div>
</div>
</div>
<div id="stories">
<!-- <art id="flow-main" class="interview" folio="54" src="https://medor.coop/api/v2/pages/780/?draft=true&image_preview=true"></art> -->
<art id="flow-main" class="entretien" folio="110" src="https://medor.coop/api/v2/pages/780/?draft=true&image_"></art>
<art id="flow-main" class="entretien" folio="1" src="https://medor.coop/api/v2/pages/563/?draft=true&image_"></art>
</div>
<!-- JAVASCRIPT -->
......@@ -116,5 +115,6 @@
<script src="../../js/stories.new.js"></script>
<script src="../../js/pullout.js"></script>
<script src="main.js"></script>
</body>
</html>
document.addEventListener("OnStoryReady", function(){
function add_br_at(i){
let headline = document.querySelector(".headline");
hdl_wordlist = headline.innerHTML.split(" ");
hdl_wordlist[i] = "<br/>"+hdl_wordlist[i];
headline.innerHTML = hdl_wordlist.join(" ");
}
// breack title after second word
// add_br_at(2);
});
......@@ -20,207 +20,64 @@
#flow-main { .flow-into(flow-main); }
.flow-main { .flow-from(flow-main); }
//FIGURES
.fig-loop (@i) when (@i > 0) {
#flow-main figure:nth-of-type(@{i}) { .flow-into(~"flow-fig@{i}"); }
.flow-fig@{i} { .flow-from(~"flow-fig@{i}"); }
.fig-loop(@i - 1);
#flow-main figure:nth-of-type(@{i}) { .flow-into(~"flow-fig@{i}"); }
.flow-fig@{i} { .flow-from(~"flow-fig@{i}"); }
.fig-loop(@i - 1);
}
.fig-loop(4);
.fig-loop(8); //number of figs
//FOOTNOTES
.fn-loop (@i) when (@i > 0) {
#flow-main .footnotes li:nth-of-type(@{i}) { .flow-into(~"flow-fn@{i}"); }
.flow-fn@{i} { .flow-from(~"flow-fn@{i}"); }
.fn-loop(@i - 1);
}
.fn-loop(1);
.fn-loop(2); //number of footnotes
// *** numero 21 ***
/*___ numéro XX ___*/
.sheet:nth-child(odd) .main:before {
content: "Entretien — Le combat de la mode" !important;
}
@font-face {
font-family: 'WorkSans-Medium';
src: url('/fonts/WorkSans-Medium.ttf');
}
@font-face {
font-family: 'WorkSans-SemiBold';
src: url('/fonts/WorkSans-SemiBold.ttf');
}
// @acc_color : gainsboro;
@acc_color : navy;
// @acc_color : red;
//___ double page intro ___
.rubric-title{
color: white;
}
// image en double
figure:nth-of-type(1) > img{
margin-left: 12pt;
}
// headline
.interview .headline{
font-family: 'WorkSans-SemiBold';
// text-transform: lowercase !important;
text-align: left;
font-size: 46pt;
line-height: 42pt;
letter-spacing: -0.04em;
text-transform: none !important;
text-align: left;
position: relative;
}
// quote marks
@quotespace: 0.2em;
.interview .headline::before{
content:"«";
margin-left: -0.6em - @quotespace;
padding-right: @quotespace;
}
.interview .headline::after{
content:"»";
padding-left: @quotespace;
}
.interview .headline::before,
.interview .headline::after{
color: #e5e5e5;
.fond1, .fond2 {
background-image: url('https://old.medor.coop/fr/filer/canonical/1573815701/4062/');
background-repeat: no-repeat;
background-size: 114%;
z-index: 0;
}
// credit
.interview .header-byline{
font-family: 'WorkSans-Medium';
text-align: left;
margin-top: 14pt;
font-size: 12pt;
.fond1 {
background-position: 0 80%;
}
// chapo
.interview .lead p{
font-family: 'Erbarre';
font-size: 14pt;
line-height: 1.2;
.fond2 {
background-position: -@page-width 80%;
}
.no-footer(1);
//___ (?) interview question ___
.interview .body > h3:first-of-type{
margin-top: 0pt;
margin-bottom: 0pt;
}
.interview .body > h3{
font-family: 'WorkSans-SemiBold';
font-size: 9pt;
letter-spacing: -0.04em;
line-height: 12pt;
margin-top: 13pt;
margin-bottom: -1pt;
//___ interview question ___
.entretien .body > h3{
color: navy;