ReVanced/revanced-website
1
0
Fork 0
mirror of https://github.com/revanced/revanced-website.git synced 2025-05-11 20:04:25 +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

41
src/app.html
View File

@ -1,26 +1,27 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<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 name="viewport" content="width=device-width, initial-scale=1" />
<head> <!-- OpenGraph -->
<meta charset="utf-8" /> <meta property="og:type" content="website" />
<link rel="icon" href="/favicon.ico" /> <meta property="og:image" content="/logo.png" />
<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 name="viewport" content="width=device-width, initial-scale=1" />
<!-- OpenGraph --> <!-- Twitter -->
<meta property="og:type" content="website" /> <meta name="twitter:image" itemprop="image" content="/logo.png" />
<meta property="og:image" content="/logo.png" /> <meta name="twitter:card" content="summary" />
<!-- Twitter --> %sveltekit.head%
<meta name="twitter:image" itemprop="image" content="/logo.png" /> </head>
<meta name="twitter:card" content="summary" />
%sveltekit.head% <body>
</head> %sveltekit.body%
</body>
<body> </html>
<div>%sveltekit.body%</div>
</body>
</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;
} }

27
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,21 +109,19 @@
</noscript> </noscript>
{/if} {/if}
<Dialogue bind:modalOpen={showConsentModal} notDismissible>
<svelte:fragment slot="title">It's your choice</svelte:fragment>
<svelte:fragment slot="description">
We use analytics to improve your experience on this site. By clicking "Allow", you allow us to
collect anonymous data about your visit.
</svelte:fragment>
<svelte:fragment slot="buttons">
<Button type="text" on:click={() => rememberChoice(false)}>Deny</Button>
<Button type="filled" on:click={() => rememberChoice(true)}>Allow</Button>
</svelte:fragment>
</Dialogue>
<QueryClientProvider client={queryClient}> <QueryClientProvider client={queryClient}>
<NavHost /> <NavHost />
<Dialogue bind:modalOpen={showConsentModal} notDismissible>
<svelte:fragment slot="title">It's your choice</svelte:fragment>
<svelte:fragment slot="description">
We use analytics to improve your experience on this site. By clicking "Allow", you allow us to
collect anonymous data about your visit.
</svelte:fragment>
<svelte:fragment slot="buttons">
<Button type="text" on:click={() => rememberChoice(false)}>Deny</Button>
<Button type="filled" on:click={() => rememberChoice(true)}>Allow</Button>
</svelte:fragment>
</Dialogue>
<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 {