Center NodeBuds logo animation on mobile

[26samaahmed]

Fix #985

https://github.com/EthanThatOneKid/acmcsuf.com/assets/111910374/104ad2e9-cea9-4bc4-a9a6-d1edb2831694

[netlify[bot]]

✅ Deploy Preview for acmcsuf ready!

Name	Link
🔨 Latest commit	66160ff75ac4bff0233092bf7b2ea8b48d2938c9
🔍 Latest deploy log	https://app.netlify.com/sites/acmcsuf/deploys/661c3fc8ad5fb10008c0d538
😎 Deploy Preview	https://deploy-preview-1060--acmcsuf.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[JustinStitt]

Hi, I do not notice the same issue reported in #985 for mobile -- for me, the logo is pretty darn well centered on mobile.

With that being said, I think you're on the right track with your change; as far as making this animation look better.

Could we try reducing the side-to-side movement of this animation and have it spend more time in the center?

Here's an example (sorry the gif doesn't loop perfectly):

This was created with:

  .nodebuds-animation img {
    ...
    animation-timing-function: cubic-bezier(0, 0, 0, 0);
    ...
  }

  @keyframes slide {
    0% {
      left: -60px;
    }

    33% {
      left: -5px;
    }

    50% {
      left: 0;
    }

    66% {
      left: 5px;
    }

    100% {
      left: 60px;
    }
  }

[26samaahmed]

Hii, I updated the animation as suggested by reducing the side to side movement. Thank you for the suggestion, it looks better now.

https://github.com/EthanThatOneKid/acmcsuf.com/assets/111910374/0b60e578-7eaa-49fb-a0d1-680b9ad07ea3

[karnikaavelumani]

Make sure to update the branch!