Commit ad331a45 authored by Dorian's avatar Dorian
Browse files

docu sur les variables

parent aa55d8fb
{
"edito": "layout/edito/index.html",
"enquete-long": "layout/enquete-long/index.html",
"enquete-short": "layout/enquete-short/index.html",
"entretien": "layout/entretien/index.html",
"long-enquete": "layout/long-enquete/index.html",
"moment-flamand": "layout/moment-flamand/index.html",
"nombril": "layout/nombril/index.html",
"portfolio": "layout/portfolio/index.html",
......
......@@ -21,26 +21,17 @@ La classe de l'élément ```art``` va appliquer un style CSS à l'entièreté de
Liste des dossiers de layout et leur classes:
* petite-enquete et grande-enquete, ```class="enquete"```. La petite a une page d'intro custom, tandis que la grande a une double page.
* enquete-long et enquete-short, ```class="enquete"```. La petite a une page d'intro custom, tandis que la grande a une double page.
* rubric, ```class="rubric"```. Le layout par défaut concerne toutes les rubriques: Aire libre, Fulguro-Point, Trait belge, L'enquêteke, Le sexe de Médor, Étude du milieu. Deux layouts un peu particuliers:
* rubric-web ```class="rubric"```. Coulisses du Web ont leur propre layout.
* rubric-jouer ```class="rubric"```. Médor à Jouer consiste le plus souvent en une double-page d'image.
* entretien, ```class="entretien"```
* recit, ```class="recit"```
* moment-flamand, ```class="flamand"```
* portrait, ```class="portrait"```
* portfolio, ```class="portfolio"```
* nombril, ```class="nombril"```
* edito, ```class="edito"```
* sommaire, ```class="sommaire"```
### Têtière
......@@ -79,6 +70,26 @@ Par exemple pour mettre un texte sur deux colonnes d'une largeur de la moitier d
<div class="bloc t0 r0 walf b0 flow-main"></div>
```
### Variables de construction de la page
Ces variables sont calculées les unes en fonction des autres et servent à construire la page et la grille.
Elle peuvent être récupérées ailleurs.
**la page**
* ```@page-width: 482pt;```
* ```@page-height: 652pt;```
**la grille**
* ```@col-gutter: 9pt;```
* ```@row-gutter: 12pt;```
* ```@col-width: 38.66666667pt```
* ```@row-height: 36pt;```
* ```@col-gutter-width: 47.66666667pt```
* ```@row-gutter-height: 48;```
**une ligne**
* ```@line-height: 12pt;```
### Note on margins
[à completer] pour utiliser ```margin-left``` il faut que le côté gauche du container soit positionner selon un certain systems
......@@ -307,9 +318,9 @@ La meilleur façon d'ajouter des caractères spéciaux est de les entrer directe
Liste des codes des entitées HTML [https://unicode-table.com/en/html-entities/](https://unicode-table.com/en/html-entities/).
## Styling Text
## Styling
### Couleurs en variables
### Variables de Couleurs
Les feuilles CSS sont en [less](http://lesscss.org/features/), ce qui permet d'utiliser des variables.
Si une couleur se répète à plusieurs reprises, cela peut être pratique d'en faire une variable pour pouvoir la changer sur plusieurs éléments d'un coup.
......@@ -405,8 +416,8 @@ html.facing .sheet:nth-of-type(1) .main:after{
ou plus simple pour les enlever complètement sur la première et deuxième pages, en utilisant la fonction ```no-footer()``` définie dans ```mixins.less```
```CSS
no-footer(1);
no-footer(2);
.no-footer(1);
.no-footer(2);
```
### Clipping bug
......
<!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 y8 walf b0 flow-sidebar1"></div>
<div class="bloc r0 y8 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>
document.addEventListener("OnStoryReady", function(){
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);
});
@import '../../../css/main.less';
#flow-main header .rubric-title,
#flow-main header .rubric-subtitle { .flow-into(flow-slug); }
.flow-slug { .flow-from(flow-slug); }
#flow-main .lead { .flow-into(flow-lead); }
.flow-lead { .flow-from(flow-lead); }
#flow-main .header-byline,
#flow-main .headline { .flow-into(flow-headline); }
.flow-headline { .flow-from(flow-headline); }
#flow-main .subhead { .flow-into(flow-subhead); }
.flow-subhead { .flow-from(flow-subhead); }
#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}"); }
.fig-loop(@i - 1);
}
.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); //number of footnotes
// ENCADREE
.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 ___*/
// titres à custom
@font-face {
font-family: '';
src: url('');
}
.enquete h1.headline {
color: red;
margin: @col-width @row-height;
}
.enquete h2.subhead {
color: green;
margin: @col-gutter-width @row-gutter-height;
}
.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: @color-C1;
outline: 12pt solid @color-C1;
}
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