Commit cef88dc2 authored by Dorian's avatar Dorian
Browse files

cheatsheet correction

parent 9fe95d8b
{
"edito": "layout/edito/index.html",
"enquete": "layout/enquete/index.html",
"enquete-WC": "layout/enquete-WC/index.html",
"enquete-cogito": "layout/enquete-cogito/index.html",
"enquete-croquemort": "layout/enquete-croquemort/index.html",
"enquete-musique": "layout/enquete-musique/index.html",
"enquete-pharma": "layout/enquete-pharma/index.html",
"enquete-poupon": "layout/enquete-poupon/index.html",
"entretien": "layout/entretien/index.html",
"moment-flamand": "layout/moment-flamand/index.html",
"nombril": "layout/nombril/index.html",
......
# Médor HTML2PRINT - CheatSheet
<!-- TOC depthFrom:1 depthTo:6 withLinks:1 updateOnSave:1 orderedList:0 -->
- [Médor HTML2PRINT - CheatSheet](#mdor-html2print-cheatsheet)
- [Layout](#layout)
- [Positionner des éléments sur la grille](#positionner-des-lments-sur-la-grille)
- [Récupérer des éléments en CSS](#rcuprer-des-lments-en-css)
- [Images](#images)
- [Positionner les images en CSS-Regions flow](#positionner-les-images-en-css-regions-flow)
- [Mode de positionnement](#mode-de-positionnement)
- [Modifier les crédits d'une image](#modifier-les-crdits-dune-image)
- [Positionner les images en CSS background](#positionner-les-images-en-css-background)
- [Une image divisée sur deux pages face-à-face qui se rejoins proprement au milieu](#une-image-divise-sur-deux-pages-face-face-qui-se-rejoins-proprement-au-milieu)
- [Exergues](#exergues)
- [Calage sur la grille](#calage-sur-la-grille)
- [Déborder sur la colone vide de gauche](#dborder-sur-la-colone-vide-de-gauche)
- [Notes de bas de page](#notes-de-bas-de-page)
- [Basic Text Formating](#basic-text-formating)
- [HTML en balises](#html-en-balises)
- [entitées HTML](#entites-html)
- [Styling Text](#styling-text)
- [Couleurs en variables](#couleurs-en-variables)
- [Ajouter une font](#ajouter-une-font)
- [Scinder un titre sur plusieurs lignes](#scinder-un-titre-sur-plusieurs-lignes)
- [Lettrine](#lettrine)
- [Forcer l'indentation d'un paragraphe](#forcer-lindentation-dun-paragraphe)
- [Modifier/Enlever les titres courants ou les numéros de pages](#modifierenlever-les-titres-courants-ou-les-numros-de-pages)
- [Le Sommaire](#le-sommaire)
- [Pre-printing process](#pre-printing-process)
<!-- /TOC -->
## Layout
Les articles se divisent en différents layout prédéfinis.
......@@ -50,12 +19,12 @@ Pour mettre en page un article
La classe de l'élément ```art``` va appliquer un style CSS à l'entièreté des éléments de l'article.
**S'assurer qu'on utilise le bon layout pour l'article s'il en existe un**, et de ajouter à la section correspondante dans le wagtail.
Liste des dossiers layout et classes:
Liste des dossiers de layout et leur classes:
* enquete, ```class="enquete"```
* rub, ```class="rubric"``` (Aire libre, Fulguro-Point, Trait belge, L'enquêteke, Le sexe de Médor, Médor web, Médor à Jouer, Étude du milieu)
* rub-web
* rub-jouer
* rub-web (coulisse du web)
* rub-jouer (médor à jouer)
* entretien, ```class="interview"```
* recit, ```class="recit"```
* moment-flamand, ```class="flamand"```
......@@ -162,7 +131,7 @@ Par contre les deux modes précédent ne donnent pas un bon contrôle en terme d
Si elle est en mode ```object-fit: cover``` (par défaut), le résultat déplacé sera coupé la ou les bords du bloc coupait déjà l'image...
Le mode ```object-fit: contain``` ne donne pas un bon contrôle sur le resize car les espaces autour de l'image seront considérés comme faisant partie de sa taille et positon.
Si nécéssaire, on peut la passer en ```object-fit: fill``` et avoir un contrôle total sur sa taille et position.
Si nécessaire, on peut la passer en ```object-fit: fill``` et avoir un contrôle total sur sa taille et position.
```CSS
figure:nth-of-type(3) > img{
object-fit: fill;
......@@ -217,32 +186,28 @@ La méthode précédente permet de facilement diviser une grande image sur deux
.fond1, .fond2 {
background-image: url('https://medor.coop/media/images/example.original.jpg');
background-repeat: no-repeat;
background-size: 225%;
z-index: 0;
background-size: 225%
}
.fond1 {
background-position: @fond_decal_left @fond_decal_top;
}
.fond2 {
background-position: (@page_L + @fond_decal_left) @fond_decal_top;
background-position: @page_L + @fond_decal_left @fond_decal_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```.
Deux variables ont étées 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ées 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**.
Si on veut centrer l'image en haut/bas sur la double page on peut faire comme ceci
Si on veut faire que l'**image prenne toute la hauteur**:
```CSS
.fond1 {
background-position: 0 50%;
}
.fond2 {
background-position: @page_L 50%;
.fond1, .fond2{
background-size: auto 100%;
}
```
[a completer] comment faire pour centrer horizontalement aussi??
<!-- Note: percent values must be avoided in this case because
0% -> top d'image = top page
100% -> bas image = bas page
......@@ -347,11 +312,12 @@ Une solution plus précise est d'ajouter une petite fonction javascript dans le
```javascript
function add_br_at(i){
let headline = document.querySelector(".headline");
hdl_wordlist = headline.textContent.split(" ");
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
......@@ -393,13 +359,18 @@ 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,
html.facing .sheet:nth-of-type(2) .main:after{
/* numeros de page sur la 1ere et 2ieme */
display: none;
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
```CSS
no-footer(1);
no-footer(2);
```
## Le Sommaire
[à completer]
......
......@@ -53,7 +53,7 @@
@page_L: -482pt;
.fond1, .fond2 {
background-image: url('');
background-image: url('https://medor.coop/media/images/secheresseV1.original.jpg');
background-repeat: no-repeat;
background-size: auto 100%;
z-index: 0;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment