_home.scss 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384
  1. // home juin 2023
  2. @import "../partials/_slick-slider.scss";
  3. .path-frontpage{
  4. // bandeau actus
  5. .block-views-blockactus-blocks-pages-block-1{
  6. // grid-area: actus;
  7. width: 100vw;
  8. border-bottom: 5px solid $blue-light;
  9. // border-top: 5px solid $blue-light;
  10. background: $background-actus;
  11. .view-actus-blocks-pages{
  12. padding-top: 5rem;
  13. .view-content{
  14. display: flex;
  15. flex-basis: auto;
  16. // display: grid;
  17. // grid-template-columns: 1fr repeat(4, 2fr) 1fr;
  18. // margin: auto;
  19. // padding-top: 2rem;
  20. // padding-bottom: 4rem;
  21. @media (max-width: 479px){
  22. display: flex;
  23. flex-direction: column;
  24. // padding-left: 1rem;
  25. width: 80%;
  26. }
  27. .views-row{
  28. flex-basis: auto;
  29. }
  30. // .w3-button{
  31. // }
  32. // .views-row:nth-of-type(1) { grid-column: 2; }
  33. .node-type-actualite{
  34. color: $black;
  35. line-height: 1.5rem;
  36. padding: 0.5rem;
  37. div:first-child{ // block actu dans le bandeau
  38. display: flex;
  39. flex-direction: column;
  40. // :nth-child(1) { order: 1; }
  41. // :nth-child(4) { order: 2; }
  42. // :nth-child(5) { order: 3; }
  43. }
  44. .field--name-field-images {
  45. order: 1;
  46. .field__item img{
  47. max-width: 95%;
  48. max-height: 150px;
  49. object-fit: cover;
  50. width: 100%;
  51. padding-bottom: 1rem;
  52. }
  53. }
  54. .field--name-field-date{
  55. order: 2;
  56. display: flex;
  57. flex-direction: row;
  58. justify-content: flex-start;
  59. &:not(:last-child):after{
  60. padding-right: 1rem;
  61. content: "|";
  62. }
  63. time{
  64. font-size: 0.9rem;
  65. font-weight: 800;
  66. padding-right: 1rem;
  67. width: fit-content;
  68. // :not(:last-child):after{
  69. // padding-left: 0.5rem;
  70. // content: "|";
  71. // }
  72. }
  73. }
  74. .field--name-title{
  75. order:3;
  76. }
  77. .field--name-field-sous-titre{
  78. order:4;
  79. margin-top: 0.3rem;
  80. font-weight: 800;
  81. }
  82. .field:not(.field--name-field-images){
  83. width: 100%;
  84. }
  85. h2{ margin:0; }
  86. a{ color: $black; }
  87. .inline.links{
  88. padding-top: none !important;
  89. list-style: none;
  90. width: fit-content;
  91. align-self: flex-end;
  92. padding-right: 1rem;
  93. a{
  94. display: none;
  95. }
  96. }
  97. .field--name-field-actu-type{
  98. order:5;
  99. padding-top: 1rem;
  100. }
  101. }
  102. }
  103. }
  104. }
  105. // bouton voir toutes actus du bandeau bleu
  106. .block-block-content3ee1f633-aaa7-4b4c-a42a-02206e26d3a2{
  107. visibility: hidden;
  108. // grid-area: actus;
  109. // grid-row: 6;
  110. // grid-column: 5 / span 6;
  111. // max-width: 50%;
  112. // min-width: fit-content;
  113. // margin-bottom: 2rem;
  114. // align-self: flex-end;
  115. // @media (max-width: 479px){
  116. // grid-column: 2 / span 4;
  117. // max-width: 80%;
  118. // margin: auto;
  119. // margin-top: 1rem;
  120. // margin-bottom: 1.5rem;
  121. // }
  122. // .field--type-link {
  123. // width: fit-content;
  124. // height: fit-content;
  125. // padding: 0.4rem 1rem;
  126. // font-size: 0.8rem;
  127. // margin: 0;
  128. // background-color: $white;
  129. // border: 2px solid $blue-light;
  130. // list-style: none;
  131. // display: inline-flex;
  132. // a{
  133. // text-transform: uppercase;
  134. // font-weight: 700;
  135. // color: $blue-light;
  136. // display: inline-flex;
  137. // align-items: center;
  138. // }
  139. // a::after{
  140. // content: url('data:image/svg+xml,<svg width="40" height="20" xmlns="http://www.w3.org/2000/svg" version="1.1"><polyline points="71.9,49 24.3,49 24.3,51 71.9,51 58.1,64.8 59.5,66.2 75.7,50 59.5,33.8 58.1,35.2" transform="scale(0.5) translate(0,-25)" fill="rgb(0,158,227)" stroke="rgb(0,158,227)" stroke-width="0.7"/></svg>');
  141. // }
  142. // }
  143. }
  144. // présentation programme
  145. .block-views-blockhome-nodes-block-2{
  146. // grid-area: programme;
  147. .view-display-id-block_2:is(.view-id-home_nodes){
  148. padding-top: 2rem;
  149. padding-bottom: 4rem;
  150. // // background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><rect x="0" y="0" width="80" height="80" transform="rotate(35) translate(430, -800) scale(15)" fill="none" stroke="rgb(0,158,227)" stroke-width="0.4px"/></svg>');
  151. // background: url('../images/pictos/carre-contour-bleu.svg');
  152. // // background-position-y: 50%;
  153. // background-repeat: no-repeat;
  154. // max-width: 100vw;
  155. // background-size: cover;
  156. .node-type-static{
  157. width: 80%;
  158. margin: auto;
  159. @media (max-width: 479px) {
  160. width: 80%;
  161. }
  162. div:first-child:not(.field__item):not(.field){
  163. display: flex;
  164. flex-direction: row;
  165. flex-wrap: wrap;
  166. :nth-child(4) { order: 3; }
  167. }
  168. .inline.links{
  169. z-index: 95;
  170. align-self: flex-end;
  171. width: fit-content;
  172. height: fit-content;
  173. padding: 0.4rem 1rem;
  174. font-size: 0.8rem;
  175. margin: 0;
  176. background-color: $white;
  177. border: 2px solid $blue-light;
  178. list-style: none;
  179. a{
  180. text-transform: uppercase;
  181. font-weight: 700;
  182. color: $blue-light;
  183. display: inline-flex;
  184. align-items: center;
  185. &:after{
  186. // display: block;
  187. content: url('data:image/svg+xml,<svg width="40" height="20" xmlns="http://www.w3.org/2000/svg" version="1.1"><polyline points="71.9,49 24.3,49 24.3,51 71.9,51 58.1,64.8 59.5,66.2 75.7,50 59.5,33.8 58.1,35.2" transform="scale(0.5) translate(0,-25)" fill="rgb(0,158,227)" stroke="rgb(0,158,227)" stroke-width="0.7"/></svg>');
  188. }
  189. }
  190. }
  191. .field--name-field-images{
  192. // grid-column: 2 / 4;
  193. .field__item{
  194. img{
  195. width: 15rem;
  196. height: auto;
  197. }
  198. }
  199. }
  200. .field--name-title{
  201. display: none;
  202. }
  203. .field--name-field-accroche{
  204. flex: 1 1 50px;
  205. // grid-column: 4 / 9;
  206. padding-left: 1rem;
  207. @media (max-width: 479px){
  208. padding-left: 0em;
  209. }
  210. p{
  211. background-color: $white;
  212. font-size: 1.5rem;
  213. width: 110%;
  214. padding-bottom: 2rem;
  215. margin-block-start: 0;
  216. text-align: start !important;
  217. @media (max-width: 479px){
  218. font-size: 1.2rem;
  219. width: 100%;
  220. }
  221. }
  222. }
  223. .field--name-field-videos{
  224. flex: 0 0 80%;
  225. padding-top: 4rem;
  226. margin: auto;
  227. @media (max-width: 479px){
  228. flex: 0 0 100%;
  229. }
  230. .field__items {
  231. .field__item:nth-of-type(1){
  232. display: none;
  233. }
  234. }
  235. }
  236. }
  237. }
  238. }
  239. // Zoom sur les projets
  240. .block-views-blockprojets-block-4{
  241. border-top: 5px solid $blue-light;
  242. background: $background-actus;
  243. padding-top: 2rem;
  244. padding-bottom: 4rem;
  245. span h2{
  246. width: 80%;
  247. margin: auto;
  248. padding-top: 1rem;
  249. padding-bottom: 5rem;
  250. text-transform: uppercase;
  251. color: $red;
  252. font-family: 'Source Code Pro';
  253. font-weight: 1000;
  254. }
  255. .view-projets{
  256. width: 80%;
  257. margin: auto;
  258. .view-content{
  259. display: flex;
  260. flex-direction: row;
  261. justify-content: space-between;
  262. .views-row{
  263. width: 49%;
  264. .node-type-projet{
  265. color: $blue-dark;
  266. line-height: 1.5rem;
  267. // padding: 0.5rem;
  268. // padding-right: 1rem;
  269. // padding-left: 1rem;
  270. @media (max-width: 479px){
  271. padding-left: 0rem;
  272. padding-right: 0rem;
  273. padding-top: 2rem;
  274. }
  275. div:first-child{
  276. display: flex;
  277. flex-direction: column;
  278. a{
  279. color: $blue-dark;
  280. }
  281. .field--name-field-photo {
  282. order:1;
  283. img{
  284. width: 100%;
  285. object-fit: cover;
  286. height: fit-content;
  287. }
  288. // &::after{
  289. // display: block;
  290. // content:url('data:image/svg+xml,<svg width="160" height="25" xmlns="http://www.w3.org/2000/svg" version="1.1"> <line x1="0" x2="80" y1="20" y2="20" stroke-linecap="cube" stroke="rgb(9,57,139)" stroke-width="2.5"/></svg>');
  291. // }
  292. }
  293. .field--name-field-adresse{
  294. order:2;
  295. display: flex;
  296. text-transform: uppercase;
  297. font-size: 0.9rem;
  298. font-weight: 800;
  299. margin-top: 0.8rem;
  300. line-height: 0.6rem;
  301. .address{
  302. display: flex;
  303. flex-direction: row;
  304. margin: 0;
  305. .locality{
  306. padding-top: 0 !important;
  307. padding-bottom: 0 !important;
  308. &::after{
  309. content:",";
  310. margin-right: 0.3rem;
  311. }
  312. }
  313. .country{
  314. padding-top: 0 !important;
  315. padding-bottom: 0 !important;
  316. } }
  317. }
  318. .field--name-field-sous-titre{
  319. margin-top: 0.5rem;
  320. font-size: 0.9rem;
  321. font-weight: 800;
  322. order: 4;
  323. }
  324. .field--name-title{
  325. order: 3;
  326. margin-top: 0.5rem;
  327. font-size: 0.9rem;
  328. font-weight: 800;
  329. h2{margin: 0;}
  330. }
  331. .field--name-field-incube{
  332. order:4;
  333. color: $red;
  334. margin-top: 0.8rem;
  335. font-size: 0.7rem;
  336. }
  337. }
  338. }
  339. // .node-type-projet{
  340. // .field--type-image img{
  341. // object-fit: cover;
  342. // width: 100%;
  343. // }
  344. // }
  345. }
  346. }
  347. }
  348. }
  349. }