Skip to content
This repository has been archived by the owner on Sep 12, 2024. It is now read-only.

Closes #365 - Added animated gradient text effect to main heading. (Improvement) #366

Closed
wants to merge 4 commits into from
Closed

Closes #365 - Added animated gradient text effect to main heading. (Improvement) #366

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
83b6b51
Added animated gradient text effect to main heading
akhileshRaturi Aug 16, 2023
621d5e2
Merge pull request #1 from akhileshRaturi/gradientEffect
akhileshRaturi Aug 16, 2023
8702360
Applied the media query for reduced motion, removed additional css file
akhileshRaturi Aug 16, 2023
a2c1abc
Merge pull request #2 from akhileshRaturi/gradientEffect
akhileshRaturi Aug 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions src/lib/components/index/hero.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
akhileshRaturi marked this conversation as resolved.
Show resolved Hide resolved
<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>
Expand Down
28 changes: 28 additions & 0 deletions static/css/index.css
View file
Open in desktop
akhileshRaturi marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -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);
akhileshRaturi marked this conversation as resolved.
Show resolved Hide resolved
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;
}