mirror of
https://github.com/revanced/revanced-website.git
synced 2025-04-29 22:24:31 +02:00
the
This commit is contained in:
afn
parent
61618d38d1
commit
09637f841a
Binary file not shown.
|
Before Width: | Height: | Size: 81 KiB After Width: | Height: | Size: 656 KiB |
41
src/app.scss
41
src/app.scss
@ -1,4 +1,4 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&family=Source+Code+Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800");
|
||||
|
||||
* {
|
||||
box-sizing: inherit;
|
||||
@ -35,7 +35,8 @@ body {
|
||||
|
||||
:root {
|
||||
/* TODO properly name these */
|
||||
--main-font: "Manrope", sans-serif;
|
||||
--main-font: "Plus Jakarta Sans", sans-serif;
|
||||
--secondary-font: "Manrope", sans-serif;
|
||||
--mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
|
||||
--white: hsl(206, 100%, 94%);
|
||||
--accent-color: hsl(206, 100%, 81%);
|
||||
@ -47,12 +48,12 @@ body {
|
||||
--grey-three: hsl(221, 17%, 26%);
|
||||
--grey-four: hsl(226, 48%, 18%);
|
||||
--grey-five: hsl(208, 30%, 75%);
|
||||
--grey-six: hsl(230, 9%, 13%);
|
||||
--grey-six: hsl(230, 9%, 14%);
|
||||
--grey-seven: hsl(240, 9%, 13.5%);
|
||||
--grey-eight: hsla(207, 30%, 75%, 0.577);
|
||||
--grey-nine: hsla(240, 6%, 7%, 0.3);
|
||||
--grey-ten: hsl(230, 9.5%, 17.5%);
|
||||
--grey-eleven: hsl(208, 10%, 40%);
|
||||
--grey-eleven: hsl(209, 9%, 48%);
|
||||
--bezier-one: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
|
||||
@ -64,35 +65,39 @@ body {
|
||||
|
||||
h1 {
|
||||
color: var(--white);
|
||||
line-height: 4rem;
|
||||
font-size: 3.5rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.025em;
|
||||
font-family: var(--main-font);
|
||||
line-height: 4.5rem;
|
||||
font-size: 4rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.035em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: var(--grey-five);
|
||||
color: var(--white);
|
||||
font-family: var(--main-font);
|
||||
font-size: 2.5rem;
|
||||
letter-spacing: -0.04rem;
|
||||
letter-spacing: -0.035em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.25rem;
|
||||
color: var(--accent-color-two);
|
||||
font-weight: 600;
|
||||
font-family: var(--main-font);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: var(--accent-color-two);
|
||||
font-family: var(--secondary-font);
|
||||
font-weight: 500;
|
||||
font-size: 1.2rem;
|
||||
letter-spacing: 0.02rem;
|
||||
font-size: 1.1rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
color: var(--grey-five);
|
||||
font-family: var(--secondary-font);
|
||||
font-weight: 400;
|
||||
font-size: 0.9rem;
|
||||
letter-spacing: 0.02rem;
|
||||
@ -100,21 +105,23 @@ h5 {
|
||||
|
||||
h6 {
|
||||
color: var(--grey-five);
|
||||
font-family: var(--secondary-font);
|
||||
font-weight: 500;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--grey-five);
|
||||
font-family: var(--secondary-font);
|
||||
font-weight: 400;
|
||||
font-size: 0.95rem;
|
||||
letter-spacing: 0.02rem;
|
||||
font-size: 14px;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
h1 {
|
||||
font-size: 2.6rem;
|
||||
font-size: 3rem;
|
||||
line-height: 3.75rem;
|
||||
}
|
||||
|
||||
@ -142,9 +149,9 @@ p {
|
||||
|
||||
hr {
|
||||
display: block;
|
||||
height: 2px;
|
||||
height: 1px;
|
||||
border: 0;
|
||||
border-top: 2px solid var(--grey-three);
|
||||
border-top: 1px solid var(--grey-three);
|
||||
}
|
||||
|
||||
input {
|
||||
|
||||
@ -97,12 +97,13 @@ export class API<T> implements Readable<T> {
|
||||
}
|
||||
|
||||
// API Endpoints
|
||||
import type { Patch, Repository, Tool } from '../../utils/types';
|
||||
import type { Patch, Repository, Tool } from '$lib/types';
|
||||
import { dev_log } from '$lib/utils';
|
||||
|
||||
export type ReposData = Repository[];
|
||||
export type PatchesData = { patches: Patch[]; packages: string[] };
|
||||
export type ToolsData = { [repo: string]: Tool };
|
||||
export type SocialsData = { [repo: string]: Tool };
|
||||
|
||||
export const repositories = new API<ReposData>('contributors', [], (json) => json.repositories);
|
||||
|
||||
|
||||
@ -20,24 +20,25 @@
|
||||
<img src="/logo.svg" class="logo-image" alt="ReVanced Logo" />
|
||||
<div>
|
||||
<p>
|
||||
ReVanced was born out of Vanced's discontinuation and it is our goal to continue the legacy
|
||||
of what Vanced left behind. Thanks to ReVanced Patcher, it's possible to create long-lasting
|
||||
patches for nearly any Android app. ReVanced's patching system is designed to allow patches
|
||||
to work on new versions of the apps automatically with bare minimum maintenance.
|
||||
ReVanced was born out of Vanced's discontinuation and it is our goal to continue the
|
||||
legacy of what Vanced left behind. Thanks to ReVanced Patcher, it's possible to create
|
||||
long-lasting patches for nearly any Android app. ReVanced's patching system is designed to
|
||||
allow patches to work on new versions of the apps automatically with bare minimum
|
||||
maintenance.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="links-container">
|
||||
<div class="link-column">
|
||||
<ul class="link-column">
|
||||
<li>Pages</li>
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="/download">Download</a></li>
|
||||
<li><a href="/docs">Documentation</a></li>
|
||||
<li><a href="/patches">Patches</a></li>
|
||||
<li><a href="/contributors">Contributors</a></li>
|
||||
</div>
|
||||
<div class="link-column">
|
||||
</ul>
|
||||
<ul class="link-column">
|
||||
<li>Repositories</li>
|
||||
{#each $repositories as { name }}
|
||||
<li>
|
||||
@ -46,27 +47,32 @@
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="link-column">
|
||||
</ul>
|
||||
<ul class="link-column">
|
||||
<!-- to replace -->
|
||||
<li>Socials</li>
|
||||
<li><a href="https://github.com/revanced" target="_blank" rel="noreferrer">GitHub</a></li>
|
||||
<li><a href="https://revanced.app/discord" target="_blank" rel="noreferrer">Discord</a></li>
|
||||
<li><a href="https://reddit.com/r/revancedapp" target="_blank" rel="noreferrer">Reddit</a></li>
|
||||
<li>
|
||||
<a href="https://reddit.com/r/revancedapp" target="_blank" rel="noreferrer">Reddit</a>
|
||||
</li>
|
||||
<li><a href="https://t.me/app_revanced" target="_blank" rel="noreferrer">Telegram</a></li>
|
||||
<li><a href="https://twitter.com/revancedapp" target="_blank" rel="noreferrer">Twitter</a></li>
|
||||
<li><a href="https://www.youtube.com/c/ReVanced" target="_blank" rel="noreferrer">YouTube</a></li>
|
||||
</div>
|
||||
<li>
|
||||
<a href="https://twitter.com/revancedapp" target="_blank" rel="noreferrer">Twitter</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.youtube.com/c/ReVanced" target="_blank" rel="noreferrer">YouTube</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<ul class="footer-bottom">
|
||||
<div id="logo-name"><span>Re</span>Vanced</div>
|
||||
<a href="https://liberapay.com/ReVanced/donate"><div>Donate</div></a>
|
||||
<a href="mailto:contact@revanced.app"><div>Email</div></a>
|
||||
</div>
|
||||
<li><a href="https://liberapay.com/ReVanced/donate"><div>Donate</div></a></li>
|
||||
<li><a href="mailto:contact@revanced.app"><div>Email</div></a></li>
|
||||
</ul>
|
||||
</footer>
|
||||
|
||||
|
||||
<style>
|
||||
footer {
|
||||
margin: 4rem 0 5rem 0;
|
||||
@ -95,7 +101,7 @@
|
||||
}
|
||||
|
||||
#logo-name span {
|
||||
color: var(--accent-color)
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.footer-bottom a {
|
||||
|
||||
@ -1,37 +1,25 @@
|
||||
<script>
|
||||
import Picture from '$lib/components/Picture.svelte';
|
||||
import manager_screenshot from '$images/manager_two.png?w=1233;822;411&format=avif;webp;png&picture';
|
||||
import Picture from '$lib/components/Picture.svelte';
|
||||
import manager_screenshot from '$images/manager_two.png?w=1233;822;411&format=avif;webp;png&picture';
|
||||
</script>
|
||||
|
||||
<div class="hero-img">
|
||||
<Picture data={manager_screenshot} alt="Screenshot of ReVanced Manager" />
|
||||
<img src="src/lib/manager_two.png" alt="manager" />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.hero-img :global(img) {
|
||||
height: 100%;
|
||||
border-radius: 1.75rem;
|
||||
}
|
||||
.hero-img :global(img) {
|
||||
height: 100%;
|
||||
border-radius: 1.75rem;
|
||||
}
|
||||
|
||||
.hero-img {
|
||||
overflow: hidden;
|
||||
height: 70vh;
|
||||
max-height: 70rem;
|
||||
z-index: -1;
|
||||
height: clamp(30rem, 80vw, 40rem);
|
||||
width: auto;
|
||||
float: right;
|
||||
z-index: -1;
|
||||
padding: 0.5rem 0.5rem;
|
||||
border-radius: 1.75rem;
|
||||
background-color: var(--grey-six);
|
||||
user-select: none;
|
||||
|
||||
}
|
||||
@media (max-width: 1700px) {
|
||||
.hero-img {
|
||||
position: fixed;
|
||||
height: 100vh;
|
||||
top: 115px;
|
||||
right: 6rem;
|
||||
}
|
||||
--webkit-user-select: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -3,42 +3,52 @@
|
||||
import { quintOut } from 'svelte/easing';
|
||||
|
||||
import Button from '$lib/components/Button.svelte';
|
||||
import HeroImage from './HeroImage.svelte';
|
||||
</script>
|
||||
|
||||
<section class="hero">
|
||||
<div class="hero-text">
|
||||
<h1>Continuing the <br />legacy of <span>Vanced.</span></h1>
|
||||
<h1><span>Re</span>Vanced</h1>
|
||||
<p>
|
||||
Customize your mobile experience through ReVanced <br /> by applying patches to your applications.
|
||||
Customize your mobile experience through ReVanced <br />by applying patches to your
|
||||
applications.
|
||||
</p>
|
||||
<div class="hero-buttons">
|
||||
<Button icon="download" kind="primary" href="download">Download Manager</Button>
|
||||
<Button icon="docs" href="patches">View patches</Button>
|
||||
<Button kind="one" href="download">Download Manager</Button>
|
||||
<Button kind="four" href="patches">View patches</Button>
|
||||
</div>
|
||||
</div>
|
||||
<HeroImage />
|
||||
</section>
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
color: var(--white);
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 2rem;
|
||||
margin-bottom: 1.75rem;
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding-bottom: 9rem;
|
||||
}
|
||||
|
||||
.hero-text {
|
||||
padding-bottom: 10rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hero-text {
|
||||
text-align: center;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.hero-buttons {
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
user-select: none;
|
||||
--webkit-user-select: none;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
@ -50,9 +60,13 @@
|
||||
.hero {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.hero-text {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: clamp(1rem, 1.2rem, 1.5rem);
|
||||
h1,
|
||||
p {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
br {
|
||||
@ -60,9 +74,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 450px) {
|
||||
@media screen and (max-width: 400px) {
|
||||
.hero-buttons {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,43 +0,0 @@
|
||||
<script>
|
||||
export let src = 'github';
|
||||
export let href = '#';
|
||||
</script>
|
||||
|
||||
<a {href} rel="noreferrer" target="_blank">
|
||||
<div>
|
||||
<img src="socials/{src}.svg" alt={src} />
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<style>
|
||||
div {
|
||||
border: 0;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
padding: 14px;
|
||||
cursor: pointer;
|
||||
border-radius: 200px;
|
||||
transition: transform 0.4s var(--bezier-one);
|
||||
background-color: var(--grey-two);
|
||||
color: var(--white);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
img {
|
||||
transition: filter 0.4s var(--bezier-one);
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
div:hover {
|
||||
transform: translateY(-5%);
|
||||
}
|
||||
|
||||
div:hover img {
|
||||
filter: brightness(1.2);
|
||||
}
|
||||
</style>
|
||||
@ -1,33 +0,0 @@
|
||||
<script>
|
||||
import SocialButton from './SocialButton.svelte';
|
||||
</script>
|
||||
|
||||
<div class="social-host">
|
||||
<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>
|
||||
.social-host {
|
||||
width: min(87%, 100rem);
|
||||
padding: 0 max(6.5%, calc(50vw - 50rem));
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
bottom: 2rem;
|
||||
gap: 1rem;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.social-host {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -33,13 +33,14 @@
|
||||
text-decoration: none;
|
||||
font-size: 1rem;
|
||||
user-select: none;
|
||||
--webkit-user-select: none;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: 400;
|
||||
font-size: 0.9rem;
|
||||
letter-spacing: 0.02rem;
|
||||
letter-spacing: -0.02rem;
|
||||
color: var(--grey-five);
|
||||
}
|
||||
|
||||
@ -50,11 +51,11 @@
|
||||
|
||||
li.selected {
|
||||
background-color: var(--accent-low-opacity);
|
||||
color: var(--accent-color);
|
||||
color: var(--accent-color-two);
|
||||
}
|
||||
|
||||
li.selected span {
|
||||
color: var(--accent-color);
|
||||
color: var(--accent-color-two);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
||||
@ -100,21 +100,16 @@
|
||||
</Svg>
|
||||
</svelte:fragment>
|
||||
<svelte:fragment slot="title">Settings</svelte:fragment>
|
||||
<svelte:fragment slot="description">Configure the website's API. Defaults to ReVanced.</svelte:fragment>
|
||||
<svelte:fragment slot="description"
|
||||
>Configure the website's API. Defaults to ReVanced.</svelte:fragment
|
||||
>
|
||||
<div id="settings-content">
|
||||
<div class="input-wrapper">
|
||||
<input name="api-url" type="text" bind:value={url} />
|
||||
<button id="button-reset" on:click={reset}>
|
||||
<Svg viewBoxHeight={48} svgHeight={24}>
|
||||
<path
|
||||
d="M11.2 36.725C14.6667 40.2417 18.8833 42 23.85 42C26.35 42 28.7 41.525 30.9 40.575C33.1 39.625 35.025 38.3333 36.675 36.7C38.325 35.0667 39.625 33.15 40.575 30.95C41.525 28.75 42 26.4 42 23.9C42 21.4 41.525 19.0667 40.575 16.9C39.625 14.7333 38.325 12.8417 36.675 11.225C35.025 9.60833 33.1 8.33333 30.9 7.4C28.7 6.46667 26.35 6 23.85 6C21.1833 6 18.6583 6.58333 16.275 7.75C13.8917 8.91667 11.8333 10.5167 10.1 12.55V7.25H7.1V17.65H17.55V14.65H12.3C13.7667 12.95 15.4917 11.5833 17.475 10.55C19.4583 9.51667 21.5833 9 23.85 9C28.0167 9 31.5833 10.425 34.55 13.275C37.5167 16.125 39 19.6167 39 23.75C39 27.9833 37.5333 31.5833 34.6 34.55C31.6667 37.5167 28.0833 39 23.85 39C19.6833 39 16.1667 37.5333 13.3 34.6C10.4333 31.6667 9 28.1167 9 23.95H6C6 28.95 7.73333 33.2083 11.2 36.725Z"
|
||||
/>
|
||||
</Svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<Button kind="tertiary" on:click={clear_and_reload}>Clear cache</Button>
|
||||
<Button kind="tertiary" on:click={save}>Save</Button>
|
||||
<Button kind="three" on:click={clear_and_reload}>Clear cache</Button>
|
||||
<Button kind="three" on:click={save}>Save</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
@ -269,6 +264,7 @@
|
||||
/* Hamburger mmm yum */
|
||||
.menu-btn {
|
||||
user-select: none;
|
||||
--webkit-user-select: none;
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 50px;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script>
|
||||
export let kind = 'secondary';
|
||||
export let kind = 'two';
|
||||
$: type = 'button-' + kind;
|
||||
export let icon = '';
|
||||
export let href = '';
|
||||
@ -7,12 +7,11 @@
|
||||
</script>
|
||||
|
||||
<button on:click>
|
||||
<svelte:element
|
||||
this={href ? 'a' : 'div'}
|
||||
{href}
|
||||
{target}
|
||||
class={type}
|
||||
>
|
||||
{#if kind !== 'three'}
|
||||
<div id="overlay" />
|
||||
<div id="ripple" />
|
||||
{/if}
|
||||
<svelte:element this={href ? 'a' : 'div'} {href} {target} class={type}>
|
||||
{#if icon}
|
||||
<img src="../icons/{icon}.svg" alt={icon} />
|
||||
{/if}
|
||||
@ -26,17 +25,21 @@
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
a,
|
||||
div {
|
||||
min-width: max-content;
|
||||
font-size: 0.95rem;
|
||||
font-size: 0.85rem;
|
||||
height: 44px;
|
||||
text-decoration: none;
|
||||
color: var(--white);
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
border-radius: 100px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@ -44,27 +47,75 @@
|
||||
cursor: pointer;
|
||||
transition: transform 0.4s var(--bezier-one), filter 0.4s var(--bezier-one);
|
||||
user-select: none;
|
||||
--webkit-user-select: none;
|
||||
}
|
||||
|
||||
.button-primary {
|
||||
#ripple,
|
||||
#overlay {
|
||||
position: absolute;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
opacity: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
transition: all 0.2s var(--bezier-one);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#ripple {
|
||||
aspect-ratio: 1 / 1;
|
||||
margin: auto;
|
||||
border-radius: 100px;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
#overlay {
|
||||
width: 100%;
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
button:hover #overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
button:active #ripple {
|
||||
opacity: 1;
|
||||
animation: ripple 1.5s forwards ease-out;
|
||||
}
|
||||
|
||||
@keyframes ripple {
|
||||
to {
|
||||
transform: scale(10);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.button-one {
|
||||
background-color: var(--accent-color);
|
||||
color: var(--grey-four);
|
||||
}
|
||||
.button-secondary {
|
||||
.button-two {
|
||||
background-color: var(--grey-two);
|
||||
}
|
||||
|
||||
.button-primary, .button-secondary {
|
||||
padding: 16px 24px;
|
||||
.button-one,
|
||||
.button-two,
|
||||
.button-four {
|
||||
padding: 18px 28px;
|
||||
}
|
||||
|
||||
.button-tertiary {
|
||||
.button-three {
|
||||
background-color: transparent;
|
||||
color: var(--accent-color);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.01rem;
|
||||
}
|
||||
|
||||
.button-four {
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--grey-three);
|
||||
color: var(--accent-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
div:hover {
|
||||
filter: brightness(85%);
|
||||
}
|
||||
|
||||
@ -49,6 +49,30 @@
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.modal {
|
||||
position: fixed;
|
||||
width: min(85%, 19.5rem);
|
||||
max-height: 75%;
|
||||
overflow-y: scroll;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 1.75rem;
|
||||
background-color: var(--grey-seven);
|
||||
display: flex;
|
||||
user-select: none;
|
||||
--webkit-user-select: none;
|
||||
gap: 5%;
|
||||
white-space: normal;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
z-index: 1001;
|
||||
padding: 24px;
|
||||
box-shadow: 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);
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@ -62,8 +86,7 @@
|
||||
.top {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.title {
|
||||
@ -75,32 +98,9 @@
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: var(--grey-six);
|
||||
margin-bottom: 8px;
|
||||
background-color: var(--grey-seven);
|
||||
}
|
||||
|
||||
.modal {
|
||||
position: fixed;
|
||||
width: min(85%, 425px);
|
||||
max-height: 75%;
|
||||
overflow-y: scroll;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 26px;
|
||||
background-color: var(--grey-six);
|
||||
display: flex;
|
||||
user-select: none;
|
||||
gap: 5%;
|
||||
white-space: normal;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
z-index: 1001;
|
||||
padding: 32px;
|
||||
box-shadow: 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);
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0;
|
||||
|
||||
BIN
src/lib/manager_two.png
Normal file
BIN
src/lib/manager_two.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 656 KiB |
@ -8,12 +8,12 @@
|
||||
|
||||
<Meta title="404" />
|
||||
|
||||
<section class="error">
|
||||
<section class="error wrapper">
|
||||
<h1>{status}</h1>
|
||||
{#if status == 404}
|
||||
<p>That page received a cease and desist letter from a multi-billion dollar tech company.</p>
|
||||
<br />
|
||||
<Navigation href="/" is_selected={() => true}>Home</Navigation>
|
||||
<Navigation href="/">Home</Navigation>
|
||||
{:else}
|
||||
<p>
|
||||
{$page.error.message}
|
||||
@ -28,11 +28,9 @@
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 10rem;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
p {
|
||||
font-size: 5ch;
|
||||
color: var(--white);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
<script>
|
||||
import HeroImage from '$layout/Hero/HeroImage.svelte';
|
||||
import Footer from '$layout/Footer.svelte';
|
||||
|
||||
import Home from '$layout/Hero/HeroSection.svelte';
|
||||
import SocialHost from '$layout/Hero/SocialHost.svelte';
|
||||
import Wave from '$lib/components/Wave.svelte';
|
||||
import Meta from '$lib/components/Meta.svelte';
|
||||
</script>
|
||||
|
||||
@ -10,45 +9,17 @@
|
||||
|
||||
<main>
|
||||
<div class="wrap">
|
||||
<div class="wrappezoid">
|
||||
<Home />
|
||||
<div id="heroimg"><HeroImage /></div>
|
||||
</div>
|
||||
<Home />
|
||||
|
||||
</div>
|
||||
<SocialHost />
|
||||
</main>
|
||||
<Wave />
|
||||
<Footer />
|
||||
|
||||
<style>
|
||||
.wrap {
|
||||
margin-inline: auto;
|
||||
width: min(87%, 100rem);
|
||||
margin-top: 7rem;
|
||||
}
|
||||
.wrappezoid {
|
||||
height: calc(100vh - 120px);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
gap: 22rem;
|
||||
align-items: center;
|
||||
}
|
||||
@media (max-width: 1700px) {
|
||||
.wrappezoid {
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1052px) {
|
||||
#heroimg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.wrappezoid {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: calc(65vh);
|
||||
}
|
||||
margin-top: 9rem;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -15,13 +15,13 @@
|
||||
<div class="wrapper">
|
||||
<div class="text-container" in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
|
||||
<h2>Made possible by the community.</h2>
|
||||
<h4>
|
||||
Want to show up here? <span
|
||||
<p>
|
||||
ReVanced is a free and open-sourced project. Want to show up here? <span
|
||||
><a href="https://github.com/revanced" target="_blank" rel="noreferrer"
|
||||
>Become a contributor</a
|
||||
></span
|
||||
>
|
||||
</h4>
|
||||
</p>
|
||||
</div>
|
||||
<div class="repos">
|
||||
{#each $repositories as { contributors, name: repo }}
|
||||
@ -49,7 +49,7 @@
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
p {
|
||||
text-align: center;
|
||||
color: var(--grey-four);
|
||||
}
|
||||
@ -82,6 +82,12 @@
|
||||
@media screen and (max-width: 768px) {
|
||||
.text-container {
|
||||
margin-bottom: 2rem;
|
||||
border-radius: 12px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
h2, p {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,13 +1,17 @@
|
||||
<script lang="ts">
|
||||
export let name: string;
|
||||
export let pfp: string;
|
||||
export let url: string;
|
||||
let alt = `${name}'s profile picture`;
|
||||
export let contributor: any;
|
||||
let alt = `${contributor.login}'s profile picture`;
|
||||
</script>
|
||||
|
||||
<a href={url} rel="noreferrer" target="_blank">
|
||||
<img src={pfp} {alt} />
|
||||
<h5>{name}</h5>
|
||||
<a href={contributor.html_url} rel="noreferrer" target="_blank">
|
||||
<img src={contributor.avatar_url} {alt} />
|
||||
<div class="text">
|
||||
<h5>{contributor.login}</h5>
|
||||
<h6>
|
||||
{contributor.contributions}
|
||||
{contributor.contributions > 1 ? 'contributions' : 'contribution'}
|
||||
</h6>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<style>
|
||||
@ -38,6 +42,16 @@
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
h6 {
|
||||
color: var(--grey-eleven);
|
||||
}
|
||||
|
||||
.text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
img {
|
||||
border-radius: 50%;
|
||||
height: 32px;
|
||||
@ -45,21 +59,17 @@
|
||||
background-color: var(--grey-two);
|
||||
transition: transform 0.4s var(--bezier-one);
|
||||
user-select: none;
|
||||
--webkit-user-select: none;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
h5 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 42px;
|
||||
width: 42px;
|
||||
}
|
||||
a {
|
||||
width: max-content;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
import { slide, fade } from 'svelte/transition';
|
||||
import { quintOut } from 'svelte/easing';
|
||||
import type { Contributor } from '$lib/types';
|
||||
import ContributorButton from './ContributorPerson.svelte';
|
||||
import ContributorPerson from './ContributorPerson.svelte';
|
||||
|
||||
export let contributors: Contributor[];
|
||||
export let repo: string;
|
||||
@ -34,9 +34,9 @@
|
||||
|
||||
{#if expanded}
|
||||
<div class="contrib-host" transition:slide|local={{ easing: quintOut, duration: 500 }}>
|
||||
{#each contributors as { login, avatar_url, html_url }}
|
||||
{#if !usersIwantToExplodeSoBadly.includes(login)}
|
||||
<ContributorButton name={login} pfp={avatar_url} url={html_url} />
|
||||
{#each contributors as contributor}
|
||||
{#if !usersIwantToExplodeSoBadly.filter((x) => x === contributor.login).length}
|
||||
<ContributorPerson {contributor} />
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
@ -63,6 +63,7 @@
|
||||
height: 1.5rem;
|
||||
transition: all 0.2s var(--bezier-one);
|
||||
user-select: none;
|
||||
--webkit-user-select: none;
|
||||
}
|
||||
|
||||
.section-container {
|
||||
@ -91,14 +92,15 @@
|
||||
margin-bottom: -1px;
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.contrib-host {
|
||||
padding: 0.75rem;
|
||||
gap: 0.25rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
|
||||
grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
|
||||
height: 335px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -30,6 +30,7 @@
|
||||
gap: 0.6rem;
|
||||
width: 100%;
|
||||
user-select: none;
|
||||
--webkit-user-select: none;
|
||||
transition: background-color 0.4s var(--bezier-one);
|
||||
}
|
||||
|
||||
|
||||
@ -19,10 +19,12 @@
|
||||
<h2>ReVanced <span>Manager</span></h2>
|
||||
<p>Patch your favourite apps, right on your device.</p>
|
||||
<div class="buttons">
|
||||
<Button kind="primary" icon="download" href={manager.assets[0].url} target="_blank">
|
||||
<Button kind="one" icon="download" href={manager.assets[0].url} target="_blank">
|
||||
{manager.version}
|
||||
</Button>
|
||||
<Button href="https://github.com/revanced/revanced-manager" target="_blank">View Source</Button>
|
||||
<Button kind="four" href="https://github.com/revanced/revanced-manager" target="_blank"
|
||||
>View Source</Button
|
||||
>
|
||||
</div>
|
||||
<div class="screenshot">
|
||||
<Picture data={manager_screenshot} alt="Manager Screenshot" />
|
||||
@ -57,6 +59,7 @@
|
||||
border-radius: 2rem;
|
||||
background-color: var(--grey-six);
|
||||
user-select: none;
|
||||
--webkit-user-select: none;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
|
||||
@ -36,6 +36,7 @@
|
||||
gap: 0.6rem;
|
||||
width: 100%;
|
||||
user-select: none;
|
||||
--webkit-user-select: none;
|
||||
transition: background-color 0.4s var(--bezier-one);
|
||||
color: var(--grey-five);
|
||||
transition: color 0.3s var(--bezier-one);
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<div class="menu">
|
||||
<h6>PACKAGES</h6>
|
||||
<h6>Packages</h6>
|
||||
<hr/>
|
||||
<div class="slot">
|
||||
<slot />
|
||||
|
||||
@ -131,6 +131,7 @@
|
||||
height: 1.5rem;
|
||||
transition: all 0.2s var(--bezier-one);
|
||||
user-select: none;
|
||||
--webkit-user-select: none;
|
||||
}
|
||||
|
||||
.rotate #arrow {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user