mirror of
https://github.com/revanced/revanced-website.git
synced 2025-04-29 22:24:31 +02:00
feat: nicer homescreen ui
This commit is contained in:
afn
parent
508269e52d
commit
abea751e10
25
src/app.css
25
src/app.css
@ -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{
|
||||
|
||||
@ -9,4 +9,6 @@
|
||||
<body>
|
||||
<div>%sveltekit.body%</div>
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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>
|
||||
@ -17,7 +17,7 @@
|
||||
background-color: var(--grey-one);
|
||||
margin-top: 2rem;
|
||||
padding: 0.75rem 0.75rem;
|
||||
border-radius: 25px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.main {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
position: absolute;
|
||||
display: flex;
|
||||
bottom: 2rem;
|
||||
gap: 1.5rem;
|
||||
gap: 1rem;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -9,8 +9,8 @@
|
||||
<IndexDescription />
|
||||
<div id="heroimg"><HeroImage /></div>
|
||||
</div>
|
||||
<SocialHost />
|
||||
</div>
|
||||
<SocialHost />
|
||||
|
||||
<style>
|
||||
.wrappezoid {
|
||||
|
||||
@ -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>
|
||||
|
||||
1
static/icons/docs.svg
Normal file
1
static/icons/docs.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 286 B |
1
static/icons/download.svg
Normal file
1
static/icons/download.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 220 B |
1
static/icons/home.svg
Normal file
1
static/icons/home.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 284 B |
@ -1,5 +1,5 @@
|
||||
<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="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"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
Loading…
x
Reference in New Issue
Block a user