ReVanced/revanced-website
1
0
Fork 0
mirror of https://github.com/revanced/revanced-website.git synced 2025-05-05 00:44:29 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor: minor tweals

Browse Source
This commit is contained in:
afn 2022-10-12 02:54:40 -04:00
parent b0ab7c126b
commit 771089e32b
6 changed files with 146 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/lib/components/atoms/Button.svelte
View File

@ -4,52 +4,48 @@
export let href = '#'; export let href = '#';
export let fontsize = '1.2rem'; export let fontsize = '1.2rem';
export let icon = ""; export let icon = "";
function handleClick() {
location.href = href;
}
</script> </script>
<button <a href={href}>
class={type} <div
style="font-size: {fontsize};" class={type}
on:click={handleClick} style="font-size: {fontsize};"
> >
<img src="icons/{icon}.svg" alt="{icon}"/> <img src="icons/{icon}.svg" alt="{icon}"/>
<slot/> <slot/>
</button> </div>
</a>
<style> <style>
button, a {
.button-secondary {
color: var(--white);
text-decoration: none; text-decoration: none;
border-radius: 16px;
}
div, .button-secondary {
color: var(--white);
font-weight: 600; font-weight: 600;
border: none; border: none;
border-radius: 16px; border-radius: 16px;
padding: 12px 40px; padding: 16px 40px;
display: block; display: block;
cursor: pointer; cursor: pointer;
background-color: var(--grey-two); background-color: var(--grey-two);
transition: transform 0.4s var(--bezier-one), box-shadow 0.4s var(--bezier-one); transition: transform 0.4s var(--bezier-one), filter 0.4s var(--bezier-one);
user-select: none; user-select: none;
} }
.button-primary { .button-primary {
border: 3px solid var(--red);
background-color: var(--red); background-color: var(--red);
box-shadow: 0px 0px 32px 1px var(--red-glow); box-shadow: 0px 0px 32px 1px var(--red-glow);
color: var(--grey-four) color: var(--grey-four)
} }
button:hover { div:hover {
transform: translateY(-5%); transform: translateY(-4%);
} filter: brightness(90%)
button:active {
transform: scale(98%);
} }
button, div,
.button-secondary { .button-secondary {
display: flex; display: flex;
justify-content: center; justify-content: center;

5
src/lib/components/atoms/Navigation.svelte
View File

@ -18,11 +18,12 @@
display: inline-block; display: inline-block;
position: relative; position: relative;
font-weight: 500; font-weight: 500;
font-size: 0.9rem;
align-items: center; align-items: center;
border: var(--grey-six); border: var(--grey-six);
transition-timing-function: var(--bezier-one); transition-timing-function: var(--bezier-one);
transition-duration: 0.25s; transition-duration: 0.25s;
padding: 11px 30px; padding: 10px 25px;
border-radius: 200px; border-radius: 200px;
} }
@ -40,6 +41,6 @@
li.selected { li.selected {
background-color: var(--grey-three); background-color: var(--grey-three);
color: var(--red) color: var(--white)
} }
</style> </style>

5
src/lib/components/atoms/SocialButton.svelte
View File

@ -1,13 +1,12 @@
<script> <script>
export let src = 'socials/github.svg'; export let src = 'github';
export let alt = 'GitHub';
export let href = '#'; export let href = '#';
</script> </script>
<div> <div>
<button> <button>
<a {href}> <a {href}>
<img {src} {alt} /> <img src='socials/{src}.svg' alt={src} />
</a> </a>
</button> </button>
</div> </div>

26
src/lib/components/molecules/NavHost.svelte
View File

@ -1,7 +1,10 @@
<script lang="ts"> <script lang="ts">
import Navigation from '../atoms/Navigation.svelte'; import Navigation from '../atoms/Navigation.svelte';
import { fly } from 'svelte/transition';
import {quintOut} from 'svelte/easing';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { page } from '$app/stores'; import { page } from '$app/stores';
let menuBtn: HTMLElement; let menuBtn: HTMLElement;
let menuOpen = false; let menuOpen = false;
onMount(() => { onMount(() => {
@ -23,7 +26,12 @@
<img src="/logo.svg" class="logo-image" alt="ReVanced Logo" /> <img src="/logo.svg" class="logo-image" alt="ReVanced Logo" />
{#if $page.url.pathname !== '/'} {#if $page.url.pathname !== '/'}
<h1><span>Re</span>Vanced</h1> <h1
in:fly="{{ y: 10, easing: quintOut, duration: 700 }}"
out:fly="{{ y: 10, easing: quintOut, duration: 500 }}"
>
<span>Re</span>Vanced
</h1>
{/if} {/if}
</div> </div>
</a> </a>
@ -42,7 +50,7 @@
nav { nav {
padding: 0% 4% 0% 6%; padding: 0% 1rem 0% 2rem;
top: 0; top: 0;
position: fixed; position: fixed;
display: flex; display: flex;
@ -50,6 +58,7 @@
justify-content: space-between; justify-content: space-between;
height: 70px; height: 70px;
width: 100%; width: 100%;
z-index: 999;
background-color: var(--grey-six); background-color: var(--grey-six);
backdrop-filter: blur(15px); backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
@ -66,15 +75,20 @@
text-decoration: none; text-decoration: none;
} }
.logo-image { .logo-image {
width: 2.4rem; height: 1.75rem;
height: auto; width: auto;
cursor: pointer; cursor: pointer;
} }
.logo {
display:flex;
align-items: center;
}
h1 { h1 {
display: inline-block; display: inline-block;
margin-left: 1rem; margin-left: 1rem;
font-size: 2.4rem; font-size: 1.75rem;
letter-spacing: -0.04em; letter-spacing: -0.04em;
height: 90%; height: 90%;
} }
@ -83,7 +97,7 @@
color: var(--red); color: var(--red);
} }
@media screen and (max-width: 1052px) { @media screen and (max-width: 400px) {
h1 { h1 {
display: none; display: none;
} }

8
src/lib/components/molecules/SocialHost.svelte
View File

@ -3,10 +3,10 @@
</script> </script>
<div class="social-host"> <div class="social-host">
<SocialButton src="socials/github.svg" alt="GitHub" href="https://revanced.app/github" /> <SocialButton src="github" href="https://revanced.app/github" />
<SocialButton src="socials/discord.svg" alt="Discord" href="http://revanced.app/discord" /> <SocialButton src="discord" href="http://revanced.app/discord" />
<SocialButton src="socials/reddit.svg" alt="Reddit" href="https://revanced.app/reddit" /> <SocialButton src="reddit" href="https://revanced.app/reddit" />
<SocialButton src="socials/telegram.svg" alt="Telegram" href="https://revanced.app/telegram" /> <SocialButton src="telegram" href="https://revanced.app/telegram" />
</div> </div>
<style> <style>

108
src/routes/docs/+page.svelte
View File

@ -1,21 +1,105 @@
<script> <script>
import Button from "$lib/components/atoms/Button.svelte";
import { fly } from 'svelte/transition';
import { quintOut } from 'svelte/easing';
</script> </script>
<div> <section in:fly="{{ y: 10, easing: quintOut, duration: 700 }}">
<img src="https://cataas.com/cat/says/you%20are%20too%20early" alt="you are early"/> <div class="menu">
</div> <div class="doc-section-selected">
<h3>Prerequisites</h3>
</div>
<div class="doc-section">
<h3>Using ReVanced CLI and installiing ReVanced</h3>
</div>
</div>
<div class="content">
<h6>docs/prerequisites</h6>
<br/>
<h4>Requirements</h4>
<h5>
<ul>
<li>ADB</li>
<li>x86/x86_64 host architecture</li>
<li>Zulu JDK 17</li>
<li>Latest Android SDK if you plan to build the integrations from the source</li>
<li>The APK file you want to patch (e.g. YouTube v17.36.37 or YouTube Music v5.23.50). If you want to mount patched applications as root, make sure the same version is installed on your device.</li>
<li>You can continue by either building everything from source or downloading the prebuilt packages.</li>
</ul>
<br/>
You can continue by either <a href="https://github.com/revanced/revanced-documentation/wiki/Building-from-source">building everything from source</a> or <a href="https://github.com/revanced/revanced-documentation/wiki/Downloading-prebuilt-packages">downloading the prebuilt packages</a>.
</h5>
<br/>
<br/>
<div class="button-wrapper">
<Button kind="secondary" fontsize="1rem">Using ReVanced CLI and installing ReVanced -></Button>
</div>
</div>
</section>
<style> <style>
img { section {
display:grid;
height:85vh; grid-template-columns: 300px 3fr;
width:auto;
} }
div { a {
display:flex; text-decoration: none;
justify-content: center; color: var(--white);
align-items: center; border-bottom: 1.5px solid var(--red);
padding: 0px 5px;
transition: all 0.4s var(--bezier-one);
}
a:hover {
background-color: var(--red);
border-radius: 6px;
color: var(--grey-four)
}
.menu, .content {
height: 100vh;
width:100%;
}
.menu {
padding: 90px 15px 0px 15px;
background-color: var(--grey-six);
display: flex;
flex-direction: column;
gap: 1rem;
}
.content {
padding: 100px 30px 0px 30px;
background-color: var(--grey-one);
}
.doc-section {
background-color: var(--grey-one);
border-radius: 12px;
padding: 15px 20px;
}
.doc-section-selected {
background-color: var(--grey-three);
border-radius: 12px;
padding: 15px 20px;
}
.doc-section-selected > h3 {
color: var(--white);
}
.button-wrapper {
width:30rem;
}
ul {
padding-left: 2rem;
}
h4 {
margin-bottom: 0.5rem;
} }
</style> </style>