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

fix: new hero text, handle generic patches

Browse Source
This commit is contained in:
afn 2022-12-15 15:40:22 -05:00
parent d1f7e998de
commit 8f031178b3
9 changed files with 43 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,7 +17,7 @@
padding: 0.5rem; padding: 0.5rem;
width: 100%; width: 100%;
transition: background-color 0.3s var(--bezier-one); transition: background-color 0.3s var(--bezier-one);
border-radius: 4px; border-radius: 6px;
display: flex; display: flex;
gap: 1rem; gap: 1rem;
align-items: center; align-items: center;

8
src/lib/components/atoms/Search.svelte
View File

@ -59,10 +59,6 @@
position: relative; position: relative;
display: flex; display: flex;
padding: 1rem 3rem; padding: 1rem 3rem;
border-radius: 12px;
border: 1px solid var(--grey-three);
background-color: transparent;
color: var(--grey-five);
width: 100%; width: 100%;
} }
input::placeholder { input::placeholder {
@ -70,10 +66,6 @@
font-size: 0.9rem; font-size: 0.9rem;
} }
input:focus {
outline: 1px solid var(--accent-color);
}
@media (max-width: 768px) { @media (max-width: 768px) {
#search { #search {
left: 26px; left: 26px;

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

@ -46,14 +46,10 @@
<h4>Socials</h4> <h4>Socials</h4>
<a href="https://github.com/revanced" target="_blank" rel="noreferrer"><h5>GitHub</h5></a> <a href="https://github.com/revanced" target="_blank" rel="noreferrer"><h5>GitHub</h5></a>
<a href="https://revanced.app/discord" target="_blank" rel="noreferrer"><h5>Discord</h5></a> <a href="https://revanced.app/discord" target="_blank" rel="noreferrer"><h5>Discord</h5></a>
<a href="https://reddit.com/r/revancedapp" target="_blank" rel="noreferrer"><h5>Reddit</h5></a <a href="https://reddit.com/r/revancedapp" target="_blank" rel="noreferrer"><h5>Reddit</h5></a>
>
<a href="https://t.me/app_revanced" target="_blank" rel="noreferrer"><h5>Telegram</h5></a> <a href="https://t.me/app_revanced" target="_blank" rel="noreferrer"><h5>Telegram</h5></a>
<a href="https://twitter.com/revancedapp" target="_blank" rel="noreferrer"><h5>Twitter</h5></a <a href="https://twitter.com/revancedapp" target="_blank" rel="noreferrer"><h5>Twitter</h5></a>
> <a href="https://www.youtube.com/c/ReVanced" target="_blank" rel="noreferrer"><h5>YouTube</h5></a>
<a href="https://www.youtube.com/c/ReVanced" target="_blank" rel="noreferrer"
><h5>YouTube</h5></a
>
</div> </div>
</section> </section>
</footer> </footer>
@ -65,7 +61,7 @@
display: flex; display: flex;
gap: 2rem; gap: 2rem;
justify-content: space-between; justify-content: space-between;
width: min(85%, 90rem); width: min(90%, 80rem);
} }
h2 { h2 {

13
src/lib/components/molecules/PatchCell.svelte
View File

@ -25,7 +25,7 @@
.replace(/Microg/g, 'MicroG') .replace(/Microg/g, 'MicroG')
.replace(/Hdr/g, 'HDR') .replace(/Hdr/g, 'HDR')
.replace(/Sponsorblock/g, 'SponsorBlock') .replace(/Sponsorblock/g, 'SponsorBlock')
.replace(/Tiktok/g, 'TikTok') .replace(/ktok/g, 'kTok')
.replace(/Vr/g, 'VR')} .replace(/Vr/g, 'VR')}
</h3> </h3>
</div> </div>
@ -47,11 +47,14 @@
<h6 class="boxed">📦 {pkg.name}</h6> <h6 class="boxed">📦 {pkg.name}</h6>
</a> </a>
{/each} {/each}
<!-- should i hardcode this to get the version of the first package? idk you cant stop me --> <!-- should i hardcode this to get the version of the first package? idk you cant stop me -->
{#if patch.compatiblePackages[0].versions.length} {#if patch.compatiblePackages.length}
<h6 class="boxed"> {#if patch.compatiblePackages[0].versions.length}
🎯 {patch.compatiblePackages[0].versions.slice(-1)} <h6 class="boxed">
</h6> 🎯 {patch.compatiblePackages[0].versions.slice(-1)}
</h6>
{/if}
{/if} {/if}
<h6 class="boxed">🧩 {patch.version}</h6> <h6 class="boxed">🧩 {patch.version}</h6>

1
src/lib/components/molecules/SocialHost.svelte
View File

@ -12,7 +12,6 @@
<style> <style>
.social-host { .social-host {
width: min(87%, 100rem); width: min(87%, 100rem);
/* same as margin-inline: auto on .wrapper */
padding: 0 max(6.5%, calc(50vw - 50rem)); padding: 0 max(6.5%, calc(50vw - 50rem));
align-items: center; align-items: center;
user-select: none; user-select: none;

27
src/lib/components/organisms/Home.svelte → src/lib/components/organisms/Hero.svelte
View File

@ -4,17 +4,19 @@
<section class="hero"> <section class="hero">
<div class="hero-text"> <div class="hero-text">
<h5>ANDROID APP PATCHER</h5>
<h1> <h1>
<span>Re</span>Vanced Continuing the <br />legacy of <span>Vanced.</span>
</h1> </h1>
<h4> <h4>
ReVanced is an extensible framework for building <br /> Android applications. Customize your mobile experience through ReVanced <br /> by applying patches to your applications.
</h4> </h4>
<div class="hero-buttons"> <div class="hero-buttons">
<Button icon="download" href="download" kind="primary">Download Manager</Button> <Button icon="download" kind="primary" capitalize={true} href="download"
<Button icon="docs" href="patches">View patches</Button> >Download Manager</Button
>
<Button icon="docs" href="patches" capitalize={true}>View patches</Button>
</div> </div>
</div> </div>
</section> </section>
@ -22,13 +24,14 @@
<style> <style>
h1 { h1 {
color: var(--white); color: var(--white);
line-height: 1em;
font-size: 5rem;
font-weight: 700; font-weight: 700;
margin-bottom: 1.5rem;
} }
h5 {
margin-bottom: 0.5rem;
}
h4 { h4 {
margin-top: 1rem;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
@ -53,11 +56,10 @@
@media (max-width: 768px) { @media (max-width: 768px) {
.hero { .hero {
padding-bottom: 0; padding-bottom: 0;
text-align: center;
} }
h1 { h1 {
font-size: clamp(3rem, 10vw, 4.5rem); font-size: clamp(3rem, 10vw, 3rem);
} }
h4 { h4 {
@ -67,16 +69,11 @@
br { br {
content: ' '; content: ' ';
} }
.hero-buttons {
justify-content: center;
}
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
.hero-buttons { .hero-buttons {
flex-direction: column; flex-direction: column;
align-items: center;
} }
} }
</style> </style>

2
src/routes/+page.svelte
View File

@ -1,6 +1,6 @@
<script> <script>
import HeroImage from '$lib/components/atoms/HeroImage.svelte'; import HeroImage from '$lib/components/atoms/HeroImage.svelte';
import Home from '$lib/components/organisms/Home.svelte'; import Home from '$lib/components/organisms/Hero.svelte';
import SocialHost from '$lib/components/molecules/SocialHost.svelte'; import SocialHost from '$lib/components/molecules/SocialHost.svelte';
import Wave from '$lib/components/atoms/Wave.svelte'; import Wave from '$lib/components/atoms/Wave.svelte';
</script> </script>

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

@ -55,7 +55,6 @@
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
gap: 0.5rem;
margin-bottom: 2rem; margin-bottom: 2rem;
background-color: var(--accent-color); background-color: var(--accent-color);
padding: 2.4rem; padding: 2.4rem;
@ -69,7 +68,7 @@
a::after { a::after {
padding-left: 5px; padding-left: 5px;
content: '->'; content: '→';
position: absolute; position: absolute;
transition: all 0.3s var(--bezier-one); transition: all 0.3s var(--bezier-one);
} }

24
src/routes/download/+page.svelte
View File

@ -10,10 +10,13 @@
$: manager = $tools['revanced/revanced-manager']; $: manager = $tools['revanced/revanced-manager'];
</script> </script>
<div class="wrapper"> <div class="wrapper center">
<h1>ReVanced <span>Manager</span></h1> <h1>ReVanced <span>Manager</span></h1>
<h4>Patch your favourite apps, right on your device.</h4> <h4>Patch your favourite apps, right on your device.</h4>
<Button kind="primary" icon="download" target="_blank" href={manager.assets[0].url}>{manager.version}</Button> <div class="buttons">
<Button kind="primary" icon="download" href={manager.assets[0].url} target="_blank">{manager.version}</Button>
<Button href="https://github.com/revanced/revanced-manager" target="_blank">View Source</Button>
</div>
<div class="screenshot"> <div class="screenshot">
<Picture data={manager_screenshot} alt="Manager Screenshot" /> <Picture data={manager_screenshot} alt="Manager Screenshot" />
</div> </div>
@ -22,7 +25,7 @@
<Footer /> <Footer />
<style> <style>
div { .center {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -31,7 +34,7 @@
h1 { h1 {
text-align: center; text-align: center;
color: var(--white); color: var(--white);
margin-bottom: 0.5rem;
} }
h4 { h4 {
@ -44,13 +47,18 @@
margin-bottom: 2.5rem; margin-bottom: 2.5rem;
height: 50rem; height: 50rem;
width: auto; width: auto;
padding: 0.75rem 0.75rem; padding: 0.5rem 0.5rem;
border-radius: 2.5rem; border-radius: 2rem;
background-color: var(--grey-two); background-color: var(--grey-six);
box-shadow:0 50px 100px -20px rgba(16, 22, 31, 0.25), 0 30px 60px -30px rgba(18, 19, 22, 0.767), inset 0 -2px 20px 0 rgba(20, 21, 23, 0.598);
user-select: none; user-select: none;
} }
.buttons {
display: flex;
gap: 1rem;
}
span { span {
color: var(--accent-color) color: var(--accent-color)
} }