ReVanced/revanced-website
1
0
Fork 0
mirror of https://github.com/revanced/revanced-website.git synced 2025-05-13 12:27:06 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: Improve semantics and fine tune responsive layout parameters

Browse Source
This commit is contained in:
oSumAtrIX 2025-05-06 20:00:27 +02:00
parent 305d9bad06
commit 4cc473b43e
No known key found for this signature in database
GPG Key ID: A9B3094ACDB604B4
11 changed files with 74 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/app.html
View File

@ -1,10 +1,12 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head>
<head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" /> <meta
name="robots"
content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1"
/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
@ -17,10 +19,9 @@
<meta name="twitter:card" content="summary" /> <meta name="twitter:card" content="summary" />
%sveltekit.head% %sveltekit.head%
</head> </head>
<body>
<div>%sveltekit.body%</div>
</body>
<body>
%sveltekit.body%
</body>
</html> </html>

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

@ -14,16 +14,10 @@
} }
.hero-img { .hero-img {
height: 70vh; height: max(100vh, 600px);
padding: 0.5rem 0.5rem; padding: 0.5rem 0.5rem;
border-radius: 1.75rem; border-radius: 1.75rem;
background-color: var(--surface-seven); background-color: var(--surface-seven);
user-select: none; user-select: none;
} }
@media screen and (max-width: 1700px) {
.hero-img {
height: 100vh;
right: 6rem;
}
}
</style> </style>

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

@ -60,6 +60,7 @@
} }
.hero { .hero {
padding-top: 10vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem; gap: 1rem;
@ -69,27 +70,9 @@
color: var(--primary); color: var(--primary);
} }
@media screen and (max-width: 1700px) { @media screen and (max-width: 1100px) {
.hero { .hero {
height: 80vh; padding-top: initial;
}
}
@media screen and (max-height: 820px) {
.social-buttons {
bottom: initial;
left: initial;
position: initial;
width: initial;
opacity: 100% !important;
}
}
@media screen and (max-width: 1100px) or (min-height: 820px) {
.social-buttons {
transform: translateX(-50%);
width: 100%;
position: absolute;
justify-content: center;
} }
} }
@ -100,11 +83,34 @@
} }
.social-buttons { .social-buttons {
left: 50%;
transform: translateX(-50%);
justify-content: center; justify-content: center;
width: 100%;
} }
.hero { .hero {
height: initial; height: initial;
} }
} }
@media screen and (max-width: 1100px) or (min-height: 780px) {
.social-buttons {
transform: translateX(-50%);
width: 90%;
position: absolute;
left: initial;
transform: initial;
}
}
@media screen and (max-height: 780px) {
.social-buttons {
transform: initial;
left: initial;
position: initial;
width: initial;
opacity: 100% !important;
}
}
</style> </style>

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

@ -203,8 +203,6 @@
#nav-container { #nav-container {
z-index: 5; z-index: 5;
top: 0;
position: sticky;
width: 100%; width: 100%;
} }

2
src/lib/components/Wave.svelte
View File

@ -22,7 +22,7 @@
height: 40vh; height: 40vh;
} }
@media screen and (max-height: 820px) { @media screen and (max-height: 780px) {
svg { svg {
opacity: 0 !important; opacity: 0 !important;
} }

13
src/routes/+layout.svelte
View File

@ -25,6 +25,7 @@
import { events as themeEvents } from '$util/themeEvents'; import { events as themeEvents } from '$util/themeEvents';
import { RV_GOOGLE_TAG_MANAGER_ID } from '$env/static/public'; import { RV_GOOGLE_TAG_MANAGER_ID } from '$env/static/public';
import FooterHost from '$layout/Footer/FooterHost.svelte';
const queryClient = new QueryClient({ const queryClient = new QueryClient({
defaultOptions: { defaultOptions: {
@ -108,10 +109,7 @@
</noscript> </noscript>
{/if} {/if}
<QueryClientProvider client={queryClient}> <Dialogue bind:modalOpen={showConsentModal} notDismissible>
<NavHost />
<Dialogue bind:modalOpen={showConsentModal} notDismissible>
<svelte:fragment slot="title">It's your choice</svelte:fragment> <svelte:fragment slot="title">It's your choice</svelte:fragment>
<svelte:fragment slot="description"> <svelte:fragment slot="description">
We use analytics to improve your experience on this site. By clicking "Allow", you allow us to We use analytics to improve your experience on this site. By clicking "Allow", you allow us to
@ -121,8 +119,9 @@
<Button type="text" on:click={() => rememberChoice(false)}>Deny</Button> <Button type="text" on:click={() => rememberChoice(false)}>Deny</Button>
<Button type="filled" on:click={() => rememberChoice(true)}>Allow</Button> <Button type="filled" on:click={() => rememberChoice(true)}>Allow</Button>
</svelte:fragment> </svelte:fragment>
</Dialogue> </Dialogue>
<QueryClientProvider client={queryClient}>
<NavHost />
<div id="skiptab"> <div id="skiptab">
{#if $show_loading_animation} {#if $show_loading_animation}
<Spinner /> <Spinner />
@ -130,5 +129,5 @@
<slot /> <slot />
{/if} {/if}
</div> </div>
<!-- <Footer> --> <FooterHost />
</QueryClientProvider> </QueryClientProvider>

15
src/routes/+page.svelte
View File

@ -1,7 +1,6 @@
<script> <script>
import HeroImage from '$layout/Hero/HeroImage.svelte'; import HeroImage from '$layout/Hero/HeroImage.svelte';
import Home from '$layout/Hero/HeroSection.svelte'; import Home from '$layout/Hero/HeroSection.svelte';
import Footer from '$layout/Footer/FooterHost.svelte';
import Head from '$lib/components/Head.svelte'; import Head from '$lib/components/Head.svelte';
import Wave from '$lib/components/Wave.svelte'; import Wave from '$lib/components/Wave.svelte';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
@ -145,19 +144,19 @@
</div> </div>
</main> </main>
<Wave visibility={bottomVisibility} /> <Wave visibility={bottomVisibility} />
<Footer />
<style lang="scss"> <style lang="scss">
.content { .content {
display: flex; display: flex;
align-items: center; align-items: flex-start;
justify-content: space-evenly; justify-content: space-evenly;
width: min(87%, 100rem); width: min(87%, 80rem);
gap: 1rem;
} }
main { main {
overflow: hidden; overflow: hidden;
padding: 5rem 0; padding: 5rem 0;
height: max(100vh, 600px); min-height: max(100vh, 600px);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -172,4 +171,10 @@
display: none; display: none;
} }
} }
@media screen and (max-width: 335px) {
main {
padding: 2rem 0 !important;
}
}
</style> </style>

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

@ -3,7 +3,6 @@
import { quintOut } from 'svelte/easing'; import { quintOut } from 'svelte/easing';
import ContributorHost from './ContributorSection.svelte'; import ContributorHost from './ContributorSection.svelte';
import Footer from '$layout/Footer/FooterHost.svelte';
import Head from '$lib/components/Head.svelte'; import Head from '$lib/components/Head.svelte';
import Query from '$lib/components/Query.svelte'; import Query from '$lib/components/Query.svelte';
@ -62,8 +61,6 @@
</div> </div>
</main> </main>
<Footer />
<style> <style>
.repos { .repos {
display: flex; display: flex;

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

@ -6,7 +6,6 @@
import { createQuery } from '@tanstack/svelte-query'; import { createQuery } from '@tanstack/svelte-query';
import Head from '$lib/components/Head.svelte'; import Head from '$lib/components/Head.svelte';
import Footer from '$layout/Footer/FooterHost.svelte';
import Button from '$lib/components/Button.svelte'; import Button from '$lib/components/Button.svelte';
import Snackbar from '$lib/components/Snackbar.svelte'; import Snackbar from '$lib/components/Snackbar.svelte';
import Query from '$lib/components/Query.svelte'; import Query from '$lib/components/Query.svelte';
@ -205,8 +204,6 @@
<svelte:fragment slot="text">Address copied to clipboard</svelte:fragment> <svelte:fragment slot="text">Address copied to clipboard</svelte:fragment>
</Snackbar> </Snackbar>
<Footer />
<style lang="scss"> <style lang="scss">
main { main {
display: flex; display: flex;

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

@ -12,7 +12,6 @@
import Head from '$lib/components/Head.svelte'; import Head from '$lib/components/Head.svelte';
import Query from '$lib/components/Query.svelte'; import Query from '$lib/components/Query.svelte';
import Button from '$lib/components/Button.svelte'; import Button from '$lib/components/Button.svelte';
import Footer from '$layout/Footer/FooterHost.svelte';
import Picture from '$lib/components/Picture.svelte'; import Picture from '$lib/components/Picture.svelte';
import Dialogue from '$lib/components/Dialogue.svelte'; import Dialogue from '$lib/components/Dialogue.svelte';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
@ -85,7 +84,7 @@
</svelte:fragment> </svelte:fragment>
</Dialogue> </Dialogue>
<div class="wrapper center" in:fly={{ y: 10, easing: quintOut, duration: 750 }}> <main class="wrapper center" in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
<h2>ReVanced <span>Manager</span></h2> <h2>ReVanced <span>Manager</span></h2>
<p>Patch your favourite apps, right on your device.</p> <p>Patch your favourite apps, right on your device.</p>
<div class="buttons"> <div class="buttons">
@ -112,9 +111,7 @@
<div class="screenshot"> <div class="screenshot">
<Picture data={manager_screenshot} alt="Manager Screenshot" /> <Picture data={manager_screenshot} alt="Manager Screenshot" />
</div> </div>
</div> </main>
<Footer />
<style> <style>
.center { .center {

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

@ -14,7 +14,6 @@
import PackageMenu from './PackageMenu.svelte'; import PackageMenu from './PackageMenu.svelte';
import Package from './Package.svelte'; import Package from './Package.svelte';
import PatchItem from './PatchItem.svelte'; import PatchItem from './PatchItem.svelte';
import Footer from '$layout/Footer/FooterHost.svelte';
import Search from '$lib/components/Search.svelte'; import Search from '$lib/components/Search.svelte';
import FilterChip from '$lib/components/FilterChip.svelte'; import FilterChip from '$lib/components/FilterChip.svelte';
import Dialogue from '$lib/components/Dialogue.svelte'; import Dialogue from '$lib/components/Dialogue.svelte';
@ -195,7 +194,6 @@
</div> </div>
</Query> </Query>
</main> </main>
<Footer />
<style> <style>
main { main {