Commit da8bfa34 authored by Dorian's avatar Dorian
Browse files

separate specific styles in different folders

parent 6e3a960f
{
"edito": "layout/edito/index.html",
"enquete": "layout/enquete/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",
......
......@@ -127,5 +127,4 @@
@import "fonts.less";
@import "colors.less";
@line-height: 12pt;
@import "styles.less";
/**
* #EDITORIAL
*/
.edito {
font-family: 'Erbarre' ;
font-size: 13pt;
line-height: 15.5pt;
}
.edito .headline {
font-size: 36pt;
line-height: 36pt;
margin-bottom: 18pt;
}
.edito .body > p {
-webkit-hyphens: auto;
-webkit-hyphenate-limit-before: 5; /* 2 caractères minimum en fin de ligne, donc en début de mot */
-webkit-hyphenate-limit-after: 5; /* 3 caractères minimum en début de ligne, donc en fin de mot */
-webkit-hyphenate-limit-lines: 2; /* 3 lignes consecutives max */
}
.edito .body > p + p { text-indent: 24pt; }
/* ne pas afficher les titres et sous-titres et le byline */
.edito .rubric-title,
.edito .rubric-subtitle,
.edito footer { display: none; }
/* appels de notes */
.edito .body a sup {
font-size: 7pt;
position: relative;
top: -3.5pt;
padding-left: .125em;
}
.edito .body sup {
font-size: .75em;
position: relative;
top: -3.5pt;
padding-left: .125em;
}
/**
* #INVESTIGATION
*/
/* HEADLINE and SUBTITLE */
/* 2 types d'enquetes: enquete--long et enquete--short (ex: Le silence du tram) */
/* utiliser class="enquete enquete--short" */
.enquete .headline,
.enquete .subhead {
font-family: 'Erbarre';
font-weight: bold;
text-transform: uppercase;
}
.enquete .headline {
font-size: 36pt;
margin: (@line-height * .5) 0 @line-height;
}
.enquete .subhead {
font-size: 18pt;
line-height: @line-height * 2;
margin-top: @line-height / 2;
margin-bottom: @line-height / 2;
}
.enquete .header-byline {
font: 18pt 'Erbarre';
font-weight: bold;
line-height: (@line-height/4) *6;
margin-bottom: @line-height;
}
.enquete .lead {
font: 15pt 'Bagnard';
line-height: @line-height * 1.5;
margin-bottom: @line-height;
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 */
}
// 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';
position: relative;
top: @line-height * .5 * -1;
letter-spacing: .02em;
text-transform: uppercase;
}
.enquete .body > h3 {
font-family: 'Bagnard' ;
font-size: 12pt ;
line-height: 12pt;
margin-bottom: 4pt;
margin-top: 20pt;
text-align: center;
letter-spacing: .05em;
text-transform: uppercase;
}
/**
* Pull out quotes
*/
.enquete .pull-out {
font-family: 'Erbarre';
margin: (@line-height * 2) 0 (@line-height * 2) -@col-gutter-width;
}
.enquete .pull-out > blockquote > div > p {
font-size: 18pt ;
font-weight: bold;
line-height: @line-height * 1.5;
}
.enquete .pull-out > blockquote > footer {
font-size: 12pt;
line-height: @line-height;
margin-top: 6pt;
}
/* 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; }
.enquete .body > p:nth-of-type(1) { text-indent: 0!important; }
/* Appels de notes */
/* FIXME: ajuster la taille */
.enquete .body sup {
font-size: 6pt;
line-height: 0;
top: 2px;
padding-left: .125em;
vertical-align: super;
}
.enquete .body sub {
font-size: 6pt;
line-height: 0;
top: 1px;
position: relative;
padding-left: .1em;
}
/**
* Making-of enquêtes
*/
.enquete .making-of {
font-family: 'Alfphabet';
margin-top: 2 * @line-height;
padding-top: @line-height - 4pt;
border-top: 4pt double;
}
.enquete .making-of h1 { font-size: @line-height; }
.enquete .making-of h1 em {
font-family: 'Medor';
font-size: 9.5pt;
text-transform: uppercase;
}
.enquete--long > header h1 {
font-size: @line-height * 6;
line-height: @line-height * 5;
}
/**
* Styles Moment flamand
*/
.flamand {
font: 9pt/@line-height 'Century Schoolbook';
position: relative;
}
.flamand .headline,
.flamand .subhead {
font-family: 'Bagnard';
font-weight: bold;
text-transform: uppercase;
}
.flamand .headline {
font-size: 42pt;
line-height: 45pt; /* FIXME: a revoir */
text-align: left;
}
.flamand .headline {
font-size: 30pt;
line-height: 32pt;
letter-spacing: 0pt;
}
.flamand .headline > em {
letter-spacing: -.12em;
}
.flamand .subhead {
font-size: 18pt;
line-height: @line-height;
margin-top: @line-height;
}
.flamand .lead,
.flamand .lead > em {
font-family: 'Century Schoolbook';
font-size: 14pt ;
line-height: @line-height * 1.4;
display: inline;
margin: 0 0 @line-height * 2;
}
/* Exposant dans le texte */
/* FIXME: ajuster la taille */
.flamand a > sup {
font-size: .75em;
padding-left: .125em;
top: 1pt;
}
.flamand .header-byline {
font-family: 'Alfphabet';
font-size: 12pt;
font-weight: 400;
line-height: (@line-height / 12) * 16;
text-align: left;
}
.flamand .body > p {
-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; /* 3 lignes consecutives max */
}
// .flamand header + .body > p:first-child::first-letter{
// font-family: 'Alfphabet';
// font-size: 42pt;
// line-height: 40pt;
// position: relative;
// top: .08em;
// float: left;
// height: 34pt;
// padding-right: .15em;
// }
.flamand .body > figure + p:not(.lead),
.flamand .body > p:not(.lead) + p { text-indent: @line-height; }
.flamand .body > h2 {
font-family: 'Alfphabet' ;
font-size: 10.5pt ;
line-height: @line-height ;
margin-top: 12pt ;
text-align: left;
position: relative;
text-transform: uppercase;
}
.flamand .body > p:last-of-type::after {
font: 6.5pt 'Belogodor';
content: ' \00A0\E977';
}
/* FIXME: ajuster la taille */
.flamand sup {
font-size: 7pt;
line-height: 0;
top: 2px;
padding-left: .125em;
vertical-align: super;
}
/**
* TODO: rename of remove
*/
.flamand .encadre h1 {
font-family: 'alfphabet';
font-size: 12pt;
line-height: 12.5pt ;
text-align: left;
text-transform: uppercase;
}
.flamand .encadre > p {
font-family: 'Erbarre' ;
font-size: 9.5pt;
line-height: 11.5pt ;
letter-spacing: .002em;
}
.flamand .encadre > p:first-of-type {
margin-top: @line-height/3;
}
.flamand .encadre p strong {
font-family: 'Erbarre' ;
font-size: 9.5pt ;
font-weight: bold;
line-height: 0 ;
text-transform: uppercase;
}
.flamand .encadre p > em {
font-family: 'Erbarre' ;
line-height: 12pt ;
letter-spacing: .003em;
}
.flamand .pull-out {
font: 12pt 'Bagnard';
line-height: 14pt;
/* display: block; */
margin: @line-height 0;
text-indent: 0;
letter-spacing: -.002em;
}
.flamand .pull-out > blockquote > footer {
font-size: 9pt;
line-height: @line-height;
margin-top: 3pt;
}
/**
* #INTERVIEW
*/
.interview {
-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 {
font-family: 'Alfphabet';
font-size: 37pt;
text-align: center;
text-transform: uppercase;
}
.interview .subhead {
font-family: 'Erbarre';
font-size: 18pt;
font-weight: bold;
line-height: @line-height * 1;
margin-top: @line-height;
text-align: center;
text-transform: uppercase;
}
.interview .header-byline {
font-family: 'alfphabet';
font-size: 8.5pt;
text-align: center;
}
.interview .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 {
font-family: 'bagnard';
font-size: 10.5pt;
line-height: 14pt;
}
.interview .lead p + p {
text-indent: @line-height;
}
// .interview .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;
// }
.interview .body {
line-height: 12pt;
}
.interview .body > h2 {
margin-left: 0pt;
font-size: inherit;
line-height: inherit;
margin-bottom: @line-height/2;
font-family: 'Alfphabet';
margin-top: @line-height*1.5;
}
/* FIXME: is it really used? */
.interview .body > h3 {
font-family: 'Alfphabet';
font-size: 8pt;
font-weight: normal;
margin-top: @line-height;
text-align: center;
}
.interview .body > p {
font-family: 'Century Schoolbook';
font-size: 9pt;
line-height: @line-height;
position: relative;
}
/* FIXME: prefix with pull-out class */
.interview .body blockquote p {
font-family: 'Alfphabet';
font-size: 19pt;
line-height: 19pt;
width: 101%;
margin-top: 24pt;
margin-bottom: 24pt;
}
.interview .body blockquote p {
text-indent: 0;
}
.colright .pull-out blockquote {
margin-left: -32pt;
}
.colleft .pull-out blockquote {
margin-right: -32pt;
}
.interview .pull-out > blockquote footer {
font-family: 'alfphabet';
font-size: 9pt;
line-height: @line-height;
margin-top: 3pt;
}
/* Speaker style */
.interview .body > p > abbr {
font-family: 'Alfphabet';
font-size: 7.5pt;
padding: 0 8pt 0 0;
margin: 0pt;
line-height: 0pt;
}
.interview .body .question {
font-family: 'bagnard';
line-height: 12pt;
margin: 0;
font-size: 9pt;
}
.interview .body .question + p {
margin-top: 0;
}
.interview .body sup {
font-size: 0.667em;
line-height: 0;
vertical-align: super;
padding-left: .125em;
}
/* Exposant dans le texte */
/* FIXME: ajuster la taille */
.interview .body a > sup {
font: 6pt/0 'Alfphabet';
padding-left: .125em;
vertical-align: super;
}
/**
* #NOMBRIL
*/
.nombril {
font: 8.5pt/12pt 'Bagnard';
letter-spacing: -.02em;
}
.nombril .header-byline,
.nombril .rubrique-title,
.nombril .rubrique-subtitle { display: none; }
/* TODO: hide footer too? */
.nombril .headline {
font: 48pt/36pt 'Alfphabet-Condensed';
letter-spacing: 0;
}
.nombril .lead {
font-size: 12pt;
line-height: 15pt;
margin-bottom: 12pt;
}
.nombril > p + p {
text-indent: 12pt;
}
.nombril > p:not(.lead) {
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
.nombril li {
font-size: 8pt;
font-family: 'Alfphabet';
letter-spacing: -0.03em;
line-height:10pt;
text-indent:-12pt;
margin-left: 12pt;
margin-top:6pt;
}
.nombril li::before {
content: "— "
}
/**
* #PORTFOLIO
*
* 1. We specify line-height without unit so it scales with the font-size in
* case we redefine it.
*/
/* ORGANISATION IMAGE? */
.walf {
width: -webkit-calc(~"50% - 6pt"); /* For older webkits */
width: calc(~"50% - 6pt");
}
.photo {
font-family: 'Erbarre';
}
/* HEADLINE */
.photo .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; }
.photo .subhead { font: bold 36pt / 36pt 'Erbarre';}
.photo .header-byline { font: bold 18pt / 18pt 'Erbarre';}
.photo .body {
font-size: 13pt;
line-height: 15pt;
-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; /* 3 lignes consecutives max */
}
.photo .lead{
font-weight: bold;
font-size:18pt;
line-height: 20pt;
margin-bottom: 18pt;
}