mirror of
https://github.com/revanced/revanced-website.git
synced 2025-06-12 21:27:42 +02:00
fix: more mobile responsive, tweaked ui
This commit is contained in:
@ -3,6 +3,7 @@
|
||||
import Home from '$lib/components/organisms/Home.svelte';
|
||||
import SocialHost from '$lib/components/molecules/SocialHost.svelte';
|
||||
import Wave from '$lib/components/atoms/Wave.svelte';
|
||||
import TerminalWindow from '$lib/components/atoms/TerminalWindow.svelte';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
@ -16,6 +17,7 @@
|
||||
<div class="wrappezoid">
|
||||
<Home />
|
||||
<div id="heroimg"><HeroImage /></div>
|
||||
<!-- <TerminalWindow/> -->
|
||||
</div>
|
||||
</div>
|
||||
<SocialHost />
|
||||
|
@ -49,6 +49,7 @@
|
||||
h2 {
|
||||
font-size: 1rem;
|
||||
color: var(--grey-four);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-container {
|
||||
@ -77,4 +78,10 @@
|
||||
a:hover::after {
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
@ -3,30 +3,29 @@
|
||||
import Button from '$lib/components/atoms/Button.svelte';
|
||||
import Footer from '$lib/components/molecules/Footer.svelte';
|
||||
|
||||
$: manager = $tools["revanced/revanced-manager"];
|
||||
$: manager = $tools['revanced/revanced-manager'];
|
||||
</script>
|
||||
|
||||
<div class="wrapper">
|
||||
<h1>ReVanced Manager</h1>
|
||||
<h1>ReVanced <span>Manager</span></h1>
|
||||
<h6>Patch your favourite apps, on-device.</h6>
|
||||
<Button kind="primary" icon="download" href={manager.assets[0].url}>{manager.version}</Button>
|
||||
<img src="../manager_two.png" alt="Manager Screenshot"/>
|
||||
<Button kind="primary" icon="download" target="_blank" href={manager.assets[0].url}>{manager.version}</Button>
|
||||
<img src="../manager_two.png" alt="Manager Screenshot" />
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
|
||||
<style>
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2.25rem;
|
||||
font-weight: 600;
|
||||
font-size: 3rem;
|
||||
text-align: center;
|
||||
color: var(--accent-color);
|
||||
color: var(--white);
|
||||
|
||||
}
|
||||
|
||||
h6 {
|
||||
@ -34,9 +33,19 @@
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
img {
|
||||
img {
|
||||
margin-top: 2.5rem;
|
||||
margin-bottom: 2.5rem;
|
||||
width: 25rem;
|
||||
height: 50rem;
|
||||
width: auto;
|
||||
padding: 0.75rem 0.75rem;
|
||||
border-radius: 2.5rem;
|
||||
background-color: var(--grey-two);
|
||||
box-shadow:0 50px 100px -20px rgba(16, 22, 31, 0.25), 0 30px 60px -30px rgba(18, 19, 22, 0.767), inset 0 -2px 20px 0 rgba(20, 21, 23, 0.598);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
span {
|
||||
color: var(--accent-color)
|
||||
}
|
||||
</style>
|
||||
|
@ -14,7 +14,7 @@
|
||||
|
||||
let current: boolean = false;
|
||||
|
||||
function search(findTerm: string | boolean, array: CompatiblePackage[]) {
|
||||
function search(findTerm: string | boolean, array: any) {
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
if (array[i].name === findTerm) {
|
||||
return true;
|
||||
@ -39,10 +39,10 @@
|
||||
</TreeMenu>
|
||||
</aside>
|
||||
|
||||
<div class="patches-container">
|
||||
{#each patches as patch, i}
|
||||
<div class="patches-container" in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
|
||||
{#each patches as patch}
|
||||
{#if search(current, patch.compatiblePackages) || !current}
|
||||
<div in:fly={{ x: 10, easing: quintOut, duration: 750, delay: -(300 * 0.85 ** i) + 300 }}>
|
||||
<div>
|
||||
<PatchCell bind:current {patch} />
|
||||
</div>
|
||||
{/if}
|
||||
@ -54,7 +54,7 @@
|
||||
<style>
|
||||
main {
|
||||
margin-inline: auto;
|
||||
width: min(95%, 100rem);
|
||||
padding: 0 2rem;
|
||||
display: grid;
|
||||
grid-template-columns: 300px 3fr;
|
||||
gap: 1.5rem;
|
||||
|
Reference in New Issue
Block a user