ReVanced/revanced-website
1
0
Fork 0
mirror of https://github.com/revanced/revanced-website.git synced 2025-04-30 06:34:35 +02: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
Show Stats 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; margin: 0;
padding: 0; padding: 0;
line-height: 1.3; line-height: 1.3;
background-color: #0f111a; background-color: var(--bg-color);
} }
html, body{ html, body{
@ -33,14 +33,14 @@ html, body{
:root { :root {
--white: #fff; --white: #fff;
--red: #ff4151; --red: #8bc3f4;
--red-glow: #ff838d40; --bg-color: #181C1E;
--grey-one: #1c1e29; --grey-one: #252B31;
--grey-two: #2b2d3a; --grey-two: #28313b;
--grey-three: #3e404f; --grey-three: #3c4759c3;
--grey-four: #1B1E29; --grey-four: #1B1E29;
--grey-five: #D0D0D0; --grey-five: hsl(208, 30%, 75%);
--grey-six: #a19e9e; --grey-six: #23282da7;
--grey-seven: #535563; --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)
} }
@ -54,13 +54,14 @@ html, body{
h1{ h1{
color: var(--white); color: var(--white);
font-weight: 800; font-weight: 700;
line-height: 0.75em;
} }
h2{ h2{
color: var(--white); color: var(--grey-five);
font-weight: 300; font-weight: 400;
font-size: 1.75rem; font-size: 1.4rem;
} }
h3{ h3{

2
src/app.html
View File

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

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

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

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

@ -9,24 +9,9 @@
h1 { h1 {
color: var(--white); color: var(--white);
font-weight: 800; font-weight: 700;
font-size: 6rem; font-size: 5rem;
letter-spacing: -0.04em; letter-spacing: -0.04em;
line-height: 0.75em; 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> </style>

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

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

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

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

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

@ -1,6 +1,15 @@
<script lang="ts"> <script lang="ts">
import ContributorButton from "../atoms/ContributorButton.svelte"; import ContributorButton from "../atoms/ContributorButton.svelte";
export let peoples: Array<String>; 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> </script>
<div class="social-host"> <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); background-color: var(--grey-one);
margin-top: 2rem; margin-top: 2rem;
padding: 0.75rem 0.75rem; padding: 0.75rem 0.75rem;
border-radius: 25px; border-radius: 16px;
} }
.main { .main {

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

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

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

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

2
src/routes/+page.svelte
View File

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

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

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

1
static/icons/docs.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M8 16h8v2H8zm0-4h8v2H8zm6-10H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z" fill="#FFFFFF"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 286 B

1
static/icons/download.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M11 40q-1.2 0-2.1-.9Q8 38.2 8 37v-7.15h3V37h26v-7.15h3V37q0 1.2-.9 2.1-.9.9-2.1.9Zm13-7.65-9.65-9.65 2.15-2.15 6 6V8h3v18.55l6-6 2.15 2.15Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 220 B

1
static/icons/home.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M11 42q-1.25 0-2.125-.875T8 39V19.5q0-.7.325-1.35.325-.65.875-1.05l13-9.75q.4-.3.85-.45.45-.15.95-.15.5 0 .95.15.45.15.85.45l13 9.75q.55.4.875 1.05.325.65.325 1.35V39q0 1.25-.875 2.125T37 42h-9V28h-8v14Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 284 B

2
static/logo.svg
View File

@ -1,5 +1,5 @@
<svg width="143" height="124" viewBox="0 0 143 124" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="143" height="124" viewBox="0 0 143 124" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M134.5 76.7193C145.833 70.176 145.833 53.8177 134.5 47.2744L58 3.10713C46.6667 -3.43618 32.5 4.74298 32.5 17.8296V33.9954L13.5 23.0257C7.5 19.5616 2.58657e-06 23.8917 2.58657e-06 30.8199L0 93.1738C-2.10389e-07 100.102 7.5 104.432 13.5 100.968L32.5 89.9983V106.164C32.5 119.251 46.6667 127.43 58 120.887L134.5 76.7193ZM32.5 33.9954L32.5 89.9983L67.5 69.7911C73.5 66.327 73.5 57.6667 67.5 54.2026L32.5 33.9954Z" fill="#FF4151"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M134.5 76.7193C145.833 70.176 145.833 53.8177 134.5 47.2744L58 3.10713C46.6667 -3.43618 32.5 4.74298 32.5 17.8296V33.9954L13.5 23.0257C7.5 19.5616 2.58657e-06 23.8917 2.58657e-06 30.8199L0 93.1738C-2.10389e-07 100.102 7.5 104.432 13.5 100.968L32.5 89.9983V106.164C32.5 119.251 46.6667 127.43 58 120.887L134.5 76.7193ZM32.5 33.9954L32.5 89.9983L67.5 69.7911C73.5 66.327 73.5 57.6667 67.5 54.2026L32.5 33.9954Z" fill="#8BC3F5"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M134.5 47.2744C145.833 53.8177 145.833 70.176 134.5 76.7193L58 120.887C46.6667 127.43 32.5 119.251 32.5 106.164V89.9983L67.5 69.7911C73.5 66.327 73.5 57.6667 67.5 54.2026L32.5 33.9954V17.8296C32.5 4.74298 46.6667 -3.43618 58 3.10713L134.5 47.2744Z" fill="#FF6B78"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M134.5 47.2744C145.833 53.8177 145.833 70.176 134.5 76.7193L58 120.887C46.6667 127.43 32.5 119.251 32.5 106.164V89.9983L67.5 69.7911C73.5 66.327 73.5 57.6667 67.5 54.2026L32.5 33.9954V17.8296C32.5 4.74298 46.6667 -3.43618 58 3.10713L134.5 47.2744Z" fill="#FF6B78"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M134.5 47.2744C145.833 53.8177 145.833 70.176 134.5 76.7193L58 120.887C46.6667 127.43 32.5 119.251 32.5 106.164V89.9983L67.5 69.7911C73.5 66.327 73.5 57.6667 67.5 54.2026L32.5 33.9954V17.8296C32.5 4.74298 46.6667 -3.43618 58 3.10713L134.5 47.2744Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M134.5 47.2744C145.833 53.8177 145.833 70.176 134.5 76.7193L58 120.887C46.6667 127.43 32.5 119.251 32.5 106.164V89.9983L67.5 69.7911C73.5 66.327 73.5 57.6667 67.5 54.2026L32.5 33.9954V17.8296C32.5 4.74298 46.6667 -3.43618 58 3.10713L134.5 47.2744Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M134.5 47.2744C145.833 53.8177 145.833 70.176 134.5 76.7193L58 120.887C46.6667 127.43 32.5 119.251 32.5 106.164V89.9983L67.5 69.7911C73.5 66.327 73.5 57.6667 67.5 54.2026L32.5 33.9954V17.8296C32.5 4.74298 46.6667 -3.43618 58 3.10713L134.5 47.2744Z" fill="#FF6B78"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M134.5 47.2744C145.833 53.8177 145.833 70.176 134.5 76.7193L58 120.887C46.6667 127.43 32.5 119.251 32.5 106.164V89.9983L67.5 69.7911C73.5 66.327 73.5 57.6667 67.5 54.2026L32.5 33.9954V17.8296C32.5 4.74298 46.6667 -3.43618 58 3.10713L134.5 47.2744Z" fill="#FF6B78"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB