gilles-acezat/user/themes/gilles_acezat/scss/theme/_header.scss

// home
body{
  &> .blog{
    header{
      width: 100%;
      height: 100vh;
      display: inline-flex;
      flex-direction: column;
      & > section{
        position: relative;
        height: 50vh;
        min-height: 250px;
        &.works-mea{
          display: inline-flex;
          flex-wrap: wrap;
          // margin-bottom: 70px;
          align-items: flex-end;
          height: 100%;
          .card{
            line-height: 0.8!important;
            .card-header{
              margin-top: 10px;
            }
          }
        }
      }
      h1{
        font-size: 11.2vw;
        line-height: 7vw!important;
      }
      h2{
        font-size: 3.7vw;
      }
      nav{
        margin-top: 25vh; /* poussé de la moitié de hauteur de viewport */
        transform: translateY(-50%); /* tiré de la moitié de sa propre hauteur */
      }
      .scroll{
        width: 50px;
        height: 15px;
        margin: 0 auto 10px auto;
        overflow: hidden;
        position: relative;
        & > p:nth-child(1){
          text-align: center;
          position: absolute;
          top: -20px;
          animation: translatep1 2s infinite linear;
        }
        & > p:nth-child(2){
          text-align: center;
          position: absolute;
          top: -20px;
          animation: translatep1 2s infinite linear;
          animation-delay: 1s;
        }
      }
    }
  }
}


// page
body{
  & > .item{
    header{
      height: 100px;
      position: relative;
      nav{
        position: absolute;
        margin-top: 50px; /* poussé de la moitié de hauteur de viewport */
        transform: translateY(-50%); /* tiré de la moitié de sa propre hauteur */
      }
      h1{
        color: black;
      }
      h2{
        display: none;
      }
      .scroll{
        display: none;
      }
    }
  }
}