_projet.scss 32 KB

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