_home.scss 13 KB

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