ReVanced/revanced-website
1
0
Fork 0
mirror of https://github.com/revanced/revanced-website.git synced 2025-05-10 03:14:28 +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>
<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>
<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" />
<!-- OpenGraph -->
<meta property="og:type" content="website" />
<meta property="og:image" content="/logo.png" />
<!-- OpenGraph -->
<meta property="og:type" content="website" />
<meta property="og:image" content="/logo.png" />
<!-- Twitter -->
<meta name="twitter:image" itemprop="image" content="/logo.png" />
<meta name="twitter:card" content="summary" />
<!-- Twitter -->
<meta name="twitter:image" itemprop="image" content="/logo.png" />
<meta name="twitter:card" content="summary" />
%sveltekit.head%
</head>
%sveltekit.head%
</head>
<body>
<div>%sveltekit.body%</div>
</body>
</html>
<body>
%sveltekit.body%
</body>
</html>

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

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

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

@ -60,6 +60,7 @@
}
.hero {
padding-top: 10vh;
display: flex;
flex-direction: column;
gap: 1rem;
@ -69,27 +70,9 @@
color: var(--primary);
}
@media screen and (max-width: 1700px) {
@media screen and (max-width: 1100px) {
.hero {
height: 80vh;
}
}
@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;
padding-top: initial;
}
}
@ -100,11 +83,34 @@
}
.social-buttons {
left: 50%;
transform: translateX(-50%);
justify-content: center;
width: 100%;
}
.hero {
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>

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

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

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

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

27
src/routes/+layout.svelte
View File

@ -25,6 +25,7 @@
import { events as themeEvents } from '$util/themeEvents';
import { RV_GOOGLE_TAG_MANAGER_ID } from '$env/static/public';
import FooterHost from '$layout/Footer/FooterHost.svelte';
const queryClient = new QueryClient({
defaultOptions: {
@ -108,21 +109,19 @@
</noscript>
{/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}>
<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">
{#if $show_loading_animation}
<Spinner />
@ -130,5 +129,5 @@
<slot />
{/if}
</div>
<!-- <Footer> -->
<FooterHost />
</QueryClientProvider>

15
src/routes/+page.svelte
View File

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

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

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

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

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

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

@ -12,7 +12,6 @@
import Head from '$lib/components/Head.svelte';
import Query from '$lib/components/Query.svelte';
import Button from '$lib/components/Button.svelte';
import Footer from '$layout/Footer/FooterHost.svelte';
import Picture from '$lib/components/Picture.svelte';
import Dialogue from '$lib/components/Dialogue.svelte';
import { onMount } from 'svelte';
@ -85,7 +84,7 @@
</svelte:fragment>
</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>
<p>Patch your favourite apps, right on your device.</p>
<div class="buttons">
@ -112,9 +111,7 @@
<div class="screenshot">
<Picture data={manager_screenshot} alt="Manager Screenshot" />
</div>
</div>
<Footer />
</main>
<style>
.center {

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

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