<commit_before>$color-dark: #000
$color-light: #fff

*
  box-sizing: border-box

@font-face
  font-family: Charter
  font-style: normal
  font-weight: bold
  src: url('http://cdn.darrenshan.com/fonts/Charis-SIL/CharisSILB.ttf')


.letter-main
  color: $color-light
  font-family: Charter
  font-weight: bold
  display: block
  position: absolute
  top: 50vh
  left: 50vw
  font-size: 50vh

  @media (orientation: portrait)
    font-size: 50vw

  transform: translate(-50%, -52.5%)

  pointer-events: none

#corners-container
  position: absolute
  top: 50vh
  left: 50vw
  transform: translate(-50%, -50%)

  #corners
    cursor: pointer

    .row
      white-space: nowrap

      .corner
        $corner-stroke-width-landscape: 2vh
        $corner-distance-landscape: 25vh

        $corner-stroke-width-portrait: 2vw
        $corner-distance-portrait: 25vw

        display: inline-block

        width: 15vh
        height: 15vh

        @media (orientation: portrait)
          width: 15vw
          height: 15vw

        opacity: 0

        div
          width: inherit
          height: inherit

        &.top
          margin-bottom: $corner-distance-landscape / 2

          div
            border-top: $corner-stroke-width-landscape solid $color-light

        &.right
          margin-left: $corner-distance-landscape / 2

          div
            border-right: $corner-stroke-width-landscape solid $color-light

        &.bottom
          margin-top: $corner-distance-landscape / 2

          div
            border-bottom: $corner-stroke-width-landscape solid $color-light

        &.left
          margin-right: $corner-distance-landscape / 2

          div
            border-left: $corner-stroke-width-landscape solid $color-light


        @media (orientation: portrait)
          &.top
            margin-bottom: $corner-distance-portrait / 2

            div
              border-top: $corner-stroke-width-portrait solid $color-light

          &.right
            margin-left: $corner-distance-portrait / 2

            div
              border-right: $corner-stroke-width-portrait solid $color-light

          &.bottom
            border-bottom: $corner-stroke-width-portrait solid $color-light

            div
              margin-top: $corner-distance-portrait / 2

          &.left
            margin-right: $corner-distance-portrait / 2

            div
              border-left: $corner-stroke-width-portrait solid $color-light

        $corner-in-easing: ease-out

        &.top.left
          animation: topleft-move-in-1 .5s 1s $corner-in-easing
          animation-fill-mode: forwards

          div
            animation: topleft-scale-in .5s

        &.top.right
          animation: topright-move-in-2 .5s 1.25s $corner-in-easing
          animation-fill-mode: forwards

          div
            animation: topright-scale-in .5s

        &.bottom.right
          animation: bottomright-move-in-3 .5s 1.5s $corner-in-easing
          animation-fill-mode: forwards

          div
            animation: bottomright-scale-in .5s<commit_msg>Fix corner SASS for portrait devices<commit_after>$color-dark: #000
$color-light: #fff

*
  box-sizing: border-box

@font-face
  font-family: Charter
  font-style: normal
  font-weight: bold
  src: url('http://cdn.darrenshan.com/fonts/Charis-SIL/CharisSILB.ttf')


.letter-main
  color: $color-light
  font-family: Charter
  font-weight: bold
  display: block
  position: absolute
  top: 50vh
  left: 50vw
  font-size: 50vh

  @media (orientation: portrait)
    font-size: 50vw

  transform: translate(-50%, -52.5%)

  pointer-events: none

#corners-container
  position: absolute
  top: 50vh
  left: 50vw
  transform: translate(-50%, -50%)

  #corners
    cursor: pointer

    .row
      white-space: nowrap

      .corner
        $corner-stroke-width-landscape: 2vh
        $corner-distance-landscape: 25vh

        $corner-stroke-width-portrait: 2vw
        $corner-distance-portrait: 25vw

        display: inline-block

        width: 15vh
        height: 15vh

        @media (orientation: portrait)
          width: 15vw
          height: 15vw

        opacity: 0

        div
          width: inherit
          height: inherit

        &.top
          margin-bottom: $corner-distance-landscape / 2

          div
            border-top: $corner-stroke-width-landscape solid $color-light

        &.right
          margin-left: $corner-distance-landscape / 2

          div
            border-right: $corner-stroke-width-landscape solid $color-light

        &.bottom
          margin-top: $corner-distance-landscape / 2

          div
            border-bottom: $corner-stroke-width-landscape solid $color-light

        &.left
          margin-right: $corner-distance-landscape / 2

          div
            border-left: $corner-stroke-width-landscape solid $color-light


        @media (orientation: portrait)
          &.top
            margin-bottom: $corner-distance-portrait / 2

            div
              border-top: $corner-stroke-width-portrait solid $color-light

          &.right
            margin-left: $corner-distance-portrait / 2

            div
              border-right: $corner-stroke-width-portrait solid $color-light

          &.bottom
            margin-top: $corner-distance-portrait / 2

            div
              border-bottom: $corner-stroke-width-portrait solid $color-light

          &.left
            margin-right: $corner-distance-portrait / 2

            div
              border-left: $corner-stroke-width-portrait solid $color-light

        $corner-in-easing: ease-out

        &.top.left
          animation: topleft-move-in-1 .5s 1s $corner-in-easing
          animation-fill-mode: forwards

          div
            animation: topleft-scale-in .5s

        &.top.right
          animation: topright-move-in-2 .5s 1.25s $corner-in-easing
          animation-fill-mode: forwards

          div
            animation: topright-scale-in .5s

        &.bottom.right
          animation: bottomright-move-in-3 .5s 1.5s $corner-in-easing
          animation-fill-mode: forwards

          div
            animation: bottomright-scale-in .5s
{'fraction_non_alphanumeric': 0.10147511752309937, 'fraction_numerical': 0.020100502512562814, 'mean_word_length': 1.7422222222222221, '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': '3846865', 'n_tokens_mistral': 2083, 'n_tokens_neox': 1824, 'n_words': 404}