Commit 0eaaedcf authored by Dorian's avatar Dorian
Browse files

layout recit

parent bd8e606a
......@@ -15,19 +15,17 @@ Cette maquette est un fork du numéro 21, cleanée et restructurée.
* nombril: in nombril style (?)
* fonts dans chaque dossier de layout individuel
TODO-global:
TODO:
* script pullout.js fonctionnel
* clean lettrine
* 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 texte qui va pas jusqu'a la fin de la colonne
* edito: hide headlines?
* color palettes
* enquete, flammand: correction du corps de texte qui va pas jusqu’à la fin de la colonne
* add custom color palettes?
TODO-layout:
* recit
* portofolio
* portfolio
* portrait
* sommaire
......@@ -37,6 +35,7 @@ DONE-layout:
* enquete-short
* entretien
* nombril
* recit
* rubric
* rubric-jouer
* rubric-web
......
......@@ -47,20 +47,20 @@
.entretien .lead p + p {
text-indent: @line-height;
}
.entretien .lead::first-letter {
font-family: 'career';
font-size: 60pt;
line-height: @line-height * 2.2;
position: relative;
float: left;
height: 31.4pt;
padding-top: 12.5pt;
padding-right: 8pt;
padding-bottom: 5pt;
}
// .entretien .body p:first-of-type::first-letter{
// font-family: 'career';
// font-size: 60pt;
// line-height: @line-height * 2.2;
//
// position: relative;
//
// float: left;
//
// height: 31.4pt;
// padding-top: 12.5pt;
// padding-right: 8pt;
// padding-bottom: 5pt;
// }
.entretien .body {
line-height: 12pt;
......
......@@ -10,113 +10,83 @@
</head>
<body>
<!-- PAGES -->
<div id="pages">
<div class="sheet">
<div class="page">
<!-- PAGE-1 -->
<div class="main">
<div class="bloc t-1 r-1 b-1 l-1 orange"></div>
<div class="bloc l-1 t-1 r-1 flow-header-byline"></div>
<div class="bloc x0 t-1 w6 flow-slug"></div>
<!-- PAGES -->
<div id="pages">
<div class="sheet">
<div class="page">
<!-- PAGE-1 -->
<div class="main">
<div class="bloc x0 t-1 w6 flow-slug"></div>
<div class="bloc x0 y1 w5 h4 flow-headline"></div>
<div class="bloc x0 y5 w5 h1 flow-header-byline"></div>
<div class="bloc l0 b0 w5 h3 flow-lead"></div>
<div class="bloc x5 y0 w5 b0 flow-fig3"></div>
</div>
</div>
</div>
<img src="img/titre2.svg" style="margin-top:-20pt;" class="bloc x0 y1 w6 h6 titre" />
<div class="bloc x0 b0 w6 flow-lead" style="margin: 0pt 0pt -16pt 0pt;"></div>
<!--
-->
<!-- <div class="bloc r-1 l8 t5 w9 h6 fond3" style="width: 629px;margin: -12pt 0 0 18pt;"></div> -->
<!-- <div class="bloc x0 y2 w9 h6 flow-fig5" style="margin:0 0 0 0;"></div> -->
<div class="sheet">
<div class="page">
<!-- PAGE-2 -->
<div class="main">
<div class="bloc x1 y0 w4 b0 flow-main"></div>
<div class="bloc x5 y0 w4 b0 flow-main"></div>
</div>
</div>
</div>
<div class="bloc l0 r-1 b17 t2 fond1" style="bottom: 400pt; top: 37pt;"></div>
<div class="bloc l0 r-1 b8 t8 fond3" style="top: 175pt"></div>
<div class="bloc l0 r-1 b0 t16 fond5" style="top: 387pt"></div>
</div>
</div>
</div>
<div class="sheet">
<div class="page">
<!-- PAGE-2 -->
<div class="main">
<div class="bloc t-1 r-1 b-1 l-1 orange"></div>
<div class="sheet">
<div class="page">
<!-- PAGE-3 -->
<div class="main">
<div class="bloc x1 y0 w4 b0 flow-main"></div>
<div class="bloc x5 y0 w4 b0 flow-main"></div>
</div>
</div>
</div>
<!-- <div class="bloc l0 t0 r0 w9 h4 fond2" style=""></div> -->
<!-- <div class="bloc l-1 r0 t5 h6 fond4" style=""></div> -->
<div style="font-family:'Alfphabet';font-size:7pt; transform: rotate(270deg);margin-right: -8pt;margin-top: -55px;>"class="bloc l18 t23 r-1 b4">© Walthéry/Dupuis, 2020.</div>
<div class="bloc l-1 r0 b17 t2 fond2" style="bottom: 400pt; top: 37pt;"></div>
<div class="bloc l-1 r0 b8 t8 fond4" style="top: 175pt"></div>
<div class="bloc l-1 r0 b0 t16 fond6" style="top: 387pt"></div>
<!-- <div class="bloc x3 y8 w6 b0 flow-lead" style="margin:-28pt 0 0 12pt;"></div> -->
</div>
</div>
</div>
<div class="sheet">
<div class="page">
<!-- PAGE-3 -->
<div class="main">
<!-- <div class="bloc r-1 t-1 w6 h6 fond7" style="padding:100pt 0 0 0; margin:0 -32pt 0 12pt;"></div> -->
<div class="bloc r-1 t-1 l10 b9 flow-fig6"></div>
<div class="bloc x1 y2 w4 b0 flow-main" style="margin:24pt 0 -12pt 0;"></div>
<div class="bloc x5 y7 w4 b0 flow-main" style="margin:12pt 0 -12pt 0;"></div>
</div>
</div>
</div>
<div class="sheet">
<div class="page">
<!-- PAGE-4 -->
<div class="main">
<!-- <div class="bloc r-1 l9 t-1 w6 h8 fond8" style="margin:0 0 -12pt 6pt;"></div> -->
<div class="bloc r-1 t-1 l10 b9 flow-fig7"></div>
<div class="bloc x1 y0 w4 b0 flow-main" style="margin-bottom:-12pt;"></div>
<div class="bloc x5 y7 w4 b0 flow-main" style="margin:12pt 0 -12pt 0;"></div>
</div>
</div>
</div>
<div class="sheet">
<div class="page">
<!-- PAGE-5 -->
<div class="main">
<!-- <div class="bloc x0 t0 w9 h6 flow-fig6" style="margin: -6pt 0 0 0;"></div> -->
<div class="bloc x0 y0 w9 h6 flow-fig8" style="height: 240.8pt"></div>
<div class="bloc x1 y5 w4 b0 flow-main" style="margin:24pt 0 -12pt 0;"></div>
<div class="bloc x5 y5 w4 b0 flow-main" style="margin:24pt 0 -12pt 0;"></div>
</div>
</div>
</div>
<div class="sheet">
<div class="page">
<!-- PAGE-6 -->
<div class="main">
<!-- <div class="bloc x5 t10 w5 h11 fond9" style="margin:12pt 0 -12pt 0;"></div> -->
<div class="bloc l10 t9 r-1 b-1 flow-fig9" style=""></div>
<div class="bloc x1 y0 w4 b0 flow-main" style="margin:0pt 0 -12pt 0;"></div>
<div class="bloc x5 y0 w4 b14 flow-main" style="margin-bottom:24pt;"></div>
</div>
</div>
</div>
<div class="sheet">
<div class="page">
<!-- PAGE-4 -->
<div class="main">
<div class="bloc x0 y0 w5 b0 flow-fig2"></div>
</div>
</div>
</div>
<div class="sheet">
<div class="page">
<!-- PAGE-7 -->
<div class="main">
<div class="bloc r8 b8 l-1 t-1 fond11" style=""></div>
<div class="bloc x1 y8 w4 b0 flow-main" style="margin: 12pt 0 -12pt 0;"></div>
<div class="bloc x5 t0 w4 b0 flow-main" style="margin:0 0 -12pt 0;"></div>
</div>
</div>
</div>
<div class="sheet">
<div class="page">
<!-- PAGE-8 -->
<div class="main">
<div class="bloc l10 t11 r0 b0 flow-fig10" style=""></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>
</div>
<div class="sheet">
<div class="page">
<!-- PAGE-5 -->
<div class="main">
<div class="bloc x1 y0 w4 b0 flow-main"></div>
<div class="bloc x5 y0 w4 b0 flow-main"></div>
</div>
</div>
</div>
<div class="sheet">
<div class="page">
<!-- PAGE-6 -->
<div class="main">
<div class="bloc x1 y0 w4 b0 flow-main"></div>
<div class="bloc x5 y0 w4 b0 flow-main"></div>
</div>
</div>
</div>
<div class="sheet">
<div class="page">
<!-- PAGE-7 -->
<div class="main">
<div class="bloc x0 y0 w5 b0 flow-fig1"></div>
<div class="bloc x5 y0 w4 b0 flow-main"></div>
</div>
</div>
</div>
</div>
<div id="stories">
<art id="flow-main" class="enquete" folio="36" src="https://medor.coop/api/v2/pages/712/?draft=true&image_preview=true"></art>
<art id="flow-main" class="recit" folio="1" src="https://medor.coop/api/v2/pages/96/?draft=true&image_preview=true"></art>
</div>
<!-- JAVASCRIPT -->
......@@ -125,7 +95,7 @@
<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="../../js/pullout.js"></script>
<script src="main.js"></script>
</body>
......
......@@ -23,228 +23,29 @@
#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);
}
.fig-loop(17);
/*custom*/
html.facing .sheet:nth-child(2) .main:before,
html.facing .sheet:nth-child(2) .main:after {
display: none;
}
.orange {
background-color: darkorange;
}
.cartouche.blanc {
background-color: #fff;
}
.cartouche.bleu {
background-color: deepskyblue;
}
.rubric-title {
background-color: #fff;
}
// figure img {
// object-fit: contain;
// }
.header-byline br {
display: none;
}
.body > p:nth-of-type(1) {
text-indent: 0 !important;
}
.body > p:nth-of-type(1)::first-letter{
font-family: 'Pressuru';
font-size: 42pt;
line-height: 50pt;
position: relative;
margin-top: 0px;
float: left;
height: 36pt;
padding-right: 12px;
margin-left: 12px;
letter-spacing: 0pt !important;
}
.enquete .pull-out {
/*color: #527272ff;*/
font-family:"pressuru";
letter-spacing: 0.5pt;
}
// .enquete .pull-out:nth-of-type(1) {
// margin: 16pt 0 16pt -47.66666667pt;
// }
.enquete .pull-out:nth-of-type(2) {
display: none;
}
/*double entrée*/
.fond1, .fond2 {
background: url('https://medor.coop/media/images/entree-1.original.png');
background-size: cover;
}
.fond3, .fond4 {
background: url('https://medor.coop/media/images/entree-2.original.png');
background-size: cover;
background-repeat: no-repeat;
}
.fond5, .fond6 {
background: url('https://medor.coop/media/images/entree-3.original.png');
background-size: cover;
// background-size: 150%;
// background-repeat: no-repeat;
}
.fond1, .fond3 {
background-position: top left;
}
.fond1 {
background-position: 287pt 0pt;
background-repeat: no-repeat;
}
.fond3 {
background-position: 287pt 0pt;
background-repeat: no-repeat;
#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(8); //number of figs
.fond5 {
background-position: 287pt 0pt;
background-repeat: no-repeat;
}
.fond2, .fond4, .fond6 {
background-position: top right;
}
.flow-main figure:nth-of-type(5) {
width: 100%;
height: 100%;
object-fit:contain;
}
/*p3*/
.fond7 {
background: url('https://medor.coop/media/images/cracher.original.jpg');
background-size: 170%;
background-repeat: no-repeat;
background-position: bottom left;
}
/*p4*/
.fond8 {
background: url('https://medor.coop/media/images/surprise-1.original.jpg');
background-size: 185%;
background-repeat: no-repeat;
background-position: 100% 20%;
}
/*p6*/
.fond9, .fond10 {
background: url('https://medor.coop/media/images/sortie-3.original.jpg');
background-size: auto 100%;
background-repeat: no-repeat;
background-position: bottom left;
}
.fond10 {
background-position: 200% 120%;
}
.fond11 {
outline: 3px solid black;
background: url('https://medor.coop/media/images/scan_18_cErpBhm.max-600x600.jpegquality-60.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: bottom right;
}
figure:nth-of-type(6) img {
object-position: bottom left;
width: 175%;
}
figure:nth-of-type(7) img {
width: 200%;
object-position: -160pt 0pt;
}
figure:nth-of-type(8) img {
object-fit: contain;
object-position: top left;
}
figure:nth-of-type(9) img {
object-position: top left;
}
figure:nth-of-type(10) img {
object-fit: contain;
// object-position: top left;
}
[class*="flow-fig"] {
outline: 3px solid black;
}
[class*="flow-fig10"] {
outline: 0px solid black;
}
.header-byline {
background-color: deepskyblue;
padding: 0pt 0pt 0pt 0pt;
border-top: 2pt solid white;
border-bottom: 2pt solid white;
margin-top: 17pt;
padding-left: 84pt;
padding-top: 2pt;
padding-bottom: 2pt;
}
.enquete .body blockquote sup {
font-size: .75em;
line-height: 0;
padding-left: .125em;
vertical-align: 0.33em;
}
figcaption footer {
visibility: hidden;
//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(1); //number of footnotes
.enquete .pull-out > blockquote > div > p {
line-height: 20pt;
}
.enquete .pull-out {
// margin: 0pt 0 0pt -47.66666667pt;
/*___ numéro XX ___*/
figure img{
object-fit: contain;
}
aside.pull-out {
margin-top: 18pt !important;
margin-bottom: 16pt !important;
}
.pull-out-out(1);
.pull-out-out(2);
.pull-out-out(3);
.pull-out-out(4);
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