Commit aece665f authored by Dorian's avatar Dorian
Browse files

change name of layout/class/folder in fr/en to have the same everywhere

parent da8bfa34
......@@ -9,6 +9,9 @@ Cette maquette est un fork du numéro 21, cleanée et restructurée.
* 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é
* une mixin function pour sortir/rentrer les exergues
* correction du texte qui va pas jusqu'au bout de la colone pour les enquetes
### Pre-requisites
......
......@@ -23,11 +23,11 @@ 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.
* rub, ```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:
* rub-web ```class="rubric"```. Coulisses du Web ont leur propre layout.
* rub-jouer ```class="rubric"```. Médor à Jouer consiste le plus souvent en une double-page d'image.
* 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="interview"```
* entretien, ```class="entretien"```
* recit, ```class="recit"```
......@@ -35,13 +35,13 @@ Liste des dossiers de layout et leur classes:
* portrait, ```class="portrait"```
* photo, ```class="photo"```
* portfolio, ```class="portfolio"```
* nombril, ```class="nombril"```
* edito, ```class="edito"```
* sommaire
* sommaire, ```class="sommaire"```
### Subtitles
......
/**
* #INVESTIGATION
* #ENQUETE
*/
/* HEADLINE and SUBTITLE */
/*___ HEADLINE and SUBTITLE ___*/
/* 2 types d'enquetes: enquete--long et enquete--short (ex: Le silence du tram) */
/* utiliser class="enquete enquete--short" */
......@@ -40,16 +40,8 @@
letter-spacing: -0.01em;
}
.enquete .body {
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 */
-webkit-hyphenate-limit-lines: 4; /* 4 lignes consecutives max */
}
/*___ LETTRINE ___*/
// 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
......@@ -63,15 +55,18 @@
padding-right: .1em;
}
/*___ H2, H3 ___*/
.enquete .body > h2 {
font: bold @line-height/@line-height 'Erbarre';
position: relative;
top: @line-height * .5 * -1;
// position: relative;
// top: @line-height * .5 * -1;
margin-bottom: @line-height*0.5;
letter-spacing: .02em;
text-transform: uppercase;
}
.enquete .body > figure + h2,
.enquete .body > p + h2,
.enquete .body > ul + h2 { margin-top: @line-height * 1.5; }
.enquete .body > h3 {
font-family: 'Bagnard' ;
......@@ -84,9 +79,18 @@
text-transform: uppercase;
}
/**
* Pull out quotes
*/
/*___ BODY TEXT ___*/
.enquete .body {
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 */
-webkit-hyphenate-limit-lines: 4; /* 4 lignes consecutives max */
}
/*___ PULL-OUT ___*/
.enquete .pull-out {
font-family: 'Erbarre';
......@@ -107,15 +111,6 @@
}
/* FIXME: exposants dans les footnotes (ex. Mons) */
.enquete > p:last-of-type::after {
font: 6.5pt 'Medor';
content: ' \00A0\E011';
}
.enquete .body > figure + h2,
.enquete .body > p + h2,
.enquete .body > ul + h2 { margin-top: @line-height * 2; }
.enquete .body > figure + p:not(.lead),
.enquete .body > p:not(.lead) + p { text-indent: @line-height; }
......@@ -158,8 +153,3 @@
text-transform: uppercase;
}
.enquete--long > header h1 {
font-size: @line-height * 6;
line-height: @line-height * 5;
}
/**
* #INTERVIEW
* #ENTRETIEN
*/
.interview {
.entretien {
-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 */
-webkit-hyphenate-limit-lines: 3; /* 3 lignes consecutives max */
}
.interview .headline {
.entretien .headline {
font-family: 'Alfphabet';
font-size: 37pt;
......@@ -17,7 +17,7 @@
text-transform: uppercase;
}
.interview .subhead {
.entretien .subhead {
font-family: 'Erbarre';
font-size: 18pt;
font-weight: bold;
......@@ -27,27 +27,27 @@
text-transform: uppercase;
}
.interview .header-byline {
.entretien .header-byline {
font-family: 'alfphabet';
font-size: 8.5pt;
text-align: center;
}
.interview .lead {
.entretien .lead {
margin: 0 0 @line-height;
// -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: 2; /* 3 caractères minimum en début de ligne, donc en fin de mot */
// -webkit-hyphenate-limit-lines: 3; /* 3 lignes consecutives max */
}
.interview .lead p {
.entretien .lead p {
font-family: 'bagnard';
font-size: 10.5pt;
line-height: 14pt;
}
.interview .lead p + p {
.entretien .lead p + p {
text-indent: @line-height;
}
// .interview .lead::first-letter {
// .entretien .lead::first-letter {
// font-family: 'career';
// font-size: 60pt;
// line-height: @line-height * 2.2;
......@@ -62,11 +62,11 @@
// padding-bottom: 5pt;
// }
.interview .body {
.entretien .body {
line-height: 12pt;
}
.interview .body > h2 {
.entretien .body > h2 {
margin-left: 0pt;
font-size: inherit;
line-height: inherit;
......@@ -76,7 +76,7 @@
}
/* FIXME: is it really used? */
.interview .body > h3 {
.entretien .body > h3 {
font-family: 'Alfphabet';
font-size: 8pt;
font-weight: normal;
......@@ -86,7 +86,7 @@
text-align: center;
}
.interview .body > p {
.entretien .body > p {
font-family: 'Century Schoolbook';
font-size: 9pt;
line-height: @line-height;
......@@ -94,7 +94,7 @@
}
/* FIXME: prefix with pull-out class */
.interview .body blockquote p {
.entretien .body blockquote p {
font-family: 'Alfphabet';
font-size: 19pt;
line-height: 19pt;
......@@ -104,7 +104,7 @@
margin-bottom: 24pt;
}
.interview .body blockquote p {
.entretien .body blockquote p {
text-indent: 0;
}
......@@ -115,7 +115,7 @@
margin-right: -32pt;
}
.interview .pull-out > blockquote footer {
.entretien .pull-out > blockquote footer {
font-family: 'alfphabet';
font-size: 9pt;
line-height: @line-height;
......@@ -124,7 +124,7 @@
}
/* Speaker style */
.interview .body > p > abbr {
.entretien .body > p > abbr {
font-family: 'Alfphabet';
font-size: 7.5pt;
padding: 0 8pt 0 0;
......@@ -132,19 +132,19 @@
line-height: 0pt;
}
.interview .body .question {
.entretien .body .question {
font-family: 'bagnard';
line-height: 12pt;
margin: 0;
font-size: 9pt;
}
.interview .body .question + p {
.entretien .body .question + p {
margin-top: 0;
}
.interview .body sup {
.entretien .body sup {
font-size: 0.667em;
line-height: 0;
vertical-align: super;
......@@ -153,7 +153,7 @@
/* Exposant dans le texte */
/* FIXME: ajuster la taille */
.interview .body a > sup {
.entretien .body a > sup {
font: 6pt/0 'Alfphabet';
padding-left: .125em;
vertical-align: super;
......
......@@ -12,25 +12,25 @@
width: calc(~"50% - 6pt");
}
.photo {
.portfolio {
font-family: 'Erbarre';
}
/* HEADLINE */
.photo .headline {
.portfolio .headline {
font: bold 60pt / 0.8 'Erbarre'; /* [1] */
color:white;
text-align: center;
text-transform: uppercase;
}
/* FIXME: decide if we put the name of the photograph or the subhead under the */
.photo .subhead,
.photo .header-byline { text-align: center; color:white; }
.portfolio .subhead,
.portfolio .header-byline { text-align: center; color:white; }
.photo .subhead { font: bold 36pt / 36pt 'Erbarre';}
.photo .header-byline { font: bold 18pt / 18pt 'Erbarre';}
.portfolio .subhead { font: bold 36pt / 36pt 'Erbarre';}
.portfolio .header-byline { font: bold 18pt / 18pt 'Erbarre';}
.photo .body {
.portfolio .body {
font-size: 13pt;
line-height: 15pt;
-webkit-hyphens: auto;
......@@ -39,22 +39,22 @@
-webkit-hyphenate-limit-lines: 4; /* 3 lignes consecutives max */
}
.photo .lead{
.portfolio .lead{
font-weight: bold;
font-size:18pt;
line-height: 20pt;
margin-bottom: 18pt;
}
.photo .body > h2 {
.portfolio .body > h2 {
font-weight: bold;
margin-top: 15pt;
}
.photo .body > p + p { text-indent: @line-height; }
.portfolio .body > p + p { text-indent: @line-height; }
/* FIXME: ajuster la taille */
.photo sup {
.portfolio sup {
font-size: 0.75em;
line-height: 0;
......@@ -65,7 +65,7 @@
/* Exposant dans le texte */
/* FIXME: ajuster la taille */
.photo .body a > sup {
.portfolio .body a > sup {
font: 6pt/0 'Alfphabet';
padding-left: .125em;
......@@ -73,14 +73,14 @@
vertical-align: super;
}
.photo em {
.portfolio em {
font-style: italic; /* do not use italic at all */
// color: @color-ete-sapin;
}
.photo .footnotes { padding-left: @line-height; }
.portfolio .footnotes { padding-left: @line-height; }
/* IMAGE */
.photo figcaption {
.portfolio figcaption {
font-family: 'Nobel' ;
font-size: 8pt;
font-weight: 300;
......@@ -88,7 +88,7 @@
}
/* The "titles" of the pictures */
/* It was used in the first and second issues */
.photo figcaption strong {
.portfolio figcaption strong {
font-family: 'Belgika5th';
font-size: 6.5pt;
line-height: 8pt;
......@@ -101,7 +101,7 @@
font-feature-settings: 'liga' 0;
}
.photo figcaption em {
.portfolio figcaption em {
font-style: italic;
color: inherit;
}
......@@ -110,20 +110,20 @@
* Style "Point de vue"
*/
.photo .sidebar h1 {
.portfolio .sidebar h1 {
font-size: 14pt;
line-height: 24pt;
font-weight: bold;
}
.photo .sidebar p {
.portfolio .sidebar p {
font-family: 'Erbarre';
font-size: 10pt;
line-height: 12pt;
letter-spacing: .002em;
}
.photo .sidebar footer {
.portfolio .sidebar footer {
font-family: 'Erbarre';
font-weight: normal;
font-style: normal;
......
......@@ -54,19 +54,6 @@
margin: 8pt 0 4pt;
}
/* .rubric .body > p:first-child::first-letter { */
/* font-family: 'Erbarre'; */
/* font-weight: bold; */
/* font-size: (@line-height * 3.7); */
/* line-height: (@line-height * 2.2); */
/* position: relative; */
/* float: left; */
/* padding: 4.5pt 4pt 2pt 0pt; */
/* } */
.rubric .body {
font: 10.4pt/@line-height 'Nobel';
......
......@@ -29,7 +29,7 @@
/**
* #VARIABLES
*/
@line-height: 12pt;
/**
......@@ -73,9 +73,6 @@ a {
sup { line-height: 0; } /* Fixes baseline issues */
/**
* HACKS
*/
......@@ -100,9 +97,6 @@ article {
}
/**
* #GENERAL-STYLES
*/
......@@ -125,7 +119,6 @@ article {
margin-right: 6pt;
margin-bottom: 2pt;
// padding: 30pt 6pt 6pt;
padding: 30pt 6pt 3pt 6pt;
text-transform: uppercase;
......@@ -141,14 +134,12 @@ article {
*/
.body > p:last-of-type::after {
font: 6.5pt 'Belogodor';
content: '\00A0\E887';
}
/* Tiret avant le nom de l'auteur de la sitation */
.pull-out > blockquote footer > p:before {
content: '— ';
color: inherit;
}
......@@ -259,14 +250,6 @@ figcaption footer small {
position: relative;
top: 1pt;
}
aside.sidebar span, aside.sidebar strong {
font-family: 'Erbarre';
font-size: 10pt;
font-weight: bold;
line-height: 0pt;
}
.endnote {
font-family: 'Nobel';
font-size: 7pt;
......@@ -316,27 +299,6 @@ aside.sidebar span, aside.sidebar strong {
* mainly to the rubrics.
*/
/* .rule--right:after, */
/* .rule--left:before { */
/* position: absolute; */
/* height: 100%; */
/* content: ' '; */
/* } */
/* .rule--left:before { */
/* left: -5pt; */
/* border-left: 1pt solid black; */
/* } */
/* .rule--right:after { */
/* right: -5pt; */
/* border-left: 1pt solid black; */
/* } */
.rule--right {
margin-right: -4pt;
padding-right: 4pt;
......@@ -352,14 +314,18 @@ aside.sidebar span, aside.sidebar strong {
/**
* Sidebars
*/
.sidebar {
font-family: 'Erbarre' ;
font-size: 9.5pt;
line-height: 12pt;
letter-spacing: .002em;
}
.sidebar strong {
font-family: 'Erbarre';
font-size: 10pt;
font-weight: bold;
line-height: 0pt;
}
.sidebar h1, h2, h3, h4 {
font-family: 'Alfphabet' ;
font-size: 14pt;
......@@ -368,8 +334,6 @@ aside.sidebar span, aside.sidebar strong {
margin-top: 6pt;
}
.sidebar p { font-family: 'Erbarre'; }
.sidebar em { font-style: oblique; }
......@@ -378,9 +342,9 @@ aside.sidebar span, aside.sidebar strong {
*/
@import "specific styles/edito.less";
@import "specific styles/entretien.less";
@import "specific styles/enquete.less";
@import "specific styles/flamand.less";
@import "specific styles/interview.less";
@import "specific styles/nombril.less";
@import "specific styles/photo.less";
@import "specific styles/portrait.less";
......
......@@ -105,7 +105,7 @@
<div id="stories">
<!-- <art id="flow-main" class="interview" folio="54" src="https://medor.coop/api/v2/pages/780/?draft=true&image_preview=true"></art> -->
<art id="flow-main" class="interview" folio="110" src="https://medor.coop/api/v2/pages/780/?draft=true&image_"></art>
<art id="flow-main" class="entretien" folio="110" src="https://medor.coop/api/v2/pages/780/?draft=true&image_"></art>
</div>
<!-- JAVASCRIPT -->
......
......@@ -163,7 +163,7 @@
<div id="stories">
<art id="flow-main" folio="84" class="photo" src="https://medor.coop/api/v2/pages/772/?draft=true"></art>
<art id="flow-main" folio="84" class="portfolio" src="https://medor.coop/api/v2/pages/772/?draft=true"></art>
</div>
<!-- JAVASCRIPT -->
......
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