page.less 2 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
/**
 * Macro-structure
 * ===============
 */

.body,
.footer {
    position: absolute;

    /*.display(flex);*/
    /*.justify-content(space-between);*/
}



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

.body {
    top: @page-margin-top;
23
    bottom: @page-margin-bottom;
24 25
}

26 27 28
/* TODO: move into grid.less? */
.bloc { position: absolute; }
.debug .bloc { outline: 1px solid purple; }
29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100

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

.footer { 
    bottom: @page-margin-bottom; 

    /*.flex-direction(row-reverse);*/

    font-family: "Alfphabet-IV", sans-serif;
    font-size: 6pt;
    text-transform: uppercase;
}

.footer:after { 
    display: block;
    content: " ";
    /*.flex(1); */
}
.footer:before { 
    display: block;
    content: " ";
    /*.flex(1); */
}

/*.footer__title { .flex(10); }*/

/*.footer__page-number { .flex(1); }*/


/* .footer__title:before { content: "Le jour où la Belgique a buggé"; } */

.footer__page-number:before { content: @footer-text; }



/**
 * 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`
 */

.paper:nth-child(odd) .body,
.paper:nth-child(odd) .footer {
    right: @page-margin-outside;
    left: @page-margin-inside;
}

.paper:nth-child(even) .body,
.paper:nth-child(even) .footer {
    left: @page-margin-outside;
    right: @page-margin-inside;
}

/*.paper:nth-child(odd) .footer { .flex-direction(row); }*/

.paper:nth-child(odd) .footer:before { margin-right: @gutter; }
.paper:nth-child(odd) .footer:after { margin-left: @gutter; }
.paper:nth-child(even) .footer:after { margin-right: @gutter; }
.paper:nth-child(even) .footer:before { margin-left: @gutter; }

.paper:nth-child(odd) .footer__title { margin-right: @gutter; }
.paper:nth-child(even) .footer__title { text-align: right; }

.paper:nth-child(even) .footer__page-number { margin-right: @gutter; }
.paper:nth-child(odd) .footer__page-number { text-align: right; }