layout.scss 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. /**
  2. * Macro-structure
  3. * ===============
  4. */
  5. .body,
  6. .body:before,
  7. .body:after { position: absolute; }
  8. .body:before,
  9. .body:after { z-index: 500; }
  10. /**
  11. * Zone de composition principale
  12. * ------------------------------
  13. */
  14. .body {
  15. top: $page-margin-top;
  16. bottom: $page-margin-bottom;
  17. }
  18. /* TODO: move into grid.less? */
  19. .bloc { position: absolute; z-index: 500; }
  20. .debug .header,
  21. .debug .footer,
  22. .debug .body,
  23. .debug .bloc { outline: 1px solid purple; }
  24. /**
  25. * Pieds de page
  26. * -------------
  27. */
  28. .body:before,
  29. .body:after {
  30. display: block;
  31. font-family: sans-serif;
  32. font-size: 6pt;
  33. line-height: $line-height;
  34. letter-spacing: 0.25pt;
  35. z-index: 500;
  36. }
  37. .body:before,
  38. .body:after { bottom: $line-height * -3; }
  39. /*gauche*/
  40. .paper:nth-child(odd) .body:before { content: "Pied de page"; }
  41. /*droite*/
  42. .paper:nth-child(even) .body:before { content: "Pied de page"; }
  43. .body:after { content: counter(folio); z-index: 499;}
  44. /**
  45. * Miroir
  46. * -------
  47. */
  48. /**
  49. * Placement en miroir des éléments en fonction de si ils se trouvent sur une
  50. * page paire ou une page impaire, en utilisant le pseudo-sélecteur `nth-child`
  51. */
  52. html:not(.facing) .paper:nth-child(odd) .body,
  53. html.facing .paper:nth-child(even) .body {
  54. right: $page-margin-outside;
  55. left: $page-margin-inside;
  56. }
  57. html:not(.facing) .paper:nth-child(even) .body,
  58. html.facing .paper:nth-child(odd) .body {
  59. left: $page-margin-outside;
  60. right: $page-margin-inside;
  61. }
  62. html:not(.facing) .paper:nth-child(odd) .body:before,
  63. html.facing .paper:nth-child(even) .body:before {
  64. @extend .x1;
  65. @extend .w4;
  66. }
  67. html:not(.facing) .paper:nth-child(even) .body:before,
  68. html.facing .paper:nth-child(odd) .body:before {
  69. @extend .x5;
  70. @extend .w4;
  71. }
  72. html:not(.facing) .paper:nth-child(odd) .body:after,
  73. html.facing .paper:nth-child(even) .body:after {
  74. @extend .x5;
  75. @extend .w1;
  76. text-align: left;
  77. }
  78. html:not(.facing) .paper:nth-child(even) .body:after,
  79. html.facing .paper:nth-child(odd) .body:after {
  80. @extend .x1;
  81. @extend .w1;
  82. text-align: left;
  83. }
  84. #flow-main {
  85. -webkit-flow-into: flow-main;
  86. flow-into: flow-main;
  87. }
  88. .flow-main {
  89. -webkit-flow-from: flow-main;
  90. flow-from: flow-main;
  91. }