thumbnails.scss 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245
  1. .thumbnails{
  2. margin: 1rem 0rem;
  3. // max-width: 300px;
  4. min-width: 250px;
  5. height: auto;
  6. width: calc(100% / 4 );
  7. background: white;
  8. transform: scale(1);
  9. @include shadow;
  10. a{
  11. display: block;
  12. height: 100%;
  13. }
  14. & > .__wrap{
  15. padding: 1rem;
  16. }
  17. .__media{
  18. margin-right: 1rem;
  19. figure{
  20. height: 100%;
  21. img{
  22. width: 100%;
  23. height: 100%;
  24. object-fit: cover;
  25. }
  26. }
  27. }
  28. .d-flex{
  29. padding: 1rem;
  30. }
  31. }
  32. .thumbnails{
  33. figure{
  34. height: 100px;
  35. img{
  36. width: 100%;
  37. height: 100%;
  38. object-fit: cover;
  39. }
  40. }
  41. }
  42. .programme{
  43. .row{
  44. margin: 0;
  45. }
  46. .thumbnails{
  47. width: 100%;
  48. margin: 0;
  49. figure{
  50. height: 250px;
  51. }
  52. }
  53. }
  54. @media screen and (min-width: 992px) {
  55. .programme{
  56. .row{
  57. margin: $gutter1 calc(-#{$gutter1});
  58. }
  59. .thumbnails{
  60. width: calc( 50% - #{$gutter1} * 2);
  61. margin: 0 $gutter1;
  62. figure{
  63. height: 250px;
  64. }
  65. }
  66. }
  67. }
  68. .thumbnails_participants{
  69. figure{
  70. & > div{
  71. width: 100px;
  72. height: 100px;
  73. margin-left: 0.5rem;
  74. img{
  75. border-radius: 50%;
  76. width: 100%;
  77. height: 100%;
  78. object-fit: cover;
  79. }
  80. }
  81. figcaption{
  82. &.__info{
  83. padding: 4rem 0.5rem 0.5rem 0.5rem;
  84. margin-top: -3rem;
  85. background: white;
  86. .__name{
  87. text-transform: uppercase;
  88. }
  89. .__qualite{
  90. }
  91. }
  92. }
  93. }
  94. }
  95. article{
  96. .__publications{
  97. & > div{
  98. article{
  99. width: 100%;
  100. @include shadow;
  101. figure{
  102. padding: 1rem;
  103. .__media{
  104. margin-right: 1rem;
  105. }
  106. figcaption {
  107. width: 80%;
  108. }
  109. }
  110. }
  111. }
  112. }
  113. .__bibliographie{
  114. & > div{
  115. article{
  116. width: 100%;
  117. a{
  118. & > div {
  119. p, span, div{
  120. display: inline;
  121. background: white;
  122. }
  123. }
  124. }
  125. }
  126. }
  127. }
  128. }
  129. .container {
  130. &.publications{
  131. section{
  132. article{
  133. width: 100%;
  134. @include shadow;
  135. figure{
  136. padding: 1rem;
  137. .__media{
  138. margin-right: 1rem;
  139. }
  140. figcaption {
  141. width: 80%;
  142. }
  143. }
  144. }
  145. }
  146. }
  147. &.bilbiographie{
  148. article{
  149. width: 100%;
  150. a{
  151. & > div {
  152. p, span, div{
  153. display: inline;
  154. background: white;
  155. }
  156. }
  157. }
  158. }
  159. }
  160. }
  161. @media screen and (min-width: 992px) {
  162. article{
  163. .__publications{
  164. & > div{
  165. margin: 0 calc(-#{$gutter1});
  166. article{
  167. width: calc( 50% - #{$gutter1} * 2);
  168. margin: 0 $gutter1;
  169. @include shadow;
  170. figure{
  171. padding: 1rem;
  172. .__media{
  173. margin-right: 1rem;
  174. }
  175. figcaption {
  176. width: 80%;
  177. }
  178. }
  179. }
  180. }
  181. }
  182. .__bibliographie{
  183. & > div{
  184. margin: 0 calc(-#{$gutter1});
  185. article{
  186. width: calc( 100% / 3 - #{$gutter1} * 3);
  187. margin: 0 $gutter1;
  188. figure{
  189. padding: 1rem;
  190. .__media{
  191. margin-right: 1rem;
  192. }
  193. figcaption {
  194. width: 80%;
  195. }
  196. }
  197. }
  198. }
  199. }
  200. }
  201. .container {
  202. &.publications{
  203. section{
  204. article{
  205. width: calc( 50% - #{$gutter1} * 2);
  206. margin: 0 $gutter1;
  207. @include shadow;
  208. figure{
  209. padding: 1rem;
  210. .__media{
  211. margin-right: 1rem;
  212. }
  213. figcaption {
  214. width: 80%;
  215. }
  216. }
  217. }
  218. }
  219. }
  220. &.bibliographie{
  221. article{
  222. width: calc( 100% / 3 - #{$gutter1} * 3);
  223. margin: 0 $gutter1;
  224. figure{
  225. padding: 1rem;
  226. .__media{
  227. margin-right: 1rem;
  228. }
  229. figcaption {
  230. width: 80%;
  231. }
  232. }
  233. }
  234. }
  235. }
  236. }