layout.scss 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  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: "Belgika8th", 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. /*.body:before { content: "Type d'article — Titre de l'article"; } */
  41. /*droite*/
  42. /*.body:before { content: "Médor n°1 — printemps 2015"; }*/
  43. .paper:nth-child(even) .body:before { content: "Médor — hiver 2016-2017"; }
  44. .body:after { content: counter(folio); z-index: 499;}
  45. /**
  46. * Miroir
  47. * -------
  48. */
  49. /**
  50. * Placement en miroir des éléments en fonction de si ils se trouvent sur une
  51. * page paire ou une page impaire, en utilisant le pseudo-sélecteur `nth-child`
  52. */
  53. html:not(.facing) .paper:nth-child(odd) .body,
  54. html.facing .paper:nth-child(even) .body {
  55. right: $page-margin-outside;
  56. left: $page-margin-inside;
  57. }
  58. html:not(.facing) .paper:nth-child(even) .body,
  59. html.facing .paper:nth-child(odd) .body {
  60. left: $page-margin-outside;
  61. right: $page-margin-inside;
  62. }
  63. html:not(.facing) .paper:nth-child(odd) .body:before,
  64. html.facing .paper:nth-child(even) .body:before {
  65. @extend .x1;
  66. @extend .w4;
  67. }
  68. html:not(.facing) .paper:nth-child(even) .body:before,
  69. html.facing .paper:nth-child(odd) .body:before {
  70. @extend .x5;
  71. @extend .w4;
  72. }
  73. html:not(.facing) .paper:nth-child(odd) .body:after,
  74. html.facing .paper:nth-child(even) .body:after {
  75. @extend .x5;
  76. @extend .w1;
  77. text-align: left;
  78. }
  79. html:not(.facing) .paper:nth-child(even) .body:after,
  80. html.facing .paper:nth-child(odd) .body:after {
  81. @extend .x1;
  82. @extend .w1;
  83. text-align: left;
  84. }
  85. #flow-main {
  86. -webkit-flow-into: flow-main;
  87. flow-into: flow-main;
  88. }
  89. .flow-main {
  90. -webkit-flow-from: flow-main;
  91. flow-from: flow-main;
  92. }