_home.scss 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. .path-frontpage{
  2. .block-region-content{
  3. display: grid;
  4. grid-template-areas: "presentation presentation presentation presentation presentation presentation"
  5. "presentation presentation presentation presentation presentation presentation"
  6. "presentation presentation presentation presentation presentation presentation"
  7. "actus actus actus actus actus actus"
  8. "actus actus actus actus actus actus"
  9. "programme programme programme programme programme programme";
  10. grid-template-rows: auto auto auto;
  11. grid-template-columns: 1fr repeat(4, 2fr) 1fr;
  12. .block-views-blockhome-nodes-block-1{
  13. grid-area: presentation;
  14. }
  15. .block-block-content9448ca2a-90e3-488b-89cf-8ec6a986a9ca{
  16. grid-area: presentation;
  17. }
  18. .block-block-content1bb9024b-d95f-4137-894c-362abf10a483{
  19. grid-area: presentation;
  20. }
  21. .block-views-blockactus-blocks-pages-block-1{
  22. grid-area: actus;
  23. width: 100vw;
  24. border-bottom: 5px solid $blue-light;
  25. border-top: 5px solid $blue-light;
  26. .view-actus-blocks-pages{
  27. .view-content{
  28. display: grid;
  29. grid-template-columns: 1fr repeat(4, 2fr) 1fr;
  30. margin: auto;
  31. padding-top: 2rem;
  32. padding-bottom: 4rem;
  33. .views-row:nth-of-type(1) { grid-column: 2; }
  34. .node-type-actualite{
  35. color: $black;
  36. line-height: 1.5rem;
  37. padding: 0.5rem;
  38. div:first-child{ // block actu dans le bandeau
  39. display: flex;
  40. flex-direction: column;
  41. :nth-child(1) { order: 1; }
  42. :nth-child(4) { order: 2; }
  43. :nth-child(5) { order: 3; }
  44. }
  45. .field--name-field-images {
  46. .field__item img{
  47. max-width: 70%;
  48. max-height: 150px;
  49. object-fit: cover;
  50. width: 100%;
  51. padding-bottom: 1rem;
  52. }
  53. }
  54. time{
  55. font-size: 0.9rem;
  56. font-weight: 800;
  57. padding-right: 1rem;
  58. width: fit-content;
  59. &:after{
  60. padding-left: 0.5rem;
  61. content: "|";}
  62. }
  63. .field:not(.field--name-field-images){
  64. width: 100%;
  65. }
  66. h2{ margin:0; }
  67. a{ color: $black; }
  68. .inline.links{
  69. padding-top: none !important;
  70. list-style: none;
  71. width: fit-content;
  72. align-self: flex-end;
  73. padding-right: 1rem;
  74. a{
  75. display: none;
  76. }
  77. }
  78. .field--name-field-actu-type{
  79. padding-top: 1rem;
  80. }
  81. }
  82. }
  83. }
  84. }
  85. .block-block-content3ee1f633-aaa7-4b4c-a42a-02206e26d3a2{
  86. grid-area: actus;
  87. grid-row: 5;
  88. grid-column: 5 / span 6;
  89. width: fit-content;
  90. margin-bottom: 2rem;
  91. // display: grid;
  92. // grid-template-columns: 1fr repeat(4, 2fr) 1fr;
  93. // position: relative;
  94. // height: 0;
  95. .field--type-link {
  96. // grid-column: 2;
  97. // justify-self: end;
  98. // position: relative;
  99. // top: -200%;
  100. width: fit-content;
  101. height: fit-content;
  102. padding: 0.4rem 1rem;
  103. font-size: 0.8rem;
  104. margin: 0;
  105. background-color: $white;
  106. border: 2px solid $blue-light;
  107. list-style: none;
  108. a{
  109. text-transform: uppercase;
  110. font-weight: 700;
  111. color: $blue-light;
  112. }
  113. a::after{
  114. content: url('data:image/svg+xml,<svg width="40" height="20" xmlns="http://www.w3.org/2000/svg" version="1.1"><polyline points="71.9,49 24.3,49 24.3,51 71.9,51 58.1,64.8 59.5,66.2 75.7,50 59.5,33.8 58.1,35.2" transform="scale(0.5) translate(0,-25)" fill="rgb(0,158,227)" stroke="rgb(0,158,227)" stroke-width="0.7"/></svg>');
  115. }
  116. }
  117. }
  118. .block-views-blockhome-nodes-block-2{
  119. grid-area: programme;
  120. }
  121. }
  122. }