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

Changes from all 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
38 changes: 37 additions & 1 deletion src/lib/components/index/hero.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,52 @@
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"
class="gradient-flow webkit-bg-clip-text mx-auto inline-block max-w-3xl bg-gradient-to-r
from-primary-100 via-accent-magenta to-accent-cyan bg-clip-text text-center text-3xl font-bold text-transparent md:text-6xl"
>
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>
<div class="flex justify-center">
<Link variant="primary" href="/app">Get started</Link>
</div>
</div>

<style lang="postcss">
.gradient-flow {
background-size: 200% 100%;
animation: gradientAnimation 2s linear infinite alternate-reverse;
}

@media (prefers-reduced-motion: reduce) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't need a dedicated media-query here, tailwind also provides them out-of-the-box with reduced-motion: see their docs

.md\:text-6xl {
animation: none;
background-size: 100% 100%;
}
}

@media (min-width: 768px) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as above, but for responsive breakpoints [resource]

.md\:text-6xl {
font-size: 3.75rem;
line-height: 1;
}
}

@keyframes gradientAnimation {
0% {
background-position: 0% 50%;
}
100% {
background-position: 100% 50%;
}
}
</style>