// your styles here $bgcolor:white; .paper, .preview .page { overflow: hidden; background-color: $bgcolor; } #stories{ font-family: "Vremena Grotesk" sans-serif; } .story-page{ @extend .w9; // -webkit-region-break-after:always; // break-after:always; // -webkit-region-break-inside:auto; // region-break-inside: auto; // -webkit-region-fragment: break; } .story-page-0, .story-page-1, .story-page-2{ @extend .h12; // overflow: visible; // position: relative; -webkit-region-break-after:always; break-after:always; -webkit-region-break-inside: avoid; break-inside: avoid; } figure, img{ margin:0; padding:0; max-width: 100%; } // footer / pagination .paper { .body:before, .body:after{ // display: block; display:inline-block; width:auto; .debug &{ outline: 1px solid green; } } .body:before{ top:50%; width:50mm; margin-top: -25mm; text-align: center; } .body:after{ bottom:-5mm; width:15mm; } } // Footer /*gauche*/ .paper:nth-child(odd) .body:before { transform-origin: right; transform: rotateZ(-90deg); right:-7mm; } /*droite*/ .paper:nth-child(even) .body:before { transform-origin: left; transform: rotateZ(90deg); left:-7mm; } // Pagination // gauche .paper:nth-child(odd) .body:after{ text-align: right; right:-8mm; } // droite .paper:nth-child(even) .body:after{ text-align: left; left:-8mm; } #page-1, #page-2{ .body:before, .body:after{ display: none; } .body{ top:0; right:0; bottom:0; left:0; } .bloc{ top:0; right:0; bottom:0; left:0; } } .story-page-0, .story-page-1{ width:100%; height:100%; h1{ margin:0 auto; width:mm2pt(150); font-family: 'Vremena Grotesk'; font-weight: 500; font-size: 95pt; text-transform: uppercase; text-align: center; line-height: 1.4; letter-spacing: 0.2em; -webkit-region-break-inside:avoid; break-inside:avoid; } } .story-page-0{ h1{ transform: translateX(4mm) translateY(-13mm); } } .story-page-1{ h1{ transform: translateX(-65mm) translateY(-20mm); } } .story-page-2{ height:auto; h2{ text-align: center; font-family: "Vremena"; font-size: 25pt; font-weight: 400; padding-top:mm2pt(55); padding-left: 2.8em; padding-right: 2.8em; } } .typo-1{ font-family: "Fantasque"; font-weight: bold; font-style: italic; } .typo-2{ font-family: "Vremena"; } .typo-3{ font-family: "Vremena Grotesk"; font-weight: bold; } .typo-4{ font-family: "Gap Sans" } .story-page{ margin-bottom: 10mm; } .story-page:not(.story-page-0):not(.story-page-1):not(.story-page-2){ h1{ // -webkit-region-break-before: auto; -webkit-region-break-inside: avoid; -webkit-region-break-after: avoid; margin: 0 0 5mm 0; margin-right: -$page-margin-inside*0.5; font-size: 40pt; font-weight: normal; line-height: 35pt; // &.paper-odd{ text-align: right; padding-left: 20mm; // } &.paper-even{ text-align: left; padding-left: 0; padding-right: 20mm; margin: 0 0 5mm 0; margin-left: -$page-margin-inside*0.5; } } figure{ // -webkit-region-break-before: avoid; -webkit-region-break-inside: avoid; // -webkit-region-break-after: avoid; position: relative; $iw:35mm; // image width $bw:4pt; // border width max-width: $iw+$bw*3; img{ max-width: $iw; border:$bw solid black; border-left: $bw*2 solid black; } figcaption{ font-size: 8pt; line-height: 9.5pt; max-width: 100%; padding-left: $bw*2; } // &.paper-odd{ float: left; margin:0 4mm 2mm 0; margin-left: -$page-margin-outside - $bw; // } &.paper-even{ float: right; margin:0 0 2mm 4mm; margin-right: -$page-margin-outside - $bw; text-align: right; img{ border:$bw solid black; border-right: $bw*2 solid black; } figcaption{ padding-right: $bw*2; } } } p{ font-family: "Averia Serif"; font-size: 9pt; line-height: 13pt; margin-top: 0; -webkit-hyphens: auto; // -webkit-region-break-before: always; // -webkit-region-break-inside: auto; // -webkit-region-break-after: always; // &:nth-of-type(1){ // -webkit-region-break-before:avoid; // -webkit-region-break-inside:auto; // } } &:after{ content: ""; display: block; float: none; clear: both; } } /* @-webkit-region .paper .flow-main { h1{ // color: red!important; } } @-webkit-region .paper:nth-child(even) .flow-main { h1{ color: purple; text-align: right; padding-left: 3mm; } figure{ float: left; margin-left: -$page-margin-outside; margin:0 4mm 2mm 0; } } @-webkit-region .paper:nth-child(odd) .flow-main { h1{ color: blue; text-align: left; padding-right: 3mm; } figure{ float: right; margin-left: -$page-margin-outside; margin:0 0 2mm 4mm; } } */