Download raw (14.0 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: 220mm 325mm; margin: 0; } /** * CANVAS */ @media all { body { margin: 0; } .paper { width: 220mm; height: 320mm; 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, 210mm top, right 310mm, 210mm bottom, left 310mm, 10mm bottom; background-repeat: no-repeat; } .h2p-page { width: 200mm; height: 300mm; box-sizing: border-box; position: absolute; } } @media screen { body { background-color: #F0F0F0 !important; } #pages { width: 220mm; height: 320mm; margin-left: auto; margin-right: auto; } .spread #pages { width: 440mm; height: 640mm; } .spread #pages .paper { float: left; } .spread #pages .paper:first-of-type { margin-left: 220mm; } .paper { /* centrer la page à l'écran */ background-color: white; margin-top: 1em; margin-bottom: 1em; } } @media print { html { width: 220mm; } body { /* Allows printing of background colors */ background-color: white; -webkit-print-color-adjust: exact; print-color-adjust: exact; } #pages { position: absolute; top: 0; } } /** * 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: 3px; height: 20mm; text-align: left; padding-right: 30px !important; outline-color: green; } .header:after { content: "The riddle of the real city"; right: 30px !important; } /* __________________________________ MAIN SECTION __________________________________ */ .body { height: 245.87291667mm; width: 100%; padding-top: 12.5pt; overflow: hidden; } #my-story { width: 200mm; } /* __________________________________ FOOTER __________________________________ */ .footer { margin: 0; width: 100%; height: 33.33333333mm; text-align: center; outline-color: red; } .footer:after { content: counter(page-counter); } /* 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: 30px; padding-right: 30px; } .paper:nth-child(even) .header, .paper:nth-child(even) .body, .paper:nth-child(even) .footer { padding-left: 30px; padding-right: 30px; } 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: 'Ostrich'; src: url("/assets/fonts/ostrich-bold.ttf") format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: "Dauphine"; src: url("/assets/fonts/Dauphine-Regular.otf") format('opentype'); font-weight: normal; font-style: normal; } @font-face { font-family: "Dauphine"; src: url("/assets/fonts/Dauphine-Italic.otf") format('opentype'); font-weight: normal; font-style: italic; } @font-face { font-family: "DauphineDings"; src: url("/assets/fonts/Dauphine-Dings.otf") format('opentype'); font-weight: normal; font-style: normal; } @font-face { font-family: "Garamond8"; src: url("/assets/fonts/EBGaramond08-Regular.ttf") format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: "Garamond12"; src: url("/assets/fonts/EBGaramond12-Regular.ttf") format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: "Garamond12"; src: url("/assets/fonts/EBGaramond12-Italic.ttf") format('truetype'); font-weight: normal; font-style: italic; } @font-face { font-family: "Garamond8"; src: url("/assets/fonts/EBGaramond12-Italic.ttf") format('truetype'); font-weight: normal; font-style: italic; } @font-face { font-family: "GaramondSC8"; src: url("/assets/fonts/EBGaramondSC08-Regular.ttf"); font-weight: normal; font-style: normal; } @font-face { font-family: "GaramondSC12"; src: url("/assets/fonts/EBGaramondSC12-Regular.ttf"); font-weight: normal; font-style: normal; } @font-face { font-family: 'Fira Mono'; src: url('/assets/fonts/FiraMono/EOT/FiraMono-Regular.eot'); src: url('/assets/fonts/FiraMono/EOT/FiraMono-Regular.eot?#iefix') format('embedded-opentype'), url('/assets/fonts/FiraMono/WOFF2/FiraMono-Regular.woff2') format('woff2'), url('/assets/fonts/FiraMono/WOFF/FiraMono-Regular.woff') format('woff'), url('/assets/fonts/FiraMono/TTF/FiraMono-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'RemigtonItalic'; src: url("/assets/fonts/LTCRemingtonTypewriterPro-Italic.ttf") format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'HKGrotesk'; src: url("/assets/fonts/HKGrotesk-Regular.otf") format('opentype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'HKGrotesk'; src: url("/assets/fonts/HKGrotesk-HKGrotesk-Italic.otf") format('opentype'); font-weight: 400; font-style: italic; } @font-face { font-family: 'HKGrotesk'; src: url("/assets/fonts/HKGrotesk-Medium.otf") format('opentype'); font-weight: 600; font-style: normal; } @font-face { font-family: 'HKGrotesk'; src: url("/assets/fonts/HKGrotesk-MediumItalic.otf") format('opentype'); font-weight: 600; font-style: italic; } @font-face { font-family: 'HKGrotesk'; src: url("/assets/fonts/HKGrotesk-Light.otf") format('opentype'); font-weight: 200; font-style: normal; } @font-face { font-family: 'HKGrotesk'; src: url("/assets/fonts/HKGrotesk-LightItalic.otf") format('opentype'); font-weight: 200; font-style: italic; } @font-face { font-family: 'Hugo'; src: url("/assets/fonts/Hugo-Regular.ttf") format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Hugo'; src: url("/assets/fonts/Hugo-Italic.ttf") format('truetype'); font-weight: normal; font-style: italic; } /* -------------------------------------------- VARIABLES ----------------------------------------- */ /* -------------------------------------------- GENERIC CLASSES ----------------------------------------- */ body { line-height: 12.5pt; } h1, h2 { color: inherit; } a { text-decoration: none; color: inherit; } em { font-style: italic; } div.column { float: left; padding: 0 6.25pt; 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 { position: relative; } .inlineFootnote { display: none; text-align: left; color: #993300; cursor: zoom-out; font-size: 9pt; font-family: 'Garamond12'; margin-top: 1.25pt; margin-left: 6.25pt; margin-bottom: 3.125pt; line-height: 10pt; -webkit-hyphens: auto; } .inlineFootnote.expanded { display: inline-block; width: 33.33333333mm; float: right; } .inlineFootnote.expanded p { text-indent: none; } .inlineFootnote.expanded p + p { text-indent: none; } .footnoteRef { color: #993300; font-family: 'Dauphine'; position: relative; top: -5px; font-size: 80%; margin-left: 4px; cursor: zoom-in; } .footnoteRef.collapsed { display: none; } .numberFootnote { color: #993300; font-family: 'Dauphine'; font-size: 80%; } p.big-break { margin-top: 12.5pt; text-indent: 0pt; } .page { background-image: url("img/bay-test.png"); } #stories ul { -webkit-flow-into: references; flow-into: references; } #stories article { -webkit-flow-into: main; flow-into: main; background: white; background-clip: content-box; } .main { -webkit-flow-from: main; flow-from: main; } .references { -webkit-flow-from: references; flow-from: references; } .header { height: 30mm; text-align: left !important; font-family: 'Garamond8' !important; text-transform: uppercase !important; letter-spacing: 0.002em !important; } .header, .footer { padding-left: 0%; padding-right: 0%; } .body { width: 80%; margin: auto; } * { font-size: 9pt; line-height: 12.5pt; } .main { position: relative; float: left; width: calc(50% - 4.5px); height: calc(100% - 11px); border: 0px solid black; padding-top: 6px; padding-bottom: 6px; } .main:nth-of-type(n+2) { border-left: 0px; } .references { height: 12.5pt; width: 250mm; position: absolute; z-index: 1; bottom: 0mm; transform: rotate(-90deg); transform-origin: bottom left; } .references.first { left: 33%; } .references.second { left: 66%; } .footer { height: 50mm; margin-top: 10%; font-family: "dauphine" !important; font-size: 16pt !important; height: 6%; margin-top: 60px; } h1, h2, ul, li, blockquote { margin: 0px; } article + article { margin-top: -3px; -webkit-region-break-before: always; padding-top: 122.93645833mm; } article.collapsed { -webkit-region-break-before: avoid; padding-top: 0px; } article.collapsed * { display: none; } article.collapsed h1, article.collapsed h2 { display: block; } article h2.collapsed { border-bottom: none !important; } .body, .paper:nth-child(odd) .page .body, .paper:nth-child(even) .page .body { padding: 6px 0px; } article { border-width: 0px 0px 3px 0px; border-color: black; border-style: solid; padding-bottom: 13pt; } article:first-of-type { margin-top: -9px; border-top: none; } p { text-rendering: initial; -webkit-hyphens: auto; hyphens: auto; margin-top: 0pt; margin-bottom: 0pt; font-weight: 400; padding: 0pt 16pt; text-indent: 18px; /* Garamond */ /*@text-align: justify; @font-family: 'Garamond8'; // 'HKGrotesk'; @font-size: 11.5pt; @line-height: 13.5pt;*/ /* HKGrotesk */ /*@text-align: justify; @font-family: 'HKGrotesk'; // 'HKGrotesk'; @font-size: 10pt; @line-height: 13.5pt;*/ /* Fira Mono */ text-align: left; font-family: 'Fira Mono'; font-size: 9pt; line-height: 12pt; } p.big-break { padding-top: 12pt; } article > p:first-of-type { border-top: 3px solid black; padding-top: 21px; text-indent: 0px; } em { font-style: normal; text-decoration: underline; font-weight: 400; } strong { font-weight: 400; letter-spacing: 0.9em; } strong::before { content: "\00a0 \00a0 \00a0 \00a0" !important; } strong::after { content: "\00a0 \00a0 \00a0 \00a0" !important; } h1 { font-family: "dauphine"; font-size: 16pt !important; border-right: 3px solid black; border-bottom: 3px solid black; text-align: center; margin-bottom: -9pt; margin-right: 6px; text-transform: uppercase; letter-spacing: 1pt; line-height: 21pt; padding: 3px 6px 0px 14pt; color: black; float: left; position: relative; display: block; } h2 { font-family: "dauphine" !important; margin-top: -3px; font-weight: "regular"; font-size: 23pt !important; line-height: 21pt; letter-spacing: -0.02em; padding: 8pt 8pt 8pt 18pt; text-align: left; border-top: 3px solid black !important; } h2:first-line::before { content: "\00a0" !important; } h4 { padding: 0px 18px; margin-top: 16px; margin-bottom: 6px; font-family: "dauphine" !important; font-size: 16pt !important; line-height: 16.25pt; text-align: center !important; } ul { list-style-type: none; padding: 0pt !important; } li { margin: 0; display: block; } li p { border: 3px solid black; margin: 0; text-indent: 0; padding: 6pt 21pt; font-family: "dauphine" !important; font-size: 9pt !important; line-height: 15pt; text-align: left !important; display: inline-block; background: white; } li em { font-size: 10pt !important; font-style: italic; } blockquote p { padding: 0px 12px; margin-top: 6px; margin-bottom: 6px; font-family: 'Garamond12' !important; font-size: 16pt !important; line-height: 16.25pt; text-align: left !important; } blockquote p:first-of-type { border-top: none; } blockquote em { font-family: 'Garamond8'; font-size: 16pt !important; font-style: italic; text-decoration: none; }