mirror of
https://github.com/revanced/revanced-website.git
synced 2025-05-10 11:24:27 +02:00
fix: Fix index page styling and overflows
This commit is contained in:
oSumAtrIX
parent
b3883d2460
commit
13cda4b59f
@ -77,7 +77,7 @@ body {
|
||||
|
||||
--yellow-one: hsl(59, 100%, 72%);
|
||||
|
||||
--bezier-one: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
--bezier-one: ease-out;
|
||||
--drop-shadow-one: 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12),
|
||||
0px 2px 4px -1px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
@ -10,9 +10,6 @@
|
||||
|
||||
import { RV_DMCA_GUID } from '$env/static/public';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
export let showDivider = true;
|
||||
|
||||
const aboutQuery = createQuery(['about'], queries.about);
|
||||
|
||||
let location: string;
|
||||
@ -23,8 +20,7 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- squiggly divider line -->
|
||||
{#if showDivider}
|
||||
<footer in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
width="100%"
|
||||
@ -41,8 +37,7 @@
|
||||
</pattern>
|
||||
<rect width="100%" height="100%" fill="url(#a)" />
|
||||
</svg>
|
||||
{/if}
|
||||
<footer in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
|
||||
<div class="footer-wrapper">
|
||||
<div class="footer-top">
|
||||
<section class="main-content">
|
||||
<img src="/logo.svg" class="logo-image" alt="ReVanced Logo" />
|
||||
@ -98,14 +93,18 @@
|
||||
/></a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
footer {
|
||||
margin: 4rem 0 5rem 0;
|
||||
margin-inline: auto;
|
||||
padding-bottom: 1rem;
|
||||
width: min(87%, 80rem);
|
||||
background-color: var(--background-one);
|
||||
}
|
||||
|
||||
.footer-wrapper {
|
||||
max-width: min(87%, 100rem);
|
||||
padding: 5rem 0rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.footer-top {
|
||||
|
||||
@ -14,12 +14,7 @@
|
||||
}
|
||||
|
||||
.hero-img {
|
||||
overflow: hidden;
|
||||
height: 70vh;
|
||||
max-height: 70rem;
|
||||
z-index: -1;
|
||||
width: auto;
|
||||
float: right;
|
||||
padding: 0.5rem 0.5rem;
|
||||
border-radius: 1.75rem;
|
||||
background-color: var(--surface-seven);
|
||||
@ -27,9 +22,7 @@
|
||||
}
|
||||
@media (max-width: 1700px) {
|
||||
.hero-img {
|
||||
position: absolute;
|
||||
height: 100vh;
|
||||
top: 115px;
|
||||
right: 6rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,60 +1,88 @@
|
||||
<script>
|
||||
import Button from '$lib/components/Button.svelte';
|
||||
|
||||
import { queries } from '$data/api';
|
||||
import { createQuery } from '@tanstack/svelte-query';
|
||||
import Query from '$lib/components/Query.svelte';
|
||||
import TrayArrowDown from 'svelte-material-icons/TrayArrowDown.svelte';
|
||||
import FileDocumentOutline from 'svelte-material-icons/FileDocumentOutline.svelte';
|
||||
import Button from '$lib/components/Button.svelte';
|
||||
import SocialButton from './SocialButton.svelte';
|
||||
|
||||
const aboutQuery = createQuery(['about'], queries.about);
|
||||
|
||||
export let socialsVisibility = true;
|
||||
</script>
|
||||
|
||||
<section class="hero">
|
||||
<div class="hero-text">
|
||||
<h1>Continuing the <br />legacy of <span>Vanced.</span></h1>
|
||||
<p>
|
||||
Customize your mobile experience through ReVanced <br /> by applying patches to your applications.
|
||||
</p>
|
||||
<div class="hero-buttons">
|
||||
<div class="hero-buttons-container">
|
||||
<div class="hero-buttons internal-buttons">
|
||||
<Button type="filled" icon={TrayArrowDown} href="download">Download</Button>
|
||||
<Button type="tonal" icon={FileDocumentOutline} href="patches">View patches</Button>
|
||||
</div>
|
||||
<div class="hero-buttons social-buttons" style:opacity={socialsVisibility ? '100%' : '0'}>
|
||||
<Query query={aboutQuery} let:data>
|
||||
{#if data}
|
||||
{#each data.about.socials.filter((s) => s.name != 'Website') as social}
|
||||
<SocialButton {social} />
|
||||
{/each}
|
||||
{/if}
|
||||
</Query>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
color: var(--text-one);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 2rem;
|
||||
.hero-buttons-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.hero-text {
|
||||
align-items: center;
|
||||
.social-buttons {
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
bottom: 1rem;
|
||||
z-index: 1;
|
||||
transition: opacity 0.1s var(--bezier-one);
|
||||
}
|
||||
|
||||
.hero-buttons {
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
user-select: none;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.hero {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
span {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
@media (max-width: 1700px) {
|
||||
.hero {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
br {
|
||||
content: ' ';
|
||||
height: 80vh;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 450px) {
|
||||
.hero-buttons {
|
||||
.internal-buttons {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.hero {
|
||||
height: initial;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -4,13 +4,11 @@
|
||||
</script>
|
||||
|
||||
<a href={social.url} rel="noreferrer" target="_blank">
|
||||
<div>
|
||||
<img src="socials/{social.name.toLowerCase()}.svg" alt={social.name} />
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<style>
|
||||
div {
|
||||
a {
|
||||
border: 0;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
@ -23,7 +21,7 @@
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
div {
|
||||
a {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
@ -33,11 +31,11 @@
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
div:hover {
|
||||
a:hover {
|
||||
transform: translateY(-5%);
|
||||
}
|
||||
|
||||
div:hover img {
|
||||
a:hover img {
|
||||
filter: brightness(1.2);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,38 +0,0 @@
|
||||
<script>
|
||||
import SocialButton from './SocialButton.svelte';
|
||||
import { queries } from '$data/api';
|
||||
import { createQuery } from '@tanstack/svelte-query';
|
||||
import Query from '$lib/components/Query.svelte';
|
||||
|
||||
const aboutQuery = createQuery(['about'], queries.about);
|
||||
</script>
|
||||
|
||||
<div class="social-host">
|
||||
<Query query={aboutQuery} let:data>
|
||||
{#if data}
|
||||
{#each data.about.socials.filter((s) => s.name != 'Website') as social}
|
||||
<SocialButton {social} />
|
||||
{/each}
|
||||
{/if}
|
||||
</Query>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.social-host {
|
||||
width: min(87%, 100rem);
|
||||
padding: 0 max(6.5%, calc(50vw - 50rem));
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.social-host {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -204,7 +204,6 @@
|
||||
#nav-container {
|
||||
top: 0;
|
||||
position: sticky;
|
||||
z-index: 666;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
@ -1,27 +1,29 @@
|
||||
<script>
|
||||
export let bottom = 0;
|
||||
export let visibility = true;
|
||||
</script>
|
||||
|
||||
<svg
|
||||
class="wave"
|
||||
viewBox="0 0 1440 500"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
preserveAspectRatio="none"
|
||||
style="bottom: {-bottom}; height: {bottom / 5 + 35}vh"
|
||||
style="opacity: {visibility ? '100%' : '0'}"
|
||||
>
|
||||
<path class="wave" />
|
||||
</svg>
|
||||
|
||||
<style>
|
||||
svg {
|
||||
transition: height 1s var(--bezier-one);
|
||||
transition: opacity 0.1s var(--bezier-one);
|
||||
position: absolute;
|
||||
z-index: -999;
|
||||
bottom: 0rem;
|
||||
width: 100%;
|
||||
height: 40vh;
|
||||
}
|
||||
|
||||
.wave {
|
||||
animation: wave-anim 40s;
|
||||
animation-timing-function: linear;
|
||||
animation: wave-anim 30s;
|
||||
animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
|
||||
animation-iteration-count: infinite;
|
||||
fill: var(--primary);
|
||||
}
|
||||
|
||||
@ -1,32 +1,23 @@
|
||||
<script>
|
||||
import HeroImage from '$layout/Hero/HeroImage.svelte';
|
||||
import Home from '$layout/Hero/HeroSection.svelte';
|
||||
import SocialHost from '$layout/Hero/SocialHost.svelte';
|
||||
import Wave from '$lib/components/Wave.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';
|
||||
|
||||
let scrollY = 0;
|
||||
let footerVisible = false;
|
||||
|
||||
// temporary fix until rewrite is out
|
||||
function checkVisibility() {
|
||||
if (scrollY === 0) return (footerVisible = false);
|
||||
|
||||
const el = document.querySelector('#skiptab > main > div.hide-on-scroll.s-y_bCXRrkrYfP > div');
|
||||
const buffer = 24; // 1.5rem gap
|
||||
|
||||
if (!el) return (footerVisible = scrollY >= 24);
|
||||
|
||||
const rect = el.getBoundingClientRect();
|
||||
footerVisible = rect.bottom + buffer <= window.innerHeight;
|
||||
}
|
||||
let bottomVisibility = true;
|
||||
|
||||
onMount(() => {
|
||||
const checkVisibility = () => {
|
||||
const wave = document.querySelector('.wave');
|
||||
bottomVisibility = !(wave && wave.getBoundingClientRect().bottom < window.innerHeight);
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', checkVisibility, { passive: true });
|
||||
window.addEventListener('resize', checkVisibility);
|
||||
|
||||
checkVisibility(); // Initial check
|
||||
return () => {
|
||||
window.removeEventListener('scroll', checkVisibility);
|
||||
window.removeEventListener('resize', checkVisibility);
|
||||
@ -34,8 +25,6 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:window bind:scrollY />
|
||||
|
||||
<Head
|
||||
schemas={[
|
||||
{
|
||||
@ -147,75 +136,41 @@
|
||||
]}
|
||||
/>
|
||||
|
||||
<main style={footerVisible ? '' : `height: 100vh;`} class:hidden={footerVisible}>
|
||||
<div class="wrap">
|
||||
<div class="wrappezoid">
|
||||
<Home />
|
||||
<div id="heroimg"><HeroImage /></div>
|
||||
<main>
|
||||
<div class="content">
|
||||
<Home socialsVisibility={bottomVisibility} />
|
||||
<div class="hero-img-container">
|
||||
<HeroImage />
|
||||
</div>
|
||||
</div>
|
||||
<div class="hide-on-scroll" class:hidden={footerVisible}>
|
||||
<Wave bottom={scrollY} />
|
||||
<SocialHost />
|
||||
</div>
|
||||
</main>
|
||||
<div class="footer">
|
||||
<Footer showDivider={footerVisible ? true : false} />
|
||||
</div>
|
||||
<Wave visibility={bottomVisibility} />
|
||||
<Footer />
|
||||
|
||||
<style lang="scss">
|
||||
.hide-on-scroll.hidden {
|
||||
z-index: -2;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
main {
|
||||
padding-block: 2rem;
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 3rem;
|
||||
transition:
|
||||
gap 0.5s var(--bezier-one),
|
||||
margin-bottom 0.5s var(--bezier-one);
|
||||
|
||||
&.hidden {
|
||||
gap: 0rem;
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
}
|
||||
.wrap {
|
||||
margin-inline: auto;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
width: min(87%, 100rem);
|
||||
}
|
||||
.wrappezoid {
|
||||
height: calc(100vh - 225px);
|
||||
main {
|
||||
overflow: hidden;
|
||||
padding: 5rem 0;
|
||||
// Instead of 100vh because of header.
|
||||
height: 93vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 22rem;
|
||||
}
|
||||
|
||||
.footer {
|
||||
background-color: var(--background-one);
|
||||
.hero-img-container {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 1700px) {
|
||||
.wrappezoid {
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1052px) {
|
||||
#heroimg {
|
||||
@media (max-width: 1100px) {
|
||||
.hero-img-container {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.wrappezoid {
|
||||
justify-content: center;
|
||||
height: calc(65vh);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user