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-family: 'CenturyRoma';
src: url('./fonts/centuryschl-roma-webfont.eot');
src: url('./fonts/centuryschl-roma-webfont.eot?#iefix') format('embedded-opentype'),
url('./fonts/centuryschl-roma-webfont.woff2') format('woff2'),
url('./fonts/centuryschl-roma-webfont.woff') format('woff'),
url('./fonts/centuryschl-roma-webfont.ttf') format('truetype'),
url('./fonts/centuryschl-roma-webfont.svg#century_schoolbook_lroma') format('svg');
font-family: 'Century Schoolbook';
src: url('../fonts/centuryschl-roma-webfont.eot');
src: url('../fonts/centuryschl-roma-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/centuryschl-roma-webfont.woff2') format('woff2'),
url('../fonts/centuryschl-roma-webfont.woff') format('woff'),
url('../fonts/centuryschl-roma-webfont.ttf') format('truetype'),
url('../fonts/centuryschl-roma-webfont.svg#century_schoolbook_lroma') format('svg');
font-weight: normal;
font-style: regular;
font-style: normal;
}
@font-face {
font-family: 'CenturyItal';
src: url('./fonts/centuryschl-ital-webfont.eot');
src: url('./fonts/centuryschl-ital-webfont.eot?#iefix') format('embedded-opentype'),
url('./fonts/centuryschl-ital-webfont.woff2') format('woff2'),
url('./fonts/centuryschl-ital-webfont.woff') format('woff'),
url('./fonts/centuryschl-ital-webfont.ttf') format('truetype'),
url('./fonts/centuryschl-ital-webfont.svg#century_schoolbook_litalic') format('svg');
font-family: 'Century Shoolbook';
src: url('../fonts/centuryschl-ital-webfont.eot');
src: url('../fonts/centuryschl-ital-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/centuryschl-ital-webfont.woff2') format('woff2'),
url('../fonts/centuryschl-ital-webfont.woff') format('woff'),
url('../fonts/centuryschl-ital-webfont.ttf') format('truetype'),
url('../fonts/centuryschl-ital-webfont.svg#century_schoolbook_litalic') format('svg');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'Bagnard';
src: url('./fonts/bagnard-webfont.eot');
src: url('./fonts/bagnard-webfont.eot?#iefix') format('embedded-opentype'),
url('./fonts/bagnard-webfont.woff2') format('woff2'),
url('./fonts/bagnard-webfont.woff') format('woff'),
url('./fonts/bagnard-webfont.ttf') format('truetype'),
url('./fonts/bagnard-webfont.svg#bagnardregular') format('svg');
src: url('../fonts/bagnard-webfont.eot');
src: url('../fonts/bagnard-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/bagnard-webfont.woff2') format('woff2'),
url('../fonts/bagnard-webfont.woff') format('woff'),
url('../fonts/bagnard-webfont.ttf') format('truetype'),
url('../fonts/bagnard-webfont.svg#bagnardregular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'erbarboldcondensed';
src: url('erbar-boldcondensed-webfont.eot');
src: url('erbar-boldcondensed-webfont.eot?#iefix') format('embedded-opentype'),
url('erbar-boldcondensed-webfont.woff2') format('woff2'),
url('erbar-boldcondensed-webfont.woff') format('woff'),
url('erbar-boldcondensed-webfont.ttf') format('truetype'),
url('erbar-boldcondensed-webfont.svg#erbarboldcondensed') format('svg');
font-weight: normal;
font-family: 'Erbar condensed';
src: url('../fonts/erbar-boldcondensed-webfont.eot');
src: url('../fonts/erbar-boldcondensed-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/erbar-boldcondensed-webfont.woff2') format('woff2'),
url('../fonts/erbar-boldcondensed-webfont.woff') format('woff'),
url('../fonts/erbar-boldcondensed-webfont.ttf') format('truetype'),
url('../fonts/erbar-boldcondensed-webfont.svg#erbarboldcondensed') format('svg');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'erbarlightcondensed';
src: url('erbar-lightcondensed-webfont.eot');
src: url('erbar-lightcondensed-webfont.eot?#iefix') format('embedded-opentype'),
url('erbar-lightcondensed-webfont.woff2') format('woff2'),
url('erbar-lightcondensed-webfont.woff') format('woff'),
url('erbar-lightcondensed-webfont.ttf') format('truetype'),
url('erbar-lightcondensed-webfont.svg#erbarlightcondensed') format('svg');
font-weight: normal;
font-family: 'Erbar condensed';
src: url('../fonts/erbar-lightcondensed-webfont.eot');
src: url('../fonts/erbar-lightcondensed-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/erbar-lightcondensed-webfont.woff2') format('woff2'),
url('../fonts/erbar-lightcondensed-webfont.woff') format('woff'),
url('../fonts/erbar-lightcondensed-webfont.ttf') format('truetype'),
url('../fonts/erbar-lightcondensed-webfont.svg#erbarlightcondensed') format('svg');
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: 'belgika5th';
src: url('belgika-5th-webfont.eot');
src: url('belgika-5th-webfont.eot?#iefix') format('embedded-opentype'),
url('belgika-5th-webfont.woff2') format('woff2'),
url('belgika-5th-webfont.woff') format('woff'),
url('belgika-5th-webfont.ttf') format('truetype'),
url('belgika-5th-webfont.svg#belgika5th') format('svg');
font-family: 'Belgika5th';
src: url('../fonts/belgika-5th-webfont.eot');
src: url('../fonts/belgika-5th-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/belgika-5th-webfont.woff2') format('woff2'),
url('../fonts/belgika-5th-webfont.woff') format('woff'),
url('../fonts/belgika-5th-webfont.ttf') format('truetype'),
url('../fonts/belgika-5th-webfont.svg#belgika5th') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'belgika8th';
src: url('belgika-8th-webfont.eot');
src: url('belgika-8th-webfont.eot?#iefix') format('embedded-opentype'),
url('belgika-8th-webfont.woff2') format('woff2'),
url('belgika-8th-webfont.woff') format('woff'),
url('belgika-8th-webfont.ttf') format('truetype'),
url('belgika-8th-webfont.svg#belgika8th') format('svg');
font-family: 'Belgika8th';
src: url('../fonts/belgika-8th-webfont.eot');
src: url('../fonts/belgika-8th-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/belgika-8th-webfont.woff2') format('woff2'),
url('../fonts/belgika-8th-webfont.woff') format('woff'),
url('../fonts/belgika-8th-webfont.ttf') format('truetype'),
url('../fonts/belgika-8th-webfont.svg#belgika8th') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'belgika16th';
src: url('belgika-16th-webfont.eot');
src: url('belgika-16th-webfont.eot?#iefix') format('embedded-opentype'),
url('belgika-16th-webfont.woff2') format('woff2'),
url('belgika-16th-webfont.woff') format('woff'),
url('belgika-16th-webfont.ttf') format('truetype'),
url('belgika-16th-webfont.svg#belgika16th') format('svg');
font-family: 'Belgika16th';
src: url('../fonts/belgika-16th-webfont.eot');
src: url('../fonts/belgika-16th-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/belgika-16th-webfont.woff2') format('woff2'),
url('../fonts/belgika-16th-webfont.woff') format('woff'),
url('../fonts/belgika-16th-webfont.ttf') format('truetype'),
url('../fonts/belgika-16th-webfont.svg#belgika16th') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'belgika40th';
src: url('belgika-40th-webfont.eot');
src: url('belgika-40th-webfont.eot?#iefix') format('embedded-opentype'),
url('belgika-40th-webfont.woff2') format('woff2'),
url('belgika-40th-webfont.woff') format('woff'),
url('belgika-40th-webfont.ttf') format('truetype'),
url('belgika-40th-webfont.svg#belgika40th') format('svg');
font-family: 'Belgika40th';
src: url('../fonts/belgika-40th-webfont.eot');
src: url('../fonts/belgika-40th-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/belgika-40th-webfont.woff2') format('woff2'),
url('../fonts/belgika-40th-webfont.woff') format('woff'),
url('../fonts/belgika-40th-webfont.ttf') format('truetype'),
url('../fonts/belgika-40th-webfont.svg#belgika40th') format('svg');
font-weight: normal;
font-style: normal;
}
/**
* This file is based on the HTML2print boilerplate.
*
*
*/
/**
* Computation
*/
/* EXTRA SPACE AROUND THE PAGE: BLEED + CROP */
// TODO: find a more appropriate name
@crop: @crop-size + @bleed;
/* computes the edge size of the paper, which is the sum of the bleed and the
* crop sizes */
@edge: @crop-size + @bleed;
/* GEOMETRY OF THE PAPER SHEET */
@paper-width: @page-width + ( @crop * 2 );
@paper-height: @page-height + ( @crop * 2 );
/* Computes the size of the paper sheet */
@paper-width: @page-width + ( @edge * 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;
......@@ -19,6 +26,13 @@
/**
* 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 {
size: @paper-width @paper-height;
margin: 0;
......@@ -30,17 +44,18 @@
*/
@media all {
body {
margin: 0;
}
body { margin: 0; }
.paper {
width: @paper-width;
height: @paper-height;
box-sizing: border-box;
/* 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;
/* utile ou non? pour éviter qu'un papier soit coupé par le format de la
......@@ -71,46 +86,40 @@
1px @crop-size
;
background-position:
left @crop,
@crop top,
right @crop,
(@paper-width - @crop) top,
right (@paper-height - @crop),
(@paper-width - @crop) bottom,
left (@paper-height - @crop),
@crop bottom
left @edge,
@edge top,
right @edge,
(@paper-width - @edge) top,
right (@paper-height - @edge),
(@paper-width - @edge) bottom,
left (@paper-height - @edge),
@edge bottom
;
background-repeat: no-repeat;
}
.page {
/* defines the page size */
width: @page-width;
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;
text-rendering: optimizeLegibility;
}
// TODO: changer le format du papier en spread pour pouvoir imprimer en planche
.spread {
.paper {
float: left;
}
.paper:nth-child(odd) {
margin-left: -@crop;
}
.paper:nth-child(even) {
margin-right: -@crop;
}
.paper:first-child {
margin-left: @page-width;
}
}
.spread .paper { float: left; }
.spread .paper:nth-child(odd) { margin-left: -@edge; }
.spread .paper:nth-child(even) { margin-right: -@edge; }
.spread .paper:first-child { margin-left: @page-width; }
}
@media screen {
body {
background-color: #F0F0F0;
}
body { background-color: #F0F0F0; }
#pages {
width: @paper-width;
......@@ -129,31 +138,20 @@
margin-top: 1em;
margin-bottom: 1em;
}
.normal .paper {
//outline: 1px solid lightgray;
}
.normal .page {
outline: 1px dashed lightsalmon;
}
.preview .paper {
background: none;
}
.normal .page { outline: 1px dashed lightsalmon; }
.preview .paper { background: none; }
.preview .page {
outline: 1px solid lightgray;
background-color: white;
}
.debug #story {
outline: 1pt solid green;
}
.debug #story { outline: 1pt solid green; }
}
@media print {
html {
width: @paper-width;
}
html { width: @paper-width; }
body {
/* Allows printing of background colors */
/* Allows for background colors printing */
background-color: white;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
......@@ -172,6 +170,4 @@
*/
-webkit-region-break-before: always;
}
.debug .region-break {
border-top: 1pt dashed blue;
}
.debug .region-break { 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";
/* Loads the rules that set the geometry of the page and its representation on
* screen. */
@import "html2print.less";
/* Loads the rules that set the base layout of the document (header, body,
* footer) */
@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 @@
.paper:nth-child(even) .footer__page-number { margin-right: @gutter; }
.paper:nth-child(odd) .footer__page-number { text-align: right; }
/**
*
/* the geometry of the page */
@page-width: 160mm;
@page-height: 230mm;
......@@ -18,7 +22,6 @@
@footer-height: 12mm;
@footer-text: counter(page-counter);
@gutter: 12pt;
@body-size: @page-width - @page-margin-inside - @page-margin-outside;
@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