ReVanced/revanced-website
1
0
Fork 0
mirror of https://github.com/revanced/revanced-website.git synced 2025-06-12 21:27:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: credits page redesign

Browse Source
This commit is contained in:
afn
2022-10-24 15:44:41 -04:00
parent 112b409af5
commit ae27ac396b
8 changed files with 123 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/routes/credits/+page.svelte
View File

@ -5,20 +5,28 @@
import type { ContribData } from '../+layout';
import ContributorHost from '$lib/components/molecules/ContributorHost.svelte';
import Footer from '$lib/components/molecules/Footer.svelte';
import Footer from '$lib/components/molecules/Footer.svelte';
// From the layout hydration. See +layout.ts
// From the layout hydration. See +layout.ts
export let data: ContribData;
</script>
<div class="wrapper contrib-grid">
{#each data.repositories as { contributors, name }}
<div in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
<ContributorHost contribs={contributors} repo={name} />
</div>
{/each}
<div class="wrapper">
<div class="text-container" in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
<h1>Made possible by the community.</h1>
<h2>Want to show up here? <span><a href="https://github.com/revanced" target="_blank" rel="noreferrer">Become a contributor</a></span></h2>
</div>
<div class="contrib-grid">
{#each data.repositories as { contributors, name }}
<div in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
<ContributorHost contribs={contributors} repo={name} />
</div>
{/each}
</div>
</div>
<Footer {...data} />
<style>
.contrib-grid {
display: flex;
@ -26,6 +34,42 @@
gap: 3rem;
margin-bottom: 3rem;
}
</style>
<Footer {...data} />
h1 {
font-size: 2.25rem;
font-weight: 600;
text-align: center;
color: var(--grey-four);
}
h2 {
font-size: 1rem;
color: var(--grey-four);
}
.text-container {
display: flex;
align-items: center;
flex-direction: column;
gap: 0.5rem;
margin-bottom: 2rem;
background-color: var(--accent-color);
padding: 2rem;
border-radius: 8px;
}
a {
text-decoration: none;
color: var(--grey-four);
}
a::after {
padding-left: 5px;
content: '->';
position: absolute;
transition: all 0.3s var(--bezier-one);
}
a:hover::after {
transform: translateX(5px);
}
</style>

6
src/routes/patches/+page.svelte
View File

@ -9,7 +9,7 @@
import TreeMenu from '$lib/components/molecules/TreeMenu.svelte';
import TreeMenuButton from '$lib/components/atoms/TreeMenuButton.svelte';
import PatchCell from '$lib/components/atoms/PatchCell.svelte';
import PatchCell from '$lib/components/molecules/PatchCell.svelte';
import Footer from '$lib/components/molecules/Footer.svelte';
export let data: PatchesData & ContribData;
@ -53,7 +53,7 @@
{/each}
</div>
</section>
<Footer repositories={data.repositories} />
<Footer {...data} />
<style>
section {
@ -69,7 +69,7 @@
margin-top: 7.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
gap: 0.75rem;
width: 100%;
position: sticky;
z-index: 1;