Commit df8cf1fb authored by Dorian's avatar Dorian
Browse files

layout grande enquete

parent 0a43ff0d
......@@ -268,11 +268,11 @@ Pour ajuster ces marges on a besoin d'utiliser un ```!important;``` et de traite
}
```
### Déborder sur la colone vide de gauche
### Déborder sur la colonne vide de gauche
```CSS
.enquete .pull-out:nth-of-type(3){
margin-left: -42pt; /* la largeur d'une colone de la grille */
.enquete aside.pull-out:nth-of-type(3) {
margin-left: -@col-gutter-width; /* la largeur d'une colone de la grille */
}
```
......@@ -362,20 +362,18 @@ add_br_at(5);
### Lettrine
Un exemple de lettrine. [a vérifier comment le faire proprement]
Un exemple de lettrine.
Noter que pas beaucoup de propriétés fonctionne sur ce pseudo-élément, par exemple ```position:relative``` ne fonctionne pas.
```CSS
.recit .body > p:nth-of-type(1)::first-letter{
.enquete .body > p:nth-of-type(1)::first-letter{
@lettrine-height: 3;
font-family: 'Erbarre';
font-weight: bold;
font-size: @lettrine-height * @line-height *(6/5);
line-height: @lettrine-height * @line-height *(6/5);
height: @lettrine-height * @line-height;
float: left;
font-family: 'Alfphabet-Extended' !important;
font-size: 42pt;
line-height: 1em;
letter-spacing: 0pt !important;
padding-right: .1em;
position: relative;
margin-top: -10pt;
margin-left: -2pt;
}
```
......
......@@ -365,9 +365,10 @@ aside.sidebar span, aside.sidebar strong {
letter-spacing: .002em;
}
.sidebar h1 {
.sidebar h1, h2, h3, h4 {
font-family: 'Alfphabet' ;
font-size: 14pt;
line-height: 16pt;
text-transform: uppercase;
margin-top: 6pt;
}
......@@ -726,6 +727,7 @@ aside.sidebar span, aside.sidebar strong {
}
.enquete .headline {
font-size: 36pt;
margin: (@line-height * .5) 0 @line-height;
}
......@@ -760,19 +762,19 @@ aside.sidebar span, aside.sidebar strong {
-webkit-hyphenate-limit-lines: 4; /* 4 lignes consecutives max */
}
// .enquete .body > p:first-child::first-letter {
// font-family: 'Erbarre';
// font-weight: bold;
// /* -webkit-initial-letter: 5; */
// /* padding-right: 1em; */
// font-size: @line-height * 6.6;
// line-height: @line-height * 4.9;
// position: relative;
// top: .6em;
// float: left;
// height: @line-height * 5;
// padding-right: .1em;
// }
// Noter que pas beaucoup de propriétés fonctionne sur ce pseudo-élément,
// par exemple position:relative ne fonctionne pas.
// see: https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter#Summary
.enquete .body > p:nth-of-type(1)::first-letter{
font-family: 'Erbarre';
font-weight: bold;
font-size: 3 * @line-height *(6/5);
line-height: 3 * @line-height *(6/5);
height: 3 * @line-height;
float: left;
padding-right: .1em;
}
.enquete .body > h2 {
font: bold @line-height/@line-height 'Erbarre';
......@@ -801,7 +803,6 @@ aside.sidebar span, aside.sidebar strong {
.enquete .pull-out {
font-family: 'Erbarre';
margin: (@line-height * 2) 0 (@line-height * 2) -@col-gutter-width;
}
......
<!DOCTYPE HTML>
<html lang="fr" class="normal facing">
<head>
<meta charset="utf-8">
<title>Enquête type</title>
<script src="../../vendors/modernizr-custom.js"></script>
<link rel="stylesheet" href="../../vendors/reset.css">
<link rel="stylesheet" href="../../vendors/normalize-opentype.css">
<link rel="stylesheet" href="styles.less" type="text/less">
</head>
<body>
<!-- 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 x1 y7 w8 flow-headline" ></div>
<div class="bloc x1 y7 w8 flow-subhead"></div>
<div class="bloc x1 y10 w5 flow-header-byline"></div>
<div class="bloc t-1 b-1 r-1 l-1 fond1"></div>
</div>
</div>
</div>
<div class="sheet">
<div class="page">
<!-- PAGE-2 -->
<div class="main">
<div class="bloc l-1 t-1 b-1 r-1 fond2"></div>
</div>
</div>
</div>
<div class="sheet">
<div class="page">
<!-- PAGE-3 -->
<div class="main">
<div class="bloc x0 y0 w8 flow-lead"></div>
<div class="bloc x1 y5 w4 b0 flow-main"></div>
<div class="bloc x5 y5 w4 b0 flow-main"></div>
<div class="bloc x0 t16 w1 flow-fn1"></div>
</div>
</div>
</div>
<div class="sheet">
<div class="page">
<!-- PAGE-4 -->
<div class="main">
<div class="bloc x1 y0 w4 b0 flow-main"></div>
<div class="bloc x5 y0 w4 b0 flow-main"></div>
<div class="bloc x0 t9 w1 flow-fn2"></div>
</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 t-1 l-1 b11 r-1 flow-fig3"></div>
<div class="bloc x1 t13 w4 b0 flow-main"></div>
<div class="bloc x5 t13 w4 b0 flow-main"></div>
</div>
</div>
</div>
<div class="sheet">
<div class="page">
<!-- PAGE-7 -->
<div class="main">
<div class="bloc x1 y8 w4 b0 flow-main"></div>
<div class="bloc x5 y0 w4 b0 flow-main"></div>
<div class="bloc t-1 l-1 r8 h9 flow-fig4"></div>
</div>
</div>
</div>
<div class="sheet">
<div class="page">
<!-- PAGE-8 -->
<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>
<div id="stories">
<art id="flow-main" class="enquete" folio="0" src="https://medor.coop/api/v2/pages/711/?draft=true&image_preview=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="../../js/stories.new.js"></script>
<script src="../../js/pullout.js"></script>
<script src="main.js"></script>
</body>
</html>
<!DOCTYPE HTML>
<html lang="fr" class="normal facing">
<head>
<meta charset="utf-8">
<title>Enquête type</title>
<script src="../../vendors/modernizr-custom.js"></script>
<link rel="stylesheet" href="../../vendors/reset.css">
<link rel="stylesheet" href="../../vendors/normalize-opentype.css">
<link rel="stylesheet" href="styles.less" type="text/less">
</head>
<body>
<!-- PAGES -->
<div id="pages">
<div class="sheet">
<div class="page">
<!-- 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>
</div>
</div>
<div class="sheet">
<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>
</div>
</div>
<div class="sheet">
<div class="page">
<!-- PAGE-3 -->
<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>
</div>
</div>
<div class="sheet">
<div class="page">
<!-- PAGE-4 -->
<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-5 -->
<div class="main">
<div class="bloc l-1 y0 r8 b-1 flow-fig3"></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">
<!-- encadre -->
<div class="bloc l0 t15 r0 b0 fond-sidebar"></div>
<div class="bloc l0 t16 walf b0 flow-sidebar1"></div>
<div class="bloc r0 t16 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>
</div>
</div>
<div class="sheet">
<div class="page">
<!-- PAGE-7 -->
<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-8 -->
<div class="main">
<div class="bloc l-1 t15 r-1 b-1 flow-fig4"></div>
<div class="bloc x1 y0 w4 b7 flow-main"></div>
<div class="bloc x5 y0 w4 b7 flow-main"></div>
</div>
</div>
</div>
<div class="sheet">
<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>
</div>
</div>
</div>
<div class="sheet">
<div class="page">
<!-- PAGE-10 -->
<div class="main">
<div class="bloc x4 y5 w5 h8 flow-fig5"></div>
<div class="bloc x1 y0 w4 h6 flow-main"></div>
<div class="bloc x1 y6 r9 b0 flow-main"></div>
<div class="bloc x5 y0 w4 b13 flow-main"></div>
</div>
</div>
</div>
<div class="sheet">
<div class="page">
<!-- PAGE-11 -->
<div class="main">
<div class="bloc x4 y4 w6 b0 flow-fig6"></div>
<div class="bloc x1 y0 w4 b0 flow-main"></div>
<div class="bloc x5 y0 w4 h4 flow-main"></div>
</div>
</div>
</div>
<div class="sheet">
<div class="page">
<!-- PAGE-12 -->
<div class="main">
<div class="bloc x1 y0 w4 b2 flow-main" ></div>
<div class="bloc x5 y0 w4 b8 flow-main" ></div>
</div>
</div>
</div>
</div>
<div id="stories">
<art id="flow-main" class="enquete" folio="1" src="https://medor.coop/api/v2/pages/328/?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="../../js/stories.new.js"></script>
<script src="../../js/pullout.js"></script>
<script src="main.js"></script>
</body>
</html>
......@@ -9,4 +9,13 @@ document.addEventListener("OnStoryReady", function(){
// breack title after second word
// add_br_at(2);
function add_subhead(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);
});
......@@ -23,38 +23,42 @@
#flow-main aside:nth-of-type(12) { .flow-into(flow-intermede); }
.flow-intermede { .flow-from(flow-intermede); }
//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(6);
.fig-loop(8); //number of figs
//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(2);
.fn-loop(2); //number of footnotes
/*___ numéro XX ___*/
// titres
.enquete .headline{
font-size: 50pt;
}
.enquete .subhead{
font-size: 20pt;
// ENCADRE
.sidebar-loop (@i) when (@i > 0) {
#flow-main aside.sidebar:nth-of-type(@{i}) { .flow-into(~"flow-sidebar@{i}"); }
.flow-sidebar@{i} { .flow-from(~"flow-sidebar@{i}"); }
.sidebar-loop(@i - 1);
}
.sidebar-loop(4);
/*___ numéro XX ___*/
// image en double
@fond_decal_top: 0pt;
@fond_decal_left: 0pt;
@fond_decal_left: -48pt;
.fond1, .fond2 {
background-image: url('');
background-image: url('https://medor.coop/media/images/page-titre-steiner-avec-nuage-krita.original.jpg');
background-repeat: no-repeat;
background-size: auto 100%;
background-size: 207%;
z-index: 0;
}
.fond1 {
......@@ -64,7 +68,39 @@
background-position: -@page-width+@fond_decal_left @fond_decal_top;
}
// crédits images
figure figcaption{
// titres à custom
@font-face {
font-family: '';
src: url('');
}
.enquete h1.headline {
}
.enquete h2.subhead {
}
.enquete p.header-byline {
}
// basic correction
.rubric-title {
background-color: white;
}
figure footer {
display: none;
}
.no-footer(1);
.no-footer(2);
.no-footer(7);
.enquete .pull-out:nth-of-type(2) {
margin-left: 0;
}
// example de fonds d'encadré
.fond-sidebar {
background-color: #4ff86b;
outline: 12pt solid #4ff86b;
}
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