mirror of
https://github.com/revanced/revanced-website.git
synced 2025-04-30 06:34:35 +02:00
feat: better footer, modal, contributors page ui
This commit is contained in:
afn
parent
c60a0a7731
commit
c26c2a5783
171
src/layout/Footer.svelte
Normal file
171
src/layout/Footer.svelte
Normal file
@ -0,0 +1,171 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { repositories } from '$data/api';
|
||||||
|
import { friendlyName } from '$lib/utils';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svg aria-hidden="true" width="100%" height="8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<pattern id="a" width="91" height="8" patternUnits="userSpaceOnUse">
|
||||||
|
<g clip-path="url(#clip0_2426_11367)">
|
||||||
|
<path
|
||||||
|
d="M114 4c-5.067 4.667-10.133 4.667-15.2 0S88.667-.667 83.6 4 73.467 8.667 68.4 4 58.267-.667 53.2 4 43.067 8.667 38 4 27.867-.667 22.8 4 12.667 8.667 7.6 4-2.533-.667-7.6 4s-10.133 4.667-15.2 0S-32.933-.667-38 4s-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0"
|
||||||
|
stroke-linecap="square"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</pattern>
|
||||||
|
<rect width="100%" height="100%" fill="url(#a)" />
|
||||||
|
</svg>
|
||||||
|
<footer>
|
||||||
|
<div class="footer-top">
|
||||||
|
<section class="main-content">
|
||||||
|
<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.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="links-container">
|
||||||
|
<div 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">
|
||||||
|
<li>Repositories</li>
|
||||||
|
{#each $repositories as { name }}
|
||||||
|
<li>
|
||||||
|
<a href="https://github.com/{name}" target="_blank" rel="noreferrer">
|
||||||
|
{friendlyName(name)}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
<div 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://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>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<div 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>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
|
||||||
|
<style>
|
||||||
|
footer {
|
||||||
|
margin: 4rem 0 5rem 0;
|
||||||
|
margin-inline: auto;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
width: min(87%, 80rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-top {
|
||||||
|
display: flex;
|
||||||
|
gap: 8rem;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-bottom {
|
||||||
|
display: flex;
|
||||||
|
gap: 2rem;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#logo-name {
|
||||||
|
font-size: 1.4rem;
|
||||||
|
color: var(--white);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
#logo-name span {
|
||||||
|
color: var(--accent-color)
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-bottom a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--grey-five);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
list-style: none;
|
||||||
|
color: var(--grey-five);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
li a {
|
||||||
|
color: var(--accent-color);
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
g path {
|
||||||
|
stroke: var(--grey-three);
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1.5rem;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
height: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
text-decoration-style: wavy;
|
||||||
|
text-decoration-color: var(--accent-color-two);
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.links-container {
|
||||||
|
display: flex;
|
||||||
|
gap: 10rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-column {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
flex-direction: column;
|
||||||
|
width: max-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1050px) {
|
||||||
|
.footer-top {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.links-container {
|
||||||
|
display: grid;
|
||||||
|
gap: 3rem;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
68
src/layout/Hero/HeroSection.svelte
Normal file
68
src/layout/Hero/HeroSection.svelte
Normal file
@ -0,0 +1,68 @@
|
|||||||
|
<script>
|
||||||
|
import { fly } from 'svelte/transition';
|
||||||
|
import { quintOut } from 'svelte/easing';
|
||||||
|
|
||||||
|
import Button from '$lib/components/Button.svelte';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<section class="hero">
|
||||||
|
<div class="hero-text">
|
||||||
|
<h1>Continuing the <br />legacy of <span>Vanced.</span></h1>
|
||||||
|
<h4>
|
||||||
|
Customize your mobile experience through ReVanced <br /> by applying patches to your applications.
|
||||||
|
</h4>
|
||||||
|
<div class="hero-buttons">
|
||||||
|
<Button icon="download" kind="primary" href="download">Download Manager</Button>
|
||||||
|
<Button icon="docs" href="patches">View patches</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
h1 {
|
||||||
|
color: var(--white);
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
padding-bottom: 9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-text {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-buttons {
|
||||||
|
display: flex;
|
||||||
|
user-select: none;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: var(--accent-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.hero {
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: clamp(1rem, 1.2rem, 1.5rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
br {
|
||||||
|
content: ' ';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 450px) {
|
||||||
|
.hero-buttons {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -3,7 +3,6 @@
|
|||||||
$: type = 'button-' + kind;
|
$: type = 'button-' + kind;
|
||||||
export let icon = '';
|
export let icon = '';
|
||||||
export let href = '';
|
export let href = '';
|
||||||
export let capitalize = false;
|
|
||||||
export let target = '';
|
export let target = '';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -13,7 +12,6 @@
|
|||||||
{href}
|
{href}
|
||||||
{target}
|
{target}
|
||||||
class={type}
|
class={type}
|
||||||
class:capitalize
|
|
||||||
>
|
>
|
||||||
{#if icon}
|
{#if icon}
|
||||||
<img src="../icons/{icon}.svg" alt={icon} />
|
<img src="../icons/{icon}.svg" alt={icon} />
|
||||||
@ -26,48 +24,52 @@
|
|||||||
button {
|
button {
|
||||||
border: none;
|
border: none;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
a,
|
a,
|
||||||
div {
|
div {
|
||||||
min-width: max-content;
|
min-width: max-content;
|
||||||
min-height: 57px;
|
font-size: 0.95rem;
|
||||||
font-size: 0.9rem;
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: var(--white);
|
color: var(--white);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
padding: 1rem 1.5rem;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background-color: var(--grey-two);
|
|
||||||
transition: transform 0.4s var(--bezier-one), filter 0.4s var(--bezier-one);
|
transition: transform 0.4s var(--bezier-one), filter 0.4s var(--bezier-one);
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.capitalize {
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.03rem;
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-primary {
|
.button-primary {
|
||||||
background-color: var(--accent-color);
|
background-color: var(--accent-color);
|
||||||
box-shadow: 0px 0px 32px 1px var(--accent-color-glow);
|
|
||||||
color: var(--grey-four);
|
color: var(--grey-four);
|
||||||
}
|
}
|
||||||
|
.button-secondary {
|
||||||
|
background-color: var(--grey-two);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-primary, .button-secondary {
|
||||||
|
padding: 16px 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-tertiary {
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--accent-color);
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: 0.01rem;
|
||||||
|
}
|
||||||
|
|
||||||
div:hover {
|
div:hover {
|
||||||
filter: brightness(85%);
|
filter: brightness(85%);
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
height: 25px;
|
height: 20px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -5,12 +5,20 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if modalOpen}
|
{#if modalOpen}
|
||||||
<div class="modal-container" transition:fade={{ easing: quadInOut, duration: 150 }}>
|
<div
|
||||||
<div class="modal">
|
class="overlay"
|
||||||
|
on:click={() => (modalOpen = !modalOpen)}
|
||||||
|
on:keypress={() => (modalOpen = !modalOpen)}
|
||||||
|
transition:fade={{ easing: quadInOut, duration: 150 }}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="modal"
|
||||||
|
role="dialog"
|
||||||
|
aria-modal="true"
|
||||||
|
transition:fade={{ easing: quadInOut, duration: 250 }}
|
||||||
|
>
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
<div class="overlay" on:click={() => (modalOpen = !modalOpen)} />
|
|
||||||
</div>
|
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@ -18,20 +26,20 @@
|
|||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100vw;
|
width: 100%;
|
||||||
height: 100vh;
|
height: 100%;
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
z-index: 1000;
|
z-index: 999;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal {
|
.modal {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
width: min(95%, 500px);
|
width: min(85%, 425px);
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
padding: 42px;
|
padding: 46px 36px;
|
||||||
border-radius: 16px;
|
border-radius: 26px;
|
||||||
background-color: var(--grey-six);
|
background-color: var(--grey-six);
|
||||||
display: flex;
|
display: flex;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
@ -77,16 +77,10 @@
|
|||||||
top: 38px;
|
top: 38px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
input {
|
input {
|
||||||
background-color: transparent;
|
background-color: var(--grey-ten);
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 0;
|
border-radius: 100px;
|
||||||
border-bottom: 1px solid var(--grey-one);
|
|
||||||
}
|
|
||||||
|
|
||||||
input:focus {
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -14,12 +14,13 @@
|
|||||||
class:selected={selectedPkg === name}
|
class:selected={selectedPkg === name}
|
||||||
on:click={handleClick}
|
on:click={handleClick}
|
||||||
>
|
>
|
||||||
<h5>{name}</h5>
|
{name}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.package {
|
.package {
|
||||||
padding: 0.6rem 1rem;
|
padding: 0.6rem 1rem;
|
||||||
|
font-size: 0.9rem;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -30,12 +31,12 @@
|
|||||||
transition: background-color 0.4s var(--bezier-one);
|
transition: background-color 0.4s var(--bezier-one);
|
||||||
}
|
}
|
||||||
|
|
||||||
.package h5 {
|
.package{
|
||||||
color: var(--grey-five);
|
color: var(--grey-five);
|
||||||
transition: color 0.3s var(--bezier-one);
|
transition: color 0.3s var(--bezier-one);
|
||||||
}
|
}
|
||||||
|
|
||||||
.selected h5 {
|
.selected {
|
||||||
color: var(--grey-four);
|
color: var(--grey-four);
|
||||||
transition: color 0.3s var(--bezier-one);
|
transition: color 0.3s var(--bezier-one);
|
||||||
}
|
}
|
||||||
@ -47,27 +48,29 @@
|
|||||||
background-color: var(--grey-six);
|
background-color: var(--grey-six);
|
||||||
}
|
}
|
||||||
|
|
||||||
.package:not(.selected):hover h5 {
|
.package:not(.selected):hover {
|
||||||
color: var(--white);
|
color: var(--white);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.package {
|
.package {
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
width: max-content;
|
width: max-content;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border: 1px solid var(--grey-three);
|
border: 1px solid var(--grey-three);
|
||||||
}
|
}
|
||||||
|
|
||||||
.package h5 {
|
.package{
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
color: var(--accent-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.selected {
|
.selected {
|
||||||
background-color: var(--accent-color);
|
background-color: var(--accent-low-opacity);
|
||||||
}
|
}
|
||||||
.package:not(.selected):hover h5 {
|
.package:not(.selected):hover {
|
||||||
color: var(--grey-five);
|
color: var(--grey-five);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1,86 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import type { Contributor } from 'src/data/types';
|
|
||||||
import ContributorButton from '../atoms/ContributorPerson.svelte';
|
|
||||||
|
|
||||||
export let contributors: Contributor[];
|
|
||||||
export let repo: string;
|
|
||||||
|
|
||||||
let repo_name = repo
|
|
||||||
.replace(/-/g, ' ')
|
|
||||||
.replace(/revanced\/revanced/g, 'ReVanced')
|
|
||||||
.replace(/cli/g, 'CLI')
|
|
||||||
.replace(/api/g, 'API')
|
|
||||||
.replace(/(?:^|\s)\S/g, (x) => x.toUpperCase());
|
|
||||||
|
|
||||||
// Yes
|
|
||||||
let usersIwantToExplodeSoBadly = ['semantic-release-bot'];
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="title">
|
|
||||||
<a href="https://github.com/{repo}" rel="noreferrer" target="_blank">
|
|
||||||
<h4>{repo_name}</h4>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr />
|
|
||||||
|
|
||||||
<div class="contrib-host">
|
|
||||||
{#each contributors as { login, avatar_url, html_url }}
|
|
||||||
{#if !usersIwantToExplodeSoBadly.includes(login)}
|
|
||||||
<ContributorButton name={login} pfp={avatar_url} url={html_url} />
|
|
||||||
{/if}
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.title {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
border-radius: 4px;
|
|
||||||
transform: translateX(-6px);
|
|
||||||
}
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
hr {
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
border-top: 1px solid var(--grey-two);
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
transition: all 0.3s var(--bezier-one);
|
|
||||||
display: flex;
|
|
||||||
text-decoration: none;
|
|
||||||
width: max-content;
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a > h4 {
|
|
||||||
transition: all 0.3s var(--bezier-one);
|
|
||||||
width: max-content;
|
|
||||||
padding: 0rem 0.4rem;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover > h4 {
|
|
||||||
width: max-content;
|
|
||||||
background-color: var(--grey-three);
|
|
||||||
color: var(--accent-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.contrib-host {
|
|
||||||
gap: 0.5rem;
|
|
||||||
display: grid;
|
|
||||||
justify-items: center;
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.contrib-host {
|
|
||||||
gap: 0.25rem;
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,120 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import { repositories } from '../../../data/api';
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<hr />
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<section class="main-content">
|
|
||||||
<img src="/logo.svg" class="logo-image" alt="ReVanced Logo" />
|
|
||||||
<div>
|
|
||||||
<h2>
|
|
||||||
<span>Re</span>Vanced
|
|
||||||
</h2>
|
|
||||||
<h5>Copyright © 2022</h5>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="links-container">
|
|
||||||
<div class="link-column">
|
|
||||||
<h4>Pages</h4>
|
|
||||||
<a href="/"><h5>Home</h5></a>
|
|
||||||
<a href="/download"><h5>Download</h5></a>
|
|
||||||
<!-- <a href="/docs"><h5>Documentation</h5></a> -->
|
|
||||||
<a href="/patches"><h5>Patches</h5></a>
|
|
||||||
<a href="/contributors"><h5>Contributors</h5></a>
|
|
||||||
</div>
|
|
||||||
<div class="link-column">
|
|
||||||
<h4>Repositories</h4>
|
|
||||||
{#each $repositories as { name }}
|
|
||||||
<a href="https://github.com/{name}" target="_blank" rel="noreferrer">
|
|
||||||
<div>
|
|
||||||
<h5>
|
|
||||||
{name
|
|
||||||
.replace(/-/g, ' ')
|
|
||||||
.replace(/revanced\/revanced/g, '')
|
|
||||||
.replace(/cli/g, 'CLI')
|
|
||||||
.replace(/api/g, 'API')
|
|
||||||
.replace(/(?:^|\s)\S/g, (x) => x.toUpperCase())}
|
|
||||||
</h5>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
<div class="link-column">
|
|
||||||
<!-- to replace -->
|
|
||||||
<h4>Socials</h4>
|
|
||||||
<a href="https://github.com/revanced" target="_blank" rel="noreferrer"><h5>GitHub</h5></a>
|
|
||||||
<a href="https://revanced.app/discord" target="_blank" rel="noreferrer"><h5>Discord</h5></a>
|
|
||||||
<a href="https://reddit.com/r/revancedapp" target="_blank" rel="noreferrer"><h5>Reddit</h5></a>
|
|
||||||
<a href="https://t.me/app_revanced" target="_blank" rel="noreferrer"><h5>Telegram</h5></a>
|
|
||||||
<a href="https://twitter.com/revancedapp" target="_blank" rel="noreferrer"><h5>Twitter</h5></a>
|
|
||||||
<a href="https://www.youtube.com/c/ReVanced" target="_blank" rel="noreferrer"><h5>YouTube</h5></a>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
footer {
|
|
||||||
margin: 4rem 0 5rem 0;
|
|
||||||
margin-inline: auto;
|
|
||||||
display: flex;
|
|
||||||
gap: 2rem;
|
|
||||||
justify-content: space-between;
|
|
||||||
width: min(90%, 80rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
color: var(--white);
|
|
||||||
font-size: 1.5rem;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
color: var(--accent-color-two);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-content {
|
|
||||||
display: flex;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-content span {
|
|
||||||
color: var(--accent-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-content h2 {
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
height: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.links-container {
|
|
||||||
display: flex;
|
|
||||||
gap: 5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.link-column {
|
|
||||||
display: flex;
|
|
||||||
gap: 0.5rem;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 700px) {
|
|
||||||
footer {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.links-container {
|
|
||||||
display: grid;
|
|
||||||
gap: 3rem;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -14,23 +14,22 @@
|
|||||||
a {
|
a {
|
||||||
color: var(--white);
|
color: var(--white);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
padding: 0.5rem;
|
cursor: pointer;
|
||||||
|
padding: 0.9rem 1rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
transition: background-color 0.3s var(--bezier-one);
|
transition: background-color 0.3s var(--bezier-one);
|
||||||
border-radius: 6px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background-color: var(--grey-six);
|
border-right: 1px solid var(--grey-three);
|
||||||
border: 1px solid var(--grey-three);
|
border-bottom: 1px solid var(--grey-three);
|
||||||
}
|
}
|
||||||
|
|
||||||
a:hover {
|
a:hover {
|
||||||
background-color: var(--accent-color);
|
text-decoration: underline;
|
||||||
}
|
text-decoration-style: wavy;
|
||||||
|
text-decoration-color: var(--accent-color);
|
||||||
a:hover > h5 {
|
color: var(--white);
|
||||||
color: var(--grey-four);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h5 {
|
h5 {
|
||||||
@ -41,8 +40,8 @@
|
|||||||
|
|
||||||
img {
|
img {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
height: 30px;
|
height: 32px;
|
||||||
width: 30px;
|
width: 32px;
|
||||||
background-color: var(--grey-two);
|
background-color: var(--grey-two);
|
||||||
transition: transform 0.4s var(--bezier-one);
|
transition: transform 0.4s var(--bezier-one);
|
||||||
user-select: none;
|
user-select: none;
|
||||||
@ -58,11 +57,9 @@
|
|||||||
width: 48px;
|
width: 48px;
|
||||||
}
|
}
|
||||||
a {
|
a {
|
||||||
border-radius: 16px;
|
|
||||||
width: max-content;
|
width: max-content;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
103
src/routes/contributors/ContributorSection.svelte
Normal file
103
src/routes/contributors/ContributorSection.svelte
Normal file
@ -0,0 +1,103 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { friendlyName } from '$lib/utils';
|
||||||
|
import { slide, fade } from 'svelte/transition';
|
||||||
|
import { quintOut } from 'svelte/easing';
|
||||||
|
import type { Contributor } from '$lib/types';
|
||||||
|
import ContributorButton from './ContributorPerson.svelte';
|
||||||
|
|
||||||
|
export let contributors: Contributor[];
|
||||||
|
export let repo: string;
|
||||||
|
let expanded = true;
|
||||||
|
|
||||||
|
// Yes
|
||||||
|
let usersIwantToExplodeSoBadly = ['semantic-release-bot'];
|
||||||
|
let repo_name = friendlyName(repo);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="section-container">
|
||||||
|
<div
|
||||||
|
class="title"
|
||||||
|
class:closed={!expanded}
|
||||||
|
on:click={() => (expanded = !expanded)}
|
||||||
|
on:keypress={() => (expanded = !expanded)}
|
||||||
|
>
|
||||||
|
<a href="https://github.com/{repo}" rel="noreferrer" target="_blank">
|
||||||
|
<h4>{repo_name}</h4>
|
||||||
|
</a>
|
||||||
|
<img
|
||||||
|
id="arrow"
|
||||||
|
style:transform={expanded ? 'rotate(0deg)' : 'rotate(-180deg)'}
|
||||||
|
src="/icons/arrow.svg"
|
||||||
|
alt="dropdown"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#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} />
|
||||||
|
{/if}
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
background-color: var(--grey-six);
|
||||||
|
padding: 0.75rem 1.25rem;
|
||||||
|
border-bottom: 1px solid var(--grey-three);
|
||||||
|
transition: all 0.2s var(--bezier-one);
|
||||||
|
}
|
||||||
|
|
||||||
|
.closed {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#arrow {
|
||||||
|
height: 1.5rem;
|
||||||
|
transition: all 0.2s var(--bezier-one);
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-container {
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid var(--grey-three);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
transition: all 0.3s var(--bezier-one);
|
||||||
|
display: flex;
|
||||||
|
text-decoration: none;
|
||||||
|
width: max-content;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
text-decoration-style: wavy;
|
||||||
|
text-decoration-color: var(--accent-color);
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contrib-host {
|
||||||
|
margin-right: -1px;
|
||||||
|
margin-bottom: -1px;
|
||||||
|
display: grid;
|
||||||
|
justify-items: center;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.contrib-host {
|
||||||
|
padding: 0.75rem;
|
||||||
|
gap: 0.25rem;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,7 +1,9 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { slide, fade } from 'svelte/transition';
|
import { slide, fade } from 'svelte/transition';
|
||||||
import { quintOut } from 'svelte/easing';
|
import { quintOut } from 'svelte/easing';
|
||||||
import type { CompatiblePackage, Patch } from 'src/data/types';
|
import type { Patch } from '$lib/types';
|
||||||
|
import { friendlyName } from '$lib/utils'
|
||||||
|
|
||||||
|
|
||||||
export let patch: Patch;
|
export let patch: Patch;
|
||||||
const hasPatchOptions = !!patch.options.length;
|
const hasPatchOptions = !!patch.options.length;
|
||||||
@ -17,26 +19,13 @@
|
|||||||
>
|
>
|
||||||
<div class="things">
|
<div class="things">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<h3>
|
<h3>{friendlyName(patch.name)}</h3>
|
||||||
{patch.name
|
|
||||||
// im sorry
|
|
||||||
.replace(/-/g, ' ')
|
|
||||||
.replace(/(?:^|\s)\S/g, (x) => x.toUpperCase())
|
|
||||||
.replace(/Microg/g, 'MicroG')
|
|
||||||
.replace(/Hdr/g, 'HDR')
|
|
||||||
.replace(/Sponsorblock/g, 'SponsorBlock')
|
|
||||||
.replace(/ktok/g, 'kTok')
|
|
||||||
.replace(/Vr/g, 'VR')}
|
|
||||||
</h3>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#if hasPatchOptions}
|
{#if hasPatchOptions}
|
||||||
<img id="arrow" src="/icons/arrow.svg" alt="dropdown" />
|
<img id="arrow" src="/icons/arrow.svg" alt="dropdown" />
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>{patch.description}</h5>
|
<h5>{patch.description}</h5>
|
||||||
|
|
||||||
<div class="info-container">
|
<div class="info-container">
|
||||||
{#each patch.compatiblePackages as pkg, i}
|
{#each patch.compatiblePackages as pkg, i}
|
||||||
<a
|
<a
|
||||||
@ -49,18 +38,23 @@
|
|||||||
{/each}
|
{/each}
|
||||||
|
|
||||||
<!-- should i hardcode this to get the version of the first package? idk you cant stop me -->
|
<!-- should i hardcode this to get the version of the first package? idk you cant stop me -->
|
||||||
{#if patch.compatiblePackages.length}
|
{#if patch.compatiblePackages.length && patch.compatiblePackages[0].versions.length}
|
||||||
{#if patch.compatiblePackages[0].versions.length}
|
|
||||||
<h6 class="boxed">
|
<h6 class="boxed">
|
||||||
🎯 {patch.compatiblePackages[0].versions.slice(-1)}
|
🎯 {patch.compatiblePackages[0].versions.slice(-1)}
|
||||||
</h6>
|
</h6>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
|
{#if !patch.compatiblePackages.length}
|
||||||
|
<h6 class="boxed">
|
||||||
|
🌎 Universal patch
|
||||||
|
</h6>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
|
|
||||||
<h6 class="boxed">🧩 {patch.version}</h6>
|
<h6 class="boxed">🧩 {patch.version}</h6>
|
||||||
|
|
||||||
{#if hasPatchOptions}
|
{#if hasPatchOptions}
|
||||||
<h6 class="boxed">⚙️ Patch Options</h6>
|
<h6 class="boxed">⚙️ Patch options</h6>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -81,6 +75,11 @@
|
|||||||
<style>
|
<style>
|
||||||
h3 {
|
h3 {
|
||||||
margin-right: 0.5rem;
|
margin-right: 0.5rem;
|
||||||
|
margin-bottom: 0.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
h6 {
|
h6 {
|
||||||
Loading…
x
Reference in New Issue
Block a user