ReVanced/revanced-website
1
0
Fork 0
mirror of https://github.com/ReVanced/revanced-website.git synced 2026-01-11 13:46:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: Clean up codebase, improve styling and structure

Browse Source
This commit is contained in:
Ushie
2025-06-14 05:02:03 +03:00
parent 49c7fc5af8
commit 393d2d64b1
12 changed files with 151 additions and 251 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/layout/Footer/FooterHost.svelte
View File

@@ -146,10 +146,6 @@
}
}
path {
stroke: var(--border);
}
.main-content {
display: flex;
flex-direction: column;

51
src/layout/Footer/FooterSection.svelte
View File

@@ -2,19 +2,10 @@
export let title: string;
</script>
<div class="desktop-only">
<span>{title}</span>
<ul>
<slot />
</ul>
</div>
<div class="mobile-only">
<button class="title">
<div>
<span>
{title}
</span>
</button>
<ul>
<slot />
</ul>
@@ -22,49 +13,23 @@
<style lang="scss">
span {
list-style: none;
color: var(--text-four);
display: flex;
margin: 1.5rem 0;
font-size: 0.9rem;
font-weight: 600;
color: var(--text-four);
}
ul {
margin: 1.25rem 0rem;
display: flex;
gap: 1rem;
flex-direction: column;
width: max-content;
}
.title {
display: flex;
justify-content: space-between;
background-color: transparent;
border: none;
width: 100%;
margin: 1.5rem 0;
cursor: pointer;
}
.mobile-only:not(:last-child) {
border-bottom: 1px solid var(--border);
}
.mobile-only {
display: none;
}
.arrow {
transition: all 0.2s var(--bezier-one);
user-select: none;
margin: 1.25rem 0rem;
gap: 1rem;
}
@media (max-width: 768px) {
.mobile-only {
display: block;
}
.desktop-only {
display: none;
div:not(:last-child) {
border-bottom: 1px solid var(--border);
}
}
</style>

12
src/layout/Hero/HeroImage.svelte
View File

@@ -7,17 +7,17 @@
<Picture data={manager_screenshot} alt="Screenshot of ReVanced Manager" />
</div>
<style>
.hero-img :global(img) {
height: 100%;
border-radius: 1.75rem;
}
<style lang="scss">
.hero-img {
height: max(100vh, 600px);
padding: 0.5rem 0.5rem;
border-radius: 1.75rem;
background-color: var(--surface-seven);
user-select: none;
:global(img) {
height: 100%;
border-radius: 1.75rem;
}
}
</style>

19
src/layout/Hero/SocialButton.svelte
View File

@@ -1,5 +1,6 @@
<script lang="ts">
import type { Social } from '$lib/types';
export let social: Social;
</script>
@@ -7,8 +8,11 @@
<img src="socials/{social.name.toLowerCase()}.svg" alt={social.name} />
</a>
<style>
<style lang="scss">
a {
display: flex;
justify-content: center;
border: 0;
width: 60px;
height: 60px;
@@ -19,11 +23,9 @@
background-color: var(--surface-four);
color: var(--text-one);
user-select: none;
}
a {
display: flex;
justify-content: center;
&:hover {
transform: translateY(-5%);
}
img {
@@ -31,11 +33,8 @@
width: 30px;
}
a:hover {
transform: translateY(-5%);
}
a:hover img {
&:hover img {
filter: brightness(1.2);
}
}
</style>

18
src/routes/announcements/TagsHost.svelte
View File

@@ -50,18 +50,8 @@
{/each}
{#if expandable && tags.length > 1}
<li class="button">
<li>
<Button type="text" on:click={() => (showAllTags = !showAllTags)}>
<div
class="expand-arrow"
style:transform={showAllTags ? 'rotate(90deg)' : 'rotate(-90deg)'}
>
<ChevronDown size="24px" color="var(--surface-six)" />
</div>
</Button>
</li>
{/if}
</div>
<style lang="scss">
div {
@@ -69,7 +59,7 @@
align-items: center;
gap: 4px;
.button {
li {
display: flex;
align-items: center;
}
@@ -79,9 +69,5 @@
user-select: none;
height: 1.5rem;
}
.rotate .expand-arrow {
transform: rotate(180deg);
}
}
</style>

18
src/routes/contributors/+page.svelte
View File

@@ -37,18 +37,18 @@
]}
/>
<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
>
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 }}
@@ -59,14 +59,16 @@
</Query>
</div>
</div>
</main>
<style>
.wrapper {
margin-bottom: 5rem;
}
.repos {
display: flex;
flex-direction: column;
gap: 2rem;
margin-bottom: 4rem;
}
h2 {

6
src/routes/contributors/ContributorPerson.svelte
View File

@@ -10,7 +10,7 @@
<h5>{name}</h5>
</a>
<style>
<style lang="scss">
a {
color: var(--text-one);
text-decoration: none;
@@ -23,13 +23,13 @@
align-items: center;
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
a:hover {
&:hover {
background: var(--surface-three);
text-decoration: underline var(--primary);
color: var(--text-one);
}
}
h5 {
white-space: nowrap;

39
src/routes/contributors/ContributorSection.svelte
View File

@@ -15,7 +15,8 @@
let bots = ['semantic-release-bot', 'revanced-bot'];
</script>
<div class="section-container">
<div class="container">
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
class="title"
class:closed={!expanded}
@@ -31,7 +32,7 @@
</div>
{#if expanded}
<div class="contrib-host" transition:slide={{ easing: quintOut, duration: 500 }}>
<div class="contributors" transition:slide={{ easing: quintOut, duration: 500 }}>
{#each contributors as { name, avatar_url, url }}
{#if !bots.includes(name)}
<ContributorButton {name} pfp={avatar_url} {url} />
@@ -42,6 +43,11 @@
</div>
<style lang="scss">
.container {
border-radius: 20px;
overflow: hidden;
border: 1px solid var(--border);
.title {
display: flex;
align-items: center;
@@ -55,48 +61,41 @@
&:hover {
background-color: var(--surface-three);
}
}
.closed {
&.closed {
border-bottom: none;
}
#arrow {
transition: all 0.2s var(--bezier-one);
user-select: none;
}
.section-container {
border-radius: 20px;
overflow: hidden;
border: 1px solid var(--border);
}
a {
display: flex;
text-decoration: none;
width: max-content;
border-radius: 8px;
}
a:hover {
&:hover {
text-decoration: underline var(--primary);
color: var(--text-one);
}
}
.contrib-host {
#arrow {
transition: all 0.2s var(--bezier-one);
user-select: none;
}
}
.contributors {
margin-right: -1px;
margin-bottom: -1px;
display: grid;
justify-items: center;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
@media (max-width: 767px) {
.contrib-host {
padding: 0.75rem;
gap: 0.25rem;
grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
}
}
}
</style>

1
src/routes/donate/DonateHeartAnimation.svelte
View File

@@ -68,6 +68,7 @@
</script>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
id="pulsating-image"
on:mousemove={(e) => showHeart(e, false)}

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

@@ -25,8 +25,6 @@
const query = createQuery(queries.patches());
let searcher: Fuse<Patch> | undefined;
let searchParams: Readable<URLSearchParams>;
if (building) {
searchParams = readable(new URLSearchParams());
@@ -77,13 +75,6 @@
};
onMount(update);
console.log(
query.subscribe((data) => {
// console.log(filterPatches(data.data?.patches, selectedPkg || '', displayedTerm));
console.log(data.data?.patches);
console.log(displayedTerm);
})
);
</script>
<Head
@@ -134,14 +125,12 @@
</div>
<Query {query} let:data>
<div class="mobile-packages-dialogue">
<MobilePatchesPackagesDialog
bind:dialogOpen={mobilePackages}
bind:searchTerm
{data}
{selectedPkg}
/>
</div>
<aside in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
<PackageMenu>
@@ -156,7 +145,6 @@
<div class="patches-container">
{#each filterPatches(data.patches, selectedPkg || '', displayedTerm) as patch}
<!-- Trigger new animations when package or search changes (I love Svelte) -->
{#key selectedPkg || displayedTerm}
<div in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
<PatchItem {patch} bind:showAllVersions />
@@ -205,11 +193,6 @@
display: none;
}
@media (min-width: 768px) {
.mobile-packages-dialogue {
display: none;
}
}
@media (max-width: 767px) {
main {
grid-template-columns: none;

53
src/routes/patches/Package.svelte
View File

@@ -25,6 +25,7 @@
</script>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
class="package"
class:selected={selectedPkg === name || (name === 'All packages' && !selectedPkg)}
@@ -36,22 +37,30 @@
<style lang="scss">
.package {
padding: 0.75rem 1rem;
border-radius: 100px;
font-size: 0.85rem;
font-weight: 500;
border-radius: 100px;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.6rem;
width: 100%;
user-select: none;
transition: background-color 0.4s var(--bezier-one);
color: var(--text-four);
transition: color 0.3s var(--bezier-one);
cursor: pointer;
user-select: none;
transition:
background-color 0.4s var(--bezier-one),
color 0.3s var(--bezier-one);
@media (max-width: 767px) {
border-radius: 0px;
font-size: 0.9rem;
padding: 1rem;
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
border-bottom: 1px solid var(--border);
}
&.selected {
color: var(--primary);
transition: color 0.3s var(--bezier-one);
background-color: var(--tertiary);
}
@@ -60,28 +69,4 @@
color: var(--text-one);
}
}
@media (max-width: 767px) {
.package {
border-radius: 0px;
font-size: 0.9rem;
padding: 1rem 1rem;
width: 100%;
background-color: transparent;
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
color: var(--text-four);
border-bottom: 1px solid var(--border);
}
.selected {
color: var(--primary);
background-color: var(--tertiary);
}
.package:not(.selected):hover {
color: var(--text-four);
}
}
</style>

34
src/routes/patches/PackageMenu.svelte
View File

@@ -1,21 +1,21 @@
<div class="menu">
<div>
<h6>Packages</h6>
<hr />
<div class="slot">
<span>
<slot />
</div>
</span>
</div>
<style lang="scss">
.menu {
height: calc(100vh - 60px);
width: 100%;
padding: 0px 30px 30px 10px;
div {
display: flex;
flex-direction: column;
position: sticky;
height: calc(100vh - 60px);
top: 60px;
padding-top: calc(6rem - 60px);
padding: calc(6rem - 60px) 30px 30px 10px;
overflow-y: scroll;
&::-webkit-scrollbar-thumb {
@@ -26,12 +26,8 @@
}
}
.slot {
span {
margin-top: 0.75rem;
display: flex;
gap: 1rem;
flex-direction: column;
white-space: normal;
word-break: break-all;
}
@@ -39,16 +35,4 @@
margin-bottom: 1rem;
color: var(--primary);
}
@media (max-width: 767px) {
.menu {
padding: 0.75rem;
height: unset;
}
h6,
hr {
display: none;
}
}
</style>