ReVanced/revanced-website
1
0
Fork 0
mirror of https://github.com/ReVanced/revanced-website.git synced 2026-01-18 08:43:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: nicer homescreen ui

Browse Source
This commit is contained in:
afn
2022-10-09 23:09:21 -04:00
parent 508269e52d
commit abea751e10
20 changed files with 86 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/app.css
View File

@@ -19,7 +19,7 @@ body{
margin: 0;
padding: 0;
line-height: 1.3;
background-color: #0f111a;
background-color: var(--bg-color);
}
html, body{
@@ -33,14 +33,14 @@ html, body{
:root {
--white: #fff;
--red: #ff4151;
--red-glow: #ff838d40;
--grey-one: #1c1e29;
--grey-two: #2b2d3a;
--grey-three: #3e404f;
--red: #8bc3f4;
--bg-color: #181C1E;
--grey-one: #252B31;
--grey-two: #28313b;
--grey-three: #3c4759c3;
--grey-four: #1B1E29;
--grey-five: #D0D0D0;
--grey-six: #a19e9e;
--grey-five: hsl(208, 30%, 75%);
--grey-six: #23282da7;
--grey-seven: #535563;
--bezier-one: cubic-bezier(0.25, 0.46, 0.45, 0.94)
}
@@ -54,13 +54,14 @@ html, body{
h1{
color: var(--white);
font-weight: 800;
font-weight: 700;
line-height: 0.75em;
}
h2{
color: var(--white);
font-weight: 300;
font-size: 1.75rem;
color: var(--grey-five);
font-weight: 400;
font-size: 1.4rem;
}
h3{

2
src/app.html
View File

@@ -9,4 +9,6 @@
<body>
<div>%sveltekit.body%</div>
</body>
</html>

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

@@ -3,30 +3,32 @@
$: type = 'button-' + kind;
export let href = '#';
export let fontsize = '1.2rem';
export let icon = "";
function handleClick() {
location.href = href;
}
</script>
<a {href}>
<button class={type} style="font-size: {fontsize};">
<slot/>
</button>
</a>
<button class={type} style="font-size: {fontsize};" on:click={handleClick}>
<img src="icons/{icon}.svg" alt="{icon}"/>
<slot/>
</button>
<style>
a {
color: var(--white);
text-decoration: none;
}
button,
.button-secondary {
font-weight: 600;
color: var(--white);
border: 3px solid var(--grey-three);
border-radius: 200px;
text-decoration: none;
font-weight: 600;
border: none;
border-radius: 16px;
padding: 12px 40px;
display: block;
cursor: pointer;
background-color: transparent;
background-color: var(--grey-two);
transition: transform 0.4s var(--bezier-one), box-shadow 0.4s var(--bezier-one);
user-select: none;
}
@@ -35,6 +37,7 @@
border: 3px solid var(--red);
background-color: var(--red);
box-shadow: 0px 0px 32px 1px var(--red-glow);
color: var(--grey-four)
}
.button-primary:hover {
@@ -45,7 +48,17 @@
transform: translateY(-5%);
}
button:active {
transition-duration: 0.1s;
transform: translateY(-3%);
transform: scale(98%);
}
img {
height: 25px;
}
button, .button-secondary {
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem
}
</style>

53
src/lib/components/atoms/DownloadChannel.svelte
View File

@@ -1,53 +0,0 @@
<script>
import { createEventDispatcher } from 'svelte';
export let active = false;
export let href = '#';
const dispatch = createEventDispatcher();
</script>
<a {href}>
<button class:active on:click={() => dispatch('click')} >
<slot />
</button>
</a>
<style>
a {
color: var(--white);
text-decoration: none;
}
button {
font-weight: 300;
font-size: 1.4rem;
height: 55px;
width: 100%;
color: var(--white);
border-radius: 200px;
border: 0;
padding: 12px 40px;
cursor: pointer;
background-color: transparent;
transition: background-color 0.4s var(--bezier-one), box-shadow 0.4s var(--bezier-one);
user-select: none;
}
button.active {
background-color: var(--red);
box-shadow: 0px 0px 32px 1px var(--red-glow);
font-weight: 600;
}
button:hover {
background-color: var(--grey-two);
font-weight: 400;
}
button.active:hover {
background-color: var(--red);
font-weight: 600;
}
</style>

2
src/lib/components/atoms/DownloadSelector.svelte
View File

@@ -24,7 +24,7 @@
<style>
.download-selection {
background-color: var(--grey-two);
border-radius: 15px;
border-radius: 12px;
justify-content: center;
height:100%;
min-width:300px;

19
src/lib/components/atoms/IndexHeroTitle.svelte
View File

@@ -9,24 +9,9 @@
h1 {
color: var(--white);
font-weight: 800;
font-size: 6rem;
font-weight: 700;
font-size: 5rem;
letter-spacing: -0.04em;
line-height: 0.75em;
}
@media screen and (max-width: 1919px) {
h1 {
font-size: 5rem;
}
}
@media screen and (max-width: 1052px) {
h1 {
font-size: 4.5rem;
}
}
@media screen and (max-width: 768px) {
h1 {
font-size: 4rem;
}
}
</style>

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

@@ -13,34 +13,33 @@
<style>
li {
border: var(--grey-six);
width: 140px;
text-align: center;
list-style: none;
display: inline-block;
position: relative;
font-weight: 300;
font-weight: 500;
align-items: center;
border: var(--grey-six);
transition-timing-function: var(--bezier-one);
transition-duration: 0.25s;
padding: 10px 20px;
padding: 11px 30px;
border-radius: 200px;
}
a {
color: var(--white);
color: var(--grey-five);
text-decoration: none;
font-size: 1rem;
user-select: none;
border-radius: 200px;
}
li:hover {
font-weight: 600;
border: 3px solid var(--grey-two);
background-color: var(--grey-one);
}
li.selected {
font-weight: 600;
border: 3px solid var(--red);
background-color: var(--grey-three);
color: var(--red)
}
</style>

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

@@ -21,7 +21,7 @@
cursor: pointer;
border-radius: 200px;
transition: transform 0.4s var(--bezier-one);
background-color: var(--grey-four);
background-color: var(--grey-two);
color: var(--white);
user-select: none;
}

9
src/lib/components/molecules/ContributorHost.svelte
View File

@@ -1,6 +1,15 @@
<script lang="ts">
import ContributorButton from "../atoms/ContributorButton.svelte";
export let peoples: Array<String>;
import { onMount } from 'svelte';
onMount(async () => {
const response = await fetch('https://releases.rvcd.win/contributors');
const json = await response.json();
console.log(json);
});
</script>
<div class="social-host">

34
src/lib/components/molecules/DownloadChannelHost.svelte
View File

@@ -1,34 +0,0 @@
<script>
import DownloadChannel from '../atoms/DownloadChannel.svelte';
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
export let items = ['Stable', 'Development'];
export let activeTab = 'Stable';
$: handleTabChange = (item) => {
activeTab = item;
};
</script>
<div class="download-channel">
{#each items as item}
<DownloadChannel active={item === activeTab}
on:click={handleTabChange(item)}>
{item}
</DownloadChannel>
{/each}
</div>
<style>
.download-channel {
background-color: var(--grey-one);
border-radius: 200px;
padding: 0.5rem 0.5rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap:1rem;
}
</style>

2
src/lib/components/molecules/DownloadSelectorHost.svelte
View File

@@ -17,7 +17,7 @@
background-color: var(--grey-one);
margin-top: 2rem;
padding: 0.75rem 0.75rem;
border-radius: 25px;
border-radius: 16px;
}
.main {

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

@@ -17,7 +17,7 @@
});
</script>
<div class="wrapper">
<div class="nav-parent">
<nav>
<a href="/">
<div class="logo">
@@ -41,12 +41,19 @@
</div>
<style>
.nav-parent {
background-color: var(--grey-six);
padding: 0 5rem;
margin-bottom: 1rem;
}
nav {
top: 0;
display: flex;
align-items: center;
justify-content: space-between;
min-height: 90px;
min-height: 70px;
width: 100%;
}
@@ -56,15 +63,13 @@
align-items: center;
}
.logo {
display: flex;
}
a {
text-decoration: none;
}
.logo-image {
width: 2.9rem;
width: 2.4rem;
height: auto;
cursor: pointer;
}
@@ -73,7 +78,7 @@
margin-left: 1rem;
font-size: 2.4rem;
letter-spacing: -0.04em;
height:90%;
height: 90%;
}
h1 span {

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

@@ -19,7 +19,7 @@
position: absolute;
display: flex;
bottom: 2rem;
gap: 1.5rem;
gap: 1rem;
left: 0;
}

9
src/lib/components/organisms/IndexDescription.svelte
View File

@@ -8,13 +8,12 @@
<!-- <img class="hero-img" src="/manager.png" alt="Screenshot of ReVanced Manager" /> -->
<IndexHeroTitle />
<h2>
An extensible framework for<br />
building application mods.
An extensible framework for building <br />application mods.
</h2>
<div class="hero-buttons">
<Button kind="primary" href="/download" fontsize="1.3rem">Download</Button>
<Button href="/docs" fontsize="1.3rem">Read The Docs</Button>
<Button icon="download" kind="primary" href="download" fontsize="1.2rem">Download</Button>
<Button icon="docs" href="docs" fontsize="1.2rem" >Read The Docs</Button>
</div>
</div>
</section>
@@ -46,9 +45,9 @@
}
.hero-buttons {
gap: 1rem;
display: flex;
user-select: none;
gap: 1rem;
}
.hero-text h1 {

2
src/routes/+page.svelte
View File

@@ -9,8 +9,8 @@
<IndexDescription />
<div id="heroimg"><HeroImage /></div>
</div>
<SocialHost />
</div>
<SocialHost />
<style>
.wrappezoid {

2
src/routes/download/+page.svelte
View File

@@ -1,9 +1,7 @@
<script>
import DownloadChannelHost from '$lib/components/molecules/DownloadChannelHost.svelte';
import DownloadSelectorHost from '$lib/components/molecules/DownloadSelectorHost.svelte';
</script>
<div class="wrapper">
<DownloadChannelHost></DownloadChannelHost>
<DownloadSelectorHost></DownloadSelectorHost>
</div>