fix: simplify Beachball rendering; remove overflow-x properties

louisgrasset · Jul 29, 2022 · 1bbf9d4 · 1bbf9d4
1 parent 9b5ab0a
commit 1bbf9d4
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 6 deletions.
diff --git a/src/components/BeachBall/BeachBall.tsx b/src/components/BeachBall/BeachBall.tsx
@@ -5,8 +5,8 @@ import React from 'react';
  */
 export const BeachBall = () => {
     return (
-        <div id="beachball" className={"absolute top-0 right-0 overflow-hidden filter-blur-70 dark:opacity-20"} style={{ animation: 'spin 12s ease-in-out alternate infinite', zIndex: '-1' }}>
-            <div className="relative grid grid-cols-2 origin-center transform -rotate-45 dark:filter-grayscale-30">
+        <div id="beachball" className={"absolute top-0 right-0 overflow-hidden filter-blur-80 dark:opacity-20"} style={{ zIndex: '-1' }}>
+            <div className="relative grid grid-cols-2 origin-center transform -rotate-45 dark:filter-grayscale-30"  style={{ animation: 'spin 12s ease-in-out alternate infinite'}}>
                 <div className="top-0 left-0 bg-yellow-400 rounded-full rounded-br-none w-60 h-60"></div>
                 <div className="top-0 right-0 bg-pink-400 rounded-full rounded-bl-none w-60 h-60"></div>
                 <div className="bottom-0 right-0 bg-purple-300 rounded-full rounded-tr-none w-60 h-60"></div>

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -120,7 +120,7 @@ const IndexPage = ({ pageContext }: IndexPageProps) => {
       </Helmet>
 
       <main
-        className="pb-20 overflow-x-hidden transition-colors"
+        className="pb-20 transition-colors"
         ref={refs.top}
       >
         <Alert

diff --git a/src/styles/custom.scss b/src/styles/custom.scss
@@ -36,10 +36,10 @@ nav > div:first-child.show {
 
 @keyframes spin {
   0% {
-    transform: rotate(0deg) scale(1);
+    transform: rotate(-45deg) scale(1);
   }
   100% {
-    transform: rotate(360deg) scale(1.2);
+    transform: rotate(315deg) scale(1.2);
   }
 }
 
@@ -64,7 +64,7 @@ nav > div:first-child.show {
 }
 
 @media screen and (max-width: 768px) {
-  #beachball {
+  #beachball > div {
     animation-play-state: paused !important;
   }
   #contact {