_home.scss 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662
  1. .path-frontpage{
  2. .block-region-content{
  3. display: grid;
  4. grid-template-areas: "presentation presentation presentation presentation presentation presentation"
  5. "presentation presentation presentation presentation presentation presentation"
  6. "presentation presentation presentation presentation presentation presentation"
  7. "presentation presentation presentation presentation presentation presentation"
  8. "actus actus actus actus actus actus"
  9. "actus actus actus actus actus actus"
  10. "programme programme programme programme programme programme"
  11. "programme programme programme programme programme programme"
  12. "programme programme programme programme programme programme";
  13. grid-template-rows: auto auto auto;
  14. grid-template-columns: 1fr repeat(4, 2fr) 1fr;
  15. min-height: 100vh;
  16. // 1er bandeau home
  17. .block-config-pages-block{
  18. grid-area: presentation;
  19. width: 100%;
  20. background: url("../images/pictos/forme_home_2.svg");
  21. // background: url("../images/carre_site.mp4");
  22. // background-size: 75%;
  23. background-position-y: bottom;
  24. background-position-x: left;
  25. background-repeat: no-repeat;
  26. .config_pages--type--home-front{
  27. width:45%;
  28. margin: auto;
  29. background-color: white;
  30. padding-left: 2rem;
  31. padding-bottom: 4rem;
  32. .field--name-field-titre{
  33. font-size: 5rem;
  34. font-weight: 900;
  35. color: $blue-light;
  36. line-height: 5.7rem;
  37. margin-top: 4rem;
  38. margin-bottom: 2rem;
  39. width: fit-content;
  40. }
  41. .field--name-field-sous-titre{
  42. color: #e1000f;
  43. font-weight: 900;
  44. font-size: 1.8rem;
  45. text-transform: uppercase;
  46. font-family: "Source Code Pro";
  47. }
  48. .field--name-field-punchline{
  49. color: $blue-light;
  50. font-weight: 900;
  51. font-size: 1.5rem;
  52. text-transform: uppercase;
  53. font-family: "Source Code Pro";
  54. padding-bottom: 3rem;
  55. }
  56. .field--name-field-lien{
  57. background-color: $white;
  58. // border: 2px solid $blue-light;
  59. width: fit-content;
  60. height: 1.5rem;
  61. padding: 0.4rem 1rem;
  62. text-align: center !important;
  63. float: right;
  64. a{
  65. display: inline-flex;
  66. text-transform: uppercase;
  67. font-weight: 700;
  68. color: $blue-light;
  69. align-items: center;
  70. &:after{
  71. display: block;
  72. 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>');
  73. }
  74. }
  75. }
  76. }
  77. }
  78. // .block-views-blockhome-nodes-block-1{
  79. // grid-area: presentation;
  80. // // grid-row: 1;
  81. // background: url("../images/pictos/forme_home_2.svg");
  82. // // background: url("../images/carre_site.mp4");
  83. // background-size: 75%;
  84. // background-position-y: bottom;
  85. // background-position-x: left;
  86. // background-repeat: no-repeat;
  87. // @media (max-width: 810px){
  88. // background: url("../images/pictos/forme_home_2_smartphone.svg");
  89. // background-size: 100%;
  90. // background-position-y: bottom;
  91. // background-position-x: left;
  92. // background-repeat: no-repeat;
  93. // }
  94. // .node-type-static{
  95. // div:first-child{
  96. // display: grid;
  97. // grid-template-columns: 1fr repeat(4, 2fr) 1fr;
  98. // grid-template-rows: repeat(4, auto);
  99. // .field--name-field-images{
  100. // ///////////////// à activer le 19 février /////////////////
  101. // display: none;
  102. // //////////////////////////////////
  103. // grid-column: 4 / span 6;
  104. // grid-row: 2;
  105. // .field__item{
  106. // display: block;
  107. // width: 400px;
  108. // height: 400px;
  109. // @media (max-width: 1517px){
  110. // width: 300px;
  111. // height: 300px;
  112. // }
  113. // img{
  114. // max-width:100%;
  115. // max-height: 100%;
  116. // }
  117. // }
  118. // }
  119. // .field--name-field-accroche{
  120. // grid-column: 2 /span 2;
  121. // grid-row: 2 / span 2;
  122. // font-size: 5rem;
  123. // font-weight: 900;
  124. // color: $blue-light;
  125. // line-height: 6.9rem;
  126. // margin-top: 4rem;
  127. // margin-bottom: 5rem;
  128. // width: fit-content;
  129. // p{
  130. // margin-top: 0rem;
  131. // margin-bottom: 0;
  132. // }
  133. // span {
  134. // background-color: $white;
  135. // }
  136. // @media (max-width: 810px){
  137. // grid-column: 2 /span 5;
  138. // grid-row: 2;
  139. // font-size: 3rem;
  140. // line-height: 4.3rem;
  141. // margin-top: 0;
  142. // margin-bottom: 1rem;
  143. // p{
  144. // margin-top: 0rem;
  145. // }
  146. // }
  147. // }
  148. // .field--name-title{
  149. // // grid-column: 4;
  150. // // grid-row: 2;
  151. // grid-column: 2;
  152. // grid-row: 1 / span 2;
  153. // margin-top: 3rem;
  154. // margin-bottom: 2rem;
  155. // h2{
  156. // background-color: $white;
  157. // a{
  158. // color: #e1000f;
  159. // font-weight: 900;
  160. // text-transform: uppercase;
  161. // font-family: "Source Code Pro";
  162. // display: table;
  163. // margin: 0px auto 0px auto;
  164. // // background-color: $white;
  165. // }
  166. // }
  167. // @media (max-width: 1517px){
  168. // }
  169. // @media (max-width: 810px){
  170. // margin-top: 1rem;
  171. // grid-column: 2 / 6;
  172. // grid-row: 1;
  173. // }
  174. // }
  175. // .links.inline{
  176. // grid-column: 2;
  177. // grid-row: 4;
  178. // max-width: 70%;
  179. // min-width: fit-content;
  180. // height: 1.5rem;
  181. // padding: 0.4rem 1rem;
  182. // font-size: 0.8rem;
  183. // margin-bottom: 2.5rem;
  184. // background-color: $white;
  185. // border: 2px solid $blue-light;
  186. // list-style: none;
  187. // text-align: center !important;
  188. // a{
  189. // display: inline-flex;
  190. // text-transform: uppercase;
  191. // font-weight: 700;
  192. // color: $blue-light;
  193. // align-items: center;
  194. // &:after{
  195. // display: block;
  196. // 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>');
  197. // }
  198. // }
  199. // @media (max-width: 810px){
  200. // grid-column: 2;
  201. // grid-row:3;
  202. // font-size: 0.6rem;
  203. // a{
  204. // &:after{
  205. // display: none;
  206. // }
  207. // }
  208. // }
  209. // }
  210. // }
  211. // }
  212. // }
  213. // // bouton déposer candidature
  214. // .block-block-content9448ca2a-90e3-488b-89cf-8ec6a986a9ca{
  215. // ///////////////// à activer le 19 février /////////////////
  216. // display: none;
  217. // //////////////////////////////////
  218. // grid-area: presentation;
  219. // grid-column: 3 /span 4;
  220. // grid-row: 4;
  221. // align-self: flex-end;
  222. // margin-bottom: 2.5rem;
  223. // max-width: 25%;
  224. // min-width: fit-content;
  225. // .field--type-link {
  226. // grid-column: 3;
  227. // // justify-self: flex-end;
  228. // position: relative;
  229. // // max-width: 70%;
  230. // // min-width: fit-content;
  231. // height: 1.5rem;
  232. // padding: 0.4rem 1rem;
  233. // font-size: 0.8rem;
  234. // margin: 0;
  235. // background-color: $white;
  236. // border: 2px solid $blue-light;
  237. // list-style: none;
  238. // top: -200%;
  239. // text-align: center !important;
  240. // a{
  241. // display: inline-flex;
  242. // text-transform: uppercase;
  243. // font-weight: 700;
  244. // color: $blue-light;
  245. // align-items: center;
  246. // .ext{
  247. // display: none;
  248. // }
  249. // }
  250. // a::after{
  251. // 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>');
  252. // }
  253. // }
  254. // @media (max-width: 810px){
  255. // grid-area: presentation;
  256. // grid-column: 5;
  257. // grid-row: 4;
  258. // .field--type-link { font-size: 0.6rem;
  259. // a::after{
  260. // display: none;
  261. // }
  262. // }
  263. // }
  264. // }
  265. // // bouton foire aux questions
  266. // .block-block-content1bb9024b-d95f-4137-894c-362abf10a483{
  267. // ///////////////// à activer le 19 février /////////////////
  268. // display: none;
  269. // //////////////////////////////////
  270. // grid-area: presentation;
  271. // grid-column: 5 ;
  272. // grid-row: 4;
  273. // background-color: $blue-light;
  274. // height: fit-content;
  275. // align-self: flex-end;
  276. // max-width: 70%;
  277. // min-width: fit-content;
  278. // .field--name-field-lien{
  279. // &:before{
  280. // margin-top: 1rem;
  281. // display: block;
  282. // content: url("../images/pictos/picto_faq.svg");
  283. // }
  284. // text-align: center;
  285. // a{
  286. // font-size: 0.8rem;
  287. // font-weight: 1000;
  288. // color: $blue-dark;
  289. // text-transform: uppercase;
  290. // }
  291. // }
  292. // .field--name-field-description{
  293. // margin-bottom: 1rem;
  294. // p{
  295. // margin-top: 0;
  296. // margin-bottom: 0;
  297. // margin-left: 1.5rem;
  298. // margin-right: 1.5rem;
  299. // text-align: center;
  300. // a{
  301. // font-weight: 800;
  302. // color: $white;
  303. // font-size: 1.3rem;
  304. // }
  305. // }
  306. // }
  307. // @media (max-width: 810px){
  308. // .field--name-field-lien{
  309. // background-color: $white;
  310. // border: 2px solid $blue-light;
  311. // padding: 0.4rem 1rem;
  312. // &:before{display: none;}
  313. // a{
  314. // display: inline-flex;
  315. // text-transform: uppercase;
  316. // font-weight: 700;
  317. // color: $blue-light;
  318. // align-items: center;
  319. // font-size: 0.6rem;
  320. // }
  321. // a::after{
  322. // display: none;
  323. // }
  324. // }
  325. // .field--name-field-description{display: none;}
  326. // }
  327. // }
  328. // // date limite de candidature
  329. // .block-block-content7db64d87-3e22-4fbd-9c11-2b95f5bef695{
  330. // ///////////////// à activer le 19 février /////////////////
  331. // // display: none;
  332. // //////////////////////////////////
  333. // grid-column: 5;
  334. // grid-row: 1;
  335. // height: fit-content;
  336. // ///////////////// à désactiver le 19 février /////////////////
  337. // display: flex;
  338. // //////////////////////////////////
  339. // justify-self: flex-end;
  340. // width: 50%;
  341. // margin-top: 3rem;
  342. // .field--name-body{
  343. // justify-content: right;
  344. // display: flex;
  345. // flex-direction: column;
  346. // text-transform: uppercase;
  347. // text-align: right;
  348. // font-size: 1.3rem;
  349. // :nth-child(1){
  350. // &:after{
  351. // display: block;
  352. // content: url("../images/pictos/noun_Arrow_3771902-rouge.svg");
  353. // transform: rotate(90deg);
  354. // height: fit-content;
  355. // position: relative;
  356. // top: -30px;
  357. // right: -60px;
  358. // }
  359. // }
  360. // :nth-child(2){
  361. // font-size: 2.5rem;
  362. // font-weight: 900;
  363. // }
  364. // }
  365. // @media (max-width: 810px){
  366. // display: none;
  367. // grid-column: 2 / span 6;
  368. // grid-row: 3;
  369. // width: 100%;
  370. // margin-top:8rem;
  371. // .field--name-body{
  372. // justify-content: left;
  373. // display: flex;
  374. // flex-direction:row;
  375. // text-transform: uppercase;
  376. // text-align: left;
  377. // align-items: center;
  378. // font-size: 1rem;
  379. // font-weight: 800;
  380. // :nth-child(1){
  381. // width: 25%;
  382. // height: fit-content;
  383. // &:after{
  384. // display: inline-flex;
  385. // transform: rotate(360deg) translateX(80px) translateY(-6px) scale(50%);
  386. // }
  387. // }
  388. // :nth-child(2){
  389. // margin: 0;
  390. // text-align: right;
  391. // justify-self: flex-end;
  392. // font-size: 1.5rem;
  393. // margin-left: 5rem;
  394. // margin-top: 0.6rem;
  395. // margin-bottom: 2rem;
  396. // }
  397. // }
  398. // }
  399. // }
  400. // bandeau actus
  401. .block-views-blockactus-blocks-pages-block-1{
  402. grid-area: actus;
  403. width: 100vw;
  404. border-bottom: 5px solid $blue-light;
  405. border-top: 5px solid $blue-light;
  406. background: $background-actus;
  407. .view-actus-blocks-pages{
  408. .view-content{
  409. display: grid;
  410. grid-template-columns: 1fr repeat(4, 2fr) 1fr;
  411. margin: auto;
  412. padding-top: 2rem;
  413. padding-bottom: 4rem;
  414. @media (max-width: 479px){
  415. display: flex;
  416. padding-left: 1rem;
  417. width: 80%;
  418. }
  419. .views-row:nth-of-type(1) { grid-column: 2; }
  420. .node-type-actualite{
  421. color: $black;
  422. line-height: 1.5rem;
  423. padding: 0.5rem;
  424. div:first-child{ // block actu dans le bandeau
  425. display: flex;
  426. flex-direction: column;
  427. // :nth-child(1) { order: 1; }
  428. // :nth-child(4) { order: 2; }
  429. // :nth-child(5) { order: 3; }
  430. }
  431. .field--name-field-images {
  432. order: 1;
  433. .field__item img{
  434. max-width: 95%;
  435. max-height: 150px;
  436. object-fit: cover;
  437. width: 100%;
  438. padding-bottom: 1rem;
  439. }
  440. }
  441. .field--name-field-date{
  442. order: 2;
  443. display: flex;
  444. flex-direction: row;
  445. justify-content: flex-start;
  446. &:not(:last-child):after{
  447. padding-right: 1rem;
  448. content: "|";
  449. }
  450. time{
  451. font-size: 0.9rem;
  452. font-weight: 800;
  453. padding-right: 1rem;
  454. width: fit-content;
  455. // :not(:last-child):after{
  456. // padding-left: 0.5rem;
  457. // content: "|";
  458. // }
  459. }
  460. }
  461. .field--name-title{
  462. order:3;
  463. }
  464. .field--name-field-sous-titre{
  465. order:4;
  466. margin-top: 0.3rem;
  467. font-weight: 800;
  468. }
  469. .field:not(.field--name-field-images){
  470. width: 100%;
  471. }
  472. h2{ margin:0; }
  473. a{ color: $black; }
  474. .inline.links{
  475. padding-top: none !important;
  476. list-style: none;
  477. width: fit-content;
  478. align-self: flex-end;
  479. padding-right: 1rem;
  480. a{
  481. display: none;
  482. }
  483. }
  484. .field--name-field-actu-type{
  485. order:5;
  486. padding-top: 1rem;
  487. }
  488. }
  489. }
  490. }
  491. }
  492. // bouton voir toutes actus du bandeau bleu
  493. .block-block-content3ee1f633-aaa7-4b4c-a42a-02206e26d3a2{
  494. grid-area: actus;
  495. grid-row: 6;
  496. grid-column: 5 / span 6;
  497. max-width: 50%;
  498. min-width: fit-content;
  499. margin-bottom: 2rem;
  500. align-self: flex-end;
  501. @media (max-width: 479px){
  502. grid-column: 3 / span 6;
  503. }
  504. .field--type-link {
  505. width: fit-content;
  506. height: fit-content;
  507. padding: 0.4rem 1rem;
  508. font-size: 0.8rem;
  509. margin: 0;
  510. background-color: $white;
  511. border: 2px solid $blue-light;
  512. list-style: none;
  513. display: inline-flex;
  514. a{
  515. text-transform: uppercase;
  516. font-weight: 700;
  517. color: $blue-light;
  518. display: inline-flex;
  519. align-items: center;
  520. }
  521. a::after{
  522. 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>');
  523. }
  524. }
  525. }
  526. // présentation programme
  527. .block-views-blockhome-nodes-block-2{
  528. grid-area: programme;
  529. .view-display-id-block_2:is(.view-id-home_nodes){
  530. padding-top: 2rem;
  531. // 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>');
  532. background: url('../images/pictos/carre-contour-bleu.svg');
  533. // background-position-y: 50%;
  534. background-repeat: no-repeat;
  535. max-width: 100vw;
  536. background-size: cover;
  537. .node-type-static{
  538. width: 70%;
  539. margin: auto;
  540. div:first-child:not(.field__item):not(.field){
  541. display: flex;
  542. flex-direction: row;
  543. flex-wrap: wrap;
  544. :nth-child(4) { order: 3; }
  545. }
  546. .inline.links{
  547. z-index: 95;
  548. align-self: flex-end;
  549. width: fit-content;
  550. height: fit-content;
  551. padding: 0.4rem 1rem;
  552. font-size: 0.8rem;
  553. margin: 0;
  554. background-color: $white;
  555. border: 2px solid $blue-light;
  556. list-style: none;
  557. a{
  558. text-transform: uppercase;
  559. font-weight: 700;
  560. color: $blue-light;
  561. display: inline-flex;
  562. align-items: center;
  563. &:after{
  564. // display: block;
  565. 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>');
  566. }
  567. }
  568. }
  569. .field--name-field-images{
  570. // grid-column: 2 / 4;
  571. .field__item{
  572. img{
  573. width: 15rem;
  574. height: auto;
  575. }
  576. }
  577. }
  578. .field--name-title{
  579. display: none;
  580. }
  581. .field--name-field-accroche{
  582. flex: 1 1 50px;
  583. // grid-column: 4 / 9;
  584. padding-left: 1rem;
  585. p{
  586. background-color: $white;
  587. font-size: 1.5rem;
  588. width: 110%;
  589. padding-bottom: 2rem;
  590. margin-block-start: 0;
  591. text-align: start !important;
  592. }
  593. }
  594. .field--name-field-videos{
  595. flex: 0 0 80%;
  596. padding-top: 4rem;
  597. margin: auto;
  598. }
  599. }
  600. }
  601. }
  602. }
  603. }