Download raw (8.3 KB)
/* the geometry of the page */ /* the size of the crop marks*/ /* the size of bleed */ @import "assets/css/reset.css"; /** * Computation */ /* EXTRA SPACE AROUND THE PAGE: BLEED + CROP */ /* GEOMETRY OF THE PAPER SHEET */ /* SIZE OF SPREAD */ /** * DEFINITION OF THE PAPER SHEET */ @page { size: 85mm 120mm; margin: 0; } /** * CANVAS */ @media all { body { margin: 0; } .paper { width: 85mm; height: 115mm; box-sizing: border-box; /* Crop marks */ padding: 10mm; counter-increment: page-counter; /* utile ou non? pour éviter qu'un papier soit coupé par le format de la * page lors de la conversion et l'arrondis des unités */ page-break-inside: avoid; overflow: hidden; /* Crop marks */ background-image: -webkit-linear-gradient(90deg, black 0, black 100%), -webkit-linear-gradient(0deg, black 0, black 100%), -webkit-linear-gradient(90deg, black 0, black 100%), -webkit-linear-gradient(0deg, black 0, black 100%), -webkit-linear-gradient(90deg, black 0, black 100%), -webkit-linear-gradient(0deg, black 0, black 100%), -webkit-linear-gradient(90deg, black 0, black 100%), -webkit-linear-gradient(0deg, black 0, black 100%); background-size: 5mm 1px, 1px 5mm, 5mm 1px, 1px 5mm, 5mm 1px, 1px 5mm, 5mm 1px, 1px 5mm; background-position: left 10mm, 10mm top, right 10mm, 75mm top, right 105mm, 75mm bottom, left 105mm, 10mm bottom; background-repeat: no-repeat; } .h2p-page { width: 65mm; height: 95mm; box-sizing: border-box; position: absolute; } } @media screen { body { background-color: #F0F0F0 !important; } #pages { width: 85mm; height: 115mm; margin-left: auto; margin-right: auto; } .spread #pages { width: 170mm; height: 230mm; } .spread #pages .paper { float: left; } .spread #pages .paper:first-of-type { margin-left: 85mm; } .paper { /* centrer la page à l'écran */ background-color: white; margin-top: 1em; margin-bottom: 1em; } } @media print { html { width: 85mm; background: none; } body { /* Allows printing of background colors */ background: none; } #pages { position: absolute; top: 0; } html, body, .page .paper { background: none !important; } } /** * Helpers */ .region-break { /* Apply this class to an element to put it on a new region. * Hint: * You can also use an empty <div class="page-break"></div> * if you want to put manual page breaks without attaching it to an HTML element */ -webkit-region-break-before: always; } .header, .body, .footer { box-sizing: border-box; } /* __________________________________ HEADER __________________________________ */ .header { /*position: absolute;*/ /*margin-top: @page-margin-top;*/ margin: 0; padding-top: 0mm; height: 5mm; text-align: left; padding-right: 3.61111111mm !important; outline-color: green; } .header:after { content: " "; right: 3.61111111mm !important; } /* __________________________________ MAIN SECTION __________________________________ */ .body { height: 87mm; width: 100%; padding-top: 11.5pt; overflow: hidden; } #my-story { width: 65mm; } /* __________________________________ FOOTER __________________________________ */ .footer { margin: 0; width: 100%; height: 3mm; text-align: center; outline-color: red; } .footer:after { content: " "; } /* for spreads only */ .paper:nth-child(odd) .header { text-align: right; } .paper:nth-child(odd) .header, .paper:nth-child(odd) .body, .paper:nth-child(odd) .footer { padding-left: 3.61111111mm; padding-right: 3.61111111mm; } .paper:nth-child(even) .header, .paper:nth-child(even) .body, .paper:nth-child(even) .footer { padding-left: 3.61111111mm; padding-right: 3.61111111mm; } img { max-width: 100%; } h1, h2, h3, h4, h5, h6 { /* Avoids headings to be cut or to be orphans. * But it doesn't seem to work * if the element after has a page-break-inside avoid. It tries its best! */ -webkit-region-break-inside: avoid; -webkit-region-break-after: avoid; break-inside: avoid; break-after: avoid; } /* AN EXAMPLE TO AVOID PAGE BREAK INSIDE, * HERE NO PARAGRAPH WILL BE CUT, * BUT YOU MIGHT WANT TO DEACTIVATE THIS */ p { /*-webkit-region-break-inside: avoid;*/ } * { -webkit-font-feature-settings: "liga", "dlig", "clig", "kern"; } .debug .header { outline: 1pt solid pink; } .debug .body { outline: 1pt solid purple; } .debug .footer { outline: 1pt solid pink; } /* __________________________________ IMAGES __________________________________ */ /* Use those classes for images to fit width or height of parent elements or both. */ img.fit-height { height: 100%; } img.fit-width { width: 100%; } @font-face { font-family: 'Ume-wide'; src: url("/assets/fonts/Ume-Vertical-Wide.ttf") format('truetype'); font-weight: normal; font-style: normal; } /* -------------------------------------------- VARIABLES ----------------------------------------- */ /* -------------------------------------------- GENERIC CLASSES ----------------------------------------- */ body { line-height: 11.5pt; } h1, h2 { color: inherit; } a { text-decoration: none; color: inherit; } em { font-style: italic; } div.column { float: left; padding: 0 5.75pt; height: 100%; box-sizing: border-box; } div.column90 { width: 90%; } div.column60 { width: 60%; } div.column50 { width: 50%; } div.column30 { width: 30%; } div.column25 { width: 25%; } body#extended-content-html #pages { counter-reset: page-counter 2; } body#I-1-1 #pages { counter-reset: page-counter 12; } body#I-1-2 #pages { counter-reset: page-counter 24; } body#I-1-3 #pages { counter-reset: page-counter 30; } body#I-1-4 #pages { counter-reset: page-counter 38; } body#I-1-5 #pages { counter-reset: page-counter 54; } body#I-1-6 #pages { counter-reset: page-counter 68; } body#I-1-7 #pages { counter-reset: page-counter 76; } body#I-1-8 #pages { counter-reset: page-counter 84; } body#I-1-9 #pages { counter-reset: page-counter 104; } body#I-2-1 #pages { counter-reset: page-counter 118; } body#I-2-2 #pages { counter-reset: page-counter 124; } body#I-2-3 #pages { counter-reset: page-counter 136; } body#I-2-4 #pages { counter-reset: page-counter 148; } body#I-2-5 #pages { counter-reset: page-counter 160; } body#I-2-6 #pages { counter-reset: page-counter 170; } body#I-2-7 #pages { counter-reset: page-counter 180; } body#II-1 #pages { counter-reset: page-counter-left 192 page-counter-right 193; } body#II-2 #pages { counter-reset: page-counter-left 214 page-counter-right 215; } body#II-3 #pages { counter-reset: page-counter-left 254 page-counter-right 255; } body#II-4 #pages { counter-reset: page-counter-left 280 page-counter-right 281; } body#II-5 #pages { counter-reset: page-counter-left 292 page-counter-right 293; } body#II-6 #pages { counter-reset: page-counter-left 320 page-counter-right 321; } body#III #pages { counter-reset: page-counter 354; } .body { position: relative; } #stories article { -webkit-flow-into: main; flow-into: main; } .main { -webkit-flow-from: main; flow-from: main; } #stories article p img.objets { -webkit-flow-into: sidebar; flow-into: sidebar; } .sidebar { -webkit-flow-from: sidebar; flow-from: sidebar; } * { font-size: 9.5pt; line-height: 11.5pt; font-family: 'Ume-wide'; color: blue; } .header { float: left; position: absolute; } .sidebar { color: red !important; position: absolute; float: left; width: 20%; height: 95mm; border: 1px solid blue; } .paper:nth-of-type(2) .main { width: calc(100% - 16px); padding-left: 0%; } .main { position: relative; float: left; width: calc(80% - 16px); border: 0px solid black; padding-bottom: 6px; padding-left: 26%; padding-right: 0pt; padding-top: 11.5pt; } .header::after { background-image: url(/assets/logo/logos-balsa-17-18.svg); background-size: 100% 100%; background-repeat: no-repeat; display: inline-block; width: 40px; margin-left: 136pt; height: 40px; margin-top: 6pt; } .paper:nth-of-type(2) .header::after { display: none; } blockquote, ul { padding: 0px; margin: 0px; } blockquote ul li { font-size: 7.5pt; } blockquote ul li::before { content: '- '; } ul li { list-style-type: none; } img { width: 100%; } h2 { page-break-before: always; } h1 { margin: 0pt; padding: 0pt; } img.uvmap { width: 100%; } img.scene { width: 100%; }