mirror of
https://github.com/revanced/revanced-website.git
synced 2025-04-29 22:24:31 +02:00
refactor: minor cleanup
This commit is contained in:
afn
parent
9010842f73
commit
9b1ee92d15
52
src/app.css
52
src/app.css
@ -1,14 +1,14 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');
|
||||
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap");
|
||||
|
||||
*{
|
||||
* {
|
||||
box-sizing: inherit;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
font-family: "Manrope", sans-serif;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
html{
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 100%;
|
||||
@ -16,18 +16,19 @@ html{
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
body{
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 1.4;
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
|
||||
html, body{
|
||||
html,
|
||||
body {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.wrapper{
|
||||
.wrapper {
|
||||
margin-inline: auto;
|
||||
width: min(90%, 100rem);
|
||||
margin-top: 7rem;
|
||||
@ -35,63 +36,62 @@ html, body{
|
||||
|
||||
:root {
|
||||
--white: #fff;
|
||||
--red: #8bc3f4;
|
||||
--bg-color: #1A1C1E;
|
||||
--grey-one: #252B31;
|
||||
--accent-color: #8bc3f4;
|
||||
--bg-color: #1a1c1e;
|
||||
--grey-one: #252b31;
|
||||
--grey-two: #28313b;
|
||||
--grey-three: #3c4759c3;
|
||||
--grey-four: #1B1E29;
|
||||
--grey-four: #1b1e29;
|
||||
--grey-five: hsl(208, 30%, 75%);
|
||||
--grey-six: #23282da7;
|
||||
--grey-seven: #535563;
|
||||
--bezier-one: cubic-bezier(0.25, 0.46, 0.45, 0.94)
|
||||
--bezier-one: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
|
||||
::selection{
|
||||
::selection {
|
||||
background: var(--grey-three);
|
||||
}
|
||||
|
||||
/*-----headings-----*/
|
||||
|
||||
h1{
|
||||
h1 {
|
||||
color: var(--white);
|
||||
font-weight: 700;
|
||||
line-height: 1.5rem;
|
||||
line-height: 1.5rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h2{
|
||||
h2 {
|
||||
color: var(--grey-five);
|
||||
font-weight: 400;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
h3{
|
||||
h3 {
|
||||
color: var(--white);
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
h4{
|
||||
color:var(--white);
|
||||
font-weight:500;
|
||||
h4 {
|
||||
color: var(--white);
|
||||
font-weight: 500;
|
||||
font-size: 1.25rem;
|
||||
letter-spacing: 0.02rem;
|
||||
}
|
||||
|
||||
h5{
|
||||
color:var(--white);
|
||||
h5 {
|
||||
color: var(--white);
|
||||
font-weight: 300;
|
||||
font-size: 1rem;
|
||||
letter-spacing: 0.02rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
color:var(--grey-five);
|
||||
color: var(--grey-five);
|
||||
font-weight: 300;
|
||||
font-size: 1rem;
|
||||
letter-spacing: 0.02rem;
|
||||
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
@ -106,4 +106,4 @@ h6 {
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: var(--grey-three);
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,14 +2,14 @@
|
||||
export let kind = 'secondary';
|
||||
$: type = 'button-' + kind;
|
||||
export let href = '#';
|
||||
export let width = 'max-content';
|
||||
export let icon = "";
|
||||
export let width = 'false';
|
||||
export let icon = '';
|
||||
</script>
|
||||
|
||||
<a href={href}>
|
||||
<a {href}>
|
||||
<div
|
||||
class={type}
|
||||
style="width: {width};"
|
||||
style="width: {width ? '100%' : 'max-width'}"
|
||||
>
|
||||
<img src="icons/{icon}.svg" alt="{icon}"/>
|
||||
<slot/>
|
||||
@ -21,6 +21,7 @@
|
||||
text-decoration: none;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
div, .button-secondary {
|
||||
font-size: 1.1rem;
|
||||
height: 60px;
|
||||
@ -37,8 +38,8 @@
|
||||
}
|
||||
|
||||
.button-primary {
|
||||
background-color: var(--red);
|
||||
box-shadow: 0px 0px 32px 1px var(--red-glow);
|
||||
background-color: var(--accent-color);
|
||||
box-shadow: 0px 0px 32px 1px var(--accent-color-glow);
|
||||
color: var(--grey-four)
|
||||
}
|
||||
|
||||
|
||||
@ -44,7 +44,7 @@
|
||||
}
|
||||
|
||||
a:hover > h2 {
|
||||
color: var(--red);
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
h2 {
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
<h1>
|
||||
<span class="redder">Re</span>Vanced
|
||||
<span>Re</span>Vanced
|
||||
</h1>
|
||||
|
||||
<style>
|
||||
.redder {
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
span {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: var(--white);
|
||||
font-weight: 700;
|
||||
|
||||
@ -42,6 +42,6 @@
|
||||
|
||||
li.selected {
|
||||
background-color: var(--grey-three);
|
||||
color: var(--red)
|
||||
color: var(--accent-color)
|
||||
}
|
||||
</style>
|
||||
@ -19,19 +19,19 @@
|
||||
|
||||
<div
|
||||
class="patch-container {hasPatchOptions ? 'expanded' : ''}"
|
||||
on:click={hasPatchOptions ? handleClick : ''}>
|
||||
on:click={hasPatchOptions ? handleClick : ''}
|
||||
>
|
||||
<div class="things">
|
||||
<div class="title">
|
||||
<h1>{name}</h1>
|
||||
<h3>{ver}</h3>
|
||||
</div>
|
||||
|
||||
|
||||
{#if hasPatchOptions}
|
||||
<img id="arrow" src="/icons/arrow.svg" alt="dropdown">
|
||||
{/if}
|
||||
</div>
|
||||
<!-- <h3>{pkgName}</h3> -->
|
||||
|
||||
<h4>{desc}</h4>
|
||||
</div>
|
||||
|
||||
|
||||
@ -3,16 +3,14 @@
|
||||
export let href = '#';
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<button>
|
||||
<a {href}>
|
||||
<img src='socials/{src}.svg' alt={src} />
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
<a {href}>
|
||||
<div>
|
||||
<img src='socials/{src}.svg' alt={src} />
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<style>
|
||||
button {
|
||||
div {
|
||||
border: 0;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
@ -26,7 +24,8 @@
|
||||
}
|
||||
|
||||
div {
|
||||
display: inline-block;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
img {
|
||||
@ -34,11 +33,11 @@
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
div:hover > button {
|
||||
div:hover {
|
||||
transform: translateY(-5%);
|
||||
}
|
||||
|
||||
button:hover img {
|
||||
div:hover img {
|
||||
filter: brightness(1.2);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
animation: wave-anim 40s;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
fill: var(--red);
|
||||
fill: var(--accent-color);
|
||||
}
|
||||
|
||||
@keyframes wave-anim {
|
||||
|
||||
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.2 KiB |
@ -43,10 +43,10 @@
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
|
||||
h2 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
a {
|
||||
transition: all 0.3s var(--bezier-one);
|
||||
display:block;
|
||||
@ -65,7 +65,7 @@
|
||||
a:hover > h2 {
|
||||
width: max-content;
|
||||
background-color: var(--grey-three);
|
||||
color: var(--red);
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.contrib-host {
|
||||
@ -77,5 +77,4 @@
|
||||
padding: 1.5rem;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import Navigation from '../atoms/Navigation.svelte';
|
||||
import Navigation from '../atoms/NavButton.svelte';
|
||||
import { fly } from 'svelte/transition';
|
||||
import {quintOut} from 'svelte/easing';
|
||||
import { onMount } from 'svelte';
|
||||
@ -24,12 +24,8 @@
|
||||
<a href="/">
|
||||
<div class="logo">
|
||||
<img src="/logo.svg" class="logo-image" alt="ReVanced Logo" />
|
||||
|
||||
{#if $page.url.pathname !== '/'}
|
||||
<h1
|
||||
>
|
||||
<span>Re</span>Vanced
|
||||
</h1>
|
||||
<h1 ><span>Re</span>Vanced</h1>
|
||||
{/if}
|
||||
</div>
|
||||
</a>
|
||||
@ -47,7 +43,6 @@
|
||||
|
||||
<style>
|
||||
|
||||
|
||||
nav {
|
||||
padding: 0% 1rem 0% 2rem;
|
||||
top: 0;
|
||||
@ -73,6 +68,7 @@
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.logo-image {
|
||||
height: 1.75rem;
|
||||
width: auto;
|
||||
@ -93,7 +89,7 @@
|
||||
}
|
||||
|
||||
h1 span {
|
||||
color: var(--red);
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 400px) {
|
||||
@ -13,7 +13,7 @@
|
||||
|
||||
<div class="hero-buttons">
|
||||
<Button icon="download" kind="primary" href="download" width="100%">Download</Button>
|
||||
<Button icon="docs" href="docs" width="100%" >Read The Docs</Button>
|
||||
<Button icon="docs" href="docs" width='true' >Read The Docs</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import NavHost from "$lib/components/molecules/NavHost.svelte";
|
||||
import NavHost from "$lib/components/molecules/Navigation.svelte";
|
||||
import '../app.css';
|
||||
</script>
|
||||
|
||||
|
||||
@ -8,7 +8,6 @@
|
||||
onMount (() => {
|
||||
ContributorsStore.subscribe(async (e) => {
|
||||
data = await e;
|
||||
console.log(data);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -46,13 +46,13 @@
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--white);
|
||||
border-bottom: 1.5px solid var(--red);
|
||||
border-bottom: 1.5px solid var(--accent-color);
|
||||
padding: 0px 5px;
|
||||
transition: all 0.4s var(--bezier-one);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
background-color: var(--red);
|
||||
background-color: var(--accent-color);
|
||||
border-radius: 6px;
|
||||
color: var(--grey-four)
|
||||
}
|
||||
@ -64,7 +64,6 @@
|
||||
|
||||
.menu {
|
||||
padding: 90px 15px 0px 15px;
|
||||
background-color: var(--grey-six);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
@ -72,7 +71,6 @@
|
||||
|
||||
.content {
|
||||
padding: 100px 30px 0px 30px;
|
||||
background-color: var(--grey-one);
|
||||
}
|
||||
|
||||
.doc-section {
|
||||
|
||||
@ -6,9 +6,9 @@
|
||||
import { quintOut } from 'svelte/easing';
|
||||
|
||||
let patches: any;
|
||||
let pkg_list = [];
|
||||
let pkg_list: Object[] = [];
|
||||
|
||||
let current = '';
|
||||
let current: boolean | Object = false;
|
||||
|
||||
onMount (async () => {
|
||||
PatchesStore.subscribe(async (e) => {
|
||||
@ -24,7 +24,9 @@
|
||||
};
|
||||
});
|
||||
};
|
||||
});
|
||||
})
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
@ -32,19 +34,17 @@
|
||||
</script>
|
||||
|
||||
<section>
|
||||
<div
|
||||
class="menu"
|
||||
>
|
||||
<div class="menu">
|
||||
{#if pkg_list}
|
||||
<div in:fly="{{ y: 10, easing: quintOut, duration: 750}}">
|
||||
<div in:fly="{{ y: 10, easing: quintOut, duration: 750 }}">
|
||||
<h5>PACKAGES</h5>
|
||||
<hr/>
|
||||
<div class="package-list">
|
||||
{#each pkg_list as pkg}
|
||||
<div
|
||||
class="package"
|
||||
class:selected={current === pkg}
|
||||
on:click={() => current = pkg}
|
||||
class:selected={ current === pkg }
|
||||
on:click={ () => current = (current === pkg) ? false : pkg }
|
||||
>
|
||||
<h3>{pkg}</h3>
|
||||
</div>
|
||||
@ -52,7 +52,6 @@
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
{#if patches}
|
||||
<div class="patches-list patches-container">
|
||||
@ -85,7 +84,7 @@
|
||||
width: min(95%, 100rem);
|
||||
display:grid;
|
||||
grid-template-columns: 300px 3fr;
|
||||
gap: 1rem;
|
||||
gap: 2.5rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
@ -116,6 +115,14 @@
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
hr {
|
||||
display: block;
|
||||
height: 1px;
|
||||
border: 0;
|
||||
border-top: 1px solid var(--grey-three);
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.package-list {
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
@ -129,6 +136,7 @@
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
width: 100%;
|
||||
user-select: none;
|
||||
@ -137,40 +145,35 @@
|
||||
|
||||
.package::before {
|
||||
content: '';
|
||||
height: 5px;
|
||||
inline-size: 4px;
|
||||
border-radius: 200px;
|
||||
background-color: var(--red);
|
||||
background-color: var(--accent-color);
|
||||
transition: all 0.2s var(--bezier-one);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.selected::before{
|
||||
transition: all 0.4s var(--bezier-one);
|
||||
height: 20px;
|
||||
transition: all 0.3s var(--bezier-one);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
hr {
|
||||
display: block;
|
||||
height: 1px;
|
||||
border: 0;
|
||||
border-top: 1px solid var(--grey-three);
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.package > h3 {
|
||||
color: var(--grey-five);
|
||||
transition: all 0.4s var(--bezier-one);
|
||||
transition: all 0.3s var(--bezier-one);
|
||||
}
|
||||
|
||||
.selected > h3 {
|
||||
color: var(--red);
|
||||
transition: all 0.4s var(--bezier-one);
|
||||
color: var(--accent-color);
|
||||
transition: all 0.3s var(--bezier-one);
|
||||
}
|
||||
|
||||
.package:hover {
|
||||
.package:hover, .selected {
|
||||
background-color: var(--grey-six);
|
||||
}
|
||||
|
||||
.package:hover > h3 {
|
||||
.package:not(.selected):hover > h3 {
|
||||
color: var(--white);
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user