_archives.scss 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213
  1. .path-archives{
  2. .content_container{
  3. &>div>h2{
  4. text-align: center;
  5. }
  6. .views-element-container{
  7. &>div{
  8. display: grid;
  9. grid-template-columns: 10% repeat(3, minmax(0, 1fr)) 10%;
  10. // grid-column-gap: 2rem;
  11. // grid-row-gap: 1rem;
  12. header{
  13. grid-column: 1 / span 5;
  14. text-align: center;
  15. }
  16. nav{
  17. grid-column: 1 / span 5;
  18. text-align: center;
  19. }
  20. .views-row:first-of-type{
  21. grid-column: 2;
  22. }
  23. .views-row:nth-of-type(3n+1){
  24. grid-column: 2;
  25. }
  26. .views-row{
  27. // background: $col-met;
  28. a{
  29. text-decoration: none;
  30. // color: white;
  31. }
  32. }
  33. .views-row{
  34. // &::after{
  35. // content: "";
  36. // padding-bottom: 100%;
  37. // display: block;
  38. // grid-column: 1 / span 2;
  39. // }
  40. padding: .3rem .7rem;
  41. text-transform: uppercase;
  42. display: grid !important;
  43. width: 100%;
  44. max-height: 100%;
  45. grid-template-columns: repeat( 2, minmax(0, 1fr));
  46. .views-field{
  47. grid-column: 1 / span 2;
  48. color: white;
  49. background: black;
  50. }
  51. .views-field-field-type-evenement{
  52. grid-column: 1 /span 2 ;
  53. padding: 0.5rem 0 0 1rem;
  54. }
  55. .views-field-field-date{
  56. grid-column: 1 /span 2 ;
  57. grid-row: 3;
  58. padding: 0.5rem 0 0 1rem;
  59. }
  60. .views-field-field-programme{
  61. margin-bottom: -.3rem;
  62. grid-row: 1;
  63. font-weight: 600;
  64. z-index: 10;
  65. background: transparent !important;
  66. .field-content{
  67. background:white;
  68. margin: 0 0 0 1rem ;
  69. padding: 0 0.2rem;
  70. display: inline-block;
  71. }
  72. background: transparent;
  73. }
  74. .views-field-field-image{
  75. grid-row: 2;
  76. max-height: 100%;
  77. overflow: hidden;
  78. img{
  79. width: 100%;
  80. height: 100%;
  81. object-fit: cover;
  82. }
  83. .field-content{
  84. padding-bottom: 66%;
  85. position: relative;
  86. overflow: hidden;
  87. a{
  88. height: 100%;
  89. position: absolute;
  90. overflow: hidden;
  91. }
  92. }
  93. }
  94. .views-field-title{
  95. font-weight: 600;
  96. padding: .5rem 1rem 0.5rem 1rem;
  97. }
  98. .views-field-field-sous-titre{
  99. padding: 0 1rem 1rem 1rem;
  100. }
  101. a{
  102. display: inline-block;
  103. width: auto;
  104. text-decoration: none;
  105. text-transform: uppercase;
  106. }
  107. }
  108. .programme-1{
  109. .views-field{
  110. background: $col-1;
  111. }
  112. .views-field-field-programme{
  113. color: $col-1 !important;
  114. }
  115. }
  116. .programme-2{
  117. .views-field{
  118. background: $col-2;
  119. }
  120. .views-field-field-programme{
  121. color: $col-2 !important;
  122. }
  123. }
  124. .programme-3{
  125. .views-field{
  126. background: $col-eur;
  127. }
  128. .views-field-field-programme{
  129. color: $col-eur !important;
  130. }
  131. }
  132. .programme-4{
  133. .views-field{
  134. background: $col-1;
  135. }
  136. .views-field-field-programme{
  137. color: $col-1 !important;
  138. }
  139. }
  140. .programme-5{
  141. .views-field{
  142. background: $col-mond;
  143. }
  144. .views-field-field-programme{
  145. color: $col-mond !important;
  146. }
  147. }
  148. .programme-6{
  149. .views-field{
  150. background: $col-ter;
  151. }
  152. .views-field-field-programme{
  153. color: $col-ter !important;
  154. }
  155. }
  156. .programme-7{
  157. .views-field{
  158. background: $col-met;
  159. }
  160. .views-field-field-programme{
  161. color: $col-met !important;
  162. }
  163. }
  164. // mise en page temporaire
  165. // article{
  166. // display: grid;
  167. // h2{
  168. // grid-row: 2;
  169. // }
  170. // &>div{
  171. // grid-row: 1;
  172. // display: grid;
  173. // div:nth-child(2){
  174. // grid-row: 1;
  175. // }
  176. // div:nth-child(1){
  177. // grid-row: 2;
  178. // }
  179. // }
  180. // }
  181. }
  182. }
  183. }
  184. }