Commit a6599c10 authored by Dorian's avatar Dorian
Browse files

clean flamand

parent cef88dc2
......@@ -28,8 +28,8 @@
<div class="page">
<div class="main">
<div class="bloc t-1 b-1 l-1 r-1 fond2"></div>
<div class="bloc x1 y1 r0 flow-headline" style="margin-left:-20pt; margin-top:-24pt;"></div>
<div class="bloc x1 y3 w8 flow-header-byline" style="margin-left:-18pt; margin-top: 10pt;"></div>
<div class="bloc x1 y1 r0 flow-headline"></div>
<div class="bloc x1 y3 w8 flow-header-byline"></div>
</div>
</div>
</div>
......@@ -37,10 +37,10 @@
<div class="sheet">
<div class="page">
<div class="main">
<div class="bloc x0 y0 w7 flow-lead" style=""></div>
<div class="bloc x0 y0 w7 flow-lead"></div>
<div class="bloc x1 y6 w4 b0 flow-main" style="margin-top: -23pt; margin-bottom: -10pt;"></div>
<div class="bloc x5 y6 w4 b0 flow-main" style="margin-bottom: -12pt; margin-top:-24pt;"></div>
<div class="bloc x1 y6 w4 b0 flow-main"></div>
<div class="bloc x5 y6 w4 b0 flow-main"></div>
</div>
</div>
</div>
......@@ -48,8 +48,8 @@
<div class="sheet">
<div class="page">
<div class="main">
<div class="bloc x1 y0 w4 b0 flow-main" style="margin-top: 0pt; margin-bottom: -12pt;"></div>
<div class="bloc x5 y0 w4 b0 flow-main" style="margin-top: 0pt; margin-bottom: -12pt;"></div>
<div class="bloc x1 y0 w4 b0 flow-main"></div>
<div class="bloc x5 y0 w4 b0 flow-main"></div>
</div>
</div>
</div>
......@@ -57,8 +57,8 @@
<div class="sheet">
<div class="page">
<div class="main">
<div class="bloc x1 y0 w4 b0 flow-main" style="margin-top: 1pt; margin-bottom: -12pt;"></div>
<div class="bloc x5 y0 w4 b0 flow-main" style="margin-bottom: -12pt;"></div>
<div class="bloc x1 y0 w4 b0 flow-main"></div>
<div class="bloc x5 y0 w4 b0 flow-main"></div>
</div>
</div>
</div>
......@@ -67,7 +67,7 @@
<div class="sheet">
<div class="page">
<div class="main">
<div class="bloc t-1 l-1 r-1 b-1 flow-fig2" style="margin-left:4pt;"></div>
<div class="bloc t-1 l-1 r-1 b-1 flow-fig2"></div>
</div>
</div>
</div>
......@@ -76,8 +76,8 @@
<div class="sheet">
<div class="page">
<div class="main">
<div class="bloc x1 y0 w4 b0 flow-main" style="margin-top: 0pt; margin-bottom: -12pt;"></div>
<div class="bloc x5 y0 w4 b0 flow-main" style="margin-top: 0pt; margin-bottom: -12pt;"></div>
<div class="bloc x1 y0 w4 b0 flow-main"></div>
<div class="bloc x5 y0 w4 b0 flow-main"></div>
</div>
</div>
</div>
......@@ -86,9 +86,9 @@
<div class="sheet">
<div class="page">
<div class="main">
<div class="bloc x0 y8 w1 h1 flow-fn1" style="margin-top:16pt;"></div>
<div class="bloc x1 y0 w4 b0 flow-main" style="margin-bottom: -12pt;"></div>
<div class="bloc x5 y0 w4 b0 flow-main" style="margin-bottom: -12pt;"></div>
<div class="bloc x0 y8 w1 h1 flow-fn1"></div>
<div class="bloc x1 y0 w4 b0 flow-main"></div>
<div class="bloc x5 y0 w4 b0 flow-main"></div>
</div>
</div>
</div>
......@@ -97,8 +97,8 @@
<div class="sheet">
<div class="page">
<div class="main">
<div class="bloc x1 y0 w4 b0 flow-main" style="margin-bottom: -12pt;"></div>
<div class="bloc x5 y0 w4 b0 flow-main" style="margin-bottom: -12pt;"></div>
<div class="bloc x1 y0 w4 b0 flow-main"></div>
<div class="bloc x5 y0 w4 b0 flow-main"></div>
</div>
</div>
</div>
......@@ -107,16 +107,16 @@
<div id="stories">
<art id="flow-main" class="flamand" folio="66" rubric-subtitle="Le meilleur de la presse du Nord" src="https://medor.coop/api/v2/pages/771/?draft=true"></art>
<art id="flow-main" class="flamand" folio="0" rubric-subtitle="Le meilleur de la presse du Nord" src="https://medor.coop/api/v2/pages/771/?draft=true"></art>
</div>
<!-- JAVASCRIPT -->
<script src="../../vendors/jquery-3.2.1.min.js"></script>
<script src="../../vendors/less.min.js"></script>
<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="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>
<script src="../../js/pullout.js"></script>
<script src="main.js"></script>
</body>
</html>
</body>
</html>
document.addEventListener("OnStoryReady", function(){
let elt = document.querySelector(".footer-byline")
, html = elt.innerHTML
;
elt.innerHTML = html.replace("Knak", "<em>Knak&thinsp;</em>");
let elt2 = document.querySelector(".header-byline")
, html2 = elt2.innerHTML
;
elt2.innerHTML = html2.replace("(Knak)", "(<em>Knack</em>&thinsp;)");
// *** numero 21 ***
var headline = document.querySelector(".headline");
hdl_wordlist = headline.textContent.split(" ");
hdl_wordlist[1] = "<span>" + hdl_wordlist[1] + "</span>";
headline.innerHTML = hdl_wordlist.join(" ");
function add_br_at(i){
let headline = document.querySelector(".headline");
hdl_wordlist = headline.innerHTML.split(" ");
hdl_wordlist[i] = "<br/>"+hdl_wordlist[i];
headline.innerHTML = hdl_wordlist.join(" ");
}
// breack title after second word
// add_br_at(2);
});
......@@ -35,197 +35,27 @@
}
.fn-loop(5);
// *** numero 21 ***
/*___ numéro XX ___*/
// ___ double-page d'intro - FOND ___
@fond_decal_top: 12pt;
@fond_decal_left: -8pt;
// @fond_decal_left: -36pt;
@size_factor: 200%;
.flamand .headline{
}
.flamand .header-byline {
}
//decalage de la taille d'une page (ne pas changer)
//pour que ça se rejoigne bien
// image en double
@fond_decal_top: 0pt;
@fond_decal_left: 0pt;
@page_L: -482pt;
// note: les valeur en % pour la position sont weird! ne pas les utiliser, parce que (pour haut-bas par exemple):
// 0% -> top d'image = top page
// 100% -> bas image = bas page
// donc le % n'est pas directement par rapport a la taille de l'image,
// ni directement par rapport a la taille de la page
// mais par rapport au "décalage" entre les deux (pas pratique!)
.fond1, .fond2 {
background-image: url('https://medor.coop/media/images/secheresseV1.original.jpg');
background-repeat: no-repeat;
background-size: auto 100%;
z-index: 0;
background-size: @size_factor;
}
.fond1 {
// premier chiffre en indique decal gauche-droit
// deuxieme chiffre decal haut-bas
background-position: (0+@fond_decal_left) @fond_decal_top;
background-position: @fond_decal_left @fond_decal_top;
}
.fond2 {
background-position: (@page_L+@fond_decal_left) @fond_decal_top;
}
// ___ double-page d'intro - TEXT ___
@acc_color: hsl(341, 60%, 28%);
@acc_color_2: hsl(247, 35%, 28%);
@acc_color: maroon;
.flamand .headline{
font-family: "Cobra";
font-size: 62pt;
line-height: 1.1em;
margin-top: 0pt;
letter-spacing: 0.02em;
color: @acc_color;
}
.flamand .headline > span{ //voir .js pour ajouter le span au deuxième mot
padding-left: 120pt;
}
.flamand .header-byline {
color: @acc_color_2;
margin-left: 121pt;
line-height: 15pt;
}
.rubric-title {
color: @acc_color_2;
}
.rubric-subtitle {
color: @acc_color_2;
}
.flamand .lead > p{
font-family: "Faune-Regular";
font-size: 15pt;
color: @acc_color_2;
}
.flamand .lead i{
font-family: "Faune-Italic" !important;
font-size: 15pt;
color: @acc_color_2;
}
#flow-main p:nth-of-type(8){
text-indent: 0pt;
color:red;
}
#flow-main p:nth-of-type(9){
text-indent: 12pt;
color:red;
}
#flow-main p:nth-of-type(11){
text-indent: 12pt;
color:red;
}
#flow-main p:nth-of-type(14){
text-indent: 12pt;
color:red;
}
#flow-main p:nth-of-type(26){
text-indent: 0pt;
color:red;
}
#flow-main p:nth-of-type(35){
text-indent: 12pt;
color:red;
}
//___ EXERGUES ___
/*no indent on first p*/
.flamand .body p:first-of-type {
text-indent: 0 !important;
}
//lettrine
.body > p:nth-of-type(1)::first-letter{
font-family: 'cobra'!important;
font-size: 45pt;
line-height: 50pt;
// position: relative;
margin-top: -2px;
float: left;
height: 30pt;
padding-bottom: .4em;
padding-right: .2em;
margin-left: 0px;
letter-spacing: 0pt !important;
color: @acc_color;
}
// global style
.flamand .pull-out{
font: 15pt 'Faune-Regular';
font-style: normal;
line-height: 1.1em;
margin-top: 10pt;
margin-bottom: 4pt;
color: @acc_color;
}
// faire sortir
.flamand .pull-out:nth-of-type(1),
.flamand .pull-out:nth-of-type(6),
.flamand .pull-out:nth-of-type(7),
.flamand .pull-out:nth-of-type(8){
margin-left: -42pt;
margin-right: 0;
}
.flamand .pull-out:nth-of-type(1) {
margin-top: 8pt;
// margin-bottom: 8pt;
}
.flamand .pull-out:nth-of-type(5) {
margin-top: 10pt;
margin-bottom: 8pt;
}
.flamand .pull-out:nth-of-type(6) {
margin-top: 14pt;
margin-bottom: 10pt;
}
// hide for the moment
.flamand .pull-out:nth-of-type(2){
display: none;
}
.flamand .pull-out:nth-of-type(3){
display: none;
}
.flamand .pull-out:nth-of-type(4){
display: none;
}
.flamand .pull-out:nth-of-type(8){
display: none;
}
// ___ deuxieme illus ___
figure:nth-of-type(2) > img{
object-fit: contain;
object-position: center;
margin-left: 3pt;
}
// ___ enlever les num de page et titres courant sur premiere double ___
html:not(.facing) .sheet:nth-of-type(1) .main:after, html.facing .sheet:nth-of-type(1) .main:after,
html:not(.facing) .sheet:nth-of-type(2) .main:after, html.facing .sheet:nth-of-type(2) .main:after,
html:not(.facing) .sheet:nth-of-type(2) .main:before, html.facing .sheet:nth-of-type(2) .main:before{
display: none;
background-position: @page_L+@fond_decal_left @fond_decal_top;
}
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