<commit_before>$twitter: #1da1f2
$github: #000
$stack-overflow: #f69c55
$dribbble: #ea4c89


#social-container
  position: fixed
  bottom: 0
  right: 0
  color: $light-text-primary

  z-index: 1000

  list-style: none
  margin: 0
  padding: calc((15px + 1vw) / 2)
  text-align: center

  transition: opacity .4s

  &.hidden
    opacity: 0


.social
  overflow: visible
  text-align: center
  font-size: 25px

  i
    display: inline-block
    position: relative
    padding: calc(7px + .75vw)

    color: $light-text-primary
    transition: color .2s ease
    overflow: visible

    &::after
      content: ''
      display: inline-block
      background-color: $white
      // Round
      border-radius: 50%
      width: 40px
      height: 40px
      // Shouldn't take up space
      position: absolute
      top: 50%
      left: 50%

      z-index: 1

      transform: translate(-50%, -50%) scale(.25, .25)
      opacity: 0
      transition: transform .2s ease-out, opacity .2s ease-out

    // Make sure that the icons appear on top of their backgrounds
    &::before
      position: relative
      z-index: 2

    &:hover
      &::after
        opacity: 1
        transform: translate(-50%, -50%) scale(1)


    // Specific styles for each different logo. Transforms need to be different
       for some bubbles because some icons have uneven visual weight


    &.fa-github:hover
      color: $github


    &.fa-stack-overflow:hover
      color: $stack-overflow

      // Bottom of icon has much more visual weight than top so the circle appears centered when it's farther down relative to the icon
      &::after
        transform: translateY(.05em) translate(-50%, -50%) scale(1)


    &.fa-twitter:hover
      color: $twitter

      // Visual weight is uneven so we reposition circle
      &::after
        transform: translate(-.03em, -.03em) translate(-50%, -50%) scale(1)


    &.fa-dribbble:hover
      color: $dribbble


// These make icon sizes a bit more uniform-looking

.fa-github
  font-size: .96666em

.fa-stack-overflow
  font-size: .76666em

.fa-twitter
  font-size: .88333em

.fa-dribbble
  font-size: .93333em


#email
  position: fixed
  bottom: 0
  z-index: 1000

  color: $light-text-primary

  margin: 0
  padding: calc(14.5px + 1.25vw)

  a
    display: block
    margin-left: 1em
    transform-origin: bottom left
    transform: rotate(-90deg)<commit_msg>Add underline animation to email link<commit_after>$twitter: #1da1f2
$github: #000
$stack-overflow: #f69c55
$dribbble: #ea4c89


#social-container
  position: fixed
  bottom: 0
  right: 0
  color: $light-text-primary

  z-index: 1000

  list-style: none
  margin: 0
  padding: calc((15px + 1vw) / 2)
  text-align: center

  transition: opacity .4s

  &.hidden
    opacity: 0


.social
  overflow: visible
  text-align: center
  font-size: 25px

  i
    display: inline-block
    position: relative
    padding: calc(7px + .75vw)

    color: $light-text-primary
    transition: color .2s ease
    overflow: visible

    &::after
      content: ''
      display: inline-block
      background-color: $white
      // Round
      border-radius: 50%
      width: 40px
      height: 40px
      // Shouldn't take up space
      position: absolute
      top: 50%
      left: 50%

      z-index: 1

      transform: translate(-50%, -50%) scale(.25, .25)
      opacity: 0
      transition: transform .2s ease-out, opacity .2s ease-out

    // Make sure that the icons appear on top of their backgrounds
    &::before
      position: relative
      z-index: 2

    &:hover
      &::after
        opacity: 1
        transform: translate(-50%, -50%) scale(1)


    // Specific styles for each different logo. Transforms need to be different
       for some bubbles because some icons have uneven visual weight


    &.fa-github:hover
      color: $github


    &.fa-stack-overflow:hover
      color: $stack-overflow

      // Bottom of icon has much more visual weight than top so the circle appears centered when it's farther down relative to the icon
      &::after
        transform: translateY(.05em) translate(-50%, -50%) scale(1)


    &.fa-twitter:hover
      color: $twitter

      // Visual weight is uneven so we reposition circle
      &::after
        transform: translate(-.03em, -.03em) translate(-50%, -50%) scale(1)


    &.fa-dribbble:hover
      color: $dribbble


// These make icon sizes a bit more uniform-looking

.fa-github
  font-size: .96666em

.fa-stack-overflow
  font-size: .76666em

.fa-twitter
  font-size: .88333em

.fa-dribbble
  font-size: .93333em


#email
  position: fixed
  bottom: 0
  z-index: 1000

  color: $light-text-primary

  margin: 0
  padding: calc(14.5px + 1.25vw)

  a
    display: block
    margin-left: 1em
    transform-origin: bottom left
    transform: rotate(-90deg)

    // Underline
    &::after
      content: ''
      background: $white

      position: absolute
      bottom: .1em
      left: 0
      height: 1px
      width: 100%

      transform-origin: left
      transform: scaleX(0)
      transition: transform .5s

    &:hover::after
      transform: scaleX(1)
{'fraction_non_alphanumeric': 0.10653325485579752, 'fraction_numerical': 0.04571316460663135, 'mean_word_length': 2.30609597924773, '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': '2088610', 'n_tokens_mistral': 1850, 'n_tokens_neox': 1613, 'n_words': 513}