_start.scss 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. *{
  2. box-sizing: border-box;
  3. }
  4. html, body, header{
  5. background: #f9f9f9fe;
  6. }
  7. body{
  8. #start{
  9. width: calc( #{$Wi} - #{$marg} );
  10. margin: $marg auto auto $marg;
  11. #text_figli{
  12. p {
  13. a{
  14. position: relative;
  15. // &::after{
  16. // display: block;
  17. // content: '';
  18. // position: absolute;
  19. // top: 0;
  20. // left: 0;
  21. // transform: translate(-25%,-65%);
  22. // z-index: 999;
  23. // }
  24. // &:hover{
  25. // &::after{
  26. // content: url('/user/themes/figureslibres/images/ovale.svg');
  27. // width: 100%;
  28. // height: 100%;
  29. // top: 0;
  30. // left: 0;
  31. // }
  32. // }
  33. &.marg{
  34. margin-right: $marg;
  35. }
  36. }
  37. }
  38. .card{
  39. width: calc((100% / 3) - ( #{$marg} * 2) );
  40. height: auto;
  41. // overflow: hidden;
  42. display: inline-block;
  43. vertical-align: top;
  44. line-height: 0;
  45. margin-right: $marg;
  46. position: relative;
  47. margin-top: $marg;
  48. .card-header{
  49. display: none;
  50. & > *{
  51. font-size: 0.8rem;
  52. line-height: 1rem;
  53. margin-right: $marg;
  54. }
  55. }
  56. &:hover{
  57. .card-header{
  58. width: 100%;
  59. background: rgba(255, 255, 255, 0.5);
  60. padding: $marg;
  61. display: inline-flex;
  62. flex-wrap: wrap;
  63. position: absolute;
  64. transform: translateY(-100%);
  65. }
  66. }
  67. &:last-of-type{
  68. vertical-align: baseline!important;
  69. }
  70. #item{
  71. width: calc( 307% - #{$marg} );
  72. // margin-left: -50vw;
  73. }
  74. }
  75. }
  76. }
  77. &:not(.home){
  78. #start{
  79. margin-top: calc( 2rem + #{$Flhome});
  80. }
  81. }
  82. }