_projet.scss 35 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727
  1. .path-node.page-node-type-projet{
  2. .layout-container{
  3. overflow: unset;
  4. }
  5. .layout-content{
  6. .region-content{
  7. #block-contenudelapageprincipale{
  8. .layout--threecol-25-50-25{
  9. .layout__region--top{
  10. padding-top: 4rem;
  11. margin-left: 10%;
  12. margin-right: 10%;
  13. width: 80vw;
  14. .top_top{
  15. display: flex;
  16. flex-direction: row;
  17. margin-bottom: 2rem;
  18. // max-height: 600px;
  19. @media (max-width: 568px){
  20. flex-direction: column;
  21. }
  22. .block-entity-fieldnodefield-photo{
  23. width: 60%;
  24. padding-right: 2rem;
  25. @media (max-width: 568px){
  26. width: 100%;
  27. }
  28. img{
  29. height: auto;
  30. max-height: 600px;
  31. object-fit: contain;
  32. width: inherit;
  33. @media (max-width: 810px) {
  34. padding-top: 1rem;
  35. object-fit: cover;
  36. width: 100%;
  37. }
  38. @media (max-width: 568px){
  39. width: 100%;
  40. max-height: 300px;
  41. }
  42. }
  43. // // position: relative;
  44. // // bottom: -50%;
  45. .slick-dots {
  46. > li {
  47. display: inline-block;
  48. }
  49. > li:only-child {
  50. display: none;
  51. }
  52. }
  53. }
  54. .top_right{
  55. width: 40%;
  56. @media (max-width: 568px){
  57. width: 100%;
  58. }
  59. .block-entity-fieldnodetitle{
  60. margin: 0;
  61. .field--name-title{
  62. font-family: "Marianne";
  63. font-size: 2.3rem;
  64. font-weight: 800;
  65. color: $blue-light;
  66. @media (max-width:1624px) {
  67. font-size: 2.3rem;
  68. }
  69. @media (max-width:1384px) {
  70. font-size: 2rem;
  71. }
  72. @media (max-width:1216px) {
  73. font-size: rem;
  74. }
  75. @media (max-width: 810px){
  76. font-size: 1.7rem;
  77. }
  78. }
  79. }
  80. .block-entity-fieldnodefield-equipe{
  81. margin-top: 2rem;
  82. // grid-column: 8 / span 8;
  83. @media (max-width:1624px) {
  84. margin-top: 1rem;
  85. padding-top: 0.5rem;
  86. }
  87. @media (max-width:1384px) {
  88. margin-top: 0.8rem;
  89. padding-top: 0.5rem;
  90. }
  91. @media (max-width: 810px){
  92. padding-top: 0.5rem;
  93. }
  94. .field--name-field-equipe{
  95. color: $blue-dark;
  96. font-size: 1.5rem;
  97. font-weight: 900;
  98. text-transform: uppercase ;
  99. @media (max-width:1624px) {
  100. font-size: 1.3rem;
  101. }
  102. @media (max-width:1216px) {
  103. font-size: 1.1rem;
  104. }
  105. @media (max-width: 810px){
  106. font-size: 1rem;
  107. }
  108. }
  109. }
  110. .block-entity-fieldnodefield-incube{
  111. margin-top: 2rem ;
  112. // padding-top: 2rem;
  113. // grid-column: 8 ;
  114. width: fit-content;
  115. .field--name-field-incube{
  116. background-color: $red;
  117. color: white;
  118. font-weight: 800;
  119. padding-right: 0.3rem;
  120. padding-left: 0.2rem;
  121. }
  122. @media (max-width:1624px) {
  123. margin-top: 1rem;
  124. // padding-top: 0.5rem;
  125. }
  126. @media (max-width: 810px) {
  127. // grid-column: 2 / span 4;
  128. }
  129. }
  130. }
  131. }
  132. .top_bottom{
  133. display: flex;
  134. flex-direction: row;
  135. border: 0.1rem solid;
  136. justify-content: space-evenly;
  137. width: 90%;
  138. margin-top: 3rem;
  139. font-weight: 600;
  140. @media(max-width:479px){
  141. flex-direction: column;
  142. width: 100%;
  143. }
  144. .top_bottom_left{
  145. // display: flex;
  146. // flex-direction: row;
  147. padding-right: 1rem;
  148. order: 1;
  149. width: 30%;
  150. position: relative;
  151. height: 80px;
  152. text-align: center;
  153. @media(max-width:479px){
  154. width: 100%;
  155. }
  156. &::before{
  157. content: url("../images/pictos/picto_lieu.svg");
  158. // display: inline-flex;
  159. min-width:30px;
  160. height: auto;
  161. padding-right: 1rem;
  162. position: absolute;
  163. left: 0;
  164. margin-top: .83em;
  165. margin-left: 1rem;
  166. }
  167. .block-entity-fieldnodefield-region{
  168. // display: inline-flex;
  169. order: 1;
  170. margin-left: 70px;
  171. margin-bottom: 1rem;
  172. height: fit-content;
  173. }
  174. .block-entity-fieldnodefield-adresse{
  175. display: inline-flex;
  176. order: 2;
  177. margin-left: 70px;
  178. height: fit-content;
  179. .field--name-field-adresse{
  180. display: flex;
  181. flex-direction: row;
  182. margin-top: .83em;
  183. .address{
  184. margin: auto;
  185. display: flex;
  186. flex-direction: column;
  187. justify-content: start;
  188. margin: 0;
  189. .country{
  190. display: none;
  191. }
  192. }
  193. }
  194. }
  195. }
  196. .block-entity-fieldnodefield-etape-du-projet{
  197. order: 4;
  198. padding-left: 1rem;
  199. padding-right: 1rem;
  200. padding-bottom: 1rem;
  201. border-left: 0.1rem solid ;
  202. width: 30%;
  203. @media(max-width:479px){
  204. width: 100%;
  205. border-top: 0.1rem solid ;
  206. border-left: 0;
  207. padding-right: 0rem;
  208. padding-left: 0rem;
  209. }
  210. h2{
  211. color: $blue-dark;
  212. font-size: 1.2rem;
  213. font-weight: 900;
  214. text-transform: uppercase ;
  215. margin-bottom: 0rem !important;
  216. &:after{
  217. content: ' :';
  218. }
  219. @media(max-width:479px){
  220. padding-right: 1rem;
  221. padding-left: 1rem;
  222. }
  223. }
  224. .field__item{
  225. @media(max-width:479px){
  226. padding-right: 1rem;
  227. padding-left: 1rem;
  228. }
  229. }
  230. .field__label{
  231. display: none;
  232. }
  233. }
  234. .block-entity-fieldnodefield-type-de-moa{
  235. order: 2;
  236. padding-left: 1rem;
  237. border-left: 0.1rem solid ;
  238. padding-bottom: 1rem;
  239. width: 20%;
  240. @media(max-width:479px){
  241. border-left: 0;
  242. border-top: 0.1rem solid ;
  243. width: 100%;
  244. padding-right: 0rem;
  245. padding-left: 0rem;
  246. }
  247. h2{
  248. color: $blue-dark;
  249. font-size: 1.2rem;
  250. font-weight: 900;
  251. text-transform: uppercase ;
  252. margin-bottom: 0rem !important;
  253. &:after{
  254. content: ' :';
  255. }
  256. @media(max-width:479px){
  257. padding-right: 1rem;
  258. padding-left: 1rem;
  259. }
  260. }
  261. .field__item{
  262. @media(max-width:479px){
  263. padding-right: 1rem;
  264. padding-left: 1rem;
  265. }
  266. }
  267. .field__label{
  268. display: none;
  269. }
  270. }
  271. .block-entity-fieldnodefield-type-de-projet{
  272. order: 3;
  273. padding-left: 1rem;
  274. padding-bottom: 1rem;
  275. border-left: 0.1rem solid ;
  276. width: 20%;
  277. @media(max-width:479px){
  278. border-left: 0;
  279. border-top: 0.1rem solid ;
  280. width: 100%;
  281. padding-right: 0rem;
  282. padding-left: 0rem;
  283. }
  284. h2{
  285. color: $blue-dark;
  286. font-size: 1.2rem;
  287. font-weight: 900;
  288. text-transform: uppercase ;
  289. margin-bottom: 0rem !important;
  290. &:after{
  291. content: ' :';
  292. }
  293. @media(max-width:479px){
  294. padding-right: 1rem;
  295. padding-left: 1rem;
  296. }
  297. }
  298. .field__item{
  299. @media(max-width:479px){
  300. padding-right: 1rem;
  301. padding-left: 1rem;
  302. }
  303. }
  304. .field__label{
  305. display: none;
  306. }
  307. }
  308. }
  309. }
  310. .layout__region--first{
  311. // margin-top: 18rem;
  312. margin-top: 5rem;
  313. @media (max-width: 479px){
  314. display: none;
  315. }
  316. .block-region-first{
  317. display: flex;
  318. justify-content: flex-end;
  319. position: -webkit-sticky;
  320. position: sticky;
  321. top: 10rem;
  322. .block-entity-fieldnodefield-textes{
  323. display: flex;
  324. justify-content: flex-end;
  325. width: 50%;
  326. background-color: $white;
  327. padding-right: 2rem;
  328. .field--name-field-titre{
  329. display: flex;
  330. font-size: 1rem;
  331. font-weight: 1000;
  332. color: $blue-dark;
  333. border-bottom: 1px solid $blue-light;
  334. padding-bottom: 0.5rem;
  335. padding-right: 1rem;
  336. // margin-top: 2rem;
  337. margin-bottom: 0.8rem;
  338. &:hover{
  339. text-decoration: underline;
  340. }
  341. }
  342. }
  343. }
  344. }
  345. .layout__region--second{
  346. // grid-row: 3;
  347. margin-top: 5rem;
  348. flex: 0 1 50%;
  349. // margin-top: 18rem;
  350. @media (max-width: 479px) {
  351. flex: 0 1 100%;
  352. margin-top: 1rem;
  353. }
  354. .block-region-second{
  355. width: 90%;
  356. @media (max-width: 479px) {
  357. width: 80%;
  358. margin: auto;
  359. }
  360. .block-entity-fieldnodebody{
  361. p{
  362. margin-top: 0;
  363. }
  364. .field--type-text-with-summary{
  365. background-color: white;
  366. }
  367. }
  368. .block-entity-fieldnodefield-textes{
  369. background-color: $white;
  370. .field--name-field-titre{
  371. font-size: 1.5rem;
  372. font-weight: 1000;
  373. font-family: 'Source Code Pro';
  374. color: $blue-dark;
  375. text-transform: uppercase;
  376. margin-bottom: 0.8rem;
  377. }
  378. h4{
  379. text-transform: none !important;
  380. img{
  381. width: 100%;
  382. height: auto;
  383. }
  384. }
  385. .field--type-text-long{
  386. padding-right: 2rem;
  387. }
  388. p{
  389. margin-top: 0;
  390. }
  391. a{
  392. color: $black;
  393. text-decoration: underline;
  394. svg{
  395. display: none;
  396. }
  397. }
  398. }
  399. .block-entity-fieldnodebody{
  400. .panel-body{
  401. #outputtext{
  402. overflow-y: visible !important;
  403. }
  404. }
  405. }
  406. .block-entity-fieldnodefield-partenaires{
  407. .field__label{
  408. font-size: 1.5rem;
  409. font-weight: 1000;
  410. font-family: 'Source Code Pro';
  411. color: $blue-dark;
  412. text-transform: uppercase;
  413. margin-top: 2rem;
  414. margin-bottom: 0.8rem;
  415. }
  416. .field__items{
  417. display: flex;
  418. flex-direction: row;
  419. justify-content: space-between;
  420. .paragraph--type--partenaire{
  421. display: flex;
  422. flex-direction: column;
  423. align-items: center;
  424. // width: 35%;
  425. .field--name-field-lien{
  426. // display: none;
  427. padding-top: 1rem;
  428. }
  429. }
  430. }
  431. }
  432. }
  433. }
  434. .layout__region--third{
  435. // grid-row: 4;
  436. margin-top: 5rem;
  437. @media(max-width:479px){
  438. margin-top: 2rem;
  439. }
  440. .block-region-third{
  441. display: flex;
  442. flex-direction: column;
  443. width: 65%;
  444. @media(max-width:479px){
  445. width: 80%;
  446. margin: auto;
  447. }
  448. .block-entity-fieldnodefield-fichiers{
  449. h2{display: none;}
  450. .field--name-field-fichiers{
  451. .field__item{
  452. height: fit-content;
  453. border: 2px solid $blue-light;
  454. background-color: $white;
  455. margin-bottom: 1rem;
  456. min-height: 4rem;
  457. // background: $white;
  458. color: $blue-light;
  459. padding-left: 1rem;
  460. padding-top: 1rem;
  461. }
  462. span:nth-of-type(2){
  463. display: none;
  464. }
  465. .file--image{
  466. height: inherit;
  467. margin: auto;
  468. ::before{
  469. content: url("../images/pictos/noun_Download_file_307900.svg");
  470. min-width:30px;
  471. height: auto;
  472. padding-right: 1rem;
  473. }
  474. a{
  475. hyphens: auto;
  476. display: inline-flex;
  477. // align-items: center;
  478. color: $blue-light;
  479. font-weight: 800;
  480. // max-width: 80px ;
  481. }
  482. }
  483. .file--mime-application-pdf{
  484. height: inherit;
  485. margin: auto;
  486. ::before{
  487. content: url("../images/pictos/noun_Download_file_307900.svg");
  488. min-width:30px;
  489. height: auto;
  490. padding-right: 1rem;
  491. }
  492. a{
  493. hyphens: auto;
  494. display: inline-flex;
  495. // align-items: center;
  496. color: $blue-light;
  497. font-weight: 800;
  498. // max-width: 80px ;
  499. }
  500. }
  501. }
  502. }
  503. .block-entity-fieldnodefield-liens{
  504. h2{display: none;}
  505. .field--name-field-liens{
  506. .field__item{
  507. margin: auto;
  508. height: fit-content;
  509. border: 2px solid $blue-light;
  510. min-height: 4rem;
  511. background: $white;
  512. color: $blue-light;
  513. padding-left: 1rem;
  514. padding-top: 1rem;
  515. margin-bottom: 1rem;
  516. }
  517. a{
  518. display: inline-flex;
  519. align-items: center;
  520. color: $blue-light;
  521. font-weight: 800;
  522. &::before{
  523. content: url("../images/pictos/noun_External Link_674151.svg");
  524. min-width: 30px;
  525. height: auto;
  526. padding-right: 1rem;
  527. }
  528. svg.ext{
  529. display: none;
  530. }
  531. }
  532. }
  533. }
  534. .block-entity-fieldnodefield-ressource-s-liee-s-{
  535. margin-top: 3rem;
  536. @media(max-width:479px){
  537. margin-top: 2rem;
  538. }
  539. h2{
  540. font-size: 0.8rem;
  541. color: $black;
  542. font-weight: 900;
  543. }
  544. .node-type-ressource{
  545. display: flex;
  546. flex-direction: column;
  547. border: 2px solid $blue-light;
  548. padding: 1rem;
  549. height: fit-content;
  550. margin-bottom: 1rem;
  551. background-color: $white;
  552. // &:first-of-type{
  553. // border-top: 1px solid $blue-light;
  554. // padding-top: 1rem;
  555. // &::after{
  556. // content: url("../images/pictos/noun_Arrow_3771902.svg");
  557. // align-self: flex-end;
  558. // }
  559. // }
  560. div{
  561. display: flex;
  562. flex-direction: column;
  563. .field--name-title{
  564. order: 3;
  565. h2{
  566. margin: 0;
  567. a{
  568. color: $black;
  569. font-size: 1rem;
  570. font-weight: 900;
  571. font-style: italic;
  572. }
  573. }
  574. }
  575. .field--name-field-sous-titre{
  576. display: none;
  577. }
  578. .field--name-field-type-de-ressource{
  579. order: 2;
  580. text-transform: uppercase;
  581. color: $blue-light;
  582. font-weight: 900;
  583. font-size: 0.8rem;
  584. }
  585. .field--name-field-auteur-s-{
  586. order: 5;
  587. font-weight: 800;
  588. p{
  589. margin: 0;
  590. }
  591. .field__label{
  592. display:none;
  593. }
  594. }
  595. .field--name-field-edition{
  596. p{
  597. margin: 0;
  598. }
  599. .field__label{
  600. display:none;
  601. }
  602. }
  603. .field--name-field-images{
  604. // display: none;
  605. order: 1;
  606. width: 25%;
  607. img{
  608. width: 100%;
  609. height: auto;
  610. }
  611. }
  612. .field--name-field-date-de-parution{
  613. order: 6;
  614. .field__label{
  615. display: none;
  616. }
  617. }
  618. .field--name-field-mots-clefs{
  619. order: 7;
  620. display: flex;
  621. margin-top: 0.8rem;
  622. flex-direction: row;
  623. flex-wrap: wrap;
  624. .field__label{
  625. display: none;
  626. }
  627. .field__items{
  628. display: flex;
  629. flex-direction: row;
  630. }
  631. .field__item{
  632. margin-right: 0.5rem;
  633. padding-right: 0.3rem;
  634. font-size: 0.8rem;
  635. a{
  636. background: $blue-dark;
  637. color: $white;
  638. font-weight: 800;
  639. vertical-align: super;
  640. padding-left: 0.1rem;
  641. padding-right: 0.1rem;
  642. display: inline-flex;
  643. }
  644. }
  645. }
  646. ul.links.inline{
  647. display: none;
  648. }
  649. }
  650. }
  651. }
  652. }
  653. }
  654. .layout__region--bottom{
  655. .block-entity-fieldnodefield-partenaires{
  656. width: 50%;
  657. margin: auto;
  658. display: flex;
  659. flex-direction: row;
  660. flex-wrap: wrap;
  661. h2{display: none;}
  662. .field--name-field-partenaires{
  663. display: flex;
  664. flex-direction: row;
  665. flex-wrap: wrap;
  666. justify-content: space-between;
  667. .field--name-field-titre{
  668. display: none;
  669. }
  670. .paragraph--type--partenaire{
  671. display: flex;
  672. flex-direction: column;
  673. }
  674. }
  675. }
  676. }
  677. }
  678. }
  679. }
  680. }
  681. }