_programme.scss 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703
  1. .page-node-type-programme{
  2. //hide logo in header
  3. #programme_toc-block_7{
  4. display: none;
  5. }
  6. //galerie de la page popsu - top (copy de home)
  7. #programme_toc-block_5{
  8. background-color: white;
  9. .slick-slide{
  10. margin: 0 1rem;
  11. }
  12. .slick-arrow{
  13. position: absolute;
  14. height: 100%;
  15. cursor: pointer;
  16. z-index: 100;
  17. // background-color: white;
  18. opacity: 0.2;
  19. transition: opacity 250ms;
  20. width: 10%;
  21. &:hover{
  22. opacity: .5;
  23. }
  24. }
  25. .slick-next{
  26. right: 0;
  27. top: 0;
  28. }
  29. .views-row{
  30. display: grid !important;
  31. grid-template-columns: 1fr;
  32. // flex-direction: column;
  33. // flex-direction: column-reverse;
  34. position: relative;
  35. height: auto;
  36. a{
  37. text-decoration: none;
  38. }
  39. }
  40. .programme-1{
  41. .views-field{
  42. background: $col-2 !important;
  43. }
  44. }
  45. .programme-2{
  46. .views-field{
  47. background: $col-2 !important;
  48. }
  49. }
  50. .programme-3{
  51. .views-field{
  52. background: $col-eur !important;
  53. }
  54. }
  55. .programme-4{
  56. .views-field{
  57. background: $col-1;
  58. }
  59. }
  60. .programme-5{
  61. .views-field{
  62. background: $col-mond !important;
  63. }
  64. }
  65. .programme-6{
  66. .views-field{
  67. background: $col-ter !important;
  68. }
  69. }
  70. .programme-7{
  71. .views-field{
  72. background: $col-met !important;
  73. }
  74. }
  75. .views-row{
  76. // margin-top: 2rem;
  77. .views-field-field-image{
  78. background: transparent !important;
  79. height: 20rem;
  80. img{
  81. width: 100%;
  82. }
  83. }
  84. .views-field-field-image{
  85. grid-column: 1;
  86. grid-row: auto;
  87. z-index: -1;
  88. margin-top: -15%;
  89. }
  90. .views-field-view-node{
  91. visibility: hidden;
  92. }
  93. .views-field:not(.views-field-field-image){
  94. padding-right: .5rem;
  95. padding-left: .5rem;
  96. // padding-bottom: 1rem;
  97. background-color: black;
  98. width: 60%;
  99. margin-left: 30%;
  100. color: white;
  101. align-self: flex-start;
  102. grid-column: 1;
  103. grid-auto-rows: min-content;
  104. font-size: $font-normal;
  105. text-transform: uppercase;
  106. }
  107. // .views-field-field-type-evenement{
  108. // grid-row: 4;
  109. // }
  110. .views-field-title{
  111. // grid-row: 5;
  112. font-size: $font-big !important;
  113. font-weight: 500;
  114. line-height: 1.2;
  115. padding-top: .3rem;
  116. }
  117. .views-field-field-sous-titre{
  118. padding: .5rem 0 1rem 0;
  119. }
  120. .views-field-field-programme{
  121. text-transform: uppercase;
  122. grid-row: 1;
  123. font-weight: 500;
  124. padding: .5rem 0 .5rem 0;
  125. }
  126. }
  127. }
  128. #projets-block_2{
  129. position: relative;
  130. .main_logo{
  131. z-index: 10;
  132. height: 7.2rem;
  133. width: 100%;
  134. position: absolute;
  135. // background: red;
  136. // margin: -5rem 0 3rem 0;
  137. top:0;
  138. left: 0;
  139. }
  140. }
  141. &.programme-1{
  142. article{
  143. h2,h3,h4,h5,h6,.field_titre{
  144. color: $col-2;
  145. }
  146. }
  147. .main_logo{
  148. background: center / contain no-repeat url(../../images/POPSU_1.svg);
  149. }
  150. }
  151. &.programme-2{
  152. article{
  153. h2,h3,h4,h5,h6,.field_titre{
  154. color: $col-2;
  155. }
  156. }
  157. .main_logo{
  158. background: center / contain no-repeat url(../../images/POPSU_1.svg);
  159. }
  160. }
  161. &.programme-3{
  162. article{
  163. h2,h3,h4,h5,h6,.field_titre{
  164. color: $col-eur;
  165. }
  166. }
  167. .main_logo{
  168. background: center / contain no-repeat url(../../images/POPSU_Europe.svg);
  169. }
  170. }
  171. &.programme-4{
  172. article{
  173. h2,h3,h4,h5,h6,.field_titre{
  174. color: $col-1;
  175. }
  176. }
  177. .main_logo{
  178. background: center / contain no-repeat url(../../images/POPSU_2.svg);
  179. }
  180. }
  181. &.programme-5{
  182. article{
  183. h2,h3,h4,h5,h6,.field_titre{
  184. color: $col-mond;
  185. }
  186. }
  187. .main_logo{
  188. background: center / contain no-repeat url(../../images/POPSU_monde.svg);
  189. }
  190. }
  191. &.programme-6{
  192. article{
  193. h2,h3,h4,h5,h6,.field_titre{
  194. color: $col-ter;
  195. }
  196. }
  197. .main_logo{
  198. background: center / contain no-repeat url(../../images/POPSU_territoires.svg);
  199. }
  200. }
  201. &.programme-7{
  202. article{
  203. h2,h3,h4,h5,h6,.field_titre{
  204. color: $col-met;
  205. }
  206. }
  207. .main_logo{
  208. background: center / contain no-repeat url(../../images/POPSU_metropoles.svg);
  209. }
  210. }
  211. .layout-content{
  212. position: relative;
  213. }
  214. .layout__region--top{
  215. max-height: 30%;
  216. grid-column: 1 / span 3;
  217. }
  218. .block-region-first{
  219. @include breakpoint(small down) {
  220. text-align: center;
  221. }
  222. position: absolute;
  223. top: 0;
  224. left: 0;
  225. width: 25%;
  226. padding: 1rem 1.5rem ;
  227. .prog-ressources-link{
  228. font-family: "duke";
  229. font-size: $font-large;
  230. cursor: pointer;
  231. transition: all 250ms;
  232. text-decoration: none;
  233. &:hover{
  234. padding: 0 0 0 .3rem;
  235. }
  236. }
  237. div[id=""] {
  238. @include breakpoint(small down) {
  239. display: none;
  240. }
  241. }
  242. .views-element-container{
  243. @include breakpoint(small down) {
  244. display: block;
  245. // &:not(:first-child){
  246. // margin-left: 1rem;
  247. // }
  248. }
  249. header{
  250. font-family: "duke";
  251. font-size: $font-large;
  252. text-transform: uppercase;
  253. cursor: pointer;
  254. transition: all 250ms;
  255. &:hover{
  256. padding: 0 0 0 .3rem;
  257. }
  258. }
  259. .views-row{
  260. display: none;
  261. padding: 0 0 0 1.2rem;
  262. margin-bottom: .5rem;
  263. a{
  264. text-decoration: none;
  265. &:hover{
  266. text-decoration: underline;
  267. }
  268. }
  269. }
  270. }
  271. }
  272. .block-region-third{
  273. z-index: 20;
  274. position: sticky;
  275. top: 1rem;
  276. @include breakpoint(small down) {
  277. margin-top: 1rem;
  278. }
  279. #evenements-block_1{
  280. background-color: black;
  281. margin-bottom: 3rem;
  282. h2{
  283. color: white;
  284. }
  285. }
  286. .programme-1{
  287. background: $col-1;
  288. }
  289. .programme-2{
  290. background: $col-2;
  291. }
  292. .programme-3{
  293. background: $col-eur;
  294. }
  295. .programme-4{
  296. background: $col-1;
  297. }
  298. .programme-5{
  299. background: $col-mond;
  300. }
  301. .programme-6{
  302. background: $col-ter;
  303. }
  304. .programme-7{
  305. background: $col-met;
  306. }
  307. .views-row{
  308. padding: 1rem 0;
  309. &:last-of-type{
  310. margin-bottom: 1rem;
  311. }
  312. }
  313. .views-field{
  314. color: white;
  315. padding: 0 1rem;
  316. font-weight: 500;
  317. // &:last-of-type{
  318. // margin-bottom: 1rem;
  319. // }
  320. .views-field-field-type-de-ressource{
  321. text-transform: uppercase;
  322. margin-bottom: .2rem;
  323. }
  324. .views-field-title{
  325. font-style: italic;
  326. }
  327. .views-field-field-sous-titre{
  328. font-weight: 400;
  329. }
  330. a{
  331. text-decoration: none;
  332. &:hover{
  333. text-decoration: underline;
  334. }
  335. }
  336. }
  337. }
  338. article{
  339. // font-size: $font-small;
  340. //temp hidden
  341. .computed_projets_references, .computed_themes_references, .field_logo{
  342. display: none;
  343. }
  344. // temp ??
  345. h2:first-child{
  346. display: none;
  347. }
  348. .body{
  349. font-size: $font-medium;
  350. height: 20rem;
  351. overflow: hidden;
  352. position: relative;
  353. -webkit-transition: all 250ms ease;
  354. -moz-transition: all 250ms ease;
  355. -o-transition: all 250ms ease;
  356. transition: all 250ms ease;
  357. footer{
  358. position:absolute;
  359. bottom:0;
  360. left:0;
  361. z-index: 1;
  362. width: 100%;
  363. text-align: center;
  364. a{
  365. display: inline-block;
  366. margin: 0 auto;
  367. background: black;
  368. color: white;
  369. cursor:pointer;
  370. font-family: "trueno";
  371. font-weight: 500;
  372. padding: .3rem .5rem;
  373. font-size: $font-small;
  374. text-decoration: none;
  375. text-transform: uppercase;
  376. &:hover{
  377. color:black;
  378. background: white;
  379. }
  380. }
  381. }
  382. }
  383. .body:after{
  384. content: "";
  385. opacity: 1;
  386. position: absolute;
  387. top: 0; bottom: 0; left: -15px; right: -15px;
  388. box-shadow: inset $bck-col 0 -4rem 2rem;
  389. }
  390. .body_open{
  391. height: auto;
  392. padding: 0 0 3rem 0;
  393. &:after{
  394. opacity: 0;
  395. -webkit-transition: all 250ms ease;
  396. -moz-transition: all 250ms ease;
  397. -o-transition: all 250ms ease;
  398. transition: all 250ms ease;
  399. }
  400. -webkit-transition: all 250ms ease;
  401. -moz-transition: all 250ms ease;
  402. -o-transition: all 250ms ease;
  403. transition: all 250ms ease;
  404. }
  405. .field_textes{
  406. .paragraph{
  407. // border-top: 1px solid black;
  408. border-bottom: 3px dotted gray;
  409. padding: 1rem 0;
  410. .field_titre{
  411. font-size: $font-big;
  412. font-weight: 600;
  413. text-transform: initial;
  414. cursor: pointer;
  415. display: grid;
  416. grid-template-columns: 95% 5%;
  417. align-content: center;
  418. // margin-top: 1rem;
  419. }
  420. p{
  421. margin-top: .5rem;
  422. }
  423. .field_titre:after{
  424. content: '▼';
  425. -webkit-transition: all 250ms ease;
  426. -moz-transition: all 250ms ease;
  427. -o-transition: all 250ms ease;
  428. transition: all 250ms ease;
  429. align-self: center;
  430. justify-self: center;
  431. }
  432. .rotate:after{
  433. transform: rotate(180deg);
  434. -webkit-transition: all 250ms ease;
  435. -moz-transition: all 250ms ease;
  436. -o-transition: all 250ms ease;
  437. transition: all 250ms ease;
  438. }
  439. .field_texte{
  440. height: auto;
  441. position: relative;
  442. h2{
  443. text-transform: inherit;
  444. }
  445. -webkit-transition: all 250ms ease;
  446. -moz-transition: all 250ms ease;
  447. -o-transition: all 250ms ease;
  448. transition: all 250ms ease;
  449. }
  450. .crop{
  451. height: 0;
  452. overflow: hidden;
  453. display: none;
  454. -webkit-transition: all 250ms ease;
  455. -moz-transition: all 250ms ease;
  456. -o-transition: all 250ms ease;
  457. transition: all 250ms ease;
  458. }
  459. }
  460. }
  461. }
  462. .block-region-bottom{
  463. background: $trame;
  464. >div:last-of-type{
  465. background-color: transparent;
  466. text-align: center;
  467. padding: 1rem;
  468. }
  469. h2{
  470. text-align: center;
  471. }
  472. #centre_de_ressources-block_2{
  473. .slick-slide{
  474. margin: 0 0;
  475. }
  476. .slick-arrow{
  477. position: absolute;
  478. height: 100%;
  479. cursor: pointer;
  480. z-index: 100;
  481. // background-color: white;
  482. opacity: 0.2;
  483. transition: opacity 250ms;
  484. width: 10%;
  485. &:hover{
  486. opacity: .5;
  487. }
  488. }
  489. .slick-next{
  490. right: 0;
  491. top: 0;
  492. }
  493. // .views-field:not(.views-field-field-image){
  494. // width: 80%;
  495. // }
  496. .views-row{
  497. display: grid !important;
  498. grid-template-columns: 1fr 1fr;
  499. align-items: center;
  500. background: white;
  501. position: relative;
  502. height: auto;
  503. padding: 1rem;
  504. background-clip: content-box;
  505. }
  506. .views-field-field-image{
  507. grid-row: 2 / span 6;
  508. z-index: 0;
  509. padding: .5rem;
  510. grid-column: 1;
  511. }
  512. .views-field:not(.views-field-field-image){
  513. background: transparent;
  514. width: auto;
  515. margin-left: 0;
  516. padding-left: 0;
  517. }
  518. .views-field-field-sous-titre{
  519. grid-column: 2 / span 1;
  520. }
  521. .views-field-field-auteurs {
  522. grid-row: 3 / span 1;
  523. grid-column: 2 / span 1;
  524. font-weight: 600;
  525. }
  526. .views-field-field-type-de-ressource{
  527. grid-column: 2 / span 1;
  528. }
  529. .views-field-field-edition{
  530. grid-column: 2 / span 1;
  531. }
  532. .views-field-title{
  533. font-weight: 400;
  534. font-style: italic;
  535. grid-row: 4 / span 1;
  536. grid-column: 2 / span 1;
  537. a{
  538. text-decoration: none;
  539. &:hover{
  540. text-decoration: underline;
  541. }
  542. }
  543. }
  544. .views-field-view-node{
  545. // padding-top: 1rem;
  546. // grid-column: 1;
  547. // grid-row: 1;
  548. // grid-row: 2 / span 1;
  549. // grid-column: 2 / span 1;
  550. display: none;
  551. }
  552. .views-field-field-programme,.views-field-title-1{
  553. .field-content{
  554. display: inline-block;
  555. width: auto;
  556. background-color: black;
  557. padding: .3rem .5rem;
  558. }
  559. padding-left: .5rem !important;
  560. grid-row: 1 / span 1;
  561. grid-column: 1 / span 2;
  562. text-transform: uppercase;
  563. margin-top: -.5rem;
  564. .field-content{
  565. font-weight: 600;
  566. display: inline-block;
  567. width: auto;
  568. color: white;
  569. padding: .02rem .3rem;
  570. // margin-bottom: 1rem;
  571. }
  572. }
  573. .programme-1{
  574. .views-field{
  575. color: $col-1 !important;
  576. }
  577. .views-field-field-programme, .views-field-title-1{
  578. .field-content{
  579. background: $col-1 ;
  580. }
  581. }
  582. }
  583. .programme-2{
  584. .views-field{
  585. color: $col-2 !important;
  586. }
  587. .views-field-field-programme, .views-field-title-1{
  588. .field-content{
  589. background: $col-2 ;
  590. }
  591. }
  592. }
  593. .programme-3{
  594. .views-field{
  595. color: $col-eur !important;
  596. }
  597. .views-field-field-programme, .views-field-title-1{
  598. .field-content{
  599. background: $col-eur ;
  600. }
  601. }
  602. }
  603. .programme-4{
  604. .views-field{
  605. color: $col-1;
  606. }
  607. .views-field-field-programme, .views-field-title-1{
  608. .field-content{
  609. background:$col-1 ;
  610. }
  611. }
  612. }
  613. .programme-5{
  614. .views-field{
  615. color: $col-mond !important;
  616. }
  617. .views-field-field-programme, .views-field-title-1{
  618. .field-content{
  619. background: $col-mond ;
  620. }
  621. }
  622. }
  623. .programme-6{
  624. .views-field{
  625. color: $col-ter !important;
  626. }
  627. .views-field-field-programme, .views-field-title-1{
  628. .field-content{
  629. background: $col-ter ;
  630. }
  631. }
  632. }
  633. .programme-7{
  634. .views-field{
  635. color: $col-met !important;
  636. }
  637. .views-field-field-programme, .views-field-title-1{
  638. .field-content{
  639. background: $col-met ;
  640. }
  641. }
  642. }
  643. }
  644. }
  645. }