Merge pull request #1 from akhileshRaturi/gradientEffect

Issue EddieHubCommunity#365 - Added animated gradient text effect to main heading. (Improvement)
akhileshRaturi · Aug 16, 2023 · 621d5e2 · 621d5e2
2 parents 911a95c + 83b6b51
commit 621d5e2
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 5 deletions.
diff --git a/src/lib/components/index/hero.svelte b/src/lib/components/index/hero.svelte
@@ -2,12 +2,12 @@
   import Link from '$lib/components/index/link.svelte';
 </script>
 
+<head>
+  <link rel="stylesheet" href="css/index.css" />
+</head>
+
 <div class="space-y-8">
-  <h1
-    class="mx-auto bg-gradient-to-r from-primary-100 via-accent-magenta to-accent-cyan bg-clip-text text-center text-3xl font-bold text-transparent dark:to-primary-400 md:text-6xl"
-  >
-    Good-first-issue-finder
-  </h1>
+  <h1 class="gradient-flow">Good-first-issue-finder</h1>
   <h2 class="max-w-2xl text-center md:text-xl">
     Your entry point for finding good first issues in the EddieHub Organization and in the community
   </h2>

diff --git a/static/css/index.css b/static/css/index.css
@@ -0,0 +1,28 @@
+@keyframes gradientAnimation {
+  0% {
+    background-position: 0% 50%;
+  }
+  100% {
+    background-position: 100% 50%;
+  }
+}
+
+.gradient-flow {
+  background: linear-gradient(to right, #ff5a00, magenta, cyan);
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  display: inline-block;
+  text-align: center;
+  font-size: 3.75rem;
+  font-weight: bold;
+  width: 672px;
+  height: 75px;
+  background-size: 200% 100%;
+  animation: gradientAnimation 2s linear infinite alternate-reverse;
+}
+
+@media (min-width: 768px) h1 {
+  font-size: 3.75rem;
+  line-height: 1;
+}