index.scss 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
  1. /**
  2. * @file
  3. * Presentational styles for Drupal stark theme layout.
  4. *
  5. * It is left empty for testing purposes.
  6. *
  7. * @see https://www.drupal.org/project/drupal/issues/2349711
  8. */
  9. // configs
  10. @import "configs/var.scss";
  11. @import "configs/mixin.scss";
  12. @import "configs/typography.scss";
  13. @import "configs/global.scss";
  14. @import "configs/animation.scss";
  15. // Lib Js
  16. @import "hamburgers/hamburgers.scss";
  17. // Pages
  18. @import "pages/layout.scss";
  19. @import "pages/front.scss";
  20. @import "pages/presentation.scss";
  21. @import "pages/programme.scss";
  22. @import "pages/ressources.scss";
  23. @import "pages/informations.scss";
  24. @import "pages/moments.scss";
  25. @import "pages/publications.scss";
  26. @import "pages/intervenants.scss";
  27. @import "pages/node_participants.scss";
  28. @import "pages/search.scss";
  29. // @import "pages/_changement-2024.scss";
  30. // components
  31. @import "components/components.scss";
  32. .no-flexbox .box { color: red; }
  33. .flexbox .box { color: green; }
  34. article img,
  35. .side_notes img{
  36. width: 100%;
  37. height: 100%;
  38. object-fit: cover;
  39. }
  40. .layout-content{
  41. width: 100%;
  42. }
  43. #presentation{
  44. .__wrapper{
  45. .__wrap_side{
  46. position: inherit;
  47. @media screen and (min-width: 768px){
  48. position: relative;
  49. }
  50. .notes{
  51. & > div{
  52. position: absolute;
  53. margin-top: 2rem;
  54. @media screen and (min-width: 768px){
  55. margin-top: -2rem;
  56. }
  57. &> div{
  58. background: white;
  59. padding: 0.5rem;
  60. p{
  61. font-family: 'cormorantBold';
  62. margin: 0;
  63. color: $color2;
  64. }
  65. }
  66. }
  67. .close{
  68. cursor: pointer;
  69. background: $color2;
  70. position: absolute;
  71. top: -12px;
  72. left: -15px;
  73. width: 30px;
  74. height: 27px;
  75. &::after{
  76. content: "+";
  77. color: white;
  78. display: block;
  79. margin: auto;
  80. text-align: center;
  81. transform: rotate(45deg);
  82. margin-top: -6px;
  83. }
  84. }
  85. }
  86. }
  87. }
  88. }
  89. .side_notes{
  90. position: absolute;
  91. width: calc(100% - 30px);
  92. left: 30px;
  93. width: calc(100% - 45px);
  94. @media screen and (min-width: 768px){
  95. margin-top: -3rem;
  96. }
  97. .wrap{
  98. position: relative;
  99. width: max-content;
  100. .__hero{
  101. margin: 0!important;
  102. height: 200px;
  103. max-width: 300px;
  104. .__img{
  105. height: 200px;
  106. img{
  107. width: auto;
  108. height: 100%;
  109. }
  110. }
  111. }
  112. .__head{
  113. background: white;
  114. padding: 0.5rem;
  115. width: max-content;
  116. min-width: 300px;
  117. & > *{
  118. font-family: 'cormorantBold';
  119. color: $color2;
  120. display:inline;
  121. }
  122. }
  123. .thumbnails.bibliographie{
  124. width: 100%;
  125. }
  126. }
  127. .close{
  128. cursor: pointer;
  129. background: $color2;
  130. position: absolute;
  131. top: -12px;
  132. left: -15px;
  133. width: 30px;
  134. height: 27px;
  135. &::after{
  136. content: "+";
  137. color: white;
  138. display: block;
  139. margin: auto;
  140. text-align: center;
  141. transform: rotate(45deg);
  142. }
  143. }
  144. }
  145. .side_notes *{
  146. margin: 0 0 0 0;
  147. padding: 0;
  148. flex: 100%;
  149. max-width: 100%;
  150. }
  151. // tac
  152. #tarteaucitronRoot{
  153. #tarteaucitronDisclaimerAlert,
  154. #tarteaucitronPersonalize,
  155. #tarteaucitronCloseAlert,
  156. #tarteaucitronPrivacyUrl,
  157. #tarteaucitronInfo,
  158. .tarteaucitronH1,
  159. .tarteaucitronH2,
  160. button,
  161. li span,
  162. li a{
  163. font-family: 'truenoregular'!important;
  164. }
  165. }
  166. // reveal
  167. .__img-hero,
  168. .participant_full .__img,
  169. .participant_full figcaption,
  170. .home #txt_present, article#presentation,
  171. #block-shadow_participantsviews-block-slide-programme-block-1,
  172. #block-shadow_participantsviews-block-dernieres-publications-block-1,
  173. .__ressources > *,
  174. article#presentation p,
  175. .letter-sort,
  176. .participant_full .content > *,
  177. .programme.container,
  178. .programme .thumbnails,
  179. .views.__publications .thumbnails,
  180. .les_intervenants .thumbnails_participants,
  181. #moments .__title,
  182. #moments .__wrapper,
  183. #moments .__wrap_content .__content > *,
  184. #moments .__wrap_side{
  185. visibility: hidden;
  186. }