_static.scss 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284
  1. .path-node.page-node-type-static{
  2. .layout-container{
  3. // display: flex;
  4. // flex-direction: column;
  5. // flex-flow: row wrap;
  6. // header{
  7. // flex: 0 0 100%;
  8. // }
  9. // main{
  10. // flex: 0 0 100%;
  11. .layout-content{
  12. // padding-top: 0;
  13. .layout__region--top{ //bandeau titre page static
  14. padding-bottom: 3rem;
  15. height: 30vh;
  16. @media (max-width: 810px){
  17. padding-bottom: 0rem;
  18. }
  19. .block-entity-fieldnodetitle{
  20. width: fit-content;
  21. margin-left: 13%;
  22. margin-top: 15vh;
  23. @media (max-width: 810px){
  24. margin-left: 8%;
  25. margin-right: 5%;
  26. }
  27. .field--name-title{
  28. font-family: 'Source Code Pro';
  29. font-size: 2rem;
  30. font-weight: 800;
  31. text-transform: uppercase;
  32. }
  33. }
  34. // .block-entity-fieldnodefield-images{
  35. // display: none;
  36. // height: inherit;
  37. // }
  38. }
  39. .layout__region--first{ // menu ancres a gauche
  40. position: relative;
  41. .block-region-first{
  42. display: flex;
  43. justify-content: flex-end;
  44. position: sticky;
  45. top: 7rem;
  46. @media (max-width: 810px){
  47. display: none;
  48. }
  49. .block-entity-fieldnodefield-textes{
  50. display: flex;
  51. width: 50%;
  52. background-color: $white;
  53. padding-right: 2rem;
  54. .field--name-field-titre{
  55. display: flex;
  56. font-size: 1rem;
  57. font-weight: 1000;
  58. color: $blue-dark;
  59. border-bottom: 1px solid $blue-light;
  60. padding-bottom: 0.8rem;
  61. padding-right: 1rem;
  62. margin-top: 1rem;
  63. &:hover{
  64. text-decoration: underline;
  65. }
  66. }
  67. }
  68. }
  69. }
  70. .layout__region--second{ // paragraphe texte
  71. @media (max-width: 810px){
  72. flex: 0 1 80%;
  73. margin: auto;
  74. } // paragraphe texte
  75. .block-entity-fieldnodefield-textes{
  76. margin-top: 1rem;
  77. background-color: $white;
  78. .field--name-field-titre{
  79. font-size: 1.5rem;
  80. font-weight: 1000;
  81. font-family: 'Source Code Pro', monospace;
  82. color: $blue-dark;
  83. text-transform: uppercase;
  84. margin-top: 2rem;
  85. margin-bottom: 0.8rem;
  86. }
  87. h4{
  88. text-transform: none !important;
  89. img{
  90. width: 100%;
  91. height: auto;
  92. }
  93. }
  94. .field--type-text-long{
  95. padding-right: 2rem;
  96. }
  97. p{
  98. margin-top: 0;
  99. }
  100. }
  101. }
  102. .layout__region--third{ // colone de droite fichiers et ressources liées
  103. .block-region-third{
  104. margin-top: 1rem;
  105. display: flex;
  106. flex-direction: column;
  107. width: 70%;
  108. @media (max-width: 810px){
  109. margin: auto;
  110. }
  111. .block-entity-fieldnodefield-fichiers{
  112. height: fit-content;
  113. border: 2px solid $blue-light;
  114. background-color: $white;
  115. }
  116. .field--name-field-fichiers{
  117. min-height: 4rem;
  118. background: $white;
  119. color: $blue-light;
  120. padding-left: 0.8rem;
  121. padding-top: 1rem;
  122. margin-bottom: 1rem;
  123. span:nth-of-type(2){
  124. display: none;
  125. }
  126. .file--mime-application-pdf{
  127. height: inherit;
  128. margin: auto;
  129. ::before{
  130. content: url("../images/pictos/noun_Download_file_307900.svg");
  131. min-width:40px;
  132. height: auto;
  133. padding-right: 0.5rem;
  134. display: inline-flex;
  135. align-items: center;
  136. }
  137. a{
  138. hyphens: auto;
  139. display: inline-flex;
  140. align-items: center;
  141. color: $blue-light;
  142. font-weight: 800;
  143. // max-width: 80px ;
  144. }
  145. }
  146. }
  147. .block-entity-fieldnodefield-liens{
  148. .field--name-field-liens{
  149. .field__item{
  150. margin: auto;
  151. height: fit-content;
  152. border: 2px solid $blue-light;
  153. min-height: 4rem;
  154. background: $white;
  155. color: $blue-light;
  156. padding-left: 0.8rem;
  157. padding-top: 1rem;
  158. margin-bottom: 1rem;
  159. }
  160. a{
  161. display: inline-flex;
  162. align-items: center;
  163. justify-items: center;
  164. color: $blue-light;
  165. font-weight: 800;
  166. &::before{
  167. content: url("../images/pictos/noun_External Link_674151.svg");
  168. min-width: 40px;
  169. height: auto;
  170. padding-right: 0.5rem;
  171. display: inline-flex;
  172. align-items: center;
  173. }
  174. svg.ext{
  175. display: none;
  176. }
  177. }
  178. }
  179. }
  180. .block-entity-fieldnodefield-ress{
  181. margin-top: 3rem;
  182. h2{
  183. font-size: 0.8rem;
  184. color: $black;
  185. font-weight: 900;
  186. }
  187. .node-type-ressource{
  188. display: flex;
  189. flex-direction: column;
  190. border: 2px solid $blue-light;
  191. padding: 1rem;
  192. height: fit-content;
  193. margin-bottom: 1rem;
  194. background-color: $white;
  195. &:first-of-type{
  196. border-top: 1px solid $blue-light;
  197. padding-top: 1rem;
  198. &::after{
  199. content: url("../images/pictos/noun_Arrow_3771902.svg");
  200. align-self: flex-end;
  201. }
  202. }
  203. .field--name-title{
  204. a{
  205. color: $black;
  206. font-size: 1.4rem;
  207. font-weight: 600;
  208. }
  209. }
  210. .field--name-field-auteur-s-{
  211. font-weight: 800;
  212. p{
  213. margin: 0;
  214. }
  215. .field__label{
  216. display:none;
  217. }
  218. }
  219. .field--name-field-edition{
  220. p{
  221. margin: 0;
  222. }
  223. .field__label{
  224. display:none;
  225. }
  226. }
  227. .field--name-field-images{
  228. display: none;
  229. width: 50%;
  230. img{
  231. width: 100%;
  232. height: auto;
  233. }
  234. }
  235. .field--name-field-type-de-ressource{
  236. display: inline-flex;
  237. margin-top: 2rem;
  238. background: $blue-dark;
  239. margin-right: 1rem;
  240. padding-left: 0.3rem;
  241. padding-right: 0.3rem;
  242. color: $white;
  243. font-weight: 800;
  244. vertical-align: middle;
  245. }
  246. }
  247. }
  248. }
  249. }
  250. }
  251. // }
  252. }
  253. }