Commit fb07a0df authored by Dorian's avatar Dorian
Browse files

nouvelle mixins de double image + cleaning css sheets

parent ef526202
......@@ -20,7 +20,6 @@
/*___ numéro XX ___*/
/* custom */
// a ajouter dans le permanent?
.subhead,
.header-byline {
......
......@@ -17,12 +17,10 @@
<!-- PAGE-1 -->
<div class="main">
<div class="bloc x0 t-1 w2 flow-slug" ></div>
<!-- header -->
<div class="bloc x3 t2 w7 h3 flow-subhead"></div>
<div class="bloc x3 t3 w7 h3 flow-headline"></div>
<div class="bloc x4 t5 w8 h1 flow-header-byline"></div>
<!-- image en double -->
<div class="bloc l-1 t-1 b-1 r-1 fond1"></div>
<div class="bloc l-1 t-1 b-1 r-1 fond"></div>
</div>
</div>
</div>
......@@ -31,8 +29,7 @@
<div class="page">
<!-- PAGE-2 -->
<div class="main">
<!-- image en double -->
<div class="bloc l-1 t-1 b-1 r-1 fond2"></div>
<div class="bloc l-1 t-1 b-1 r-1 fond"></div>
</div>
</div>
</div>
......@@ -43,7 +40,6 @@
<div class="main">
<div class="bloc x0 y0 w9 h4 flow-lead"></div>
<div class="bloc x0 t10 w5 b0 flow-fig2"></div>
<!-- colones -->
<div class="bloc x1 y4 w4 b13 flow-main" style="margin-bottom:-24pt;"></div>
<div class="bloc x5 y4 w4 b0 flow-main"></div>
</div>
......@@ -74,11 +70,9 @@
<div class="page">
<!-- PAGE-6 -->
<div class="main">
<!-- encadre -->
<div class="bloc l0 t15 r0 b0 fond-sidebar"></div>
<div class="bloc l0 y8 walf b0 flow-sidebar1"></div>
<div class="bloc r0 y8 walf b0 flow-sidebar1"></div>
<!-- colones -->
<div class="bloc x1 y0 w4 b9 flow-main"></div>
<div class="bloc x5 y0 w4 b9 flow-main"></div>
</div>
......@@ -110,7 +104,6 @@
<div class="page">
<!-- PAGE-9 -->
<div class="main">
<!-- encadre -->
<div class="bloc l-1 t-1 r-1 b-1 fond-sidebar"></div>
<div class="bloc l0 t7 walf b1 flow-sidebar4" style="margin-bottom: -12pt;"></div>
<div class="bloc r0 t5 walf b2 flow-sidebar4" ></div>
......
......@@ -48,24 +48,16 @@
/*___ numéro XX ___*/
// image en double
@fond_decal_top: 0pt;
@fond_decal_left: -48pt;
.fond1, .fond2 {
.fond{
background-image: url('https://medor.coop/media/images/page-titre-steiner-avec-nuage-krita.original.jpg');
background-repeat: no-repeat;
background-size: 207%;
z-index: 0;
}
.fond1 {
background-position: @fond_decal_left @fond_decal_top;
}
.fond2 {
background-position: -@page-width+@fond_decal_left @fond_decal_top;
}
.double(".fond", 0pt, -48pt);
.rubric-title {
background-color: white;
}
// titres à custom
@font-face {
font-family: '';
src: url('');
......@@ -79,24 +71,16 @@
.enquete p.header-byline {
}
// example de fonds d'encadré
// examples de fonds d'encadré
.fond-sidebar {
background-color: @color-C1;
outline: 12pt solid @color-C1;
}
// exergues
.enquete .pull-out:nth-of-type(2) {
margin-left: 0;
}
// corrections
// rentrer l'exergue
.pull-out-in(2);
.rubric-title {
background-color: white;
}
// retirer num page / titres courants
.no-footer(1);
.no-footer(2);
.no-footer(7);
......@@ -18,7 +18,6 @@
<div class="main">
<div class="bloc x0 t-1 w6 flow-slug"></div>
<div class="bloc b-1 t-1 r-1 l-1 fond-intro" ></div>
<!-- header -->
<div class="bloc x1 y2 w8 flow-headline"></div>
<div class="bloc x6 y6 w5 flow-header-byline"></div>
<div class="bloc x1 y7 w8 flow-subhead"></div>
......
......@@ -47,8 +47,13 @@
/*___ numéro XX ___*/
// titres à custom
// fond
.fond-intro {
background: red;
z-index: 0;
}
// titres à custom
@font-face {
font-family: '';
src: url('');
......@@ -62,15 +67,8 @@
.enquete p.header-byline {
}
// fond
.fond-intro {
background: red;
z-index: 0;
}
// exergues
// rentrer l'exergue
.pull-out-in(4);
// corrections
// retirer num page / titres courants
.no-footer(1);
......@@ -17,11 +17,11 @@
<div class="page">
<!-- PAGE-1 -->
<div class="main">
<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 class="bloc l-1 t-1 b-1 r-1 fond"></div>
</div>
</div>
</div>
......@@ -30,10 +30,10 @@
<div class="page">
<!-- PAGE-2 -->
<div class="main">
<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 class="bloc l-1 t-1 b-1 r-1 fond"></div>
</div>
</div>
</div>
......
......@@ -8,5 +8,6 @@ document.addEventListener("OnStoryReady", function(){
}
// breack title after second word
// add_br_at(2);
// add_br_at(4);
});
......@@ -39,31 +39,22 @@
/*___ numéro XX ___*/
// image en double
.fond1, .fond2 {
.fond{
background-image: url('https://old.medor.coop/fr/filer/canonical/1573815701/4062/');
background-repeat: no-repeat;
background-size: 114%;
z-index: 0;
}
.fond1 {
background-position: 0 80%;
}
.fond2 {
background-position: -@page-width 80%;
}
.no-footer(1);
.double(".fond", 7.5cm, 0);
//___ interview question ___
// retirer num page / titres courants
.no-footer(1);
// entretien questions
.entretien .body > h3{
color: navy;
}
//___ exergues ___
// exergues
// to add quote marks
// .entretien .body blockquote p::before{
......@@ -73,8 +64,10 @@
// content:"\202F»";
// }
// sortir l'exergue
.pull-out-out(1);
.pull-out-out(2);
.pull-out-out(3);
figure > img{
object-fit: contain;
......
......@@ -18,7 +18,7 @@
<div class="page">
<div class="main">
<div class="bloc x0 t-1 w6 flow-slug"></div>
<div class="bloc t-1 b-1 l-1 r-1 fond1"></div>
<div class="bloc t-1 b-1 l-1 r-1 fond"></div>
</div>
</div>
</div>
......@@ -29,7 +29,7 @@
<div class="main">
<div class="bloc x1 y1 r0 flow-headline"></div>
<div class="bloc x1 y3 w8 flow-header-byline"></div>
<div class="bloc t-1 b-1 l-1 r-1 fond2"></div>
<div class="bloc t-1 b-1 l-1 r-1 fond"></div>
</div>
</div>
</div>
......@@ -102,7 +102,7 @@
</div>
</div>
</div>
</div>
......
......@@ -36,21 +36,11 @@
/*___ numéro XX ___*/
// image en double
@fond_decal_top: 0pt;
@fond_decal_left: 0pt;
.fond1, .fond2 {
.fond{
background-image: url('https://medor.coop/media/images/secheresseV1.original.jpg');
background-repeat: no-repeat;
background-size: auto 100%;
z-index: 0;
}
.fond1 {
background-position: @fond_decal_left @fond_decal_top;
}
.fond2 {
background-position: -@page-width+@fond_decal_left @fond_decal_top;
}
.double(".fond");
// titres à custom
@font-face {
......@@ -64,8 +54,9 @@
.flamand p.header-byline {
}
// exergues
// sortir les exergues
.pull-out-out(3);
// retirer num page / titres courants
.no-footer(1);
.no-footer(2);
......@@ -17,11 +17,9 @@
<div class="sheet">
<div class="page">
<div class="main">
<!-- header -->
<div class="bloc x0 t-1 w4 r-1 flow-slug"></div>
<div class="bloc x0 y1 w8 flow-headline"></div>
<div class="bloc x0 y2 r0 h2 flow-lead"></div>
<!-- main -->
<div class="bloc l0 y3 walf h2 flow-main"></div>
<div class="bloc l0 y4 walf h5 flow-fig1"></div>
<div class="bloc l0 y9 walf b0 flow-main"></div>
......
......@@ -39,11 +39,9 @@
<div class="page">
<div class="main">
<div class="bloc t0 x0 w9 h2 flow-lead"></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>
<div class="bloc r0 y8 w2 h2 flow-figcap1"></div>
<div class="bloc r0 y10 w2 h2 flow-figcap2"></div>
</div>
......@@ -85,7 +83,6 @@
<div class="page" >
<div class="main">
<div class="bloc t-1 r-1 h7 l-1 flow-fig4"></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>
......@@ -129,11 +126,9 @@
<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>
......
......@@ -42,20 +42,19 @@
.rubric-title {
color: white;
}
// image en double
.fond{
background-image: url('https://medor.coop/media/images/portfolioweb-1.original.jpg');
background-size: auto 100%;
background-size: 150%;
}
.double(".fond", 0cm, 0cm);
.double(".fond", 2cm, 5cm);
// enleve numero de page
// retirer num page / titres courants
.no-footer(1);
.no-footer(2);
.no-footer(9);
// enleve les crédits photos
// retirer les crédits photos
figcaption footer{
display: none;
}
......
......@@ -45,6 +45,8 @@
figure img{
object-fit: contain;
}
// sortir les exergues
.pull-out-out(1);
.pull-out-out(2);
.pull-out-out(3);
......
......@@ -17,7 +17,7 @@
<div class="page">
<div class="main">
<div class="bloc x0 t-1 w6 flow-slug"></div>
<div class="bloc l-1 t-1 r-1 b-1 fond1"></div>
<div class="bloc l-1 t-1 r-1 b-1 fond"></div>
</div>
</div>
</div>
......@@ -25,7 +25,7 @@
<div class="sheet">
<div class="page">
<div class="main">
<div class="bloc l-1 t-1 r-1 b-1 fond2"></div>
<div class="bloc l-1 t-1 r-1 b-1 fond"></div>
</div>
</div>
</div>
......
......@@ -18,7 +18,7 @@
#flow-main { .flow-into(flow-main); }
.flow-main { .flow-from(flow-main);}
//___ MEDOR A JOUER ___
/*___ numéro XX ___*/
.rubric-title {
background-color: white;
......@@ -26,21 +26,12 @@
}
// image double page
@fond_decal_top: 0pt;
@fond_decal_left: -14pt;
.fond1, .fond2 {
.fond{
background-image: url('https://medor.coop/media/images/MEDOR_doublepage_def.original.jpg');
background-repeat: no-repeat;
background-size: auto 100%;
z-index: 0;
}
.fond1 {
background-position: @fond_decal_left @fond_decal_top;
}
.fond2 {
background-position: -@page-width+@fond_decal_left @fond_decal_top;
}
.double(".fond", 0, -14pt);
// retirer num page / titres courants
.no-footer(1);
.no-footer(2);
......@@ -17,10 +17,7 @@
<div class="sheet">
<div class="page">
<div class="main">
<!-- back -->
<div class="bloc t-1 r-1 b-1 l-1 page-background"></div>
<!-- titles -->
<div class="bloc l-1 t-1 r-1 b-1 fond"></div>
<div class="bloc x0 t-1 w6 flow-slug"></div>
<div class="bloc x0 t0 w9 h2 flow-title"></div>
<div class="bloc x0 t2 w5 h1 flow-lead" style="margin-top: 24pt;"></div>
......@@ -29,10 +26,9 @@
<!-- use height or margin (multiple of 12) to make a bloc the desired heigh-->
<!-- negative margin disaligned the text, don't use that -->
<!-- use padding (multiple of 12) to push the text and make place for images -->
<div class="bloc l0 y4 b0 web-rounded fond1 flow-main"></div>
<div class="bloc r0 y1 b12 web-rounded fond1 flow-main" style="height: 240pt;"></div>
<div class="bloc r0 y6 b0 web-squared fond3 flow-main" style="margin-top: 12pt; padding-bottom: 48pt;"></div>
<div class="bloc l0 y4 b0 web-rounded c1 flow-main"></div>
<div class="bloc r0 y1 b12 web-rounded c1 flow-main" style="height: 240pt;"></div>
<div class="bloc r0 y6 b0 web-squared c2 flow-main" style="margin-top: 12pt; padding-bottom: 48pt;"></div>
<!-- illus -->
<div class="bloc x1 y3 w2 h1 flow-fig1"></div>
......@@ -45,20 +41,17 @@
<div class="sheet">
<div class="page">
<div class="main">
<!-- back -->
<div class="bloc t-1 r-1 b-1 l-1 page-background"></div>
<div class="bloc l-1 t-1 r-1 b-1 fond"></div>
<!-- textbox -->
<div class="bloc l0 y0 web-rounded b7 fond5 flow-main" style="margin-bottom: 12pt;"></div>
<div class="bloc r0 y1 web-rounded b2 fond4 flow-main" style="padding-top: 60pt;"></div>
<div class="bloc l0 y8 web-squared b0 fond1 flow-main" style="height: 216pt;"></div>
<div class="bloc l0 y0 web-rounded b7 c4 flow-main" style="margin-bottom: 12pt;"></div>
<div class="bloc r0 y1 web-rounded b2 c3 flow-main" style="padding-top: 60pt;"></div>
<div class="bloc l0 y8 web-squared b0 c1 flow-main" style="height: 216pt;"></div>
</div>
</div>
</div>
<div id="stories">
<art id="flow-main" class="rubric web" folio="1" src="https://medor.coop/api/v2/pages/783/?draft=true"></art>
<art id="flow-main" class="rubric web" folio="1" src="https://medor.coop/api/v2/pages/783"></art>
</div>
<!-- JAVASCRIPT -->
......
......@@ -26,39 +26,33 @@
}
.fig-loop(6);
/*___ numéro XX ___*/
// ___ COULISSES DU WEB ___
//___ background page ___
.page-background{
// background
.fond{
background-color: #056dea;
z-index: 0;
}
// title
// titres
header{
color: white;
}
// no page num
// retirer num page / titres courants
.no-footer(1);
.no-footer(2);
//___ colors ___
.fond1 {
// couleurs
.c1 {
background-color: #d5f8ff;
}
.fond2 {
.c2 {
background-color: purple;
}
.fond3 {
.c3 {
background-color: #FF754E;
}
.fond4 {
background-color: #fded08ff;
}
.fond5 {
.c4 {
background-color: #FF69B4;
}
......
......@@ -16,11 +16,9 @@
<div class="sheet">
<div class="page">
<div class="main">
<!-- titres -->
<div class="bloc x0 t-1 w6 flow-slug"></div>
<div class="bloc x0 y0 w6 flow-title" style="margin-top: 12pt;"></div>
<div class="bloc x0 t3 w6 h2 flow-lead"></div>
<!-- colones -->
<div class="bloc x0 y4 w3 b0 flow-main rule--right" style="margin-top: -24pt;"></div>
<div class="bloc x3 y4 w3 b0 flow-main" style="margin-top: -24pt;"></div>
<div class="bloc x6 y0 w3 b0 flow-main rule--left" style="margin-top: 36pt;"></div>
......@@ -31,9 +29,7 @@
<div class="sheet">
<div class="page">
<div class="main">
<!-- illus -->
<div class="bloc x0 y0 w6 b0 flow-fig1" style="margin-top: 36pt;"></div>
<!-- colones -->
<div class="bloc x6 y0 w3 b0 flow-main rule--left" style="margin-top: 36pt"></div>
</div>
</div>
......@@ -42,7 +38,6 @@
<div class="sheet">
<div class="page">
<div class="main">
<!-- colones -->
<div class="bloc x0 y0 w3 b0 flow-main" style="margin-top: 36pt;"></div>
<div class="bloc x3 y0 w3 b0 flow-main rule--left" style="margin-top: 36pt"></div>
<div class="bloc x6 y0 w3 b0 flow-main rule--left" style="margin-top: 36pt"></div>
......
......@@ -37,7 +37,3 @@
/*___ numéro XX ___*/
/*
YOUR CSS HERE
*/
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