libriis/assets/scss/styles.scss

// 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;
  }
}
*/