Skip to content

Commit 4cc473b

Browse files
oSumAtrIXoSumAtrIX
committed
fix: Improve semantics and fine tune responsive layout parameters
1 parent 305d9ba commit 4cc473b

File tree

11 files changed

+74
-82
lines changed

11 files changed

+74
-82
lines changed

‎src/app.html‎

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,27 @@
11
<!doctype html>
22
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="icon" href="/favicon.ico" />
6+
<meta
7+
name="robots"
8+
content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1"
9+
/>
10+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
11+
<meta name="viewport" content="width=device-width, initial-scale=1" />
312

4-
<head>
5-
<meta charset="utf-8" />
6-
<link rel="icon" href="/favicon.ico" />
7-
<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />
8-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
9-
<meta name="viewport" content="width=device-width, initial-scale=1" />
13+
<!-- OpenGraph -->
14+
<meta property="og:type" content="website" />
15+
<meta property="og:image" content="/logo.png" />
1016

11-
<!-- OpenGraph -->
12-
<meta property="og:type" content="website" />
13-
<meta property="og:image" content="/logo.png" />
17+
<!-- Twitter -->
18+
<meta name="twitter:image" itemprop="image" content="/logo.png" />
19+
<meta name="twitter:card" content="summary" />
1420

15-
<!-- Twitter -->
16-
<meta name="twitter:image" itemprop="image" content="/logo.png" />
17-
<meta name="twitter:card" content="summary" />
21+
%sveltekit.head%
22+
</head>
1823

19-
%sveltekit.head%
20-
</head>
21-
22-
<body>
23-
<div>%sveltekit.body%</div>
24-
</body>
25-
26-
</html>
24+
<body>
25+
%sveltekit.body%
26+
</body>
27+
</html>

‎src/layout/Hero/HeroImage.svelte‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,10 @@
1414
}
1515
1616
.hero-img {
17-
height: 70vh;
17+
height: max(100vh, 600px);
1818
padding: 0.5rem 0.5rem;
1919
border-radius: 1.75rem;
2020
background-color: var(--surface-seven);
2121
user-select: none;
2222
}
23-
@media screen and (max-width: 1700px) {
24-
.hero-img {
25-
height: 100vh;
26-
right: 6rem;
27-
}
28-
}
2923
</style>

‎src/layout/Hero/HeroSection.svelte‎

Lines changed: 26 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@
6060
}
6161
6262
.hero {
63+
padding-top: 10vh;
6364
display: flex;
6465
flex-direction: column;
6566
gap: 1rem;
@@ -69,27 +70,9 @@
6970
color: var(--primary);
7071
}
7172
72-
@media screen and (max-width: 1700px) {
73+
@media screen and (max-width: 1100px) {
7374
.hero {
74-
height: 80vh;
75-
}
76-
}
77-
78-
@media screen and (max-height: 820px) {
79-
.social-buttons {
80-
bottom: initial;
81-
left: initial;
82-
position: initial;
83-
width: initial;
84-
opacity: 100% !important;
85-
}
86-
}
87-
@media screen and (max-width: 1100px) or (min-height: 820px) {
88-
.social-buttons {
89-
transform: translateX(-50%);
90-
width: 100%;
91-
position: absolute;
92-
justify-content: center;
75+
padding-top: initial;
9376
}
9477
}
9578
@@ -100,11 +83,34 @@
10083
}
10184
10285
.social-buttons {
86+
left: 50%;
87+
transform: translateX(-50%);
10388
justify-content: center;
89+
width: 100%;
10490
}
10591
10692
.hero {
10793
height: initial;
10894
}
10995
}
96+
97+
@media screen and (max-width: 1100px) or (min-height: 780px) {
98+
.social-buttons {
99+
transform: translateX(-50%);
100+
width: 90%;
101+
position: absolute;
102+
left: initial;
103+
transform: initial;
104+
}
105+
}
106+
107+
@media screen and (max-height: 780px) {
108+
.social-buttons {
109+
transform: initial;
110+
left: initial;
111+
position: initial;
112+
width: initial;
113+
opacity: 100% !important;
114+
}
115+
}
110116
</style>

‎src/layout/Navbar/NavHost.svelte‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -203,8 +203,6 @@
203203
204204
#nav-container {
205205
z-index: 5;
206-
top: 0;
207-
position: sticky;
208206
width: 100%;
209207
}
210208

‎src/lib/components/Wave.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
height: 40vh;
2323
}
2424
25-
@media screen and (max-height: 820px) {
25+
@media screen and (max-height: 780px) {
2626
svg {
2727
opacity: 0 !important;
2828
}

‎src/routes/+layout.svelte‎

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
import { events as themeEvents } from '$util/themeEvents';
2626
2727
import { RV_GOOGLE_TAG_MANAGER_ID } from '$env/static/public';
28+
import FooterHost from '$layout/Footer/FooterHost.svelte';
2829
2930
const queryClient = new QueryClient({
3031
defaultOptions: {
@@ -108,27 +109,25 @@
108109
</noscript>
109110
{/if}
110111

112+
<Dialogue bind:modalOpen={showConsentModal} notDismissible>
113+
<svelte:fragment slot="title">It's your choice</svelte:fragment>
114+
<svelte:fragment slot="description">
115+
We use analytics to improve your experience on this site. By clicking "Allow", you allow us to
116+
collect anonymous data about your visit.
117+
</svelte:fragment>
118+
<svelte:fragment slot="buttons">
119+
<Button type="text" on:click={() => rememberChoice(false)}>Deny</Button>
120+
<Button type="filled" on:click={() => rememberChoice(true)}>Allow</Button>
121+
</svelte:fragment>
122+
</Dialogue>
111123
<QueryClientProvider client={queryClient}>
112124
<NavHost />
113-
114-
<Dialogue bind:modalOpen={showConsentModal} notDismissible>
115-
<svelte:fragment slot="title">It's your choice</svelte:fragment>
116-
<svelte:fragment slot="description">
117-
We use analytics to improve your experience on this site. By clicking "Allow", you allow us to
118-
collect anonymous data about your visit.
119-
</svelte:fragment>
120-
<svelte:fragment slot="buttons">
121-
<Button type="text" on:click={() => rememberChoice(false)}>Deny</Button>
122-
<Button type="filled" on:click={() => rememberChoice(true)}>Allow</Button>
123-
</svelte:fragment>
124-
</Dialogue>
125-
126125
<div id="skiptab">
127126
{#if $show_loading_animation}
128127
<Spinner />
129128
{:else}
130129
<slot />
131130
{/if}
132131
</div>
133-
<!-- <Footer> -->
132+
<FooterHost />
134133
</QueryClientProvider>

‎src/routes/+page.svelte‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<script>
22
import HeroImage from '$layout/Hero/HeroImage.svelte';
33
import Home from '$layout/Hero/HeroSection.svelte';
4-
import Footer from '$layout/Footer/FooterHost.svelte';
54
import Head from '$lib/components/Head.svelte';
65
import Wave from '$lib/components/Wave.svelte';
76
import { onMount } from 'svelte';
@@ -145,19 +144,19 @@
145144
</div>
146145
</main>
147146
<Wave visibility={bottomVisibility} />
148-
<Footer />
149147

150148
<style lang="scss">
151149
.content {
152150
display: flex;
153-
align-items: center;
151+
align-items: flex-start;
154152
justify-content: space-evenly;
155-
width: min(87%, 100rem);
153+
width: min(87%, 80rem);
154+
gap: 1rem;
156155
}
157156
main {
158157
overflow: hidden;
159158
padding: 5rem 0;
160-
height: max(100vh, 600px);
159+
min-height: max(100vh, 600px);
161160
display: flex;
162161
flex-direction: column;
163162
align-items: center;
@@ -172,4 +171,10 @@
172171
display: none;
173172
}
174173
}
174+
175+
@media screen and (max-width: 335px) {
176+
main {
177+
padding: 2rem 0 !important;
178+
}
179+
}
175180
</style>

‎src/routes/contributors/+page.svelte‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
import { quintOut } from 'svelte/easing';
44
55
import ContributorHost from './ContributorSection.svelte';
6-
import Footer from '$layout/Footer/FooterHost.svelte';
76
import Head from '$lib/components/Head.svelte';
87
import Query from '$lib/components/Query.svelte';
98
@@ -62,8 +61,6 @@
6261
</div>
6362
</main>
6463

65-
<Footer />
66-
6764
<style>
6865
.repos {
6966
display: flex;

‎src/routes/donate/+page.svelte‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
import { createQuery } from '@tanstack/svelte-query';
77
88
import Head from '$lib/components/Head.svelte';
9-
import Footer from '$layout/Footer/FooterHost.svelte';
109
import Button from '$lib/components/Button.svelte';
1110
import Snackbar from '$lib/components/Snackbar.svelte';
1211
import Query from '$lib/components/Query.svelte';
@@ -205,8 +204,6 @@
205204
<svelte:fragment slot="text">Address copied to clipboard</svelte:fragment>
206205
</Snackbar>
207206

208-
<Footer />
209-
210207
<style lang="scss">
211208
main {
212209
display: flex;

‎src/routes/download/+page.svelte‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@
1212
import Head from '$lib/components/Head.svelte';
1313
import Query from '$lib/components/Query.svelte';
1414
import Button from '$lib/components/Button.svelte';
15-
import Footer from '$layout/Footer/FooterHost.svelte';
1615
import Picture from '$lib/components/Picture.svelte';
1716
import Dialogue from '$lib/components/Dialogue.svelte';
1817
import { onMount } from 'svelte';
@@ -85,7 +84,7 @@
8584
</svelte:fragment>
8685
</Dialogue>
8786

88-
<div class="wrapper center" in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
87+
<main class="wrapper center" in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
8988
<h2>ReVanced <span>Manager</span></h2>
9089
<p>Patch your favourite apps, right on your device.</p>
9190
<div class="buttons">
@@ -112,9 +111,7 @@
112111
<div class="screenshot">
113112
<Picture data={manager_screenshot} alt="Manager Screenshot" />
114113
</div>
115-
</div>
116-
117-
<Footer />
114+
</main>
118115

119116
<style>
120117
.center {

0 commit comments

Comments
 (0)