mirror of
https://github.com/revanced/revanced-website.git
synced 2025-05-11 20:04:25 +02:00
118 lines
2.4 KiB
Svelte
118 lines
2.4 KiB
Svelte
<script lang="ts">
|
|
import { fly } from 'svelte/transition';
|
|
import { quintOut } from 'svelte/easing';
|
|
|
|
import ContributorHost from './ContributorSection.svelte';
|
|
import Head from '$lib/components/Head.svelte';
|
|
import Query from '$lib/components/Query.svelte';
|
|
|
|
import { queries } from '$data/api';
|
|
import { createQuery } from '@tanstack/svelte-query';
|
|
|
|
const query = createQuery(['contributors'], queries.contributors);
|
|
</script>
|
|
|
|
<Head
|
|
title="Contributors of ReVanced"
|
|
description="ReVanced is made possible by the community. Check out the people who have contributed to the project and how you can contribute too."
|
|
schemas={[
|
|
{
|
|
'@context': 'https://schema.org',
|
|
'@type': 'BreadcrumbList',
|
|
itemListElement: [
|
|
{
|
|
'@type': 'ListItem',
|
|
position: 1,
|
|
name: 'Home',
|
|
item: 'https://revanced.app/'
|
|
},
|
|
{
|
|
'@type': 'ListItem',
|
|
position: 2,
|
|
name: 'Contributors',
|
|
item: 'https://revanced.app/contributors'
|
|
}
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
|
|
<main>
|
|
<div class="wrapper">
|
|
<div class="text-container" in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
|
|
<h2>Made possible by the community.</h2>
|
|
<p>
|
|
Want to show up here? <span
|
|
><a href="https://github.com/revanced" target="_blank" rel="noreferrer"
|
|
>Become a contributor</a
|
|
></span
|
|
>
|
|
</p>
|
|
</div>
|
|
<div class="repos">
|
|
<Query {query} let:data>
|
|
{#each data.contributables as { name, url, contributors }}
|
|
<div in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
|
|
<ContributorHost {name} {url} {contributors} />
|
|
</div>
|
|
{/each}
|
|
</Query>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<style>
|
|
.repos {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2rem;
|
|
margin-bottom: 4rem;
|
|
}
|
|
|
|
h2 {
|
|
text-align: center;
|
|
color: var(--text-three);
|
|
margin-bottom: 0.3rem;
|
|
}
|
|
|
|
p {
|
|
text-align: center;
|
|
color: var(--text-three);
|
|
}
|
|
|
|
.text-container {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
margin-bottom: 2rem;
|
|
background-color: var(--primary);
|
|
padding: 2.5rem 1.75rem;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: var(--text-three);
|
|
}
|
|
|
|
a::after {
|
|
padding-left: 5px;
|
|
content: '→';
|
|
position: absolute;
|
|
transition: all 0.3s var(--bezier-one);
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: underline var(--text-three);
|
|
}
|
|
|
|
a:hover::after {
|
|
transform: translateX(5px);
|
|
}
|
|
@media screen and (max-width: 767px) {
|
|
.text-container {
|
|
padding: 2rem 1.75rem;
|
|
}
|
|
}
|
|
</style>
|