Commit 12c9caf2 authored by Dorian's avatar Dorian
Browse files

utilisation de page-width en variable

parent b0b6ba01
......@@ -194,7 +194,6 @@ La méthode précédente permet de facilement diviser une grande image sur deux
```CSS
@fond_decal_top: 12pt;
@fond_decal_left: -8pt;
@page_L: -482pt;
.fond1, .fond2 {
background-image: url('https://medor.coop/media/images/example.original.jpg');
......@@ -206,12 +205,13 @@ La méthode précédente permet de facilement diviser une grande image sur deux
background-position: @fond_decal_left @fond_decal_top;
}
.fond2 {
background-position: @page_L + @fond_decal_left @fond_decal_top;
background-position: -@page-width+@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).
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**.
Si on veut faire que l'**image prenne toute la hauteur**:
......
......@@ -1703,14 +1703,14 @@ aside.sidebar span, aside.sidebar strong {
pas utiliser la classe de l'élém article comme selecteur et les classes
rounded/squared sont donc accessible sur tout les layouts
2. les padding verticaux de rounded/squared doivent etre calculer pour caler le texte sur la grille
3. customisez le reste différement des rubric ?
3. customisez le reste différement des rubric ? (h3 en centrer? typo diff pour h2? liste ul ?)
*/
/*___ Rounded/Squared corners colored boxes ___*/
.web-rounded,
.web-squared{
// pour que les deux boites se touchent au milieu
box-sizing: border-box !important;
box-sizing: border-box;
width: 50%;
z-index: 2;
// default padding
......@@ -1719,7 +1719,7 @@ rounded/squared sont donc accessible sur tout les layouts
background: rgba(0,0,0,0.1);
}
.web-rounded{
border-radius: 120pt !important;
border-radius: 120pt;
// top/bot padding for rounded
padding-top: 60pt;
padding-bottom: 60pt;
......
......@@ -50,7 +50,6 @@
// image en double
@fond_decal_top: 0pt;
@fond_decal_left: 0pt;
@page_L: -482pt;
.fond1, .fond2 {
background-image: url('');
......@@ -62,7 +61,7 @@
background-position: @fond_decal_left @fond_decal_top;
}
.fond2 {
background-position: @page_L+@fond_decal_left @fond_decal_top;
background-position: -@page-width+@fond_decal_left @fond_decal_top;
}
// crédits images
......
......@@ -45,7 +45,6 @@
// image en double
@fond_decal_top: 0pt;
@fond_decal_left: 0pt;
@page_L: -482pt;
.fond1, .fond2 {
background-image: url('https://medor.coop/media/images/secheresseV1.original.jpg');
......@@ -57,5 +56,5 @@
background-position: @fond_decal_left @fond_decal_top;
}
.fond2 {
background-position: @page_L+@fond_decal_left @fond_decal_top;
background-position: -@page-width+@fond_decal_left @fond_decal_top;
}
......@@ -28,7 +28,6 @@
// image double page
@fond_decal_top: 0pt;
@fond_decal_left: -14pt;
@page_L: -482pt;
.fond1, .fond2 {
background-image: url('https://medor.coop/media/images/MEDOR_doublepage_def.original.jpg');
......@@ -40,7 +39,7 @@
background-position: @fond_decal_left @fond_decal_top;
}
.fond2 {
background-position: (@page_L + @fond_decal_left) @fond_decal_top;
background-position: -@page-width+@fond_decal_left @fond_decal_top;
}
.no-footer(1);
......
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