<commit_before>ul
  display: none
  list-style-type: none
  transition: 1s ease-in-out

li
  float: left
  transition: color 1s ease-in-out
  margin: 5px

  a
    box-sizing: border-box
    position: relative
    padding: .5em

    &::before,
    &::after
      box-sizing: inherit
      content: ''
      position: absolute
      width: 100%
      height: 100%

// Draw transitions taken from: https://codepen.io/giana/pen/yYBpVY
// All credits to this pen.

.draw
  transition: color .25s ease-in-out

  &::before,
  &::after
    // Set border to invisible, so we don't see a 4px border on a 0x0 element before the transition starts
    border: 2px solid transparent
    width: 0
    height: 0

  &::before
    top: 0
    left: 0

  &::after
    top: 0
    left: 0

  &:hover
    cursor: pointer

  &:hover::before,
  &:hover::after
    width: 100%
    height: 100%

  &:hover::before
    transition: width 0.25s ease-out, height 0.25s ease-out 0.25s

  &:hover::after
    transition: height 0.25s ease-out, width 0.25s ease-out 0.25s

.draw-programming
  @extend .draw

  &:hover
    color: $programming

  &:hover::before
    border-top-color: $programming
    border-right-color: $programming

  &:hover::after
    border-bottom-color: $programming
    border-left-color: $programming

.draw-programming-active
  background-color: $programming
  color: white

  &:hover
    background-color: white
    color: $programming

.draw-photography
  @extend .draw

  &:hover
    color: $photography

  &:hover::before
    border-top-color: $photography
    border-right-color: $photography

  &:hover::after
    border-bottom-color: $photography
    border-left-color: $photography

.draw-photography-active
  background-color: $photography
  color: white

  &:hover
    background-color: white
    color: $photography

.draw-blog
  @extend .draw

  &:hover
    color: $blog

  &:hover::before
    border-top-color: $blog
    border-right-color: $blog

  &:hover::after
    border-bottom-color: $blog
    border-left-color: $blog

.draw-blog-active
  background-color: $blog
  color: white

  &:hover
    background-color: white
    color: $blog

.draw-resume
  @extend .draw

  &:hover
    color: $resume

  &:hover::before
    border-top-color: $resume
    border-right-color: $resume

  &:hover::after
    border-bottom-color: $resume
    border-left-color: $resume

.navigation
  flex: 0
  height: 10vh
  display: flex
  align-items: center
  justify-content: center
  font-size: 1.2em
<commit_msg>Change onHover styling for active links<commit_after>ul
  display: none
  list-style-type: none
  transition: 1s ease-in-out

li
  float: left
  transition: color 1s ease-in-out
  margin: 5px

  a
    box-sizing: border-box
    position: relative
    padding: .5em

    &::before,
    &::after
      box-sizing: inherit
      content: ''
      position: absolute
      width: 100%
      height: 100%

// Draw transitions taken from: https://codepen.io/giana/pen/yYBpVY
// All credits to this pen.

.draw
  transition: color .25s ease-in-out

  &::before,
  &::after
    // Set border to invisible, so we don't see a 4px border on a 0x0 element before the transition starts
    border: 2px solid transparent
    width: 0
    height: 0

  &::before
    top: 0
    left: 0

  &::after
    top: 0
    left: 0

  &:hover
    cursor: pointer

  &:hover::before,
  &:hover::after
    width: 100%
    height: 100%

  &:hover::before
    transition: width 0.25s ease-out, height 0.25s ease-out 0.25s

  &:hover::after
    transition: height 0.25s ease-out, width 0.25s ease-out 0.25s

.draw-programming
  @extend .draw

  &:hover
    color: $programming

  &:hover::before
    border-top-color: $programming
    border-right-color: $programming

  &:hover::after
    border-bottom-color: $programming
    border-left-color: $programming

.draw-programming-active
  background-color: $programming
  color: white
  transition: 1s ease-in-out

  &:hover
    opacity: .5
    color: white

.draw-photography
  @extend .draw

  &:hover
    color: $photography

  &:hover::before
    border-top-color: $photography
    border-right-color: $photography

  &:hover::after
    border-bottom-color: $photography
    border-left-color: $photography

.draw-photography-active
  background-color: $photography
  color: white

  &:hover
    opacity: .5
    color: white

.draw-blog
  @extend .draw

  &:hover
    color: $blog

  &:hover::before
    border-top-color: $blog
    border-right-color: $blog

  &:hover::after
    border-bottom-color: $blog
    border-left-color: $blog

.draw-blog-active
  background-color: $blog
  color: white

  &:hover
    opacity: .5
    color: white

.draw-resume
  @extend .draw

  &:hover
    color: $resume

  &:hover::before
    border-top-color: $resume
    border-right-color: $resume

  &:hover::after
    border-bottom-color: $resume
    border-left-color: $resume

.navigation
  flex: 0
  height: 10vh
  display: flex
  align-items: center
  justify-content: center
  font-size: 1.2em

{'fraction_non_alphanumeric': 0.11828171828171828, 'fraction_numerical': 0.02117882117882118, 'mean_word_length': 2.727475800446761, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 2, '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': '1678161', 'n_tokens_mistral': 1868, 'n_tokens_neox': 1713, 'n_words': 454}