Commit 348f568d authored by Dorian's avatar Dorian
Browse files

ajout de tricks

parent 12c9caf2
......@@ -43,7 +43,7 @@ Liste des dossiers de layout et leur classes:
* sommaire
### Subtitle
### Subtitles
Pour ajouter un sous-titre à côté de la têtière, notamment pour préciser les différentes rubriques, on utilise le champ ```rubric-subtitle``` de l'élément ```art```.
Les différents sous-titres des rubriques se trouvent en commentaire dans le layout rub.
......@@ -79,6 +79,10 @@ Par exemple pour mettre un texte sur deux colonnes d'une largeur de la moitier d
<div class="bloc t0 r0 walf b0 flow-main"></div>
```
### Note on margins
[à completer] pour utiliser ```margin-left``` il faut que le côté gauche du container soit positionner selon un certain systems
## Récupérer des éléments en CSS
Si on veut appliquer un style CSS a un tyde d'éléments on vise la classe de son layout suivie de sa classe.
......@@ -172,6 +176,27 @@ figure:nth-of-type(3) footer{
}
```
#### Transformation sur une Image
Pour les **Coulisses du web** notamment, il est fréquent d'appliquer des transformations à l'image.
On peut le faire facilement en utilisant la fonction ```trans()``` définie dans ```mixins.less```
```CSS
figure img {
object-fit: fill !important;
height: auto;
}
figure figcaption {
display: none;
}
figure:nth-of-type(2){
.trans(-6deg,0,center,center);
width: 85pt;
top: -18pt;
left: 48pt;
}
```
### Positionner les images en CSS background
Si on veut plus de contrôle sur la position de l'image ça peut être utile de l'ajouter plutôt en tant que ```background-image``` en reprennant son url dans le wagtail.
......@@ -378,12 +403,26 @@ html.facing .sheet:nth-of-type(1) .main:after{
}
```
ou plus simple pour les enlever complètement sur la première et deuxième pages
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;
}
```
## Le Sommaire
[à completer]
......
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