added assets from html2print

2017-05-23 21:31:22 +02:00
parent c94e273a76
commit 55dc8cead4
13 changed files with 1064 additions and 77968 deletions
@@ -0,0 +1,297 @@
+// 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;
+  }
+}
+*/