<commit_before>@import "variables"


header
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%


  .bg
    position: absolute
    width: 100%
    height: calc(100% - #{$menu})
    top: 0
    left: 0
    background-image: url("../images/hero.jpg")
    background-size: cover
    background-position: bottom
    background-repeat: no-repeat
    opacity: 0.5



    transition: all 0.5s ease 0.5s
    &.up
      transform: translateY( calc(-100vh + 400px) )
      opacity: 0
      transition: all 0.5s ease 0s


  .title
    position: absolute
    top: calc(50% - #{$menu / 2})
    width: 100%
    height: 184px
    margin-top: -92px
    text-transform: uppercase

    h1
      position: relative
      font-weight: 300
      letter-spacing: 20px
      font-size: 50px
      margin: 30px auto 40px


    h2
      position: relative
      font-weight: 300
      font-size: 34px



    transition: all 0.5s ease 0.5s
    &.up
      top: 0px
      margin-top: 60px
      cursor: pointer
      transition: all 0.5s ease 0s






  .tags
    height: $menu
    display: flex
    justify-content: center
    align-items: center
    position: absolute
    width: 100%
    top: calc(100% - #{$menu})

    .tag
      text-align: center
      margin: 0px 50px
      text-transform: uppercase
      cursor: pointer
      letter-spacing: 0px
      transition: all 0.5s ease 0s

      span
        display: block
        margin: 4px auto 2px

      &.sophie
        text-transform: lowercase

      &:after, &:before
        content: ''
        display: block
        height: 2px
        width: 100%
        margin-left: -2px
        background: black
        transform-origin: 50%
        transform: scaleX(0)
        transition: transform 0.5s ease 0s


      &:hover, &.active
        letter-spacing: 4px

        &:after
          transform: scaleX(1)

      &.active
        &:before
          transform: scaleX(1)



    transition: all 0.5s ease 0.5s
    &.up
      top: 300px
      transition: all 0.5s ease 0s


.mobile-home-bar
  width: 100%
  height: 60px
  position: fixed
  top: 0
  left: 0
  z-index: 100
  opacity: 0
  pointer-events: none
  transition: all 0.5s ease 0s

  ul
    display: inline-block
    margin: 14px auto
    cursor: pointer

    li
      background: white
      width: 30px
      height: 4px
      margin: 5px
      box-shadow: 2px 2px 2px rgba(0,0,0,0.5)

  &.show
    opacity: 1
    pointer-events: all
    transition: all 0.5s ease 0.5s


@media screen and (max-width: 900px)
  header
    transition: transform 0.5s ease 0s
    $height: 240px

    .bg
      height: calc(100% - #{$height})
      &.up
        transform: none // translateY( calc(-100vh + 500px) )

    .title
      top: calc(50% - 135px)

      &.up
        transform: none
        top: calc(50% - 135px)
        margin-top: -92px

      h1
        font-size: 36px
        margin-bottom: 20px

      h2
        font-size: 22px

    .tags
      flex-direction: column
      height: $height
      top: calc(100% - #{$height})

      &.up
        top: calc(100% - #{$height})
        transform: none

    .mobile-home-btn
      display: block


      .tag
        margin: 6px auto


    &.hide
      transform: translateY(-100%)



<commit_msg>menu button now hidden in desktop mode<commit_after>@import "variables"


header
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%


  .bg
    position: absolute
    width: 100%
    height: calc(100% - #{$menu})
    top: 0
    left: 0
    background-image: url("../images/hero.jpg")
    background-size: cover
    background-position: bottom
    background-repeat: no-repeat
    opacity: 0.5



    transition: all 0.5s ease 0.5s
    &.up
      transform: translateY( calc(-100vh + 400px) )
      opacity: 0
      transition: all 0.5s ease 0s


  .title
    position: absolute
    top: calc(50% - #{$menu / 2})
    width: 100%
    height: 184px
    margin-top: -92px
    text-transform: uppercase

    h1
      position: relative
      font-weight: 300
      letter-spacing: 20px
      font-size: 50px
      margin: 30px auto 40px


    h2
      position: relative
      font-weight: 300
      font-size: 34px



    transition: all 0.5s ease 0.5s
    &.up
      top: 0px
      margin-top: 60px
      cursor: pointer
      transition: all 0.5s ease 0s






  .tags
    height: $menu
    display: flex
    justify-content: center
    align-items: center
    position: absolute
    width: 100%
    top: calc(100% - #{$menu})

    .tag
      text-align: center
      margin: 0px 42px
      text-transform: uppercase
      cursor: pointer
      letter-spacing: 0px
      transition: all 0.5s ease 0s

      span
        display: block
        margin: 4px auto 2px

      &.sophie
        text-transform: lowercase

      &:after, &:before
        content: ''
        display: block
        height: 2px
        width: 100%
        margin-left: -2px
        background: black
        transform-origin: 50%
        transform: scaleX(0)
        transition: transform 0.5s ease 0s


      &:hover, &.active
        letter-spacing: 4px

        &:after
          transform: scaleX(1)

      &.active
        &:before
          transform: scaleX(1)



    transition: all 0.5s ease 0.5s
    &.up
      top: 300px
      transition: all 0.5s ease 0s


.mobile-home-bar
  width: 100%
  height: 60px
  position: fixed
  top: 0
  left: 0
  z-index: 100
  opacity: 0
  pointer-events: none
  transition: all 0.5s ease 0s
  display: none

  ul
    display: inline-block
    margin: 14px auto
    cursor: pointer

    li
      background: white
      width: 30px
      height: 4px
      margin: 5px
      box-shadow: 2px 2px 2px rgba(0,0,0,0.5)

  &.show
    opacity: 1
    pointer-events: all
    transition: all 0.5s ease 0.5s


@media screen and (max-width: 900px)
  header
    transition: transform 0.5s ease 0s
    $height: 240px

    .bg
      height: calc(100% - #{$height})
      &.up
        transform: none // translateY( calc(-100vh + 500px) )

    .title
      top: calc(50% - 135px)

      &.up
        transform: none
        top: calc(50% - 135px)
        margin-top: -92px

      h1
        font-size: 36px
        margin-bottom: 20px

      h2
        font-size: 22px

    .tags
      flex-direction: column
      height: $height
      top: calc(100% - #{$height})

      &.up
        top: calc(100% - #{$height})
        transform: none


    &.hide
      transform: translateY(-100%)

  .mobile-home-bar
    display: block




{'fraction_non_alphanumeric': 0.10056984444786693, 'fraction_numerical': 0.05867857692900046, 'mean_word_length': 1.721709974853311, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3354203', 'n_tokens_mistral': 2530, 'n_tokens_neox': 2123, 'n_words': 632}