Commit 0d1ee3f6 authored by alexandre's avatar alexandre

Import de styles du Bug + commentaire des fichiers

parent ac52e3e1
/**
* This file holds the declaration of the fonts used in our layout.
*/
@font-face { @font-face {
font-family: 'CenturyRoma'; font-family: 'Century Schoolbook';
src: url('./fonts/centuryschl-roma-webfont.eot'); src: url('../fonts/centuryschl-roma-webfont.eot');
src: url('./fonts/centuryschl-roma-webfont.eot?#iefix') format('embedded-opentype'), src: url('../fonts/centuryschl-roma-webfont.eot?#iefix') format('embedded-opentype'),
url('./fonts/centuryschl-roma-webfont.woff2') format('woff2'), url('../fonts/centuryschl-roma-webfont.woff2') format('woff2'),
url('./fonts/centuryschl-roma-webfont.woff') format('woff'), url('../fonts/centuryschl-roma-webfont.woff') format('woff'),
url('./fonts/centuryschl-roma-webfont.ttf') format('truetype'), url('../fonts/centuryschl-roma-webfont.ttf') format('truetype'),
url('./fonts/centuryschl-roma-webfont.svg#century_schoolbook_lroma') format('svg'); url('../fonts/centuryschl-roma-webfont.svg#century_schoolbook_lroma') format('svg');
font-weight: normal; font-weight: normal;
font-style: regular; font-style: normal;
} }
@font-face { @font-face {
font-family: 'CenturyItal'; font-family: 'Century Shoolbook';
src: url('./fonts/centuryschl-ital-webfont.eot'); src: url('../fonts/centuryschl-ital-webfont.eot');
src: url('./fonts/centuryschl-ital-webfont.eot?#iefix') format('embedded-opentype'), src: url('../fonts/centuryschl-ital-webfont.eot?#iefix') format('embedded-opentype'),
url('./fonts/centuryschl-ital-webfont.woff2') format('woff2'), url('../fonts/centuryschl-ital-webfont.woff2') format('woff2'),
url('./fonts/centuryschl-ital-webfont.woff') format('woff'), url('../fonts/centuryschl-ital-webfont.woff') format('woff'),
url('./fonts/centuryschl-ital-webfont.ttf') format('truetype'), url('../fonts/centuryschl-ital-webfont.ttf') format('truetype'),
url('./fonts/centuryschl-ital-webfont.svg#century_schoolbook_litalic') format('svg'); url('../fonts/centuryschl-ital-webfont.svg#century_schoolbook_litalic') format('svg');
font-weight: normal; font-weight: normal;
font-style: italic; font-style: italic;
} }
@font-face { @font-face {
font-family: 'Bagnard'; font-family: 'Bagnard';
src: url('./fonts/bagnard-webfont.eot'); src: url('../fonts/bagnard-webfont.eot');
src: url('./fonts/bagnard-webfont.eot?#iefix') format('embedded-opentype'), src: url('../fonts/bagnard-webfont.eot?#iefix') format('embedded-opentype'),
url('./fonts/bagnard-webfont.woff2') format('woff2'), url('../fonts/bagnard-webfont.woff2') format('woff2'),
url('./fonts/bagnard-webfont.woff') format('woff'), url('../fonts/bagnard-webfont.woff') format('woff'),
url('./fonts/bagnard-webfont.ttf') format('truetype'), url('../fonts/bagnard-webfont.ttf') format('truetype'),
url('./fonts/bagnard-webfont.svg#bagnardregular') format('svg'); url('../fonts/bagnard-webfont.svg#bagnardregular') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'erbarboldcondensed'; font-family: 'Erbar condensed';
src: url('erbar-boldcondensed-webfont.eot'); src: url('../fonts/erbar-boldcondensed-webfont.eot');
src: url('erbar-boldcondensed-webfont.eot?#iefix') format('embedded-opentype'), src: url('../fonts/erbar-boldcondensed-webfont.eot?#iefix') format('embedded-opentype'),
url('erbar-boldcondensed-webfont.woff2') format('woff2'), url('../fonts/erbar-boldcondensed-webfont.woff2') format('woff2'),
url('erbar-boldcondensed-webfont.woff') format('woff'), url('../fonts/erbar-boldcondensed-webfont.woff') format('woff'),
url('erbar-boldcondensed-webfont.ttf') format('truetype'), url('../fonts/erbar-boldcondensed-webfont.ttf') format('truetype'),
url('erbar-boldcondensed-webfont.svg#erbarboldcondensed') format('svg'); url('../fonts/erbar-boldcondensed-webfont.svg#erbarboldcondensed') format('svg');
font-weight: normal; font-weight: bold;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'erbarlightcondensed'; font-family: 'Erbar condensed';
src: url('erbar-lightcondensed-webfont.eot'); src: url('../fonts/erbar-lightcondensed-webfont.eot');
src: url('erbar-lightcondensed-webfont.eot?#iefix') format('embedded-opentype'), src: url('../fonts/erbar-lightcondensed-webfont.eot?#iefix') format('embedded-opentype'),
url('erbar-lightcondensed-webfont.woff2') format('woff2'), url('../fonts/erbar-lightcondensed-webfont.woff2') format('woff2'),
url('erbar-lightcondensed-webfont.woff') format('woff'), url('../fonts/erbar-lightcondensed-webfont.woff') format('woff'),
url('erbar-lightcondensed-webfont.ttf') format('truetype'), url('../fonts/erbar-lightcondensed-webfont.ttf') format('truetype'),
url('erbar-lightcondensed-webfont.svg#erbarlightcondensed') format('svg'); url('../fonts/erbar-lightcondensed-webfont.svg#erbarlightcondensed') format('svg');
font-weight: normal; font-weight: 200;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'belgika5th'; font-family: 'Belgika5th';
src: url('belgika-5th-webfont.eot'); src: url('../fonts/belgika-5th-webfont.eot');
src: url('belgika-5th-webfont.eot?#iefix') format('embedded-opentype'), src: url('../fonts/belgika-5th-webfont.eot?#iefix') format('embedded-opentype'),
url('belgika-5th-webfont.woff2') format('woff2'), url('../fonts/belgika-5th-webfont.woff2') format('woff2'),
url('belgika-5th-webfont.woff') format('woff'), url('../fonts/belgika-5th-webfont.woff') format('woff'),
url('belgika-5th-webfont.ttf') format('truetype'), url('../fonts/belgika-5th-webfont.ttf') format('truetype'),
url('belgika-5th-webfont.svg#belgika5th') format('svg'); url('../fonts/belgika-5th-webfont.svg#belgika5th') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'belgika8th'; font-family: 'Belgika8th';
src: url('belgika-8th-webfont.eot'); src: url('../fonts/belgika-8th-webfont.eot');
src: url('belgika-8th-webfont.eot?#iefix') format('embedded-opentype'), src: url('../fonts/belgika-8th-webfont.eot?#iefix') format('embedded-opentype'),
url('belgika-8th-webfont.woff2') format('woff2'), url('../fonts/belgika-8th-webfont.woff2') format('woff2'),
url('belgika-8th-webfont.woff') format('woff'), url('../fonts/belgika-8th-webfont.woff') format('woff'),
url('belgika-8th-webfont.ttf') format('truetype'), url('../fonts/belgika-8th-webfont.ttf') format('truetype'),
url('belgika-8th-webfont.svg#belgika8th') format('svg'); url('../fonts/belgika-8th-webfont.svg#belgika8th') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'belgika16th'; font-family: 'Belgika16th';
src: url('belgika-16th-webfont.eot'); src: url('../fonts/belgika-16th-webfont.eot');
src: url('belgika-16th-webfont.eot?#iefix') format('embedded-opentype'), src: url('../fonts/belgika-16th-webfont.eot?#iefix') format('embedded-opentype'),
url('belgika-16th-webfont.woff2') format('woff2'), url('../fonts/belgika-16th-webfont.woff2') format('woff2'),
url('belgika-16th-webfont.woff') format('woff'), url('../fonts/belgika-16th-webfont.woff') format('woff'),
url('belgika-16th-webfont.ttf') format('truetype'), url('../fonts/belgika-16th-webfont.ttf') format('truetype'),
url('belgika-16th-webfont.svg#belgika16th') format('svg'); url('../fonts/belgika-16th-webfont.svg#belgika16th') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'belgika40th'; font-family: 'Belgika40th';
src: url('belgika-40th-webfont.eot'); src: url('../fonts/belgika-40th-webfont.eot');
src: url('belgika-40th-webfont.eot?#iefix') format('embedded-opentype'), src: url('../fonts/belgika-40th-webfont.eot?#iefix') format('embedded-opentype'),
url('belgika-40th-webfont.woff2') format('woff2'), url('../fonts/belgika-40th-webfont.woff2') format('woff2'),
url('belgika-40th-webfont.woff') format('woff'), url('../fonts/belgika-40th-webfont.woff') format('woff'),
url('belgika-40th-webfont.ttf') format('truetype'), url('../fonts/belgika-40th-webfont.ttf') format('truetype'),
url('belgika-40th-webfont.svg#belgika40th') format('svg'); url('../fonts/belgika-40th-webfont.svg#belgika40th') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
/**
* This file is based on the HTML2print boilerplate.
*
*
*/
/** /**
* Computation * Computation
*/ */
/* EXTRA SPACE AROUND THE PAGE: BLEED + CROP */ /* computes the edge size of the paper, which is the sum of the bleed and the
// TODO: find a more appropriate name * crop sizes */
@crop: @crop-size + @bleed; @edge: @crop-size + @bleed;
/* GEOMETRY OF THE PAPER SHEET */ /* Computes the size of the paper sheet */
@paper-width: @page-width + ( @crop * 2 ); @paper-width: @page-width + ( @edge * 2 );
@paper-height: @page-height + ( @crop * 2 ); @paper-height: @page-height + ( @edge * 2 );
/* SIZE OF SPREAD */ /* computes the width of a spread, which is twice the width of a single page */
@spread: @page-width * 2; @spread: @page-width * 2;
...@@ -19,6 +26,13 @@ ...@@ -19,6 +26,13 @@
/** /**
* DEFINITION OF THE PAPER SHEET * DEFINITION OF THE PAPER SHEET
*/ */
/**
* The @page CSS at-rule is used to define some properties of printed
* documents. We make it the size of the elements with the .paper class and
* remove any margins so they don't add up with margins specifed in elements
* with the .page class (or it's children, like .header, .body and .footer)
*/
@page { @page {
size: @paper-width @paper-height; size: @paper-width @paper-height;
margin: 0; margin: 0;
...@@ -30,17 +44,18 @@ ...@@ -30,17 +44,18 @@
*/ */
@media all { @media all {
body { body { margin: 0; }
margin: 0;
}
.paper { .paper {
width: @paper-width; width: @paper-width;
height: @paper-height; height: @paper-height;
box-sizing: border-box; box-sizing: border-box;
/* Crop marks */ /* Crop marks */
padding: @crop; padding: @edge;
/* defines a named counter and increments it every page, so we can use
* it to compute the page number */
counter-increment: page-counter; counter-increment: page-counter;
/* utile ou non? pour éviter qu'un papier soit coupé par le format de la /* utile ou non? pour éviter qu'un papier soit coupé par le format de la
...@@ -71,46 +86,40 @@ ...@@ -71,46 +86,40 @@
1px @crop-size 1px @crop-size
; ;
background-position: background-position:
left @crop, left @edge,
@crop top, @edge top,
right @crop, right @edge,
(@paper-width - @crop) top, (@paper-width - @edge) top,
right (@paper-height - @crop), right (@paper-height - @edge),
(@paper-width - @crop) bottom, (@paper-width - @edge) bottom,
left (@paper-height - @crop), left (@paper-height - @edge),
@crop bottom @edge bottom
; ;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.page { .page {
/* defines the page size */
width: @page-width; width: @page-width;
height: @page-height; height: @page-height;
/* allows for absolutely positioned elements as settings the position
* property to relative as the side effect of making this elements
* top-left corner the reference point
*/
position: relative; position: relative;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
} }
// TODO: changer le format du papier en spread pour pouvoir imprimer en planche // TODO: changer le format du papier en spread pour pouvoir imprimer en planche
.spread { .spread .paper { float: left; }
.paper { .spread .paper:nth-child(odd) { margin-left: -@edge; }
float: left; .spread .paper:nth-child(even) { margin-right: -@edge; }
} .spread .paper:first-child { margin-left: @page-width; }
.paper:nth-child(odd) {
margin-left: -@crop;
}
.paper:nth-child(even) {
margin-right: -@crop;
}
.paper:first-child {
margin-left: @page-width;
}
}
} }
@media screen { @media screen {
body { body { background-color: #F0F0F0; }
background-color: #F0F0F0;
}
#pages { #pages {
width: @paper-width; width: @paper-width;
...@@ -129,31 +138,20 @@ ...@@ -129,31 +138,20 @@
margin-top: 1em; margin-top: 1em;
margin-bottom: 1em; margin-bottom: 1em;
} }
.normal .paper { .normal .page { outline: 1px dashed lightsalmon; }
//outline: 1px solid lightgray; .preview .paper { background: none; }
}
.normal .page {
outline: 1px dashed lightsalmon;
}
.preview .paper {
background: none;
}
.preview .page { .preview .page {
outline: 1px solid lightgray; outline: 1px solid lightgray;
background-color: white; background-color: white;
} }
.debug #story { .debug #story { outline: 1pt solid green; }
outline: 1pt solid green;
}
} }
@media print { @media print {
html { html { width: @paper-width; }
width: @paper-width;
}
body { body {
/* Allows printing of background colors */ /* Allows for background colors printing */
background-color: white; background-color: white;
-webkit-print-color-adjust: exact; -webkit-print-color-adjust: exact;
print-color-adjust: exact; print-color-adjust: exact;
...@@ -172,6 +170,4 @@ ...@@ -172,6 +170,4 @@
*/ */
-webkit-region-break-before: always; -webkit-region-break-before: always;
} }
.debug .region-break { .debug .region-break { border-top: 1pt dashed blue; }
border-top: 1pt dashed blue;
}
/**
* The less CSS is splitted accross different files for a better organisation.
*
* This is the main less css file that requires all the the neccessary
* dependencies.
*/
/* Loads the base variables such as page size and margins. */
@import "setup.less"; @import "setup.less";
/* Loads the rules that set the geometry of the page and its representation on
* screen. */
@import "html2print.less"; @import "html2print.less";
/* Loads the rules that set the base layout of the document (header, body,
* footer) */
@import "page.less"; @import "page.less";
/* Loads the font declarations. */
@import "fonts.less";
.cover {
background-size: cover;
background-repeat: no-repeat;
}
.cover--first { background-image: url(/cover-outlines.svg); }
.cover--bleed {
padding: 3mm;
position: relative;
top: -3mm;
left: -3mm;
}
/**
* Nice trick: mettre les images de double en fond de page!
*/
.cover--left { background-position: left; }
.cover--right { background-position: right; }
.cover--right { background-position: -600px; }
/**
* Mixins
* ======
*/
.flow-into(@flow) {
-webkit-flow-into: @flow;
flow-into: @flow;
}
.flow-from(@flow) {
-webkit-flow-from: @flow;
flow-from: @flow;
}
...@@ -95,4 +95,3 @@ ...@@ -95,4 +95,3 @@
.paper:nth-child(even) .footer__page-number { margin-right: @gutter; } .paper:nth-child(even) .footer__page-number { margin-right: @gutter; }
.paper:nth-child(odd) .footer__page-number { text-align: right; } .paper:nth-child(odd) .footer__page-number { text-align: right; }
/**
*
/* the geometry of the page */ /* the geometry of the page */
@page-width: 160mm; @page-width: 160mm;
@page-height: 230mm; @page-height: 230mm;
...@@ -18,7 +22,6 @@ ...@@ -18,7 +22,6 @@
@footer-height: 12mm; @footer-height: 12mm;
@footer-text: counter(page-counter); @footer-text: counter(page-counter);
@gutter: 12pt; @gutter: 12pt;
@body-size: @page-width - @page-margin-inside - @page-margin-outside; @body-size: @page-width - @page-margin-inside - @page-margin-outside;
@column-size: (@body-size - (10pt * 11)) / 12; @column-size: (@body-size - (10pt * 11)) / 12;
/*
* Typographie
* ===========
*/
.page { text-rendering: optimizeLegibility; }
/*
* Styles génériques
* -----------------
*/
body {
font-family: "Arapey", serif;
font-size: 9pt;
line-height: 9.75pt;
}
h1,
h2,
h3 {
-webkit-break-inside: avoid-region;
-webkit-break-inside: avoid-region;
}
h1 {
margin-top: (12pt / 3) * 2;
margin-bottom: (12pt / 3) * 1;
/*-webkit-region-break-before: always;*/
font-family: "alfphabetbipocatcondensed";
font-size: 18pt;
line-height: 20pt;
text-align: left;
letter-spacing: -.02em;
font-weight:normal;
}
h2 {
margin-top: 0pt;
margin-bottom: -9pt;
padding: 10pt 15px;
font-family: "Career", serif;
font-weight: normal;
font-size: 12pt;
line-height: 13pt;
text-align: center;
}
p {
margin-bottom: 0;
text-align: justify;
}
p + p {
margin-top: 0;
text-indent: 1.25em;
}
a {
text-decoration: none;
color: rgba(177, 69, 66, 255);
}
em { font-style: italic; }
ul {
list-style-type: none;
padding-left: 1.25em;
li {
position: relative;
/*margin-top: 5px;*/
}
li:before {
content: "—";
width: 1.25em;
display: block;
position: absolute;
left: -1.25em;
}
}
ol{
padding-left: 1.25em;
}
li { margin-top: 9.75pt; }
// TODO: check if necessary
pre { white-space: pre; }
code { font-family: "DOS"; }
// Pour les footnotes
hr { display: none; }
figure { text-align: center; }
img { max-width: 100%; }
pre { overflow: hidden; }
sup { line-height: 0; vertical-align: -0.1em; }
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