/* the geometry of the page */ /* the size of the crop marks*/ /* the size of bleed */ /** * Computation */ /* EXTRA SPACE AROUND THE PAGE: BLEED + CROP */ /* GEOMETRY OF THE PAPER SHEET */ /* SIZE OF SPREAD */ /** * DEFINITION OF THE PAPER SHEET */ @page { size: 123mm 235mm; margin: 0; } /** * CANVAS */ @media all { body { margin: 0; } .paper { width: 123mm; height: 234mm; box-sizing: border-box; counter-increment: page-counter; page-break-inside: avoid; page-break-after: always; overflow: hidden; /* Crop marks */ padding: 12mm; position: relative; } .paper .crops { width: 123mm; height: 234mm; position: absolute; top: 0; left: 0; } .paper .crops div { border-style: solid; border-color: black; border-width: 0; width: 12mm; height: 12mm; position: absolute; box-sizing: border-box; } .paper .crops div span { width: 5mm; height: 5mm; background-color: white; position: absolute; } .paper .crops .crop-top-left { border-right-width: 1px; border-bottom-width: 1px; top: 0; left: 0; } .paper .crops .crop-top-left span { right: -1px; bottom: -1px; } .paper .crops .crop-top-right { border-left-width: 1px; border-bottom-width: 1px; top: 0; right: 0; } .paper .crops .crop-top-right span { left: -1px; bottom: -1px; } .paper .crops .crop-bottom-right { border-left-width: 1px; border-top-width: 1px; right: 0; bottom: 0; } .paper .crops .crop-bottom-right span { left: -1px; top: -1px; } .paper .crops .crop-bottom-left { border-right-width: 1px; border-top-width: 1px; left: 0; bottom: 0; } .paper .crops .crop-bottom-left span { right: -1px; top: -1px; } .page { width: 99mm; height: 210mm; position: absolute; } .spread .paper { float: left; } .spread .paper:nth-child(odd) { margin-left: -12mm; } .spread .paper:nth-child(even) { margin-right: -12mm; } .spread .paper:first-child { margin-left: 99mm; } } @media print { html { width: 123mm; } body { /* Allows printing of background colors */ background-color: white; -webkit-print-color-adjust: exact; print-color-adjust: exact; /* Activate opentype features and kernings */ -webkit-font-feature-settings: "liga", "dlig", "clig", "kern"; text-rendering: optimizeLegibility; } } /** * Helpers */ .region-break { /* Apply this class to an element to put it on a new region. * Hint: * You can also use an empty
* if you want to put manual page breaks without attaching it to an HTML element */ -webkit-region-break-before: always; break-before: always; } .header, .body, .footer { box-sizing: border-box; } /* __________________________________ HEADER __________________________________ */ .header { top: 0; margin: 0; padding-top: 10mm; width: 100%; height: 10mm; text-align: left; } .header:after { content: ""; } /* __________________________________ MAIN SECTION __________________________________ */ .body { height: 190mm; width: 99mm; margin-bottom: 15mm; padding-top: 20mm; padding-bottom: 15mm; position: absolute; } .recipient { -webkit-flow-from: myStory; flow-from: myStory; } #my-story { -webkit-flow-into: myStory; flow-into: myStory; } /* __________________________________ FOOTER __________________________________ */ .footer { position: absolute; bottom: 0; margin: 0; width: 100%; height: 10mm; text-align: center; } .footer:after { content: counter(page-counter); } /* mirrored pages */ .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: 10mm; padding-right: 10mm; } .paper:nth-child(even) .header, .paper:nth-child(even) .body, .paper:nth-child(even) .footer { padding-left: 10mm; padding-right: 10mm; } 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; break-inside: avoid; -webkit-region-break-after: 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;*/ } /** * DEBUG STYLES */ .debug .header { outline: 1px solid pink; } .debug .body { outline: 1px solid purple; } .debug .footer { outline: 1px solid pink; } .debug .region-break { border-top: 1px dashed blue; box-sizing: border-box; } .debug img { outline: 1px solid blue; } /** * User Interface */ @media screen { body { background-color: #F0F0F0; } #pages { width: 123mm; height: 234mm; margin-left: auto; margin-right: auto; } .spread #pages { width: 246mm; height: 468mm; } .paper { /* centrer la page à l'écran */ background-color: white; margin-top: 1em; margin-bottom: 1em; } .normal .page { outline: 1px dashed lightsalmon; } .preview .paper { background: none; } .preview .page { outline: 1px solid lightgray; background-color: white; } .preview .crops { visibility: hidden; } .button { z-index: 1000; background-color: black; font-family: sans-serif; text-transform: uppercase; font-size: 9pt !important; letter-spacing: 1pt; color: white; margin: 0; padding: 5pt 7pt; cursor: pointer; border: 0; } .button:hover { background-color: white; color: black; outline: 1pt solid black; } .button-active { background-color: white; color: black; outline: 1pt solid black; } .lo-res { outline: 10px solid red; } #interface { font-family: sans-serif; text-transform: uppercase; font-size: 10pt !important; line-height: 14pt; letter-spacing: 1pt; position: fixed; bottom: 10pt; right: 10pt; } #interface a { text-decoration: none; position: static; } div.dropdown { display: inline-block; position: relative; } div.dropdown ul { padding: 0.5em 0; display: none; background-color: black; position: absolute; right: 0; bottom: 2em; height: 200pt; width: 80pt; overflow: auto; } div.dropdown ul a { padding: 0 1em; color: white; display: block; } div.dropdown ul a:hover { background-color: white; color: black; } div.dropdown button { width: 80pt; } #toc { display: inline-block; } #toc-pages { padding: 0.5em 0; display: none; background-color: black; position: absolute; right: 0; bottom: 2em; height: 200pt; width: 80pt; overflow: auto; } #toc-pages a { padding: 0 1em; color: white; } #toc-pages a:hover { background-color: white; color: black; } #toc-pages button { width: 80pt; } } @media print { #interface { display: none; } } /* VARIABLES */ /* E X P O R T*/ .export.cuivre .lo-res { outline: none; } .export.cuivre p, .export.cuivre h1, .export.cuivre h2, .export.cuivre h3, .export.cuivre h4, .export.cuivre h5, .export.cuivre h6, .export.cuivre dl, .export.cuivre ul, .export.cuivre .date, .export.cuivre blockquote, .export.cuivre .hichem, .export.cuivre .hichem + footer, .export.cuivre .production, .export.cuivre .vert, .export.cuivre .drawings, .export.cuivre .spectacle-infos { visibility: hidden; } .export.cuivre #toc { visibility: visible; color: transparent; } .export.cuivre #toc dd:before { color: black; } .export.cuivre .cuivre { visibility: visible !important; color: black !important; } .export.cuivre .header { color: transparent; } .export.cuivre dl.bible { visibility: visible; color: transparent; background-image: url(/img/trames/vagues1-black.svg); } .export.cuivre #tarifs { color: white; } .export.cuivre .pass span { border-color: black; } .export.cuivre .paper:nth-child(even) section.header:before, .export.cuivre .paper:nth-child(odd) section.header:after { color: transparent; } .export.cuivre .paper:nth-child(even) section.header:after, .export.cuivre .paper:nth-child(odd) section.header:before { color: black; } .export.cuivre dt, .export.cuivre dd { outline-color: white !important; } .export.cuivre .trame { display: none; } .export.cuivre .paper:nth-child(odd) section.header:after { background-image: url(/img/trames/cercle-vagues2-black.svg); } .export.cuivre .paper:nth-child(even) section.header:before { background-image: url(/img/trames/cercle-vagues2-black.svg); } .export.vert { color: black; border-color: black !important; outline-color: black; } .export.vert .lo-res { outline: none; } .export.vert article#colophon dd, .export.vert .bible, .export.vert .paper:nth-child(even) section.header:before, .export.vert .paper:nth-child(odd) section.header:after { background: none; } .export.vert .cuivre { visibility: hidden; } .export.vert .prix { -webkit-transform: none !important; border-color: transparent !important; } .export.vert .pass span { border-color: transparent; } .export.vert .paper:nth-child(even) section.header:before, .export.vert .paper:nth-child(odd) section.header:after { color: black; } .export.vert .paper:nth-child(even) section.header:after, .export.vert .paper:nth-child(odd) section.header:before { color: transparent; } .export.vert #toc dd:before { color: transparent !important; } .export.vert .trame { display: none; } /* F O N T E S */ @font-face { font-family: "Mincho"; src: url("/fonts/UmeLoop/UmeLoopMincho12.otf"); } @font-face { font-family: "Gothic16"; src: url("/fonts/UmeLoop/UmeLoopGothic16.otf"); } @font-face { font-family: "Gothic12"; src: url("/fonts/UmeLoop/UmeLoopGothic12.otf"); } @font-face { font-family: "UmeVertical"; src: url("/fonts/UmeLoop/UmeLoopVertical12.otf"); } @font-face { font-family: "UmePlume"; src: url("/fonts/UmePlumePGothic-200.otf"); } @font-face { font-family: "UmeRings"; src: url("/fonts/Ume-P-Gothic_Rings.ttf"); } @font-face { font-family: "UmeShadow"; src: url("/fonts/Ume-P-Gothic-Shadow.otf"); } /* STYLES COMMUNS */ body { font-family: "Gothic12"; font-weight: 300; font-size: 10pt; line-height: 12.5pt; color: black; } .body { width: 100%; height: 100%; padding-top: 7mm; padding-bottom: 12mm; } .page { z-index: 2; } .header { font-size: 1em; font-weight: 200; padding-top: 12.5pt; } .footer { font-size: 0.7em; font-weight: 300; height: 0; display: none; } .paper { position: relative; background: white; } section.trame { position: absolute; top: 0; left: 0; z-index: 3; } div.fullpage { position: relative; } div.fullpage img { position: absolute; top: 0; left: 0; width: 100%; } .preview { z-index: 1000; } .paper:nth-child(even) { clear: both; } .spread #pages { width: 2000mm; } article { clear: both; -webkit-region-break-before: always; max-width: 298px; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } h1 { font-family: Gothic16; font-weight: normal; font-size: 2.2em; line-height: 1.25em; padding: 0px; text-align: center; margin-top: 0; margin-bottom: 1em; text-transform: uppercase; } h2 { font-family: "Gothic16"; font-weight: normal; font-size: 1.5em; line-height: 1.1em; text-align: center; margin-bottom: 6.25pt; margin-top: 12.5pt; clear: both; } h3 { font-size: 10pt; padding-bottom: 6.25pt; margin-bottom: 6.25pt; text-transform: uppercase; border-bottom: 1px solid black; text-align: center; clear: both; } h4 { text-transform: uppercase; margin-bottom: 0; } h5 { margin-bottom: 0.5em; font-family: UmeVertical; } h5 em { text-transform: uppercase; font-style: normal; } address { white-space: pre; } p { margin: 0; } p + p { text-indent: 25pt; } blockquote { margin: 12.5pt 0; font-family: Mincho; } blockquote p { margin-bottom: 0px; } blockquote p + p { margin-top: 0px; text-indent: 25pt; } ul { padding-left: 12.5pt; } ul li { margin: 0; list-style-type: none; text-indent: -12px; } ul li:before { content: "– "; } b, strong { text-decoration: underline; font-weight: normal; } em { font-style: italic; } sup { font-size: 0.7em; vertical-align: 0.5em; line-height: 0; } .small, footer { font-size: 0.7em; line-height: 1.2em; } footer { font-family: Mincho; margin-top: 5px; } figure { text-align: center; } figure.cuivre footer { color: black; } .spreadit { position: relative; } .spreaded { position: absolute; } .spreaded--centered { text-align: center; } .column50 { float: left; width: 50%; } .height0 { height: 1px; padding: 0 !important; } /* - - - - - - - - - - - - - - - - - T I T R E S C O U R A N T S - - - - - - - - - - - - - - - - -*/ .paper:nth-child(even) section.header:before { content: counter(page-counter); font-family: "UmeVertical"; background-image: url(/img/trames/cercle-vagues2.svg); background-size: 100%; -webkit-border-radius: 20px; padding: 4px 5px 6px 5px; width: 1em; height: 1em; display: inline-block; text-align: center; } .paper:nth-child(even) section.header:after { content: "Balsamine 2015–2016"; font-size: 0.7em; font-family: "UmeVertical"; color: black; margin-left: 10px; position: relative; top: -1px; } .paper:nth-child(odd) section.header:before { content: "Informations pratiques"; font-size: 0.7em; font-family: "UmeVertical"; color: black; margin-right: 10px; position: relative; top: 3px; } .paper:nth-child(odd) section.header:after { content: counter(page-counter); font-family: "UmeVertical"; -webkit-border-radius: 20px; background-image: url(/img/trames/cercle-vagues2.svg); background-size: 100%; padding: 4px 5px 6px 5px; width: 1em; height: 1em; display: inline-block; text-align: center; position: absolute; } #page-1 .header, #page-2 .header, #page-21 .header, #page-27 .header, #page-33 .header { display: none; } .paper:nth-child(3) section.header:before { content: "Édito"; } .paper:nth-child(5) section.header:before, .paper:nth-child(7) section.header:before, .paper:nth-child(9) section.header:before, .paper:nth-child(11) section.header:before { content: "Juste avant la nuit"; } .paper:nth-child(13) section.header:before, .paper:nth-child(15) section.header:before { content: "Festival Noël au Théâtre"; } .paper:nth-child(17) section.header:before, .paper:nth-child(19) section.header:before, .paper:nth-child(21) section.header:before { content: "Cataclop enzovoorts"; } .paper:nth-child(23) section.header:before, .paper:nth-child(25) section.header:before, .paper:nth-child(27) section.header:before { content: "Fractal"; } .paper:nth-child(29) section.header:before, .paper:nth-child(31) section.header:before, .paper:nth-child(33) section.header:before { content: "Side effects"; } .paper:nth-child(35) section.header:before, .paper:nth-child(37) section.header:before { content: "Revolt"; } .paper:nth-child(39) section.header:before, .paper:nth-child(41) section.header:before { content: "Nos Balsatoiles"; } .paper:nth-child(43) section.header:before { content: "Extras"; } .paper:nth-child(49) section.header:before { content: "Calendrier"; } .paper:nth-child(51) section.header:before { content: "Colophon"; } /* - - - - - - - - - - - - - - - - - S P E C T A C L E S - - - - - - - - - - - - - - - - -*/ .hichem { float: left; margin-right: 1em; height: 190mm; } .hichem + footer { float: left; font-family: "UmeVertical"; font-size: 10pt; text-align: left; } .hichem + footer .parties { text-decoration: underline; position: absolute; right: 0; bottom: 0; width: 180px; } article.spectacle { -webkit-region-break-before: always; text-align: left; display: block; } article.spectacle .artist { font-family: UmeVertical; text-align: center; margin-top: 0; } article.spectacle h1 { margin-bottom: 6.25pt; } article.spectacle div { display: block; padding-bottom: 0.3em; padding-top: 0.3em; } article.spectacle .spectacle-infos { margin: 0 auto; text-align: center; width: 100%; } article.spectacle .spectacle-infos .date { border-top: 1px solid black; } article.spectacle h3 + .spectacle-infos { margin-top: -1em; } /* fin article .spectacle */ dl.dates dt, dl.dates dd { display: inline; margin: 0; float: none; } dl.dates dt:after { content: " : "; } dl.dates dd:after { content: " "; display: block; } .bible { background-image: url(/img/trames/vagues1.svg); background-size: 100%; } .bible dt { text-transform: uppercase; float: left; padding: 2px 5px 0.4em 5px; background-color: white; } .bible dd { text-align: center; vertical-align: top; padding: 0.4em 0px 2px 0; margin-top: 1px; margin-left: 0; } .bible dd + dt { margin-top: 0; } .bible dt:after { content: " "; display: block; clear: both; } .region-break + .bible { margin-top: 0; } .production { font-family: UmeVertical; } /* - - - - - - - - - - - - - - - - - S P É C I F I Q UE À C H A Q U E S P E C T A C L E - - - - - - - - - - - - - - - - -*/ #page-titre p { border-bottom: 1px solid black; text-align: center; padding-bottom: 1em; margin-bottom: 1em; } #toc { text-align: center; text-indent: -40px; } #toc dt { text-transform: uppercase; margin-top: 1em; text-indent: 0px; } #toc dd:before { content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "; color: black !important; -webkit-margin-start: 0px; } #extras h1 { margin-bottom: 37.5pt; } #extras h4 { text-align: center; margin-bottom: 12.5pt; margin-top: 0; } /* I N F O S P R A T I Q U E S */ #infos-pratiques { -webkit-region-break-before: always; font-family: UmeVertical; font-size: 8pt; line-height: 1.3em; } dl.infos-pass { text-transform: uppercase; font-size: 7pt; font-family: UmeVertical; display: -webkit-flex; -webkit-flex-wrap: wrap; -webkit-flex-direction: row; -webkit-align-content: stretch; width: 80%; margin: 0 auto; } dl.infos-pass dt { -webkit-flex-grow: 0; margin-top: 2em; margin-bottom: 1em; } dl.infos-pass dd { text-align: center; vertical-align: top; -webkit-flex-grow: 2; height: 1em; border-bottom: 1px solid black; -webkit-align-self: flex-end; -webkit-flex-basis: 110px; } .pass { font-family: "Gothic16"; font-weight: normal; font-size: 1.5em; line-height: 1.3em; text-align: center; margin-bottom: 6.25pt; margin-top: 12.5pt; clear: both; } .pass span { padding-bottom: 1px; border-bottom: 1px solid black; } .pass .notes { font-size: 0.7em; line-height: 1.3em; text-indent: -10px; margin-bottom: 1em; margin-top: 3px; } #tarifs { font-size: 9pt; line-height: 1.3em; } #tarifs .tarif { width: 50%; float: left; } #tarifs .tarif div { text-align: center; margin-bottom: 0em; } #tarifs .tarif .prix { border: 1px solid black; -webkit-border-radius: 80px; -webkit-transform: rotate(0deg); padding: 0.8em 0.25em 0.4em; width: 36px; height: 26px; margin: auto; margin-top: 1em; margin-bottom: 1em; } #tarifs .tarif .arrow { margin-top: -40px; margin-left: 142px; font-size: 12px !important; } #tarifs .tarif .notes { font-size: 0.7em; line-height: 1.3em; width: 100%; clear: both; } #bar img { width: 90%; margin: 0 auto; display: block; margin-top: 1em; } #map { margin-top: 4em; } #logos { -webkit-region-break-before: always; } #logos div.fullpage img { top: -10em; } #equipe dl { background: none !important; } #equipe dt { text-transform: uppercase; float: left; padding: 2px 5px 0.4em 5px; outline: 1px solid black; } #equipe dd { text-align: center; vertical-align: top; padding: 0.4em 0px 2px 0px; outline: 1px solid black; margin-top: 1px; background: none; } #equipe dd + dt { margin-top: 1px; } #calendrier h2, .entete h2 { font-size: 1em; font-family: UmeVertical; clear: none; } #calendrier dt, .entete dt { text-transform: uppercase; float: left; padding: 2px 5px 0.4em 5px; outline: 1px solid black; } #calendrier dd, .entete dd { text-align: center; vertical-align: top; padding: 0.4em 0px 2px 0; outline: 1px solid black; margin-top: 1px; margin-left: 0; } #calendrier .vignette + dd, .entete .vignette + dd, #calendrier .vignette + dd + dd, .entete .vignette + dd + dd, #calendrier .vignette + dd + dt, .entete .vignette + dd + dt, #calendrier .vignette + dd + dt + dd, .entete .vignette + dd + dt + dd, #calendrier .vignette + dd + dt + dd + dd, .entete .vignette + dd + dt + dd + dd, #calendrier .vignette + dd + dd + dt + dd, .entete .vignette + dd + dd + dt + dd { margin-left: 62px; } #calendrier dd + dt, .entete dd + dt { margin-top: 1px; } #calendrier .date, .entete .date { border-top: 0 !important; } #calendrier .spectacle-infos, .entete .spectacle-infos { text-align: center; } #calendrier .titre, .entete .titre { font-size: 12.5pt; text-transform: uppercase; } #calendrier .spectacle + .spectacle, .entete .spectacle + .spectacle { margin-top: 4em; -webkit-region-break-inside: avoid; } #calendrier #noel, .entete #noel { margin-bottom: 35px; } #calendrier #cataclop, .entete #cataclop { margin-bottom: 45px; } #calendrier #fractal, .entete #fractal { margin-bottom: 30px; } #calendrier #revolt, .entete #revolt { margin-bottom: 25px; } #calendrier #colonie, .entete #colonie { margin-bottom: 15px; } #calendrier #eden, .entete #eden { margin-bottom: 30px; } #calendrier #pollutions, .entete #pollutions { margin-bottom: 50px; } #calendrier #kunsten .titre, .entete #kunsten .titre { margin-bottom: 1em; } .vignette { width: 1.25cm; padding: 0.5em !important; margin-bottom: 2em; } /* COLOPHON */ article#colophon dd { background-image: url(/img/trames/vagues1.svg); background-size: 100%; outline: none; margin-top: 0 !important; } article#colophon dt { background-color: white; outline: none; margin-top: 0 !important; }