Commit 950972c4 authored by Dorian's avatar Dorian
Browse files

layout portrait

parent fb07a0df
......@@ -75,9 +75,9 @@
text-indent: 9pt;
}
// .portrait .body > p:first-child::first-letter {
// .portrait .body > p:first-of-type::first-letter {
// font-family: 'Erbarre';header
// font-size: 41.9pt;
// font-size: 41.9pt !important;
// font-weight: bold;
// line-height: 38pt;
//
......
......@@ -20,8 +20,6 @@
* nombril de medor VERIF
* soutenir medor
* couv
NEW IN MEDOR 0:
* web
*/
......
......@@ -52,6 +52,8 @@
background: red;
z-index: 0;
}
// retirer num page / titres courants
.no-footer(1);
// titres à custom
@font-face {
......@@ -69,6 +71,3 @@
// rentrer l'exergue
.pull-out-in(4);
// retirer num page / titres courants
.no-footer(1);
......@@ -17,9 +17,9 @@
<div class="sheet">
<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 fond"></div>
</div>
<div class="bloc x0 t-1 w6 flow-slug"></div>
<div class="bloc t-1 b-1 l-1 r-1 fond"></div>
</div>
</div>
</div>
......@@ -27,23 +27,24 @@
<div class="sheet">
<div class="page">
<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 fond"></div>
</div>
<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 fond"></div>
</div>
</div>
</div>
<!-- Page 3 -->
<div class="sheet">
<div class="page">
<div class="main">
<div class="bloc x0 y0 w7 flow-lead"></div>
<div class="bloc x1 y6 w4 b0 flow-main"></div>
<div class="bloc x5 y6 w4 b0 flow-main"></div>
</div>
</div>
</div>
<!-- Page 4 -->
<div class="sheet">
<div class="page">
......@@ -53,6 +54,7 @@
</div>
</div>
</div>
<!-- Page 5 -->
<div class="sheet">
<div class="page">
......@@ -102,7 +104,7 @@
</div>
</div>
</div>
</div>
......
......@@ -55,6 +55,7 @@
}
// sortir les exergues
.pull-out-out(1);
.pull-out-out(3);
// retirer num page / titres courants
......
......@@ -45,9 +45,9 @@
// image en double
.fond{
background-image: url('https://medor.coop/media/images/portfolioweb-1.original.jpg');
background-size: 150%;
background-size: auto 100%;
}
.double(".fond", 2cm, 5cm);
.double(".fond", 0cm, 0cm);
// retirer num page / titres courants
.no-footer(1);
......
......@@ -16,27 +16,21 @@
<div class="page">
<!-- PAGE-1 -->
<div class="main">
<div class="bloc x0 y0 w13 r-1 flow-headline" style="margin-left:0pt;margin-top:36pt; padding-right:-12pt;"></div>
<!-- <div class="bloc x-1 y8 h2 w3 flow-figcap1" style="margin-left:-140pt;"></div> -->
<!-- <div class="bloc l-1 t-1 r-1 b-1 gradient"></div> -->
<div class="bloc t-1 r-1 b-1 l-1 fond2" style="margin:12pt;"></div>
<div class="bloc x0 t-1 w6 flow-slug"></div>
<div class="bloc x1 y3 w9 flow-subhead"style="margin-top:48pt; margin-left:12pt;"></div>
<div class="bloc x1 y10 w5 flow-header-byline" style="margin-top:-12pt;"></div>
<div class="bloc x0 t-1 w6 flow-slug"></div>
<div class="bloc x0 y0 w13 r-1 flow-headline"></div>
<div class="bloc x0 y1 w9 flow-subhead"></div>
<div class="bloc x1 y9 w5 flow-header-byline"></div>
<div class="bloc t-1 r-1 b-1 l-1 fond-intro"></div>
</div>
</div>
</div>
<div class="sheet">
<div class="page">
<!-- PAGE-2 -->
<div class="main">
<div class="bloc l-1 y10 h2 w2 flow-figcap1" style="margin-left:-67pt;"></div>
<div class="bloc x0 y0 w8 flow-lead" style=""></div>
<div class="bloc x1 y4 w4 b0 flow-main" style="margin:24pt 0 -12pt 0;"></div>
<div class="bloc x5 y4 w4 b0 flow-main" style="margin:36pt 0 -12pt 0;"></div>
<div class="main">
<div class="bloc x0 y0 w8 flow-lead"></div>
<div class="bloc x1 y4 w4 b0 flow-main"></div>
<div class="bloc x5 y4 w4 b0 flow-main"></div>
</div>
</div>
</div>
......@@ -44,9 +38,8 @@
<div class="page">
<!-- PAGE-3 -->
<div class="main">
<div class="bloc x1 y0 w4 b0 flow-main" style="margin:0pt 0 -12pt 0;"></div>
<div class="bloc x5 y0 w4 b0 flow-main" style="margin:0pt 0 -12pt 0;"></div>
<div class="bloc x1 y0 w4 b0 flow-main"></div>
<div class="bloc x5 y0 w4 b0 flow-main"></div>
</div>
</div>
</div>
......@@ -54,13 +47,9 @@
<div class="page">
<!-- PAGE-4 -->
<div class="main">
<div class="bloc x3 y3 h2 w2 flow-figcap2" style="margin-left:-9pt; margin-top:14pt;"></div>
<div class="bloc t-1 r8 b13 l-1 fond1" style="margin-top:14pt; margin-bottom:-6pt;"></div>
<div class="bloc x1 y5 w4 b0 flow-main" style="margin:12pt 0 -12pt 0;"></div>
<div class="bloc x5 y0 w4 b0 flow-main" style="margin:0pt 0 -12pt 0;"></div>
<div class="bloc x0 y5 w1 h1 flow-fn1" style="margin-top:40pt;"></div>
<div class="bloc t-1 r8 b13 l-1 flow-fig3"></div>
<div class="bloc x1 y5 w4 b0 flow-main"></div>
<div class="bloc x5 y0 w4 b0 flow-main"></div>
</div>
</div>
</div>
......@@ -68,12 +57,9 @@
<div class="page">
<!-- PAGE-5 -->
<div class="main">
<!-- <div class="bloc l-1 t-1 b10 r8 fond2" style="margin-top:12pt;"></div> -->
<div class="bloc l-1 y7 b-1 r0 fond3" style="margin-top:-12pt; margin-left:0pt; margin-bottom:12pt;"></div>
<div class="bloc x7 y7 h2 w2 flow-figcap3" style="margin-left:0pt; margin-top:-12pt;"></div>
<div class="bloc x1 y0 w4 b10 flow-main" style="margin:0pt 0 24pt 0pt;"></div>
<div class="bloc x5 y0 w4 b10 flow-main" style="margin:0pt 0 24pt 0pt;"></div>
<div class="bloc l-1 y7 b-1 r0 flow-fig2"></div>
<div class="bloc x1 y0 w4 b10 flow-main"></div>
<div class="bloc x5 y0 w4 b10 flow-main"></div>
</div>
</div>
</div>
......@@ -81,20 +67,16 @@
<div class="page">
<!-- PAGE-6 -->
<div class="main">
<!-- <div class="bloc l-1 y10 b-1 r8 fond4" style="margin-top:-36pt;"></div> -->
<div class="bloc x1 t0 w4 b0 flow-main" style="margin:0pt 0 -12pt 0;"></div>
<div class="bloc x5 t0 w4 b0 flow-main" style="margin:0pt 0 -12pt 0;"></div>
<div class="bloc x1 t0 w4 b0 flow-main"></div>
<div class="bloc x5 t0 w4 b0 flow-main"></div>
</div>
</div>
</div>
</div>
<div id="stories">
<art id="flow-main" class="enquete" folio="100" src="https://medor.coop/api/v2/pages/775/?draft=true"></art>
<art id="flow-main" class="portrait" folio="1" src="https://medor.coop/api/v2/pages/775/?draft=true"></art>
</div>
<!-- JAVASCRIPT -->
......@@ -102,5 +84,6 @@
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.js"></script>
<script src="../../js/stories.new.js"></script>
</body>
</html>
......@@ -23,143 +23,50 @@
#flow-main aside:nth-of-type(12) { .flow-into(flow-intermede); }
.flow-intermede { .flow-from(flow-intermede); }
.fn-loop (@i) when (@i > 0) {
#flow-main .footnotes li:nth-of-type(@{i}) { .flow-into(~"flow-fn@{i}"); }
.flow-fn@{i} { .flow-from(~"flow-fn@{i}"); }
.fn-loop(@i - 1);
}
.fn-loop(5);
//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(4); //number of figs
.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);
//FOOTNOTES
.fn-loop (@i) when (@i > 0) {
#flow-main .footnotes li:nth-of-type(@{i}) { .flow-into(~"flow-fn@{i}"); }
.flow-fn@{i} { .flow-from(~"flow-fn@{i}"); }
.fn-loop(@i - 1);
}
.fn-loop(5);
.fig-loopcap(17);
/*custom*/
/*___ numéro XX ___*/
.rubric-title {
color:yellow;
}
.header-byline {
color: yellow;
}
.body > p:nth-of-type(1)::first-letter{
font-family: 'feronia'!important;
font-size: 45pt;
line-height: 50pt;
// position: relative;
margin-top: -2px;
float: left;
height: 30pt;
padding-right: .2em;
margin-left: -5px;
letter-spacing: 0pt !important;
color:yellow;
}
.headline {
font-size: 85pt;
text-transform: none !important;
line-height: 0.94;
letter-spacing: 0.03em;
font-family: 'feronia'!important;
color: yellow;
overflow: visible !important;
/*
text-shadow: -12px 12px 104px grey,
-12px 12px 104px grey,
-12px 12px 104px grey;
*/
/*text-indent: -0.45em;*/
// transform:scaleY(1.025);
// fond
.fond-intro {
background-image: url('https://medor.coop/media/images/3_hQ9HhRO.original.jpg');
z-index: 0;
background-size: auto 100%;
background-position: center;
background-repeat: no-repeat;
}
.no-footer(1);
.subhead {
color: yellow;
// titres à custom
@font-face {
font-family: '';
src: url('');
}
.enquete .pull-out {
.portrait h1.headline {
color: white;
}
.enquete .pull-out:nth-of-type(4) {
// margin: 24pt 0 18pt -47.66666667pt;
.portrait h2.subhead {
color: yellow;
}
.fond3 {
background-repeat: no-repeat;
background-position: 98% 40%;
background-size: 106% ;
// z-index: 0;
.portrait p.header-byline {
color: white;
}
.fond1 {
// background-repeat: no-repeat;
// background-position: 65% 30%;
background-size: 100% ;
z-index: 0;
}
.fond1 {
background-image: url('https://medor.coop/media/images/2_MIE1i4q.original.jpg');
}
.fond3 {
background-image: url('https://medor.coop/media/images/1_Cz6smE6.original.jpg');
}
.fond2 {
background-image: url('https://medor.coop/media/images/3_hQ9HhRO.original.jpg');
background-size: 110% ;
z-index: 0;
background-position: 50% 30%;
background-repeat: no-repeat;
}
.fond4 {
background-image: url('https://medor.coop/media/images/120593504_4575213099215714_8711527859236766321_.original.jpg');
background-size: 102% ;
// z-index: 0;
background-position: 40% 30%;
background-repeat: no-repeat;
}
figcaption footer {
// visibility: hidden;
}
figcaption footer small {
// display: none;
}
// #flow-main figure:nth-of-type(1) figcaption {
// color: yellow;
// }
#flow-main p:nth-of-type(18){
text-indent: 0pt;
margin-top: 14pt !important;
}
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