_projet.scss 32 KB

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