_actualites.scss 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. .page-actualites{
  2. .block-page-title-block{
  3. width: 75%;
  4. margin: auto;
  5. }
  6. .view-actus{
  7. padding-top: 3rem;
  8. padding-bottom: 6rem;
  9. width: 80%;
  10. margin: auto;
  11. display: flex;
  12. flex-direction: row;
  13. flex-wrap: wrap;
  14. align-items: baseline;
  15. justify-content: space-between;
  16. @media (max-width:891px) {
  17. flex-direction: column;
  18. width: 90%;
  19. }
  20. .views-row{
  21. width: 28%;
  22. padding: 1rem;
  23. @media (max-width:891px) {
  24. width: 95%;
  25. margin: auto;
  26. padding: 0;
  27. }
  28. &:hover{
  29. transform: scale(1.05);
  30. transition: 0.3s transform ease, 0.3s box-shadow ease;
  31. }
  32. .node-type-actualite{
  33. width: 30vw !important;
  34. @media (max-width:891px) {
  35. width: 100% !important;
  36. }
  37. .entete_actu{
  38. flex-direction: column;
  39. .image-actualite{
  40. width: 90%;
  41. margin: auto;
  42. img{
  43. width: 100%;
  44. height: 15rem;
  45. object-fit: cover;
  46. }
  47. }
  48. .infos-content{
  49. height: fit-content;
  50. width: 100%;
  51. margin: auto;
  52. top: -0.5rem;
  53. h1{
  54. display: none;
  55. }
  56. h2{
  57. margin-left: 0;
  58. padding-top: 0.2rem;
  59. font-weight: 600;
  60. }
  61. .field--name-field-sous-titre{
  62. padding-top: 0 rem;
  63. font-size: 1.2rem;
  64. }
  65. .field--name-field-date{
  66. padding-top: 0.2rem;
  67. }
  68. }
  69. }
  70. }
  71. }
  72. }
  73. }