_home.scss 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421
  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. "actus actus actus actus actus actus"
  7. "actus actus actus actus actus actus"
  8. "programme programme programme programme programme programme"
  9. "programme programme programme programme programme programme"
  10. "programme programme programme programme programme programme";
  11. grid-template-rows: auto auto auto;
  12. grid-template-columns: 1fr repeat(4, 2fr) 1fr;
  13. min-height: 100vh;
  14. // 1er bandeau home
  15. .block-views-blockhome-nodes-block-1{
  16. grid-area: presentation;
  17. grid-row: 1;
  18. background: url("../images/pictos/forme_home_2.svg");
  19. background-size: 75%;
  20. background-position-y: bottom;
  21. background-position-x: left;
  22. background-repeat: no-repeat;
  23. .node-type-static{
  24. div:first-child{
  25. display: grid;
  26. grid-template-columns: 1fr repeat(4, 2fr) 1fr;
  27. grid-template-rows: repeat(4, auto);
  28. .field--name-field-images{
  29. display: none;
  30. }
  31. .field--name-field-accroche{
  32. grid-column: 2 /span 3;
  33. grid-row: 2 / span 2;
  34. font-size: 5rem;
  35. font-weight: 900;
  36. color: $blue-light;
  37. line-height: 6.9rem;
  38. margin-top: 2rem;
  39. margin-bottom: 5rem;
  40. width: fit-content;
  41. p{
  42. margin-top: 4rem;
  43. margin-bottom: 0;
  44. }
  45. span {
  46. background-color: $white;
  47. }
  48. }
  49. .field--name-title{
  50. grid-column: 4;
  51. grid-row: 2;
  52. margin-top: 3rem;
  53. h2{
  54. background-color: $white;
  55. a{
  56. color: #e1000f;
  57. font-weight: 900;
  58. text-transform: uppercase;
  59. font-family: "Source Code Pro";
  60. display: table;
  61. margin: 0px auto 0px auto;
  62. // background-color: $white;
  63. }
  64. }
  65. }
  66. .links.inline{
  67. grid-column: 2;
  68. grid-row: 4;
  69. max-width: 70%;
  70. min-width: fit-content;
  71. height: 1.5rem;
  72. padding: 0.4rem 1rem;
  73. font-size: 0.8rem;
  74. margin-bottom: 2.5rem;
  75. background-color: $white;
  76. border: 2px solid $blue-light;
  77. list-style: none;
  78. text-align: center !important;
  79. a{
  80. display: inline-flex;
  81. text-transform: uppercase;
  82. font-weight: 700;
  83. color: $blue-light;
  84. &:after{
  85. display: block;
  86. 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>');
  87. }
  88. }
  89. }
  90. }
  91. }
  92. }
  93. // bouton déposer candidature
  94. .block-block-content9448ca2a-90e3-488b-89cf-8ec6a986a9ca{
  95. grid-area: presentation;
  96. grid-column: 3 /span 4;
  97. grid-row: 1;
  98. align-self: end;
  99. margin-bottom: 2.5rem;
  100. max-width: 25%;
  101. min-width: fit-content;
  102. .field--type-link {
  103. grid-column: 3;
  104. // justify-self: end;
  105. position: relative;
  106. // max-width: 70%;
  107. // min-width: fit-content;
  108. height: 1.5rem;
  109. padding: 0.4rem 1rem;
  110. font-size: 0.8rem;
  111. margin: 0;
  112. background-color: $white;
  113. border: 2px solid $blue-light;
  114. list-style: none;
  115. top: -200%;
  116. text-align: center !important;
  117. a{
  118. display: inline-flex;
  119. text-transform: uppercase;
  120. font-weight: 700;
  121. color: $blue-light;
  122. .ext{
  123. display: none;
  124. }
  125. }
  126. a::after{
  127. 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>');
  128. }
  129. }
  130. }
  131. // bouton foire aux questions
  132. .block-block-content1bb9024b-d95f-4137-894c-362abf10a483{
  133. grid-area: presentation;
  134. grid-column: 5;
  135. grid-row: 1;
  136. background-color: $blue-light;
  137. height: fit-content;
  138. align-self: end;
  139. .field--name-field-lien{
  140. &:before{
  141. margin-top: 1rem;
  142. display: block;
  143. content: url("../images/pictos/picto_faq.svg");
  144. }
  145. text-align: center;
  146. a{
  147. font-size: 0.8rem;
  148. font-weight: 1000;
  149. color: $blue-dark;
  150. text-transform: uppercase;
  151. }
  152. }
  153. .field--name-field-description{
  154. margin-bottom: 1rem;
  155. p{
  156. margin-top: 0;
  157. margin-bottom: 0;
  158. margin-left: 1.5rem;
  159. margin-right: 1.5rem;
  160. text-align: center;
  161. a{
  162. font-weight: 800;
  163. color: $white;
  164. font-size: 1.3rem;
  165. }
  166. }
  167. }
  168. }
  169. .block-block-content7db64d87-3e22-4fbd-9c11-2b95f5bef695{
  170. grid-column: 5;
  171. grid-row: 1;
  172. height: fit-content;
  173. display: flex;
  174. justify-self: end;
  175. width: 50%;
  176. margin-top: 3rem;
  177. .field--name-body{
  178. justify-content: right;
  179. display: flex;
  180. flex-direction: column;
  181. text-transform: uppercase;
  182. text-align: right;
  183. font-size: 1.3rem;
  184. :nth-child(1){
  185. &:after{
  186. display: block;
  187. content: url("../images/pictos/noun_Arrow_3771902-rouge.svg");
  188. transform: rotate(90deg);
  189. height: fit-content;
  190. position: relative;
  191. top: -30px;
  192. right: -60px;
  193. }
  194. }
  195. :nth-child(2){
  196. font-size: 2.5rem;
  197. font-weight: 900;
  198. }
  199. }
  200. }
  201. // bandeau actus
  202. .block-views-blockactus-blocks-pages-block-1{
  203. grid-area: actus;
  204. width: 100vw;
  205. border-bottom: 5px solid $blue-light;
  206. border-top: 5px solid $blue-light;
  207. background: $background-actus;
  208. .view-actus-blocks-pages{
  209. .view-content{
  210. display: grid;
  211. grid-template-columns: 1fr repeat(4, 2fr) 1fr;
  212. margin: auto;
  213. padding-top: 2rem;
  214. padding-bottom: 4rem;
  215. @media (max-width: 479px){
  216. display: flex;
  217. padding-left: 1rem;
  218. width: 80%;
  219. }
  220. .views-row:nth-of-type(1) { grid-column: 2; }
  221. .node-type-actualite{
  222. color: $black;
  223. line-height: 1.5rem;
  224. padding: 0.5rem;
  225. div:first-child{ // block actu dans le bandeau
  226. display: flex;
  227. flex-direction: column;
  228. :nth-child(1) { order: 1; }
  229. :nth-child(4) { order: 2; }
  230. :nth-child(5) { order: 3; }
  231. }
  232. .field--name-field-images {
  233. .field__item img{
  234. max-width: 95%;
  235. max-height: 150px;
  236. object-fit: cover;
  237. width: 100%;
  238. padding-bottom: 1rem;
  239. }
  240. }
  241. time{
  242. font-size: 0.9rem;
  243. font-weight: 800;
  244. padding-right: 1rem;
  245. width: fit-content;
  246. &:after{
  247. padding-left: 0.5rem;
  248. content: "|";}
  249. }
  250. .field:not(.field--name-field-images){
  251. width: 100%;
  252. }
  253. h2{ margin:0; }
  254. a{ color: $black; }
  255. .inline.links{
  256. padding-top: none !important;
  257. list-style: none;
  258. width: fit-content;
  259. align-self: flex-end;
  260. padding-right: 1rem;
  261. a{
  262. display: none;
  263. }
  264. }
  265. .field--name-field-actu-type{
  266. padding-top: 1rem;
  267. }
  268. }
  269. }
  270. }
  271. }
  272. // bouton voir toutes actus du bandeau bleu
  273. .block-block-content3ee1f633-aaa7-4b4c-a42a-02206e26d3a2{
  274. grid-area: actus;
  275. grid-row: 4;
  276. grid-column: 5 / span 6;
  277. max-width: 50%;
  278. min-width: fit-content;
  279. margin-bottom: 2rem;
  280. align-self: end;
  281. @media (max-width: 479px){
  282. grid-column: 3 / span 6;
  283. }
  284. .field--type-link {
  285. width: fit-content;
  286. height: fit-content;
  287. padding: 0.4rem 1rem;
  288. font-size: 0.8rem;
  289. margin: 0;
  290. background-color: $white;
  291. border: 2px solid $blue-light;
  292. list-style: none;
  293. display: inline-flex;
  294. a{
  295. text-transform: uppercase;
  296. font-weight: 700;
  297. color: $blue-light;
  298. display: inline-flex;
  299. align-items: center;
  300. }
  301. a::after{
  302. 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>');
  303. }
  304. }
  305. }
  306. // présentation programme
  307. .block-views-blockhome-nodes-block-2{
  308. grid-area: programme;
  309. .view-display-id-block_2:is(.view-id-home_nodes){
  310. padding-top: 2rem;
  311. // 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>');
  312. background: url('../images/pictos/carre-contour-bleu.svg');
  313. // background-position-y: 50%;
  314. background-repeat: no-repeat;
  315. max-width: 100vw;
  316. background-size: cover;
  317. .node-type-static{
  318. width: 70%;
  319. margin: auto;
  320. div:first-child:not(.field__item):not(.field){
  321. display: flex;
  322. flex-direction: row;
  323. flex-wrap: wrap;
  324. :nth-child(4) { order: 3; }
  325. }
  326. .inline.links{
  327. z-index: 95;
  328. align-self: flex-end;
  329. width: fit-content;
  330. height: fit-content;
  331. padding: 0.4rem 1rem;
  332. font-size: 0.8rem;
  333. margin: 0;
  334. background-color: $white;
  335. border: 2px solid $blue-light;
  336. list-style: none;
  337. a{
  338. text-transform: uppercase;
  339. font-weight: 700;
  340. color: $blue-light;
  341. &:after{
  342. // display: block;
  343. 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>');
  344. }
  345. }
  346. }
  347. .field--name-field-images{
  348. // grid-column: 2 / 4;
  349. .field__item{
  350. img{
  351. width: 15rem;
  352. height: auto;
  353. }
  354. }
  355. }
  356. .field--name-title{
  357. display: none;
  358. }
  359. .field--name-field-accroche{
  360. flex: 1 1 50px;
  361. // grid-column: 4 / 9;
  362. padding-left: 1rem;
  363. p{
  364. background-color: $white;
  365. font-size: 1.5rem;
  366. width: 110%;
  367. padding-bottom: 2rem;
  368. margin-block-start: 0;
  369. text-align: start !important;
  370. }
  371. }
  372. .field--name-field-videos{
  373. flex: 0 0 80%;
  374. padding-top: 4rem;
  375. margin: auto;
  376. }
  377. }
  378. }
  379. }
  380. }
  381. }