Skip to content

style: Add hover to links #745

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
Open

style: Add hover to links #745

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
e75087b
style: remove useless stylying
KyleDL101 Jul 25, 2025
3f2a2e5
style: refactor social media strip adding hover
IGN-Styly Jul 26, 2025
69e08eb
style: refactor social media strip adding hover
IGN-Styly Jul 26, 2025
e62bde1
style: follow zen style
IGN-Styly Jul 26, 2025
265238d
style: make footer links follow zen style
IGN-Styly Jul 26, 2025
e6bb787
Merge branch 'main' into main
IGN-Styly Jul 26, 2025
02c7bb3
Merge branch 'main' into main
IGN-Styly Jul 29, 2025
39b5179
style: fix duplicated opacity
IGN-Styly Jul 29, 2025
d50cb2b
Merge branch 'main' into main
IGN-Styly Jul 29, 2025
1c21877
Merge branch 'main' into main
IGN-Styly Aug 7, 2025
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
49 changes: 33 additions & 16 deletions src/components/Footer.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,15 +64,16 @@ const {
{footer.aboutUs}
</h2>
<nav aria-label="About navigation">
<ul class="grid gap-2 opacity-80">
<ul class="grid gap-2">
<li>
<a href={getLocalePath('/about')} class="font-normal"
<a href={getLocalePath('/about')} class="font-normal opacity-80 hover:opacity-100"
>{footer.teamAndContributors}</a
>
</li>
<li>
<a href={getLocalePath('/privacy-policy')} class="font-normal"
>{footer.privacyPolicy}</a
<a
href={getLocalePath('/privacy-policy')}
class="font-normal opacity-80 hover:opacity-100">{footer.privacyPolicy}</a
>
</li>
</ul>
Expand All @@ -83,19 +84,28 @@ const {
<h2 id="get-started-heading" class="text-base !font-semibold">
{footer.getStarted}
</h2>
<ul class="grid gap-2 opacity-80">
<ul class="grid gap-2">
<li>
<a href="https://docs.zen-browser.app/" class="font-normal">{footer.documentation}</a>
<a
href="https://docs.zen-browser.app/"
class="font-normal opacity-80 hover:opacity-100">{footer.documentation}</a
>
</li>
<li>
<a href={getLocalePath('/mods')} class="font-normal">{footer.zenMods}</a>
<a href={getLocalePath('/mods')} class="font-normal opacity-80 hover:opacity-100"
>{footer.zenMods}</a
>
</li>
<li>
<a href={getLocalePath('/release-notes')} class="font-normal">{footer.releaseNotes}</a
<a
href={getLocalePath('/release-notes')}
class="font-normal opacity-80 hover:opacity-100">{footer.releaseNotes}</a
>
</li>
<li>
<a href={getLocalePath('/download?twilight')} class="font-normal">{footer.twilight}</a
<a
href={getLocalePath('/download?twilight')}
class="font-normal opacity-80 hover:opacity-100">{footer.twilight}</a
>
</li>
</ul>
Expand All @@ -104,22 +114,29 @@ const {
<h2 id="get-help-heading" class="text-base !font-semibold">
{footer.getHelp}
</h2>
<ul class="grid gap-2 opacity-80">
<ul class="grid gap-2">
<li>
<a href="https://discord.gg/zen-browser" class="font-normal">{footer.discord}</a>
<a
href="https://discord.gg/zen-browser"
class="font-normal opacity-80 hover:opacity-100">{footer.discord}</a
>
</li>
<li>
<a href="https://uptime.zen-browser.app/" class="font-normal">{footer.uptimeStatus}</a
<a
href="https://uptime.zen-browser.app/"
class="font-normal opacity-80 hover:opacity-100">{footer.uptimeStatus}</a
>
</li>
<li>
<a href="https://github.com/zen-browser/desktop/issues/new/choose" class="font-normal"
>{footer.reportAnIssue}</a
<a
href="https://github.com/zen-browser/desktop/issues/new/choose"
class="font-normal opacity-80 hover:opacity-100">{footer.reportAnIssue}</a
>
</li>
<li>
<a href="https://github.com/zen-browser/desktop/security/policy" class="font-normal"
>{footer.securtiy}</a
<a
href="https://github.com/zen-browser/desktop/security/policy"
class="font-normal opacity-80 hover:opacity-100">{footer.securtiy}</a
>
</li>
</ul>
Expand Down
100 changes: 44 additions & 56 deletions src/components/SocialMediaStrip.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,62 +12,50 @@ import {
import { cn } from '~/utils/merge'

library.add(faMastodon, faBluesky, faGithub, faXTwitter, faReddit)
const Mastodon = icon({ prefix: 'fab', iconName: 'mastodon' })
const Bluesky = icon({ prefix: 'fab', iconName: 'bluesky' })
const Github = icon({ prefix: 'fab', iconName: 'github' })
const XTwitter = icon({ prefix: 'fab', iconName: 'x-twitter' })
const Reddit = icon({ prefix: 'fab', iconName: 'reddit' })

const socialMediaLinks = [
{
href: 'https://github.com/zen-browser',
ariaLabel: 'Visit Zen Browser on GitHub',
icon: icon({ prefix: 'fab', iconName: 'github' }),
},

{
href: 'https://x.com/zen_browser',
ariaLabel: 'Visit Zen Browser on X',
icon: icon({ prefix: 'fab', iconName: 'x-twitter' }),
},
{
href: 'https://floss.social/@zenbrowser',
ariaLabel: 'Visit Zen Browser on Mastodon',
icon: icon({ prefix: 'fab', iconName: 'mastodon' }),
},
{
href: 'https://bsky.app/profile/zen-browser.app',
ariaLabel: 'Visit Zen Browser on Bluesky',
icon: icon({ prefix: 'fab', iconName: 'bluesky' }),
},
{
href: 'https://www.reddit.com/r/zen_browser',
ariaLabel: 'Visit Zen Browser on Reddit',
icon: icon({ prefix: 'fab', iconName: 'reddit' }),
},
]
---

<ul class={cn('flex items-center gap-4 opacity-80', className)} {...props}>
<li>
<a
href="https://github.com/zen-browser"
target="_blank"
class="font-bold"
aria-label="Visit Zen Browser on GitHub"
>
<Fragment set:html={Github.html} />
</a>
</li>
<li>
<a
href="https://x.com/zen_browser"
target="_blank"
class="font-normal"
aria-label="Visit Zen Browser on X"
>
<Fragment set:html={XTwitter.html} />
</a>
</li>
<li>
<a
href="https://floss.social/@zenbrowser"
target="_blank"
class="font-normal"
aria-label="Visit Zen Browser on Mastodon"
>
<Fragment set:html={Mastodon.html} />
</a>
</li>
<li>
<a
href="https://bsky.app/profile/zen-browser.app"
target="_blank"
class="font-normal"
aria-label="Visit Zen Browser on Bluesky"
>
<Fragment set:html={Bluesky.html} />
</a>
</li>
<li>
<a
href="https://www.reddit.com/r/zen_browser"
target="_blank"
class="font-normal"
aria-label="Visit Zen Browser on Reddit"
>
<Fragment set:html={Reddit.html} />
</a>
</li>
<ul class={cn('flex items-center gap-4', className)} {...props}>
{
socialMediaLinks.map(({ href, ariaLabel, icon }) => (
<li>
<a
href={href}
target="_blank"
class="font-normal opacity-80 hover:opacity-100"
aria-label={ariaLabel}
>
<Fragment set:html={icon.html} />
</a>
</li>
))
}
</ul>