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

fix: Fix index page styling and overflows

Browse Source
This commit is contained in:
oSumAtrIX
2025-05-06 12:43:40 +02:00
parent b3883d2460
commit 13cda4b59f
9 changed files with 150 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,9 +10,6 @@
import { RV_DMCA_GUID } from '$env/static/public';
import { onMount } from 'svelte';
export let showDivider = true;
const aboutQuery = createQuery(['about'], queries.about);
let location: string;
@@ -23,8 +20,7 @@
});
</script>
<!-- squiggly divider line -->
{#if showDivider}
<footer in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
<svg
aria-hidden="true"
width="100%"
@@ -41,71 +37,74 @@
</pattern>
<rect width="100%" height="100%" fill="url(#a)" />
</svg>
{/if}
<footer in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
<div class="footer-top">
<section class="main-content">
<img src="/logo.svg" class="logo-image" alt="ReVanced Logo" />
<Query query={aboutQuery} let:data>
{#if data}
<div>
<p>
{data.about.about}
</p>
</div>
{/if}
</Query>
</section>
<div class="footer-wrapper">
<div class="footer-top">
<section class="main-content">
<img src="/logo.svg" class="logo-image" alt="ReVanced Logo" />
<Query query={aboutQuery} let:data>
{#if data}
<div>
<p>
{data.about.about}
</p>
</div>
{/if}
</Query>
</section>
<section class="links-container">
<FooterSection title="Pages">
<li><a href="/">Home</a></li>
<li><a href="/download">Download</a></li>
<li><a href="/patches">Patches</a></li>
<li><a href="/contributors">Contributors</a></li>
<li><a href="/donate">Donate</a></li>
</FooterSection>
<section class="links-container">
<FooterSection title="Pages">
<li><a href="/">Home</a></li>
<li><a href="/download">Download</a></li>
<li><a href="/patches">Patches</a></li>
<li><a href="/contributors">Contributors</a></li>
<li><a href="/donate">Donate</a></li>
</FooterSection>
<Query query={aboutQuery} let:data>
{#if data}
<FooterSection title="Socials">
{#each data.about.socials as { name, url }}
<li>
<a href={url} target="_blank" rel="noreferrer">{name}</a>
</li>
{/each}
</FooterSection>
{/if}
</Query>
</section>
</div>
<div class="footer-bottom">
<div id="logo-name"><span>Re</span>Vanced</div>
<a href="/donate"><div>Donate</div></a>
<Query query={aboutQuery} let:data>
{#if data}
<FooterSection title="Socials">
{#each data.about.socials as { name, url }}
<li>
<a href={url} target="_blank" rel="noreferrer">{name}</a>
</li>
{/each}
</FooterSection>
<a href="mailto:{data.about.contact.email}"><div>Email</div></a>
{/if}
</Query>
</section>
</div>
<div class="footer-bottom">
<div id="logo-name"><span>Re</span>Vanced</div>
<a href="/donate"><div>Donate</div></a>
<Query query={aboutQuery} let:data>
{#if data}
<a href="mailto:{data.about.contact.email}"><div>Email</div></a>
{/if}
</Query>
<!-- DMCA Protection Badge -->
<a
href="//www.dmca.com/Protection/Status.aspx?ID={RV_DMCA_GUID}&refurl={location}"
title="DMCA.com Protection Status"
class="dmca-badge"
>
<img
src="https://images.dmca.com/Badges/dmca-badge-w150-5x1-08.png?ID={RV_DMCA_GUID}"
alt="DMCA.com Protection Status"
/></a
>
<!-- DMCA Protection Badge -->
<a
href="//www.dmca.com/Protection/Status.aspx?ID={RV_DMCA_GUID}&refurl={location}"
title="DMCA.com Protection Status"
class="dmca-badge"
>
<img
src="https://images.dmca.com/Badges/dmca-badge-w150-5x1-08.png?ID={RV_DMCA_GUID}"
alt="DMCA.com Protection Status"
/></a
>
</div>
</div>
</footer>
<style>
footer {
margin: 4rem 0 5rem 0;
margin-inline: auto;
padding-bottom: 1rem;
width: min(87%, 80rem);
background-color: var(--background-one);
}
.footer-wrapper {
max-width: min(87%, 100rem);
padding: 5rem 0rem;
margin: 0 auto;
}
.footer-top {

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

@@ -14,12 +14,7 @@
}
.hero-img {
overflow: hidden;
height: 70vh;
max-height: 70rem;
z-index: -1;
width: auto;
float: right;
padding: 0.5rem 0.5rem;
border-radius: 1.75rem;
background-color: var(--surface-seven);
@@ -27,9 +22,7 @@
}
@media (max-width: 1700px) {
.hero-img {
position: absolute;
height: 100vh;
top: 115px;
right: 6rem;
}
}

70
src/layout/Hero/HeroSection.svelte
View File

@@ -1,60 +1,88 @@
<script>
import Button from '$lib/components/Button.svelte';
import { queries } from '$data/api';
import { createQuery } from '@tanstack/svelte-query';
import Query from '$lib/components/Query.svelte';
import TrayArrowDown from 'svelte-material-icons/TrayArrowDown.svelte';
import FileDocumentOutline from 'svelte-material-icons/FileDocumentOutline.svelte';
import Button from '$lib/components/Button.svelte';
import SocialButton from './SocialButton.svelte';
const aboutQuery = createQuery(['about'], queries.about);
export let socialsVisibility = true;
</script>
<section class="hero">
<div class="hero-text">
<h1>Continuing the <br />legacy of <span>Vanced.</span></h1>
<p>
Customize your mobile experience through ReVanced <br /> by applying patches to your applications.
</p>
<div class="hero-buttons">
<h1>Continuing the <br />legacy of <span>Vanced.</span></h1>
<p>
Customize your mobile experience through ReVanced <br /> by applying patches to your applications.
</p>
<div class="hero-buttons-container">
<div class="hero-buttons internal-buttons">
<Button type="filled" icon={TrayArrowDown} href="download">Download</Button>
<Button type="tonal" icon={FileDocumentOutline} href="patches">View patches</Button>
</div>
<div class="hero-buttons social-buttons" style:opacity={socialsVisibility ? '100%' : '0'}>
<Query query={aboutQuery} let:data>
{#if data}
{#each data.about.socials.filter((s) => s.name != 'Website') as social}
<SocialButton {social} />
{/each}
{/if}
</Query>
</div>
</div>
</section>
<style>
h1 {
color: var(--text-one);
margin-bottom: 1.5rem;
}
p {
margin-bottom: 2rem;
.hero-buttons-container {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.hero-text {
align-items: center;
.social-buttons {
justify-content: center;
position: absolute;
bottom: 1rem;
z-index: 1;
transition: opacity 0.1s var(--bezier-one);
}
.hero-buttons {
flex-wrap: wrap;
display: flex;
user-select: none;
gap: 1rem;
}
.hero {
display: flex;
flex-direction: column;
gap: 1rem;
}
span {
color: var(--primary);
}
@media (max-width: 767px) {
@media (max-width: 1700px) {
.hero {
padding-bottom: 0;
}
br {
content: ' ';
height: 80vh;
}
}
@media screen and (max-width: 450px) {
.hero-buttons {
.internal-buttons {
flex-direction: column;
gap: 1rem;
}
.hero {
height: initial;
}
}
</style>

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

@@ -4,13 +4,11 @@
</script>
<a href={social.url} rel="noreferrer" target="_blank">
<div>
<img src="socials/{social.name.toLowerCase()}.svg" alt={social.name} />
</div>
<img src="socials/{social.name.toLowerCase()}.svg" alt={social.name} />
</a>
<style>
div {
a {
border: 0;
width: 60px;
height: 60px;
@@ -23,7 +21,7 @@
user-select: none;
}
div {
a {
display: flex;
justify-content: center;
}
@@ -33,11 +31,11 @@
width: 30px;
}
div:hover {
a:hover {
transform: translateY(-5%);
}
div:hover img {
a:hover img {
filter: brightness(1.2);
}
</style>

38
src/layout/Hero/SocialHost.svelte
View File

@@ -1,38 +0,0 @@
<script>
import SocialButton from './SocialButton.svelte';
import { queries } from '$data/api';
import { createQuery } from '@tanstack/svelte-query';
import Query from '$lib/components/Query.svelte';
const aboutQuery = createQuery(['about'], queries.about);
</script>
<div class="social-host">
<Query query={aboutQuery} let:data>
{#if data}
{#each data.about.socials.filter((s) => s.name != 'Website') as social}
<SocialButton {social} />
{/each}
{/if}
</Query>
</div>
<style>
.social-host {
width: min(87%, 100rem);
padding: 0 max(6.5%, calc(50vw - 50rem));
align-items: center;
user-select: none;
display: flex;
gap: 1rem;
}
@media screen and (max-width: 767px) {
.social-host {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
}
</style>

1
src/layout/Navbar/NavHost.svelte
View File

@@ -204,7 +204,6 @@
#nav-container {
top: 0;
position: sticky;
z-index: 666;
width: 100%;
}