From 83b6b516134db38ebc1ae4e314d9552b0a26a64a Mon Sep 17 00:00:00 2001 From: Akhilesh Raturi Date: Wed, 16 Aug 2023 15:36:33 +0530 Subject: [PATCH 1/2] Added animated gradient text effect to main heading --- src/lib/components/index/hero.svelte | 10 +++++----- static/css/index.css | 28 ++++++++++++++++++++++++++++ 2 files changed, 33 insertions(+), 5 deletions(-) create mode 100644 static/css/index.css diff --git a/src/lib/components/index/hero.svelte b/src/lib/components/index/hero.svelte index 39f2233..fe945e7 100644 --- 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'; + + + +
-

- Good-first-issue-finder -

+

Good-first-issue-finder

Your entry point for finding good first issues in the EddieHub Organization and in the community

diff --git a/static/css/index.css b/static/css/index.css new file mode 100644 index 0000000..6319b11 --- /dev/null +++ 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; +} From 870236041558ffcf7b59474d588f43c5bb37f0da Mon Sep 17 00:00:00 2001 From: Akhilesh Raturi Date: Wed, 16 Aug 2023 22:34:04 +0530 Subject: [PATCH 2/2] Applied the media query for reduced motion, removed additional css file --- src/lib/components/index/hero.svelte | 38 +++++++++++++++++++++++++++- static/css/index.css | 28 -------------------- 2 files changed, 37 insertions(+), 29 deletions(-) delete mode 100644 static/css/index.css diff --git a/src/lib/components/index/hero.svelte b/src/lib/components/index/hero.svelte index fe945e7..c0a64de 100644 --- a/src/lib/components/index/hero.svelte +++ b/src/lib/components/index/hero.svelte @@ -7,7 +7,13 @@
-

Good-first-issue-finder

+

+ Good-first-issue-finder +

+

Your entry point for finding good first issues in the EddieHub Organization and in the community

@@ -15,3 +21,33 @@ Get started
+ + diff --git a/static/css/index.css b/static/css/index.css deleted file mode 100644 index 6319b11..0000000 --- a/static/css/index.css +++ /dev/null @@ -1,28 +0,0 @@ -@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; -}