decor-6-site/assets/css/print.css

@media print {

  @page {
    size: 165mm 240mm;
    margin-top: 95px;
    margin-bottom: 18mm;
    /*bleed: 6mm;*/
    /*marks: crop;*/
    --symbol-top: 1px;
    --symbol2-top: 0px;
    --running-top: 6mm;
    --running-bottom: 6mm;
    --running-left: 19px;
    --running-left-bottom: 55px;
  }

  @page:left {
    margin-left: 18mm;
    margin-right: 26mm;

    @top-left-corner {
      content: var(--symbol2) var(--symbol2) var(--symbol2);
      font-size: var(--sign-size);
      color: var(--sign-color);
      letter-spacing: var(--sign-spacing);
      font-family: var(--sign-family);
      line-height: var(--sign-baseline);
      vertical-align: top;
      padding-top: var(--running-top);
      text-align: left;
      padding-left: var(--running-left);
      position: relative;
      top: var(--symbol2-top);
    }


    @top-left {
      content: element(decor);
      vertical-align: top;
      padding-top: calc(var(--running-top) - var(--symbol-top));
      width: calc(var(--unit)*2);
      font-size: var(--font-size);
      color: var(--sign-color);
      font-family: var(--sign-family);
    }



    @top-center {
      content: element(author);
      vertical-align: top;
      padding-top: calc(var(--running-top) - var(--symbol-top));
      text-align: left;
      white-space: nowrap;
      font-size: var(--font-size);
      color: var(--sign-color);
      font-family: var(--sign-family);

    }


    @top-right {
      content: var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2);
      font-size: var(--sign-size);
      color: var(--sign-color);
      letter-spacing: var(--sign-spacing);
      font-family: var(--sign-family);
      line-height: var(--sign-baseline);
      vertical-align: top;
      padding-top: var(--running-top);
      width: 100%;
      white-space: nowrap;
      text-align: left;
      padding-left: 15px;
      position: relative;
      top: var(--symbol2-top);
    }

    @bottom-left-corner {
      content: counter(page) " (";
      vertical-align: bottom;
      padding-bottom: var(--running-bottom);
      white-space: nowrap;

      font-size: var(--sign-size);
      font-size: 12px;
      color: var(--sign-color);
      font-family: var(--sign-family);
      text-align: left;
      margin-left: 5mm;

      z-index: 100;
    } 






  }

  @page:right {
    margin-left: 26mm;
    margin-right: 18mm;

    @top-left-corner {
      content: var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2);
      font-size: var(--sign-size);
      color: var(--sign-color);
      letter-spacing: var(--sign-spacing);
      font-family: var(--sign-family);
      line-height: var(--sign-baseline);
      vertical-align: top;
      padding-top: var(--running-top);
      text-align: left;
      padding-left: var(--running-left);
      position: relative;
      top: var(--symbol2-top);
    }

    @top-left {
      content: element(title);
      vertical-align: top;
      padding-top: var(--running-top);
      white-space: nowrap;
      padding-right: 1.5ch;
      font-family: var(--sign-family);
      font-size: var(--font-size);
      color: var(--sign-color);
    }

    @top-right {
      content: var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2);
      font-size: var(--sign-size);
      color: var(--sign-color);
      letter-spacing: var(--sign-spacing);
      font-family: var(--sign-family);
      line-height: var(--sign-baseline);
      vertical-align: top;
      padding-top: var(--running-top);
      width: 100%;
      white-space: nowrap;
      position: relative;
      top: var(--symbol2-top);
    }


    @bottom-right-corner {
      content: ") " counter(page);
      vertical-align: bottom;
      padding-bottom: var(--running-bottom);
      text-align: right;
      white-space: nowrap;

      font-size: var(--sign-size);
      font-size: 12px;
      color: var(--sign-color);
      font-family: var(--sign-family);
      margin-right: 5mm;

      z-index: 100;

    } 
  }


  @page:blank {
    @top-left { content: none;}
    @top-left-corner { content: none;}
    @top-right { content: none; }
    @top-center { content: none;}


  }
}

.nav-title, .nav-author, .nav-type, .nav-decor{
  text-transform: uppercase;
  font-size: 12px;
}

.nav-title {
  position: running(title);
}

.nav-author {
  position: running(author);

}

.nav-type {
  position: running(type);
}

.nav-decor {
  position: running(decor);
}

.pagedjs_area {
  position: relative;
}


.pagedjs_margin-top-left .pagedjs_margin-content .nav-decor::after {
  content: var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2);
  font-size: var(--sign-size);
  color: var(--sign-color);
  letter-spacing: var(--sign-spacing);
  font-family: var(--sign-family);
  line-height: var(--sign-baseline);
  /* padding-left: 1ch; */
  width: calc(var(--unit) + var(--sub-unit));
  position: relative;
  top: var(--symbol2-top);
  padding-left: 11px;
}

.pagedjs_left_page .pagedjs_margin-top {
  width: calc(100% + var(--pagedjs-margin-right) - 2ch);
  overflow: hidden;
}


.pagedjs_right_page .pagedjs_margin-top{
  width: calc(100% + var(--pagedjs-margin-left) - 4ch);
  overflow: hidden;
}


.pagedjs_left_page .pagedjs_margin-bottom-left .pagedjs_margin-content::after {
  padding-left: 0.25ch;
  padding-right: 1.25ch;
  display: inline-block;
  background-color: white;
  min-width: 2ch;
}



.pagedjs_right_page .pagedjs_margin-bottom-right .pagedjs_margin-content::after {
   padding-left: 1.25ch;
  padding-right: 0.25ch;
  display: inline-block;
  background-color: white;
  min-width: 2ch;
}

.pagedjs_page.pagedjs_named_page.pagedjs_essai_page.pagedjs_essai_first_page .pagedjs_margin-top-left-corner>.pagedjs_margin-content::after,
.pagedjs_page.pagedjs_named_page.pagedjs_entretien_page.pagedjs_entretien_first_page .pagedjs_margin-top-left-corner>.pagedjs_margin-content::after{
  content: none !important;
}


[data-chapter="essai"]{
  page: essai;
  break-before: right;
}



[data-chapter="entretien"]{
  page: entretien;
  break-before: right;
}