Commit aa55d8fb authored by Dorian's avatar Dorian
Browse files

layout moment flamand

parent 8bb87429
......@@ -8,15 +8,35 @@ Cette maquette est un fork du numéro 21, cleanée et restructurée.
* une cheatsheet qui documente un pannel de bug et tricks
* coulisse du web en classes permanentes
* un script .js pour ajouter des sauts de lignes dans les titres
* un mini template pour couper une image sur deux pages en taille et translation custom
* les styles css separés
* un template pour couper une image sur deux pages en taille et translation custom
* les styles css des layouts en fichiers separés
TODO:
TODO-global:
* une mixin function pour sortir/rentrer les exergues
* correction du texte qui va pas jusqu'au bout de la colone pour les enquetes
* sidebar title on two lines makes text un-aligned
* top column h2 on enquete makes text un-aligned
* top column h2 on enquete/rubric makes text un-aligned
* clean lettrine
* color palettes
* schéma de construction de la grille
* grouper toutes les variables
TODO-layout:
* edito
* entretien
* short-enquete
* nombril
* portofolio
* portrait
* recit
* sommaire
DONE-layout:
* rubric
* rubric-jouer
* rubric-web
* long-enquete
* moment-flamand
### Pre-requisites
......
......@@ -2,11 +2,6 @@
* Styles Moment flamand
*/
.flamand {
font: 9pt/@line-height 'Century Schoolbook';
position: relative;
}
.flamand .headline,
.flamand .subhead {
font-family: 'Bagnard';
......@@ -64,6 +59,7 @@
}
.flamand .body > p {
font: 9pt/@line-height 'Century Schoolbook';
-webkit-hyphens: auto;
-webkit-hyphenate-limit-before: 2; /* 2 caractères minimum en fin de ligne, donc en début de mot */
-webkit-hyphenate-limit-after: 3; /* 3 caractères minimum en début de ligne, donc en fin de mot */
......
......@@ -17,8 +17,8 @@
<div class="sheet">
<div class="page">
<div class="main">
<div class="bloc t-1 b-1 l-1 r-1 fond1"></div>
<div class="bloc x0 t-1 w6 flow-slug"></div>
<div class="bloc t-1 b-1 l-1 r-1 fond1"></div>
</div>
</div>
</div>
......@@ -27,9 +27,9 @@
<div class="sheet">
<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"></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>
</div>
</div>
......@@ -107,7 +107,7 @@
<div id="stories">
<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>
<art id="flow-main" class="flamand" folio="1" rubric-subtitle="Le meilleur de la presse du Nord" src="https://medor.coop/api/v2/pages/771/?draft=true"></art>
</div>
<!-- JAVASCRIPT -->
......
......@@ -14,6 +14,10 @@
#flow-main .header-byline { .flow-into(flow-header-byline); }
.flow-header-byline { .flow-from(flow-header-byline); }
#flow-main { .flow-into(flow-main); }
.flow-main { .flow-from(flow-main); }
// 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}"); }
......@@ -21,13 +25,7 @@
}
.fig-loop(11);
#flow-main { .flow-into(flow-main); }
.flow-main { .flow-from(flow-main); }
#flow-sidebar1 .headline { .flow-into(flow-headline); }
.flow-headline { .flow-from(flow-headline); }
// footnotes
// 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}"); }
......@@ -37,11 +35,6 @@
/*___ numéro XX ___*/
.flamand .headline{
}
.flamand .header-byline {
}
// image en double
@fond_decal_top: 0pt;
@fond_decal_left: 0pt;
......@@ -58,3 +51,16 @@
.fond2 {
background-position: -@page-width+@fond_decal_left @fond_decal_top;
}
// titres à custom
@font-face {
font-family: '';
src: url('');
}
.flamand h1.headline {
}
.flamand h2.subhead {
}
.flamand p.header-byline {
}
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