website bg updated

grafana · Aug 13, 2021 · 3cfe542 · 3cfe542
1 parent 6209fb2
commit 3cfe542
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 15 deletions.
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -44,11 +44,6 @@ export default function Home({ data }: HomeProps) {
           style={{
             width: '100%',
             height: `${screenSize.height - 40}px`,
-            backgroundSize: 'cover',
-            backgroundColor: '#723961',
-            backgroundPositionX: '10%',
-            backgroundPositionY: '10%',
-            backgroundImage: `radial-gradient(95.47% 139.72% at 49.52% 97.49%,#723961 0%,#AB575C 80%,#0E0A20 100%)`,
           }}
         >
           <div

diff --git a/src/styles/website.scss b/src/styles/website.scss
@@ -263,20 +263,42 @@ code {
 }
 
 .mainbg {
-  opacity: 0;
-  animation-name: mainbg-animation;
-  animation-iteration-count: 1;
-  animation-duration: 0.9s;
-  animation-delay: 0s;
-  animation-fill-mode: forwards;
+  background: linear-gradient(270deg, #b45d5b, #663360, #46275c, #181130);
+  background-size: 800% 800%;
+  -webkit-animation: mainbg-animation 4s ease infinite;
+  -moz-animation: mainbg-animation 4s ease infinite;
+  animation: mainbg-animation 4s ease infinite;
+}
+@-webkit-keyframes mainbg-animation {
+  0% {
+    background-position: 9% 0%;
+  }
+  50% {
+    background-position: 92% 100%;
+  }
+  100% {
+    background-position: 9% 0%;
+  }
+}
+@-moz-keyframes mainbg-animation {
+  0% {
+    background-position: 9% 0%;
+  }
+  50% {
+    background-position: 92% 100%;
+  }
+  100% {
+    background-position: 9% 0%;
+  }
 }
-
 @keyframes mainbg-animation {
   0% {
-    opacity: 0;
-    animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
+    background-position: 9% 0%;
+  }
+  50% {
+    background-position: 92% 100%;
   }
   100% {
-    opacity: 1;
+    background-position: 9% 0%;
   }
 }