Commit ef526202 authored by Dorian's avatar Dorian
Browse files

layout portfolio + script double page en mixins less + mixins less pour...

layout portfolio + script double page en mixins less + mixins less pour corriger position des captions flotantes
parent 0eaaedcf
......@@ -3,33 +3,42 @@
Maquette médor pour démarrer un nouveau numéro avec tout les layouts et une cheatsheet.
Cette maquette est un fork du numéro 21, cleanée et restructurée.
### news in médor0
* une cheatsheet qui documente un pannel de bug et tricks
* coulisse du web en classes permanentes (mettre tuto)
* un script .js pour ajouter des sauts de lignes dans les titres (plus de balise dans le wagtail!)
* un script less pour couper une image sur une double
* un script less pour rentrer/sortir les exergue de la colone vide
**pas sur**
* les styles css des layouts en fichiers separés
* nombril: in nombril style (?)
* fonts dans chaque dossier de layout individuel
TODO:
* script pullout.js fonctionnel
* revoir les lettrine et les cleaner (toute différentes, certaines manquantes)
* sidebar title on two lines makes text un-aligned
* entretien questions makes text un-aligned
* enquete, rubric, flamand: top column h2 on enquete/rubric makes text un-aligned
* enquete, flammand: correction du corps de texte qui va pas jusqu’à la fin de la colonne
* add custom color palettes?
### NEWS in medor0
* une **cheatsheet** qui documente un panel de tricks (à compléter au fur et à mesure)
<!-- * **bad bugs** -->
* **new functions**
* un script .js pour ajouter des sauts de lignes dans les titres (plus de balise dans le wagtail)
* un script .less pour couper une image sur une double
* un script .less pour rentrer/sortir les exergues de la colonne vide
* **cleaning**
* tout les layouts présent et cleaner
* coulisse du web en classes permanentes
* les styles css des layouts en fichiers separés
* fonts dans chaque dossier de layout individuel
### TODO:
* **cheatsheet**
* ajouter tuto encadrée
* ajouter tuto sommaire
* ajouter tuto sortir les .pdf ghostscript
* **bad bugs**
* script pullout.js fonctionnel
* sidebar title on two lines makes text un-aligned
* entretien questions makes text un-aligned
* enquete, rubric, flamand: top column h2 on enquete/rubric makes text un-aligned
* enquete, flammand: correction du corps de texte qui va pas jusqu’à la fin de la colonne
<!-- * **new functions** -->
* **cleaning**
* revoir les lettrine et les cleaner (toute différentes, certaines manquantes)
TODO-layout:
* portfolio
* portrait
* sommaire
DONE-layout:
* portfolio
* edito
* enquete-long
* enquete-short
......
......@@ -413,33 +413,53 @@ De cette manière on peut utiliser ```background-position```.
#### 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.
La fonction ```double();``` de ```mixins.less``` permet de facilement diviser une grande image sur deux pages, en utilisant deux fois la même classe:
```HTML
<!-- PAGES 1 -->
<div class="sheet">
<div class="page">
<div class="main">
<div class="bloc r-1 t-1 l-1 b-1 fond" ></div>
</div>
</div>
</div>
<!-- PAGES 2 -->
<div class="sheet">
<div class="page" >
<div class="main">
<div class="bloc r-1 t-1 l-1 b-1 fond" ></div>
</div>
</div>
</div>
```
```CSS
@fond_top: 12pt;
@fond_left: -8pt;
.fond{
background-image: url('https://medor.coop/media/images/portfolioweb-1.original.jpg');
background-size: auto 100%;
}
.double(".fond", 0cm, 0cm, 1, 2);
```
Le premier paramètre est le nom de la classe qu'on veut mettre en doube, ensuite les décalages par rapport au bord top et left (0 et 0 veut dire que son top-left corner de l'image coïncide avec le top-left corner de la page), et finalement les deux numéro de page sur lesquels se trouvent la double.
Les 4 derniers paramètres ne sont pas obligé d'être précisé.
On peut changer la valeur de ```background-size``` dans l'unité qu'on veut, et les deux parties resteront collées comme il faut.
On peu aussi le faire sans utiliser la fonction comme ceci:
```CSS
.fond1, .fond2 {
background-image: url('https://medor.coop/media/images/example.original.jpg');
background-repeat: no-repeat;
background-size: 225%;
background-size: 225%;
z-index: 0;
}
.fond1 {
background-position: @fond_left @fond_top;
}
.fond2 {
background-position: -@page-width+@fond_left @fond_top;
background-position: -@page-width 0;
}
```
Cela déplace vers la gauche (d’où le signe moins) l'image sur la seconde page de la taille de l'intérieure d'une page, ```482pt``` en récupérant la variable ```@page-width```.
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_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**:
Pour que l'image prenne toute la hauteur:
```CSS
.fond1, .fond2{
.fond{
background-size: auto 100%;
}
```
......
......@@ -19,7 +19,22 @@
.sheet:nth-of-type(@{page}) .main:after { content: ""!important }
}
// Transformation fonction
// Image en double
.double(@class, @decal-top: 0,@decal-left: 0, @pageA: 1, @pageB: 2){
@className: ~"@{class}";
@{className}{
background-repeat: no-repeat;
z-index: 0;
}
.sheet:nth-of-type(@{pageA}) @{className}{
background-position: @decal-left @decal-top;
}
.sheet:nth-of-type(@{pageB}) @{className}{
background-position: -@page-width+@decal-left @decal-top;
}
}
// fonction de déformation
.trans(@rotate, @skew, @originY, @originX) {
-webkit-transform: skewY(@skew) rotate(@rotate);
transform: skewY(@skew) rotate(@rotate);
......@@ -38,3 +53,17 @@
margin-left: 0;
}
}
// corrige la position des figcaption quand elles ne sont pas directement en dessous de l'image
.freecap(@number){
figure:nth-of-type(@{number}) figcaption{
position: static;
bottom: auto;
}
}
.freecap-all(){
figure figcaption{
position: static;
bottom: auto;
}
}
......@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<title>photo</title>
<title>portfolio</title>
<script src="../../vendors/modernizr-custom.js"></script>
<link rel="stylesheet" href="../../vendors/reset.css">
<link rel="stylesheet" href="../../vendors/normalize-opentype.css">
......@@ -17,8 +17,10 @@
<div class="sheet">
<div class="page">
<div class="main">
<div class="bloc t-1 r-1 b-1 l-1 fond1" style="margin-left:10pt;"></div>
<div class="bloc x0 t-1 w6 flow-slug"></div>
<div class="bloc x0 t1 w9 h1 flow-headline"></div>
<div class="bloc x0 t5 w8 h2 flow-header-byline"></div>
<div class="bloc r-1 t-1 l-1 b-1 fond" ></div>
</div>
</div>
</div>
......@@ -27,11 +29,7 @@
<div class="sheet">
<div class="page" >
<div class="main">
<div class="bloc t-1 r-1 b-1 l-1 fond2"></div>
<div class="bloc x1 y9 w10 flow-headline" style="margin-left:-18pt; margin-top:24pt;"></div>
<div class="bloc x1 y11 w10 h3 header-byline" style="margin-top:26pt; margin-left:-16pt;">
Tom Lyon et Pauline Vanden Neste
</div>
<div class="bloc r-1 t-1 l-1 b-1 fond" ></div>
</div>
</div>
</div>
......@@ -40,130 +38,130 @@
<div class="sheet">
<div class="page">
<div class="main">
<div class="bloc l0 y1 w7 b0 flow-lead"></div>
<div class="bloc r8.5 y5 walf b0 flow-main" style="margin-bottom: 0pt; margin-top:-36pt;"></div>
<div class="bloc r0 y5 walf b0 flow-main" style="margin-bottom: 0pt; margin-top: -36pt;"></div>
</div>
</div>
</div>
<div class="bloc t0 x0 w9 h2 flow-lead"></div>
<!-- PAGES 4 -->
<div class="sheet">
<div class="page" >
<div class="main">
<div class="bloc t-1 r-1 b0 l-1 flow-fig3"></div>
<div class="bloc t-1 r-1 b0 l-1 flow-figcap3"></div>
</div>
</div>
</div>
<div class="bloc t9 l0 walf b0 flow-main"></div>
<div class="bloc t9 r0 walf b5 flow-main"></div>
<div class="bloc t17 x5 w3 b0 flow-main" style="margin-left:-24pt;margin-top:8pt;width:150px;"></div>
<!-- PAGES 5 -->
<div class="sheet">
<div class="page">
<div class="main">
<!-- <div class="bloc r0 y0 b14 flow-main" style="margin-bottom: -12pt;"></div> -->
<div class="bloc x0 t1 r1 l1 b4 flow-fig4"></div>
<div class="bloc x1 t2 r1 r7 b3 flow-figcap4"></div>
</div>
</div>
</div>
<!-- PAGES 6 -->
<div class="sheet">
<div class="page" >
<div class="main">
<div class="bloc r8.5 y0 walf b5 flow-main" style="margin-bottom: 0pt; margin-top:0pt;"></div>
<div class="bloc r0 y0 walf b14 flow-main" style="margin-bottom: -12pt; margin-top:0pt;"></div>
<div class="bloc r0 y8 w2 h2 flow-figcap1"></div>
<div class="bloc r0 y10 w2 h2 flow-figcap2"></div>
</div>
</div>
</div>
<!-- PAGES 7 -->
<div class="sheet">
<div class="page" >
<div class="main">
<div class="bloc l-1 t-1 r-1 b8 flow-fig5" style="margin-top:0pt;"></div>
<div class="bloc l-1 t-1 r-1 b8 flow-figcap5" style="margin-top:0pt;"></div>
<div class="bloc y9 x5 w4 b1 flow-figcap15" style="margin-top:0pt;"></div>
</div>
</div>
</div>
<!-- PAGES 8 -->
<!-- PAGES 4 -->
<div class="sheet">
<div class="page" >
<div class="main">
<!-- <div class="bloc l&#45;1 t&#45;1 r&#45;1 b0 fond5" style="margin&#45;left:0pt; margin&#45;top:0pt;"></div> -->
<div class="bloc l-1 t-1 r-1 b-1 flow-fig15" style="margin-top:-5pt; margin-bottom: -50pt"></div>
<div class="bloc t-1 r-1 b-1 l-1 flow-fig2"></div>
</div>
</div>
</div>
<!-- PAGES 9 -->
<!-- PAGES 5 -->
<div class="sheet">
<div class="page" >
<div class="main">
<div class="bloc t-1 r-1 b-1 l3 fond3" style="margin-left:30pt;"></div>
<div class="bloc b0 y0 x0 h1 flow-figcap6" style="width:110pt"></div>
<div class="bloc t-1 r-1 b-1 l-1 flow-fig3"></div>
</div>
</div>
</div>
<!-- PAGES 10 -->
<!-- PAGES 6 -->
<div class="sheet">
<div class="page" >
<div class="main">
<div class="bloc t-1 r-1 b-1 l-1 fond4" style="margin-left:0pt;"></div>
</div>
</div>
</div>
<div class="bloc x2 t0 w3 b20 flow-main"></div>
<div class="bloc t0 t3 walf h7 flow-main"></div>
<div class="bloc t0 x5 walf h7 flow-main"></div>
<div class="bloc l0 y0 w2 h2 flow-figcap3"></div>
</div>
</div>
</div>
<!-- PAGES 11 -->
<!-- PAGES 7 -->
<div class="sheet">
<div class="page" >
<div class="main">
<div class="bloc l-1 t-1 r-1 b8 flow-fig7" style="margin-top:0pt;"></div>
<div class="bloc l-1 t-1 w7 b8 flow-figcap7" style="margin-top:0pt;"></div>
</div>
</div>
</div>
<div class="bloc t-1 r-1 h7 l-1 flow-fig4"></div>
<!-- PAGES 12 -->
<div class="sheet">
<div class="page" >
<div class="main">
<div class="bloc l-1 t-1 r-1 b8 flow-fig8" style="margin-top:0pt;"></div>
<div class="bloc l-1 t-1 w7 b8 flow-figcap8" style="margin-top:0pt;"></div>
<div class="bloc l0 y6 w2 h2 flow-figcap4"></div>
<div class="bloc l0 y7 w2 h2 flow-figcap5"></div>
<div class="bloc l0 y9 w2 h2 flow-figcap6"></div>
<div class="bloc l4 y6 w2 h2 flow-figcap8"></div>
</div>
</div>
</div>
<!-- PAGES 13 -->
<div class="sheet">
<div class="page">
<!-- PAGES 8 -->
<div class="sheet">
<div class="page" >
<div class="main">
<div class="bloc l-1 t-1 r-1 b-1 flow-fig9" style="margin-top:0pt;"></div>
<div class="bloc t-1 r-1 h7 l-1 flow-fig5"></div>
<div class="bloc t12 r-1 b-1 l-1 flow-fig6"></div>
</div>
</div>
</div>
</div>
<!-- PAGES 14 -->
<div class="sheet">
<div class="page">
<!-- PAGES 9 -->
<div class="sheet">
<div class="page" >
<div class="main">
<div class="bloc x0 t1 r1 l1 b4 flow-fig10" ></div>
<div class="bloc x0 t1 r1 l1 b4 flow-figcap10" ></div>
<div class="bloc x0 w5 b0 h2 flow-figcap9" style="margin-top:0pt;"></div>
<div class="bloc t1 r1 b0 l1 flow-fig7"></div>
<div class="bloc t1 r1 b0 l1 flow-figcap7"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- PAGES 10 -->
<div class="sheet">
<div class="page" >
<div class="main">
<div class="bloc t-1 r-1 b-1 l-1 flow-fig8"></div>
</div>
</div>
</div>
<!-- PAGES 13 -->
<div class="sheet">
<div class="page" >
<div class="main">
<div class="bloc t0 walf h7 flow-fig9"></div>
<div class="bloc t0 r0 walf h7 flow-fig10"></div>
<div class="bloc l0 y7 w2 h2 flow-figcap9"></div>
<div class="bloc l0 y8 w2 h2 flow-figcap10"></div>
<div class="bloc l0 y10 w2 h2 flow-figcap11"></div>
<div class="bloc l4 y7 w2 h2 flow-figcap12"></div>
<div class="bloc l4 y9 w2 h2 flow-figcap14"></div>
</div>
</div>
</div>
<!-- PAGES 14 -->
<div class="sheet">
<div class="page" >
<div class="main">
<div class="bloc t-1 r-1 b-1 l-1 flow-fig11"></div>
</div>
</div>
</div>
<!-- PAGES 15 -->
<div class="sheet">
<div class="page" >
<div class="main">
<div class="bloc t-1 r-1 h7 l-1 flow-fig12"></div>
<div class="bloc t12 r-1 b-1 l-1 flow-fig14"></div>
</div>
</div>
</div>
</div>
<div id="stories">
<art id="flow-main" folio="84" class="portfolio" src="https://medor.coop/api/v2/pages/772/?draft=true"></art>
<art id="flow-main" folio="1" class="portfolio" src="https://medor.coop/api/v2/pages/541/?draft=true"></art>
</div>
<!-- JAVASCRIPT -->
......@@ -172,5 +170,6 @@
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.js"></script>
<script src="../../js/stories.new.js"></script>
<script src="main.js"></script>
</body>
</html>
......@@ -20,130 +20,59 @@
#flow-main aside:nth-of-type(1) { .flow-into(flow-sidebar1); }
.flow-sidebar1 { .flow-from(flow-sidebar1); }
// // LOOP FIGURE
//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(17);
.fig-loop(20); //number of figs
//LOOP FIGCAPTION
//FIGCAPTION
.fig-loopcap (@i) when (@i > 0) {
#flow-main figure:nth-of-type(@{i}) figcaption { .flow-into(~"flow-figcap@{i}"); }
.flow-figcap@{i} { .flow-from(~"flow-figcap@{i}"); }
.fig-loopcap(@i - 1);
}
.fig-loopcap(18); //number of caption
.fig-loopcap(17);
figure:nth-of-type(11) img {
height: auto;
}
.sheet:nth-child(odd) .main:before {
content: "Et au milieu coule un canal" !important;
}
.sheet:nth-of-type(4) .main:before {
display: none !important;
}
/*custom*/
.headline {
text-align: left !important;
color: lightgrey !important;
}
.header-byline {
text-align: left !important;
color: lightgrey !important;
font-family: 'Erbarre';
font-size: 18pt;
}
.fond1, .fond2 {
background-image: url('https://medor.coop/media/images/porfoliohd-2.original.jpg');
background-repeat: no-repeat;
background-size: 200%;
z-index: 0;
}
.fond1 {
background-position: left;
}
/*___ numéro XX ___*/
.fond2 {
background-position: right;
background-position: 100% 50%;
.rubric-title {
color: white;
}
.fond3 {
background-image: url('https://medor.coop/media/images/porfoliohd-10.original.jpg');
background-repeat: no-repeat;
background-size: 230%;
z-index: 0;
background-position: left;
}
.fond4 {
background-image: url('https://medor.coop/media/images/porfoliohd-10.original.jpg');
background-repeat: no-repeat;
background-size: 163%;
z-index: 0;
background-position: right;
background-position: 103% 50%;
}
.fond5 {
background-image: url('https://medor.coop/media/images/compoportfolioHD.original.png');
background-repeat: no-repeat;
background-size: 97%;
z-index: 0;
background-position: left;
background-position: 50% 25%;
// image en double
.fond{
background-image: url('https://medor.coop/media/images/portfolioweb-1.original.jpg');
background-size: auto 100%;
}
.double(".fond", 0cm, 0cm);
// enleve numero de page
.no-footer(1);
.no-footer(2);
.no-footer(9);
#flow-main figure:nth-of-type(3) figcaption {
margin-left: 49pt;
}
#flow-main figure:nth-of-type(5) figcaption {
margin-left: 38pt;
}
#flow-main figure:nth-of-type(7) figcaption {
bottom: 20pt;
margin-bottom: -41pt;
margin-left: 38pt;
// transform: rotate(-90deg);
// enleve les crédits photos
figcaption footer{
display: none;
}
#flow-main figure:nth-of-type(8) figcaption {
margin-left: 49pt;
// transform: rotate(-90deg);
}
figcaption footer small {
display: none;
}
figure:nth-of-type(15) figcaption {
position: relative;
padding-top: 2pt !important;
}
.sheet:nth-of-type(1) .main:before,
.sheet:nth-of-type(2) .main:before,
.sheet:nth-of-type(1) .main:after,
.sheet:nth-of-type(2) .main:after,
{
display: none;
}
// corrige la position de la nieme figcaptions
// quand elles ne sont pas directement en dessous de l'image
.freecap(1);
.freecap(2);
.freecap(3);
.freecap(4);
.freecap(5);
.freecap(6);
.freecap(8);
.freecap(9);
.freecap(10);
.freecap(11);
.freecap(12);
.freecap(14);
// ou celle-ci pour l'appliquer a toutes les captions
// .freecap-all();
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