mirror of
https://github.com/ReVanced/revanced-website.git
synced 2026-01-19 09:13:56 +00:00
buttons work, added social buttons, contrib wip
This commit is contained in:
afnzmn
@@ -32,7 +32,7 @@
|
||||
transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
transition-duration: 0.4s;
|
||||
margin-right: 20px;
|
||||
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.button-primary {
|
||||
|
||||
39
src/lib/components/atoms/ContributorButton.svelte
Normal file
39
src/lib/components/atoms/ContributorButton.svelte
Normal file
@@ -0,0 +1,39 @@
|
||||
<script>
|
||||
export let href = '#';
|
||||
</script>
|
||||
|
||||
|
||||
<button>
|
||||
<a {href}>
|
||||
<slot/>
|
||||
</a>
|
||||
</button>
|
||||
|
||||
<style>
|
||||
a {
|
||||
color: var(--white);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
button {
|
||||
color: var(--white);
|
||||
border-radius: 200px;
|
||||
border: 0;
|
||||
padding: 5px 5px;
|
||||
width:128px;
|
||||
height:128px;
|
||||
max-height: 128px;
|
||||
max-width: 128px;
|
||||
cursor: pointer;
|
||||
background-color: var(--grey-four);
|
||||
font-size: 1.5rem;
|
||||
transform: translateX(-5%);
|
||||
transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
transition-duration: 0.4s;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
transform: translate(-5%, -5%);
|
||||
}
|
||||
</style>
|
||||
@@ -2,14 +2,16 @@
|
||||
|
||||
</script>
|
||||
|
||||
<img class="hero-img" src="/manager.png" alt="Screenshot of ReVanced Manager"/>
|
||||
<div class="hero-img" style ="background-image:url('/manager.png')" alt="Screenshot of ReVanced Manager">afn is not real afn is not real afn is not real afn is not real afn is not real afn is not real afn is not real afn is not real afn is not real afn is not real afn is not real afn is not real afn is not real afn is not real afn is not real afn is not real afn is not real afn is not real afn is not real afn is not real afn is not real afn is not real afn is not real afn is not real afn is not real afn is not real afn is not real afn is not real </div>
|
||||
|
||||
<style>
|
||||
.hero-img {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
width:fit-content;
|
||||
border-radius: 20px;
|
||||
float: right;
|
||||
transform: rotate(3.7deg) translateY(-24%) translateX(-12%);
|
||||
transform: rotate(3.7deg) translateY(-35%) translateX(200%);
|
||||
user-select: none;
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -14,13 +14,19 @@
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin-left: 7x;
|
||||
margin-right: 7px;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
transition-duration: 0.1s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--white);
|
||||
text-decoration: none;
|
||||
font-size: 1.25rem;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
li:hover {
|
||||
|
||||
36
src/lib/components/atoms/SocialButton.svelte
Normal file
36
src/lib/components/atoms/SocialButton.svelte
Normal file
@@ -0,0 +1,36 @@
|
||||
<script>
|
||||
export let src = 'socials/github.svg';
|
||||
export let alt = 'GitHub';
|
||||
export let href = '#';
|
||||
</script>
|
||||
|
||||
|
||||
<button>
|
||||
<a {href}>
|
||||
<img {src} {alt}>
|
||||
</a>
|
||||
</button>
|
||||
|
||||
<style>
|
||||
button {
|
||||
color: var(--white);
|
||||
border-radius: 200px;
|
||||
border: 0;
|
||||
padding: 15px 0px;
|
||||
width:60px;
|
||||
height:60px;
|
||||
cursor: pointer;
|
||||
background-color: var(--grey-four);
|
||||
font-size: 1.5rem;
|
||||
transform: translateX(-5%);
|
||||
transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
transition-duration: 0.4s;
|
||||
user-select: none;
|
||||
margin-right:0.5rem;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
transform: translate(-5%, -5%);
|
||||
}
|
||||
</style>
|
||||
21
src/lib/components/molecules/ContributorHost.svelte
Normal file
21
src/lib/components/molecules/ContributorHost.svelte
Normal file
@@ -0,0 +1,21 @@
|
||||
<script>
|
||||
import SocialButton from "../atoms/SocialButton.svelte";
|
||||
</script>
|
||||
|
||||
<div class="social-host">
|
||||
<SocialButton></SocialButton>
|
||||
<SocialButton></SocialButton>
|
||||
<SocialButton></SocialButton>
|
||||
<SocialButton></SocialButton>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.social-host {
|
||||
width: 100;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
margin-left: 5rem;
|
||||
margin-right: 5rem;
|
||||
}
|
||||
</style>
|
||||
@@ -3,7 +3,7 @@
|
||||
</script>
|
||||
|
||||
<nav>
|
||||
<div class="logo">ReVanced</div>
|
||||
<img class="logo" src="/logo.svg" alt="ReVanced Logo"/>
|
||||
<ul>
|
||||
<Navigation href="/">Home</Navigation>
|
||||
<Navigation href="/download">Download</Navigation>
|
||||
@@ -17,9 +17,14 @@
|
||||
width: 100%;
|
||||
display: flex;
|
||||
padding-top: 1.25rem;
|
||||
padding-right: 4rem;
|
||||
padding-right: 2rem;
|
||||
padding-left: 6rem;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
min-height: 83px;
|
||||
min-height: 90px;
|
||||
}
|
||||
.logo {
|
||||
width: 3rem;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
20
src/lib/components/molecules/SocialHost.svelte
Normal file
20
src/lib/components/molecules/SocialHost.svelte
Normal file
@@ -0,0 +1,20 @@
|
||||
<script>
|
||||
import SocialButton from "../atoms/SocialButton.svelte";
|
||||
</script>
|
||||
|
||||
<div class="social-host">
|
||||
<SocialButton src="socials/github.svg" alt="GitHub" href="https://revanced.app/github"></SocialButton>
|
||||
<SocialButton src="socials/discord.svg" alt="Discord" href="http://revanced.app/discord"></SocialButton>
|
||||
<SocialButton src="socials/reddit.svg" alt="Reddit" href="https://revanced.app/reddit"></SocialButton>
|
||||
<SocialButton src="socials/telegram.svg" alt="Telegram" href="https://revanced.app/telegram"></SocialButton>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.social-host {
|
||||
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
display: inline-block;
|
||||
transform: translateY(380%);
|
||||
}
|
||||
</style>
|
||||
@@ -15,6 +15,10 @@ import NavHost from "$lib/components/molecules/NavHost.svelte";
|
||||
href="https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<meta name="og:title" content="ReVanced"/>
|
||||
<meta name="og:image" itemprop="image" content="embed.png">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="theme-color" content="#0f111a">
|
||||
<title>ReVanced</title>
|
||||
<link rel="stylesheet" href="css/styles.css" />
|
||||
</svelte:head>
|
||||
@@ -51,6 +55,7 @@ import NavHost from "$lib/components/molecules/NavHost.svelte";
|
||||
--grey-one: #1c1e29;
|
||||
--grey-two: #2b2d3a;
|
||||
--grey-three: #3e404f;
|
||||
--grey-four: #1B1E29;
|
||||
}
|
||||
|
||||
:global(::selection) {
|
||||
@@ -88,12 +93,4 @@ import NavHost from "$lib/components/molecules/NavHost.svelte";
|
||||
:global(::-webkit-scrollbar-thumb:hover) {
|
||||
background-color: var(--grey-three);
|
||||
}
|
||||
|
||||
:global(::-webkit-scrollbar-track-piece){
|
||||
display:none;
|
||||
}
|
||||
|
||||
:global(::-webkit-scrollbar-track) {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,11 +2,13 @@
|
||||
import IndexDescription from '$lib/components/organisms/IndexDescription.svelte';
|
||||
import Wave from '$lib/components/atoms/Wave.svelte';
|
||||
import HeroImage from '$lib/components/atoms/HeroImage.svelte';
|
||||
import SocialHost from '$lib/components/molecules/SocialHost.svelte';
|
||||
</script>
|
||||
|
||||
<div class="wrapper">
|
||||
<IndexDescription />
|
||||
<HeroImage />
|
||||
<SocialHost />
|
||||
</div>
|
||||
|
||||
<Wave />
|
||||
|
||||
Reference in New Issue
Block a user