fix: more mobile responsive, tweaked ui

This commit is contained in:
afn
2022-11-12 19:26:51 -05:00
parent ad08371ed7
commit 9f8f4242a0
15 changed files with 197 additions and 103 deletions

View File

@ -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 />

View File

@ -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>

View File

@ -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>

View File

@ -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;