ReVanced/revanced-website
1
0
Fork 0
mirror of https://github.com/revanced/revanced-website.git synced 2025-04-30 06:34:35 +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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/app.css
View File

@ -36,12 +36,12 @@ body {
:root { :root {
--white: #fff; --white: #fff;
--accent-color: #8bc3f4; --accent-color: #9fd5ff;
--accent-color-two: hsl(207, 65%, 90%); --accent-color-two: hsl(207, 65%, 90%);
--bg-color: #1a1c1e; --bg-color: #1a1c1e;
--grey-one: #252b31; --grey-one: #252b31;
--grey-two: #28313b; --grey-two: #28313b;
--grey-three: #373E4D; --grey-three: #373e4d;
--grey-four: #1b1e29; --grey-four: #1b1e29;
--grey-five: hsl(208, 30%, 75%); --grey-five: hsl(208, 30%, 75%);
--grey-six: hsla(223, 17%, 16%, 0.655); --grey-six: hsla(223, 17%, 16%, 0.655);
@ -50,7 +50,8 @@ body {
} }
::selection { ::selection {
background: var(--grey-three); background: var(--grey-six);
color: var(--white);
} }
/*-----headings-----*/ /*-----headings-----*/
@ -58,7 +59,7 @@ body {
h1 { h1 {
color: var(--white); color: var(--white);
font-weight: 700; font-weight: 700;
line-height: 1.5rem;
font-size: 1.5rem; font-size: 1.5rem;
} }
@ -108,3 +109,10 @@ h6 {
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background-color: var(--grey-three); background-color: var(--grey-three);
} }
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid var(--grey-three);
}

26
src/lib/components/atoms/ContributorPerson.svelte
View File

@ -17,10 +17,15 @@
color: var(--white); color: var(--white);
text-decoration: none; text-decoration: none;
text-align: center; text-align: center;
padding: 0.5rem 0.1rem; padding: 0.5rem 0.5rem;
border-radius: 12px; width: 100%;
width: 100px;
transition: all 0.3s var(--bezier-one); transition: all 0.3s var(--bezier-one);
border: 1px solid var(--grey-three);
border-radius: 4px;
display:flex;
gap: 1rem;
align-items: center;
background-color: var(--grey-six)
} }
button { button {
@ -28,27 +33,26 @@
border-radius: 50%; border-radius: 50%;
overflow: hidden; overflow: hidden;
border: 0; border: 0;
width: 45px; height: 30px;
height: 45px; width: 30px;
max-height: 86px; min-width: 30px;
max-width: 86px; min-height: 30px;
cursor: pointer; cursor: pointer;
background-color: transparent; background-color: transparent;
transition: transform 0.4s var(--bezier-one); transition: transform 0.4s var(--bezier-one);
margin-bottom: 1rem;
user-select: none; user-select: none;
} }
a:hover { a:hover {
background-color: var(--grey-three); background-color: var(--accent-color);
} }
a:hover > h2 { a:hover > h2 {
color: var(--accent-color); color: var(--grey-four);
} }
h2 { h2 {
font-size: 1rem; font-size: 0.95rem;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;

43
src/lib/components/molecules/ContributorHost.svelte
View File

@ -15,28 +15,42 @@
let usersIwantToExplodeSoBadly = ['semantic-release-bot']; let usersIwantToExplodeSoBadly = ['semantic-release-bot'];
</script> </script>
<div class="container"> <div class="title">
<a href="https://github.com/{repo}" rel="noreferrer" target="_blank"> <a href="https://github.com/{repo}" rel="noreferrer" target="_blank">
<h2>{repo_name}</h2> <h2>{repo_name}</h2>
</a> </a>
</div>
<div class="contrib-host"> <hr/>
{#each contribs as contrib}
{#if !usersIwantToExplodeSoBadly.includes(contrib.login)} <div class="contrib-host">
<ContributorButton name={contrib.login} pfp={contrib.avatar_url} url={contrib.html_url} /> {#each contribs as contrib}
{/if} {#if !usersIwantToExplodeSoBadly.includes(contrib.login)}
{/each} <ContributorButton name={contrib.login} pfp={contrib.avatar_url} url={contrib.html_url} />
</div> {/if}
{/each}
</div> </div>
<style> <style>
.title {
display: flex;
align-items: center;
border-radius: 4px;
transform: translateX(-6px);
}
h2 { h2 {
margin-bottom: 1rem; text-align: center;
font-size: 1.25rem;
} }
hr {
margin-top: 0.5rem;
margin-bottom: 1rem;
border-top: 1px solid var(--grey-two);
}
a { a {
transition: all 0.3s var(--bezier-one); transition: all 0.3s var(--bezier-one);
display: block; display: flex;
text-decoration: none; text-decoration: none;
width: max-content; width: max-content;
border-radius: 8px; border-radius: 8px;
@ -46,7 +60,7 @@
transition: all 0.3s var(--bezier-one); transition: all 0.3s var(--bezier-one);
width: max-content; width: max-content;
padding: 0rem 0.4rem; padding: 0rem 0.4rem;
border-radius: 8px; border-radius: 4px;
} }
a:hover > h2 { a:hover > h2 {
@ -56,12 +70,9 @@
} }
.contrib-host { .contrib-host {
gap: 1.5rem; gap: 0.5rem;
display: grid; display: grid;
justify-items: center; justify-items: center;
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
background-color: var(--grey-six);
padding: 1.5rem;
border-radius: 16px;
} }
</style> </style>

18
src/lib/components/molecules/Footer.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import type { Contributor } from 'src/data/types'; import type { Contributor, Repository } from 'src/data/types';
export let repositories: Contributor[]; export let repositories: Repository[];
</script> </script>
<hr /> <hr />
@ -57,6 +57,8 @@
</footer> </footer>
<style> <style>
footer { footer {
margin: 4rem 0 5rem 0; margin: 4rem 0 5rem 0;
margin-inline: auto; margin-inline: auto;
@ -87,6 +89,10 @@
text-decoration: none; text-decoration: none;
} }
h6 {
font-size: 0.9rem;
}
.links-container { .links-container {
display: flex; display: flex;
gap: 5rem; gap: 5rem;
@ -97,12 +103,4 @@
gap: 0.5rem; gap: 0.5rem;
flex-direction: column; flex-direction: column;
} }
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid var(--grey-three);
margin-top: 1rem;
}
</style> </style>

6
src/lib/components/atoms/PatchCell.svelte → src/lib/components/molecules/PatchCell.svelte
View File

@ -80,7 +80,7 @@
h2 { h2 {
color: var(--accent-color); color: var(--accent-color);
font-size: 0.75rem; font-size: 0.8rem;
font-weight: 500; font-weight: 500;
border-radius: 8px; border-radius: 8px;
background-color: var(--grey-two); background-color: var(--grey-two);
@ -100,14 +100,14 @@
h3 { h3 {
color: var(--accent-color); color: var(--accent-color);
font-size: 0.85rem; font-size: 0.9rem;
margin-bottom: 0.1rem; margin-bottom: 0.1rem;
font-weight: 500; font-weight: 500;
} }
h4 { h4 {
color: var(--grey-five); color: var(--grey-five);
font-size: 0.8rem; font-size: 0.9rem;
font-weight: 400; font-weight: 400;
} }

6
src/lib/components/molecules/TreeMenu.svelte
View File

@ -27,11 +27,7 @@
} }
hr { hr {
margin-top: 0.75rem; margin-top: 0.5rem;
display: block;
height: 1px;
border: 0;
border-top: 1px solid var(--grey-three);
} }
.package-list { .package-list {

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

@ -5,20 +5,28 @@
import type { ContribData } from '../+layout'; import type { ContribData } from '../+layout';
import ContributorHost from '$lib/components/molecules/ContributorHost.svelte'; 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; export let data: ContribData;
</script> </script>
<div class="wrapper contrib-grid"> <div class="wrapper">
{#each data.repositories as { contributors, name }} <div class="text-container" in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
<div in:fly={{ y: 10, easing: quintOut, duration: 750 }}> <h1>Made possible by the community.</h1>
<ContributorHost contribs={contributors} repo={name} /> <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>
{/each} <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> </div>
<Footer {...data} />
<style> <style>
.contrib-grid { .contrib-grid {
display: flex; display: flex;
@ -26,6 +34,42 @@
gap: 3rem; gap: 3rem;
margin-bottom: 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 TreeMenu from '$lib/components/molecules/TreeMenu.svelte';
import TreeMenuButton from '$lib/components/atoms/TreeMenuButton.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'; import Footer from '$lib/components/molecules/Footer.svelte';
export let data: PatchesData & ContribData; export let data: PatchesData & ContribData;
@ -53,7 +53,7 @@
{/each} {/each}
</div> </div>
</section> </section>
<Footer repositories={data.repositories} /> <Footer {...data} />
<style> <style>
section { section {
@ -69,7 +69,7 @@
margin-top: 7.5rem; margin-top: 7.5rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.5rem; gap: 0.75rem;
width: 100%; width: 100%;
position: sticky; position: sticky;
z-index: 1; z-index: 1;