figureslibres.cc/user/themes/figureslibres/scss/theme/_start.scss

*{
  box-sizing: border-box;
}

.loader{
  display: none;
  background-image: url('/user/themes/figureslibres/images/ajax-loader.gif');
  background-size: 10px 10px;
  background-position: center;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-left: 10px;
  width: 10px;
  height: 10px;
}

.card{
  .loader{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
    z-index: 999;
    margin-left: 0;
  }
}

html, body{
  background: #f9f9f9fe;
  &.hidden{
    overflow: hidden;
  }
}
img.lazy{
  display: block;
}
body{
  #start{
      width: $Wi80;
      margin: 1rem auto auto 1rem;
      #text_figli{
        p {
          a{
            #icone_list{
              opacity: 0;
              // margin-left: -30px;
              width: 0px;
              z-index: 999;
              position: relative;
              display: inline-block;
              transition: 0.5s width 0.5s ease, 0.5s opacity;
              .hamburger{
                padding: 0;
                margin-left: 10px;
                .hamburger-box{
                  vertical-align: middle;
                }
              }
            }
            &.marg{
              margin-right: $marg;
            }
            &.open{
              #icone_list{
                z-index: 999;
                position: relative;
                display: inline-block;
                margin-left: 0px;
                opacity: 1;
                transition: 0.5s margin-left, 0.5s opacity;
                width: 45px;
                .hamburger{
                  padding: 0;
                  margin-left: 10px;
                  &.hamburger--slider{
                    .hamburger-inner{
                      transform: translate3d(0,5px,0) rotate(45deg);
                      transition: 0.8s 0.2s transform;
                      &:after{
                        transform: translate3d(0,-20px,0) rotate(90deg);
                        transition: 1s 0.2s transform;
                      }
                    }
                  }
                  .hamburger-box{
                    vertical-align: middle;
                  }
                }
              }
            }
          }
        }
        #item_list{
          width: 80vw;
          margin-top: 0.5rem;
          position: relative;
        .card{
          width: calc((100% / 5) - ( #{$marg} * 2) );
          min-width: 250px;
          display: inline-block;
          vertical-align: top;
          position: relative;
          margin: 0 $marg $marg 0;
          height: 100%;
          & > .card-image{
            &.open{
              a{
                img{
                  filter: grayscale(0);
                  transition: filter 0.3s ease;
                }
              }
            }
          }
          a{
            display: block;
            border-radius: 5px;
            overflow: auto;
            img{
              filter: grayscale(1);
              transition: filter 0.3s ease;
            }
          }
          .card-header{
            width: 100%;
            padding: $marg;
            flex-wrap: wrap;
            display: none;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
            & > *{
              font-size: 0.8rem;
              line-height: 1rem;
              margin-right: $marg;
            }
          }
          &:hover{
            a{
              display: block;
              img{
                filter: grayscale(0);
                transition: filter 0.3s ease;
              }
            }
            .card-header{
              display: inline-flex;
              position: absolute;
              // transform: translateY(-100%);
              bottom: 0;
            }
          }
          &:last-of-type{
            vertical-align: baseline!important;
          }
          #item{
            width: calc( 80vw - ( #{$marg} * 6) );
            padding: 2rem 2rem 0.5rem 2rem;
            margin-top: $marg;
            border-radius: 5px;
            position: relative;
            .content-title{
              margin: 1rem auto 3rem auto;
              display: flex;
              flex-wrap: wrap;
              justify-content: space-between;
              align-items: baseline;
              a{
                display: block;
              }
            }
            .e-content{
              // margin: 1rem auto 2rem auto;
              p{
                font-size: 1rem;
                line-height: 1.2rem;
              }
            }
            &.publique{
              background: $color_publique;

            }
            &.sociale{
              background: $color_sociale;

            }
            &.culturelle{
              background: $color_culturelle;
            }
            &.commanditaires{
              background: $color_commanditaire;
            }
            #icone_list{
              position: absolute;
              top: 10px;
              right: 0;
              line-height: 0;
            }
          }
        }
        &.publique{
          .card{
            &:hover{
              .card-header{
                background: $color_publique;
              }
            }
          }
        }
        &.sociale{
          .card{
            &:hover{
              .card-header{
                background: $color_sociale;
              }
            }
          }
        }
        &.culturelle{
          .card{
            &:hover{
              .card-header{
                background: $color_culturelle;
              }
            }
          }
        }
        &.commanditaires{
          columns: 4 150px;
          -webkit-column-gap: 2em;
          -moz-column-gap: 2em;
          column-gap: 2em;
          display: block;
          margin: 1rem auto;
          p{
            font-size: 1rem;
            line-height: 1.2rem;
            margin: 0.5rem auto;
          }
          .card{
            &:hover{
              .card-header{
                background: $color_culturelle;
              }
            }
          }
        }
        &.figureslibres, &.logiciels-libres{
          display: block;
          width: 70%;
          min-width: 500px;
          margin: 1rem 0;
          p{
            font-size: 1rem;
            line-height: 1.5rem;
          }
        }
      }
      #top{
        cursor: pointer;
        position: relative;
        width: 100%;
        text-align: center;
      }
    }
  }
  &:not(.home){
    #start{
      margin-top: calc( 2rem +  #{$Flhome});
    }
  }
}

#icone_list{
  .hamburger{
    // padding: 0.8rem;
    .hamburger-box{
      width: 35px;
      // height: 12px;
      .hamburger-inner{
        height: 2px;
        width: 35px;
        &::before{
          width: 35px;
          height: inherit;
          top: 10px;
        }
        &::after{
          top: 20px;
          height: inherit;
          width: inherit;
        }
      }
    }
    &.hamburger--slider.is-active{
      .hamburger-inner{
        transform: translate3d(0, 10px, 0) rotate(45deg);
        &::after  {
          transform: translate3d(0, -20px, 0) rotate(-90deg);
        }
      }
    }
  }
}