Skip to content

Commit 13cda4b

Browse files
oSumAtrIXoSumAtrIX
committed
fix: Fix index page styling and overflows
1 parent b3883d2 commit 13cda4b

File tree

9 files changed

+151
-215
lines changed

9 files changed

+151
-215
lines changed

‎src/app.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ body {
7777

7878
--yellow-one: hsl(59, 100%, 72%);
7979

80-
--bezier-one: cubic-bezier(0.25, 0.46, 0.45, 0.94);
80+
--bezier-one: ease-out;
8181
--drop-shadow-one: 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12),
8282
0px 2px 4px -1px rgba(0, 0, 0, 0.2);
8383
}

‎src/layout/Footer/FooterHost.svelte

Lines changed: 60 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,6 @@
1010
1111
import { RV_DMCA_GUID } from '$env/static/public';
1212
import { onMount } from 'svelte';
13-
14-
export let showDivider = true;
15-
1613
const aboutQuery = createQuery(['about'], queries.about);
1714
1815
let location: string;
@@ -23,8 +20,7 @@
2320
});
2421
</script>
2522

26-
<!-- squiggly divider line -->
27-
{#if showDivider}
23+
<footer in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
2824
<svg
2925
aria-hidden="true"
3026
width="100%"
@@ -41,71 +37,74 @@
4137
</pattern>
4238
<rect width="100%" height="100%" fill="url(#a)" />
4339
</svg>
44-
{/if}
45-
<footer in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
46-
<div class="footer-top">
47-
<section class="main-content">
48-
<img src="/logo.svg" class="logo-image" alt="ReVanced Logo" />
40+
<div class="footer-wrapper">
41+
<div class="footer-top">
42+
<section class="main-content">
43+
<img src="/logo.svg" class="logo-image" alt="ReVanced Logo" />
44+
<Query query={aboutQuery} let:data>
45+
{#if data}
46+
<div>
47+
<p>
48+
{data.about.about}
49+
</p>
50+
</div>
51+
{/if}
52+
</Query>
53+
</section>
54+
55+
<section class="links-container">
56+
<FooterSection title="Pages">
57+
<li><a href="/">Home</a></li>
58+
<li><a href="/download">Download</a></li>
59+
<li><a href="/patches">Patches</a></li>
60+
<li><a href="/contributors">Contributors</a></li>
61+
<li><a href="/donate">Donate</a></li>
62+
</FooterSection>
63+
<Query query={aboutQuery} let:data>
64+
{#if data}
65+
<FooterSection title="Socials">
66+
{#each data.about.socials as { name, url }}
67+
<li>
68+
<a href={url} target="_blank" rel="noreferrer">{name}</a>
69+
</li>
70+
{/each}
71+
</FooterSection>
72+
{/if}
73+
</Query>
74+
</section>
75+
</div>
76+
<div class="footer-bottom">
77+
<div id="logo-name"><span>Re</span>Vanced</div>
78+
<a href="/donate"><div>Donate</div></a>
4979
<Query query={aboutQuery} let:data>
5080
{#if data}
51-
<div>
52-
<p>
53-
{data.about.about}
54-
</p>
55-
</div>
81+
<a href="mailto:{data.about.contact.email}"><div>Email</div></a>
5682
{/if}
5783
</Query>
58-
</section>
59-
60-
<section class="links-container">
61-
<FooterSection title="Pages">
62-
<li><a href="/">Home</a></li>
63-
<li><a href="/download">Download</a></li>
64-
<li><a href="/patches">Patches</a></li>
65-
<li><a href="/contributors">Contributors</a></li>
66-
<li><a href="/donate">Donate</a></li>
67-
</FooterSection>
68-
<Query query={aboutQuery} let:data>
69-
{#if data}
70-
<FooterSection title="Socials">
71-
{#each data.about.socials as { name, url }}
72-
<li>
73-
<a href={url} target="_blank" rel="noreferrer">{name}</a>
74-
</li>
75-
{/each}
76-
</FooterSection>
77-
{/if}
78-
</Query>
79-
</section>
80-
</div>
81-
<div class="footer-bottom">
82-
<div id="logo-name"><span>Re</span>Vanced</div>
83-
<a href="/donate"><div>Donate</div></a>
84-
<Query query={aboutQuery} let:data>
85-
{#if data}
86-
<a href="mailto:{data.about.contact.email}"><div>Email</div></a>
87-
{/if}
88-
</Query>
89-
<!-- DMCA Protection Badge -->
90-
<a
91-
href="//www.dmca.com/Protection/Status.aspx?ID={RV_DMCA_GUID}&refurl={location}"
92-
title="DMCA.com Protection Status"
93-
class="dmca-badge"
94-
>
95-
<img
96-
src="https://images.dmca.com/Badges/dmca-badge-w150-5x1-08.png?ID={RV_DMCA_GUID}"
97-
alt="DMCA.com Protection Status"
98-
/></a
99-
>
84+
<!-- DMCA Protection Badge -->
85+
<a
86+
href="//www.dmca.com/Protection/Status.aspx?ID={RV_DMCA_GUID}&refurl={location}"
87+
title="DMCA.com Protection Status"
88+
class="dmca-badge"
89+
>
90+
<img
91+
src="https://images.dmca.com/Badges/dmca-badge-w150-5x1-08.png?ID={RV_DMCA_GUID}"
92+
alt="DMCA.com Protection Status"
93+
/></a
94+
>
95+
</div>
10096
</div>
10197
</footer>
10298

10399
<style>
104100
footer {
105-
margin: 4rem 0 5rem 0;
106-
margin-inline: auto;
107-
padding-bottom: 1rem;
108-
width: min(87%, 80rem);
101+
background-color: var(--background-one);
102+
}
103+
104+
.footer-wrapper {
105+
max-width: min(87%, 100rem);
106+
padding: 5rem 0rem;
107+
margin: 0 auto;
109108
}
110109
111110
.footer-top {

‎src/layout/Hero/HeroImage.svelte

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,22 +14,15 @@
1414
}
1515
1616
.hero-img {
17-
overflow: hidden;
1817
height: 70vh;
19-
max-height: 70rem;
20-
z-index: -1;
21-
width: auto;
22-
float: right;
2318
padding: 0.5rem 0.5rem;
2419
border-radius: 1.75rem;
2520
background-color: var(--surface-seven);
2621
user-select: none;
2722
}
2823
@media (max-width: 1700px) {
2924
.hero-img {
30-
position: absolute;
3125
height: 100vh;
32-
top: 115px;
3326
right: 6rem;
3427
}
3528
}

‎src/layout/Hero/HeroSection.svelte

Lines changed: 49 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,88 @@
11
<script>
2-
import Button from '$lib/components/Button.svelte';
3-
2+
import { queries } from '$data/api';
3+
import { createQuery } from '@tanstack/svelte-query';
4+
import Query from '$lib/components/Query.svelte';
45
import TrayArrowDown from 'svelte-material-icons/TrayArrowDown.svelte';
56
import FileDocumentOutline from 'svelte-material-icons/FileDocumentOutline.svelte';
7+
import Button from '$lib/components/Button.svelte';
8+
import SocialButton from './SocialButton.svelte';
9+
10+
const aboutQuery = createQuery(['about'], queries.about);
11+
12+
export let socialsVisibility = true;
613
</script>
714

815
<section class="hero">
9-
<div class="hero-text">
10-
<h1>Continuing the <br />legacy of <span>Vanced.</span></h1>
11-
<p>
12-
Customize your mobile experience through ReVanced <br /> by applying patches to your applications.
13-
</p>
14-
<div class="hero-buttons">
16+
<h1>Continuing the <br />legacy of <span>Vanced.</span></h1>
17+
<p>
18+
Customize your mobile experience through ReVanced <br /> by applying patches to your applications.
19+
</p>
20+
<div class="hero-buttons-container">
21+
<div class="hero-buttons internal-buttons">
1522
<Button type="filled" icon={TrayArrowDown} href="download">Download</Button>
1623
<Button type="tonal" icon={FileDocumentOutline} href="patches">View patches</Button>
1724
</div>
25+
<div class="hero-buttons social-buttons" style:opacity={socialsVisibility ? '100%' : '0'}>
26+
<Query query={aboutQuery} let:data>
27+
{#if data}
28+
{#each data.about.socials.filter((s) => s.name != 'Website') as social}
29+
<SocialButton {social} />
30+
{/each}
31+
{/if}
32+
</Query>
33+
</div>
1834
</div>
1935
</section>
2036

2137
<style>
2238
h1 {
2339
color: var(--text-one);
24-
margin-bottom: 1.5rem;
2540
}
2641
27-
p {
28-
margin-bottom: 2rem;
42+
.hero-buttons-container {
43+
display: flex;
44+
flex-direction: column;
45+
gap: 1.5rem;
2946
}
3047
31-
.hero-text {
32-
align-items: center;
48+
.social-buttons {
49+
justify-content: center;
50+
position: absolute;
51+
bottom: 1rem;
52+
z-index: 1;
53+
transition: opacity 0.1s var(--bezier-one);
3354
}
3455
3556
.hero-buttons {
57+
flex-wrap: wrap;
3658
display: flex;
3759
user-select: none;
3860
gap: 1rem;
3961
}
4062
63+
.hero {
64+
display: flex;
65+
flex-direction: column;
66+
gap: 1rem;
67+
}
68+
4169
span {
4270
color: var(--primary);
4371
}
44-
45-
@media (max-width: 767px) {
72+
@media (max-width: 1700px) {
4673
.hero {
47-
padding-bottom: 0;
48-
}
49-
50-
br {
51-
content: ' ';
74+
height: 80vh;
5275
}
5376
}
5477
5578
@media screen and (max-width: 450px) {
56-
.hero-buttons {
79+
.internal-buttons {
5780
flex-direction: column;
81+
gap: 1rem;
82+
}
83+
84+
.hero {
85+
height: initial;
5886
}
5987
}
6088
</style>

‎src/layout/Hero/SocialButton.svelte

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,11 @@
44
</script>
55

66
<a href={social.url} rel="noreferrer" target="_blank">
7-
<div>
8-
<img src="socials/{social.name.toLowerCase()}.svg" alt={social.name} />
9-
</div>
7+
<img src="socials/{social.name.toLowerCase()}.svg" alt={social.name} />
108
</a>
119

1210
<style>
13-
div {
11+
a {
1412
border: 0;
1513
width: 60px;
1614
height: 60px;
@@ -23,7 +21,7 @@
2321
user-select: none;
2422
}
2523
26-
div {
24+
a {
2725
display: flex;
2826
justify-content: center;
2927
}
@@ -33,11 +31,11 @@
3331
width: 30px;
3432
}
3533
36-
div:hover {
34+
a:hover {
3735
transform: translateY(-5%);
3836
}
3937
40-
div:hover img {
38+
a:hover img {
4139
filter: brightness(1.2);
4240
}
4341
</style>

‎src/layout/Hero/SocialHost.svelte

Lines changed: 0 additions & 38 deletions
This file was deleted.

‎src/layout/Navbar/NavHost.svelte

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -204,7 +204,6 @@
204204
#nav-container {
205205
top: 0;
206206
position: sticky;
207-
z-index: 666;
208207
width: 100%;
209208
}
210209

0 commit comments

Comments
 (0)