_home.scss 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. // .node-type-static {
  2. // display: grid;
  3. // grid-template-columns: 2fr 2fr 2fr 2fr 2fr;
  4. // }
  5. .field--type-entity-reference-revisions{
  6. .paragraph-summary{
  7. font-family: $font-family-default;
  8. font-size: 5rem;
  9. font-weight: 600;
  10. color: $black !important;
  11. text-transform: capitalize;
  12. span:nth-of-type(2n){
  13. display: block;
  14. font-size: 1rem;
  15. }
  16. }
  17. .paragraph-summary:nth-of-type(2n) {
  18. font-size: 2rem;
  19. }
  20. }
  21. // bandeau bleu actus
  22. .block-views-blockactus-blocks-pages-block-1{
  23. background-color: $blue-dark;
  24. padding: 1rem;
  25. .view-content{
  26. display: flex;
  27. flex-direction: row;
  28. // justify-content: space-between;
  29. padding-left: 8rem;
  30. padding-right: 4rem;
  31. margin: auto;
  32. .views-row{
  33. width: 25%;
  34. }
  35. .node-type-actualite{
  36. color: $white;
  37. line-height: 1.5rem;
  38. padding: 0.5rem;
  39. div:first-child{ // block actu dans le bandeau
  40. display: flex;
  41. flex-direction: column;
  42. :nth-child(1) { order: 1; }
  43. :nth-child(4) { order: 2; }
  44. :nth-child(5) { order: 3; }
  45. }
  46. .field--name-field-images {
  47. .field__item img{
  48. width: 50%;
  49. height: fit-content;
  50. // &::after{
  51. // content:"line";
  52. // }
  53. }
  54. }
  55. .field:not(.field--name-field-images){
  56. width: 100%;
  57. }
  58. h2{ margin:0; }
  59. a{ color: $white; }
  60. }
  61. }
  62. }
  63. // actu dans bandeau
  64. // .node-type-actualite div:first-child{
  65. // display: flex;
  66. // flex-direction: column;
  67. // :nth-child(1) { order: 1; }
  68. // :nth-child(4) { order: 2; }
  69. // :nth-child(5) { order: 3; }
  70. // }
  71. // bouton voir toutes actus du bandeau bleu
  72. .layout--onecol{
  73. .block-block-content{
  74. display: grid;
  75. // grid-template-rows: repeat(auto fill, 1fr);
  76. grid-template-columns: 1fr repeat(8, 2fr) 1fr;
  77. }
  78. .field--type-link {
  79. grid-area: 8 / span 9;
  80. grid-row: 0;
  81. justify-self: end;
  82. // display: block;
  83. // float: right;
  84. width: fit-content;
  85. height: fit-content;
  86. padding: 0.4rem 1rem;
  87. font-size: 0.8rem;
  88. margin: 0;
  89. background-color: $white;
  90. border: 2px solid $blue-light;
  91. list-style: none;
  92. a{
  93. text-transform: uppercase;
  94. font-weight: 700;
  95. color: $blue-light;
  96. }
  97. a::after{
  98. display: inline-block;
  99. content: url("../../images/pictos/polygon2.svg");
  100. }
  101. }
  102. }
  103. // boutons en savoir plus pour lien vers pages statiques
  104. .view-display-id-block_2{
  105. padding-top: 2rem;
  106. .node-type-static{
  107. // margin: auto;
  108. div:first-child:not(.field__item):not(.field){
  109. display: grid;
  110. // grid-template-rows: repeat(auto fill, 1fr);
  111. grid-template-columns: 1fr repeat(8, 2fr) 1fr;
  112. }
  113. .inline.links{
  114. // align-self: flex-end;
  115. grid-column: 9;
  116. grid-row: 2;
  117. width: fit-content;
  118. height: fit-content;
  119. padding: 0.4rem 1rem;
  120. font-size: 0.8rem;
  121. margin: 0;
  122. background-color: $white;
  123. border: 2px solid $blue-light;
  124. list-style: none;
  125. a{
  126. text-transform: uppercase;
  127. font-weight: 700;
  128. color: $blue-light;
  129. // &::after{
  130. // content: url('../../images/pictos/noun_Arrow_3771902.svg');
  131. // }
  132. }
  133. }
  134. .field--name-field-images{
  135. grid-column: 2 / 3;
  136. .field__item{
  137. img{
  138. width: 15rem;
  139. height: auto;
  140. }
  141. }
  142. }
  143. .field--name-title{
  144. display: none;
  145. }
  146. .field--name-field-accroche{
  147. // flex: 1 1 50px;
  148. grid-column: 3 / 9;
  149. padding-left: 1rem;
  150. p{
  151. font-size: 1.5rem;
  152. width: 110%;
  153. margin: 0;
  154. padding-bottom: 1rem;
  155. }
  156. }
  157. }
  158. }