mirror of
https://github.com/revanced/revanced-website.git
synced 2025-05-04 16:34:30 +02:00
refactor: minor tweals
This commit is contained in:
afn
parent
b0ab7c126b
commit
771089e32b
@ -4,52 +4,48 @@
|
||||
export let href = '#';
|
||||
export let fontsize = '1.2rem';
|
||||
export let icon = "";
|
||||
|
||||
function handleClick() {
|
||||
location.href = href;
|
||||
}
|
||||
</script>
|
||||
|
||||
<button
|
||||
<a href={href}>
|
||||
<div
|
||||
class={type}
|
||||
style="font-size: {fontsize};"
|
||||
on:click={handleClick}
|
||||
>
|
||||
<img src="icons/{icon}.svg" alt="{icon}"/>
|
||||
<slot/>
|
||||
</button>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<style>
|
||||
button,
|
||||
.button-secondary {
|
||||
color: var(--white);
|
||||
a {
|
||||
text-decoration: none;
|
||||
border-radius: 16px;
|
||||
}
|
||||
div, .button-secondary {
|
||||
color: var(--white);
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
border-radius: 16px;
|
||||
padding: 12px 40px;
|
||||
padding: 16px 40px;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
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;
|
||||
}
|
||||
|
||||
.button-primary {
|
||||
border: 3px solid var(--red);
|
||||
background-color: var(--red);
|
||||
box-shadow: 0px 0px 32px 1px var(--red-glow);
|
||||
color: var(--grey-four)
|
||||
}
|
||||
|
||||
button:hover {
|
||||
transform: translateY(-5%);
|
||||
}
|
||||
button:active {
|
||||
transform: scale(98%);
|
||||
div:hover {
|
||||
transform: translateY(-4%);
|
||||
filter: brightness(90%)
|
||||
}
|
||||
|
||||
button,
|
||||
div,
|
||||
.button-secondary {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
@ -18,11 +18,12 @@
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
font-weight: 500;
|
||||
font-size: 0.9rem;
|
||||
align-items: center;
|
||||
border: var(--grey-six);
|
||||
transition-timing-function: var(--bezier-one);
|
||||
transition-duration: 0.25s;
|
||||
padding: 11px 30px;
|
||||
padding: 10px 25px;
|
||||
border-radius: 200px;
|
||||
}
|
||||
|
||||
@ -40,6 +41,6 @@
|
||||
|
||||
li.selected {
|
||||
background-color: var(--grey-three);
|
||||
color: var(--red)
|
||||
color: var(--white)
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,13 +1,12 @@
|
||||
<script>
|
||||
export let src = 'socials/github.svg';
|
||||
export let alt = 'GitHub';
|
||||
export let src = 'github';
|
||||
export let href = '#';
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<button>
|
||||
<a {href}>
|
||||
<img {src} {alt} />
|
||||
<img src='socials/{src}.svg' alt={src} />
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,10 @@
|
||||
<script lang="ts">
|
||||
import Navigation from '../atoms/Navigation.svelte';
|
||||
import { fly } from 'svelte/transition';
|
||||
import {quintOut} from 'svelte/easing';
|
||||
import { onMount } from 'svelte';
|
||||
import { page } from '$app/stores';
|
||||
|
||||
let menuBtn: HTMLElement;
|
||||
let menuOpen = false;
|
||||
onMount(() => {
|
||||
@ -23,7 +26,12 @@
|
||||
<img src="/logo.svg" class="logo-image" alt="ReVanced Logo" />
|
||||
|
||||
{#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}
|
||||
</div>
|
||||
</a>
|
||||
@ -42,7 +50,7 @@
|
||||
|
||||
|
||||
nav {
|
||||
padding: 0% 4% 0% 6%;
|
||||
padding: 0% 1rem 0% 2rem;
|
||||
top: 0;
|
||||
position: fixed;
|
||||
display: flex;
|
||||
@ -50,6 +58,7 @@
|
||||
justify-content: space-between;
|
||||
height: 70px;
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
background-color: var(--grey-six);
|
||||
backdrop-filter: blur(15px);
|
||||
-webkit-backdrop-filter: blur(15px);
|
||||
@ -66,15 +75,20 @@
|
||||
text-decoration: none;
|
||||
}
|
||||
.logo-image {
|
||||
width: 2.4rem;
|
||||
height: auto;
|
||||
height: 1.75rem;
|
||||
width: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display:flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
display: inline-block;
|
||||
margin-left: 1rem;
|
||||
font-size: 2.4rem;
|
||||
font-size: 1.75rem;
|
||||
letter-spacing: -0.04em;
|
||||
height: 90%;
|
||||
}
|
||||
@ -83,7 +97,7 @@
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1052px) {
|
||||
@media screen and (max-width: 400px) {
|
||||
h1 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -3,10 +3,10 @@
|
||||
</script>
|
||||
|
||||
<div class="social-host">
|
||||
<SocialButton src="socials/github.svg" alt="GitHub" href="https://revanced.app/github" />
|
||||
<SocialButton src="socials/discord.svg" alt="Discord" href="http://revanced.app/discord" />
|
||||
<SocialButton src="socials/reddit.svg" alt="Reddit" href="https://revanced.app/reddit" />
|
||||
<SocialButton src="socials/telegram.svg" alt="Telegram" href="https://revanced.app/telegram" />
|
||||
<SocialButton src="github" href="https://revanced.app/github" />
|
||||
<SocialButton src="discord" href="http://revanced.app/discord" />
|
||||
<SocialButton src="reddit" href="https://revanced.app/reddit" />
|
||||
<SocialButton src="telegram" href="https://revanced.app/telegram" />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
@ -1,21 +1,105 @@
|
||||
<script>
|
||||
|
||||
import Button from "$lib/components/atoms/Button.svelte";
|
||||
import { fly } from 'svelte/transition';
|
||||
import { quintOut } from 'svelte/easing';
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<img src="https://cataas.com/cat/says/you%20are%20too%20early" alt="you are early"/>
|
||||
<section in:fly="{{ y: 10, easing: quintOut, duration: 700 }}">
|
||||
<div class="menu">
|
||||
<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>
|
||||
img {
|
||||
|
||||
height:85vh;
|
||||
width:auto;
|
||||
section {
|
||||
display:grid;
|
||||
grid-template-columns: 300px 3fr;
|
||||
}
|
||||
|
||||
div {
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--white);
|
||||
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;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
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>
|
||||
Loading…
x
Reference in New Issue
Block a user