Update and hero banner css fixes

Author: luzrain

src/components/LandingPage/index.module.css

@@ -6,8 +6,9 @@
     text-align: left;
     position: relative;
     overflow: hidden;
-    background: linear-gradient(135deg, color-mix(in srgb, var(--ifm-hero-background-color), transparent 95%) 50%, color-mix(in srgb, var(--ifm-hero-background-color), transparent 98%) 25%, transparent 50%);
-    /* background: radial-gradient(circle at 90% 10%,color-mix(in srgb,var(--ifm-hero-background-color),#0000 92%),#0000 60%); */
+    --color-left: color-mix(in srgb, var(--ifm-hero-background-color), transparent 95%);
+    --color-right: color-mix(in srgb, var(--ifm-hero-background-color), transparent 92%);
+    background: linear-gradient(135deg, var(--color-left) 50%, transparent 50%);
 }
 
 .heroBanner:before {
@@ -17,7 +18,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background: radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--ifm-hero-background-color), transparent 92%), transparent 60%);
+    background: radial-gradient(circle at 90% 10%, var(--color-right), transparent 50%);
     pointer-events: none;
 }