Download raw (3.2 KB)

/**
 * Macro-structure
 * ===============
 */

.main,
.main:before,
.main:after { position: absolute; }

.main:before,
.main:after { z-index: 500; }


/**
 * Zone de composition principale
 * ------------------------------
 */

.main {
    top: @page-margin-top;
    bottom: @page-margin-bottom;
}

/* TODO: move into grid.less? */
.bloc { position: absolute; z-index: 500; }
.debug .header,
.debug .footer,
.debug .main,
.debug .bloc { outline: 1px solid purple; }

/**
 * Pieds de page
 * -------------
 */

// .main:before,
// .main:after {
//     display: block;
//     font-family: "Ume double stroke info pratique";
//     font-size: 8pt;
//     line-height: @line-height;
//     letter-spacing: 0.25pt;
//     z-index: 500;
// }

// .main:before,
// .main:after { bottom: @line-height * -3; }

/*gauche*/
/*.main:before { content: "Type d'article — Titre de l'article"; } */
/*droite*/
/*.main:before { content: "Médor n°1 —  printemps 2015"; }*/
// .main:before {
//   content: "Balsamine — Saison 2017-2018";
//   position: absolute;
//   transform-origin: top-left;
// }
// .main:after  {
//   content: counter(folio);
//   z-index: 499;
//   position: absolute
// }

.main:before, .main:after{
  font-family: "Ume vertical";
  font-size: 8pt;
  line-height: @line-height;
  text-transform: uppercase;
}

.sheet:nth-child(odd) .main :before {
  // transform: rotate(-90deg);
  transform-origin: top right;
  letter-spacing: 2px;
  text-align: left;
  padding: none;
  width: 80px;
  height: 5mm;
  right: 64px;
  top: 50px;
  position: absolute;
}



.sheet:nth-child(odd) .main:after {
  // content: counter(folio);
  text-align: left;
  right: 0mm;
  bottom: -12pt;
  width: 2mm;
  transform-origin: bottom right;
  // outline: 1px solid black;
}

.sheet:nth-child(even) .main:after {
  // content: counter(folio);
  text-align: right;
  left: 0mm;
  bottom: -12pt;
  width: 2mm;
  transform-origin: bottom left;
  // outline: 1px solid black;
}


/**
 * Miroir
 * -------
 */

/**
 * Placement en miroir des éléments en fonction de si ils se trouvent sur une
 * page paire ou une page impaire, en utilisant le pseudo-sélecteur `nth-child`
 */

html:not(.facing) .sheet:nth-child(odd) .main,
html.facing .sheet:nth-child(even) .main {
    right: @page-margin-outside;
    left: @page-margin-inside;
}

html:not(.facing) .sheet:nth-child(even) .main,
html.facing .sheet:nth-child(odd) .main {
    left: @page-margin-outside;
    right: @page-margin-inside;
}

// html:not(.facing) .sheet:nth-child(odd) .main:before,
// html.facing .sheet:nth-child(even) .main:before {
//     .x1();
//     .w4();
//     top: 0;
//     left: 0;
//     // transform: rotate(-90deg)
// }
// html:not(.facing) .sheet:nth-child(even) .main:before,
// html.facing .sheet:nth-child(odd) .main:before {
//     .x5();
//     .w4();
//     top : 0;
//     left: 0;
//     // transform: rotate(-90deg);
// }
// html:not(.facing) .sheet:nth-child(odd) .main:after,
// html.facing .sheet:nth-child(even) .main:after {
//     .x5();
//     .w1();
//     top : 0;
//     left: 0;
//     // transform: rotate(-90deg);
// }
// html:not(.facing) .sheet:nth-child(even) .main:after,
// html.facing .sheet:nth-child(odd) .main:after {
//     .x1();
//     .w1();
//     top : 0;
//     left: 0;
//     // transform: rotate(-90deg);
// }