mirror of
https://github.com/revanced/revanced-website.git
synced 2025-04-29 22:24:31 +02:00
fix: more mobile responsive, tweaked ui
This commit is contained in:
afn
parent
ad08371ed7
commit
9f8f4242a0
12
src/app.css
12
src/app.css
@ -19,7 +19,6 @@ html {
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 1.4;
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
|
||||
@ -38,20 +37,19 @@ body {
|
||||
--white: #fff;
|
||||
--accent-color: #9fd5ff;
|
||||
--accent-color-two: hsl(207, 65%, 90%);
|
||||
--bg-color: hsl(240, 5%, 11%);
|
||||
--bg-color: hsl(240, 2%, 11%);
|
||||
--grey-one: #252b31;
|
||||
--grey-two: #28313b;
|
||||
--grey-three: #373e4d;
|
||||
--grey-four: #182244;
|
||||
--grey-five: hsl(208, 30%, 75%);
|
||||
--grey-six: hsla(223, 14%, 15%, 0.655);
|
||||
--grey-six: hsla(220, 12%, 15%, 0.655);
|
||||
--grey-seven: #535563;
|
||||
--bezier-one: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--grey-six);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
/*-----headings-----*/
|
||||
@ -59,14 +57,16 @@ body {
|
||||
h1 {
|
||||
color: var(--white);
|
||||
font-weight: 700;
|
||||
|
||||
font-size: 1.5rem;
|
||||
color: var(--white);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: var(--grey-five);
|
||||
font-weight: 400;
|
||||
font-size: 1.4rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
|
||||
@ -4,9 +4,10 @@
|
||||
export let href = '#';
|
||||
export let maxWidth = false;
|
||||
export let icon = '';
|
||||
export let target = '';
|
||||
</script>
|
||||
|
||||
<a {href} rel="noreferrer">
|
||||
<a {href} {target}>
|
||||
<div class={type} style="width: {maxWidth ? '100%' : 'max-content'}">
|
||||
<img src="../icons/{icon}.svg" alt={icon} />
|
||||
<slot />
|
||||
@ -21,13 +22,13 @@
|
||||
|
||||
div,
|
||||
.button-secondary {
|
||||
font-size: 1.1rem;
|
||||
height: 60px;
|
||||
min-width: max-content;
|
||||
font-size: 1rem;
|
||||
color: var(--white);
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
border-radius: 16px;
|
||||
padding: 16px 40px;
|
||||
border-radius: 12px;
|
||||
padding: 1rem 1.75rem;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
background-color: var(--grey-two);
|
||||
@ -42,10 +43,11 @@
|
||||
}
|
||||
|
||||
div:hover {
|
||||
transform: translateY(-4%);
|
||||
filter: brightness(90%);
|
||||
filter: brightness(85%);
|
||||
}
|
||||
|
||||
|
||||
|
||||
div,
|
||||
.button-secondary {
|
||||
display: flex;
|
||||
|
||||
@ -2,12 +2,14 @@
|
||||
</script>
|
||||
|
||||
<div class="hero-img">
|
||||
<img src="/manager.png" alt="Screenshot of ReVanced Manager" />
|
||||
<img src="/manager_two.png" alt="Screenshot of ReVanced Manager" />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
img {
|
||||
height: 100%;
|
||||
border-radius: 2rem;
|
||||
|
||||
}
|
||||
.hero-img {
|
||||
overflow: hidden;
|
||||
@ -16,19 +18,21 @@
|
||||
z-index: -1;
|
||||
width: auto;
|
||||
float: right;
|
||||
border-radius: 2rem;
|
||||
transform: rotate(3.7deg);
|
||||
box-shadow: 0 1rem 5rem 0 #0f111ad4;
|
||||
padding: 0.75rem 0.75rem;
|
||||
border-radius: 2.5rem;
|
||||
background-color: var(--grey-two);
|
||||
backdrop-filter: blur(15px);
|
||||
-webkit-backdrop-filter: blur(15px);
|
||||
box-shadow:0 50px 100px -20px rgba(16, 22, 31, 0.25), 0 30px 60px -30px rgba(18, 19, 22, 0.767), inset 0 -2px 20px 0 rgba(20, 21, 23, 0.598);
|
||||
user-select: none;
|
||||
|
||||
}
|
||||
@media (max-width: 1700px) {
|
||||
.hero-img {
|
||||
border-radius: 3vh;
|
||||
position: fixed;
|
||||
height: 90vh;
|
||||
top: 90px;
|
||||
right: 7.5%;
|
||||
transform: rotate(3.7deg) translateY(5%);
|
||||
height: 100vh;
|
||||
top: 115px;
|
||||
right: 6rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
29
src/lib/components/atoms/TerminalWindow.svelte
Normal file
29
src/lib/components/atoms/TerminalWindow.svelte
Normal file
@ -0,0 +1,29 @@
|
||||
<div class="terminal-container">
|
||||
hhh
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.terminal-container {
|
||||
padding: 1rem;
|
||||
height: 500px;
|
||||
width: 700px;
|
||||
background-color: var(--grey-six);
|
||||
position: fixed;
|
||||
z-index: -2;
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
right: 100px;
|
||||
border-radius: 1rem;
|
||||
border: 1px solid var(--grey-three)
|
||||
}
|
||||
|
||||
@media (max-width: 1700px) {
|
||||
.terminal-container {
|
||||
position: fixed;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
top: 115px;
|
||||
right: 6rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -9,7 +9,7 @@
|
||||
<style>
|
||||
svg {
|
||||
position: fixed;
|
||||
z-index: -2;
|
||||
z-index: -999;
|
||||
bottom: 0;
|
||||
height: 35vh;
|
||||
width: 100%;
|
||||
|
||||
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
@ -11,7 +11,7 @@ import { repositories } from "../../../data/api";
|
||||
<h1>
|
||||
<span>Re</span>Vanced
|
||||
</h1>
|
||||
<h6>Copyright © 2022, we are very legal</h6>
|
||||
<h6>Copyright © 2022</h6>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -20,7 +20,7 @@ import { repositories } from "../../../data/api";
|
||||
<h5>Pages</h5>
|
||||
<a href="/"><h6>Home</h6></a>
|
||||
<a href="/download"><h6>Download</h6></a>
|
||||
<a href="/docs"><h6>Docs</h6></a>
|
||||
<!-- <a href="/docs"><h6>Docs</h6></a> -->
|
||||
<a href="/patches"><h6>Patches</h6></a>
|
||||
<a href="/contributors"><h6>Contributors</h6></a>
|
||||
</div>
|
||||
@ -44,7 +44,7 @@ import { repositories } from "../../../data/api";
|
||||
<div class="link-column">
|
||||
<!-- to replace -->
|
||||
<h5>Socials</h5>
|
||||
<a href="/"><h6>Github</h6></a>
|
||||
<a href="/"><h6>GitHub</h6></a>
|
||||
<a href="/"><h6>Discord</h6></a>
|
||||
<a href="/"><h6>Reddit</h6></a>
|
||||
<a href="/"><h6>Twitter</h6></a>
|
||||
@ -59,6 +59,7 @@ import { repositories } from "../../../data/api";
|
||||
margin: 4rem 0 5rem 0;
|
||||
margin-inline: auto;
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
justify-content: space-between;
|
||||
width: min(85%, 90rem);
|
||||
}
|
||||
@ -91,7 +92,8 @@ import { repositories } from "../../../data/api";
|
||||
|
||||
.links-container {
|
||||
display: flex;
|
||||
gap: 4rem;
|
||||
gap: 5rem;
|
||||
|
||||
}
|
||||
|
||||
.link-column {
|
||||
@ -99,4 +101,19 @@ import { repositories } from "../../../data/api";
|
||||
gap: 0.5rem;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
footer {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.links-container {
|
||||
display: grid;
|
||||
gap: 3rem;
|
||||
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -29,7 +29,7 @@
|
||||
<ul>
|
||||
<Navigation href="/">Home</Navigation>
|
||||
<Navigation href="/download">Download</Navigation>
|
||||
<Navigation is_selected={target => target.startsWith("/docs")} href="/docs">Docs</Navigation>
|
||||
<!-- <Navigation is_selected={target => target.startsWith("/docs")} href="/docs">Docs</Navigation> -->
|
||||
<Navigation href="/patches">Patches</Navigation>
|
||||
</ul>
|
||||
</div>
|
||||
@ -116,26 +116,24 @@
|
||||
width: 80px;
|
||||
height: 60px;
|
||||
cursor: pointer;
|
||||
transition: all 0.5s ease-in-out;
|
||||
background: var(--grey-one);
|
||||
border-radius: 3rem;
|
||||
transition: all 0.5s var(--bezier-one);
|
||||
}
|
||||
.menu-btn__burger {
|
||||
width: 30px;
|
||||
height: 3px;
|
||||
background: #fff;
|
||||
border-radius: 5px;
|
||||
transition: all 0.5s ease-in-out;
|
||||
width: 25px;
|
||||
height: 2px;
|
||||
border-radius: 50px;
|
||||
background: var(--grey-five);
|
||||
transition: all 0.5s var(--bezier-one);
|
||||
}
|
||||
.menu-btn__burger::before,
|
||||
.menu-btn__burger::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 3px;
|
||||
background: #fff;
|
||||
border-radius: 5px;
|
||||
transition: all 0.5s ease-in-out;
|
||||
width: 25px;
|
||||
height: 2px;
|
||||
border-radius: 50px;
|
||||
background: var(--grey-five);
|
||||
transition: all 0.5s var(--bezier-one);
|
||||
}
|
||||
.menu-btn__burger::before {
|
||||
transform: translateY(-8px);
|
||||
@ -145,14 +143,14 @@
|
||||
}
|
||||
/* ANIMATION */
|
||||
.menu-btn.open .menu-btn__burger {
|
||||
transform: translateX(-50px);
|
||||
transform: translateX(-20px);
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
.menu-btn.open .menu-btn__burger::before {
|
||||
transform: rotate(45deg) translate(35px, -35px);
|
||||
transform: rotate(45deg) translate(15px, -15px);
|
||||
}
|
||||
.menu-btn.open .menu-btn__burger::after {
|
||||
transform: rotate(-45deg) translate(35px, 35px);
|
||||
transform: rotate(-45deg) translate(15px, 15px);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
import type { CompatiblePackage, Patch } from 'src/data/types';
|
||||
|
||||
export let patch: Patch;
|
||||
export let current: boolean;
|
||||
export let current;
|
||||
const hasPatchOptions = !!patch.options.length;
|
||||
let expanded: boolean = false;
|
||||
</script>
|
||||
@ -38,15 +38,13 @@
|
||||
|
||||
<div class="info-container">
|
||||
{#each patch.compatiblePackages as pkg, i}
|
||||
{#if current === false}
|
||||
<a
|
||||
href="https://play.google.com/store/apps/details?id={pkg.name}"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<h2>📦 {pkg.name}</h2>
|
||||
</a>
|
||||
{/if}
|
||||
<a
|
||||
href="https://play.google.com/store/apps/details?id={pkg.name}"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<h2>📦 {pkg.name}</h2>
|
||||
</a>
|
||||
{/each}
|
||||
<!-- should i hardcode this to get the version of the first package? idk you cant stop me -->
|
||||
{#if patch.compatiblePackages[0].versions.length}
|
||||
@ -83,6 +81,7 @@
|
||||
margin-right: 0.5rem;
|
||||
font-size: 1.25rem;
|
||||
color: var(--accent-color-two);
|
||||
letter-spacing: normal;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@ -103,9 +102,7 @@
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25rem;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-left: -0.2rem;
|
||||
margin-top: 0.5rem;
|
||||
margin: 0.3rem 0rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -125,7 +122,7 @@
|
||||
.patch-container {
|
||||
transition: all 2s var(--bezier-one);
|
||||
background-color: var(--grey-six);
|
||||
padding: 1.5rem;
|
||||
padding: 1.25rem;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
@ -161,6 +158,7 @@
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
/* thanks piknik */
|
||||
.option + .option {
|
||||
border-top: 1px solid var(--grey-three);
|
||||
}
|
||||
|
||||
@ -38,7 +38,4 @@
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* .package-list:has(.loading) {
|
||||
padding-top: 7.5rem;
|
||||
} */
|
||||
</style>
|
||||
|
||||
@ -5,28 +5,28 @@
|
||||
<section class="hero">
|
||||
<div class="hero-text">
|
||||
<h1>
|
||||
<span>Re</span>Vanced
|
||||
Your favourite <br />apps, <span class="flicker">ad</span><span class="blue">vanced.</span>
|
||||
</h1>
|
||||
|
||||
<h2>
|
||||
An extensible framework for building <br />application mods.
|
||||
ReVanced is an extensible framework for building <br /> Android application mods.
|
||||
</h2>
|
||||
|
||||
<div class="hero-buttons">
|
||||
<Button icon="download" href="download" maxWidth="true" kind="primary">Download</Button>
|
||||
<Button icon="docs" href="docs" maxWidth="true">Read The Docs</Button>
|
||||
<Button icon="download" href="download" kind="primary">Download Manager</Button>
|
||||
<Button icon="docs" href="patches">View Patches</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
h2 {
|
||||
margin-top: 1.75rem;
|
||||
margin-top: 1.75\rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding-bottom: 10rem;
|
||||
padding-bottom: 9rem;
|
||||
}
|
||||
|
||||
.hero-text {
|
||||
@ -39,32 +39,52 @@
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
span {
|
||||
.blue {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: var(--white);
|
||||
font-weight: 700;
|
||||
font-size: 5rem;
|
||||
letter-spacing: -0.04em;
|
||||
line-height: 0.75em;
|
||||
@keyframes flicker {
|
||||
0% {
|
||||
color: var(--grey-two);
|
||||
}
|
||||
10% {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
15% {
|
||||
color: var(--grey-two);
|
||||
}
|
||||
35% {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
45% {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
50% {
|
||||
color: var(--grey-two);
|
||||
}
|
||||
52.5% {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
85% {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
100% {
|
||||
color: var(--grey-two);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1919px) {
|
||||
h1 {
|
||||
font-size: 5rem;
|
||||
}
|
||||
.flicker {
|
||||
color: var(--accent-color);
|
||||
/* animation: flicker 2s forwards;
|
||||
animation-timing-function: var(--bezier-one);
|
||||
animation-delay: 1.5s;
|
||||
animation-iteration-count: 1; */
|
||||
}
|
||||
@media screen and (max-width: 1052px) {
|
||||
h1 {
|
||||
font-size: 4.5rem;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
h1 {
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
|
||||
h1 {
|
||||
line-height: 1em;
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@ -73,16 +93,27 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(2.9rem, 10vw, 4rem);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
br {
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
.hero-buttons {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.hero-buttons {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
import Home from '$lib/components/organisms/Home.svelte';
|
||||
import SocialHost from '$lib/components/molecules/SocialHost.svelte';
|
||||
import Wave from '$lib/components/atoms/Wave.svelte';
|
||||
import TerminalWindow from '$lib/components/atoms/TerminalWindow.svelte';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
@ -16,6 +17,7 @@
|
||||
<div class="wrappezoid">
|
||||
<Home />
|
||||
<div id="heroimg"><HeroImage /></div>
|
||||
<!-- <TerminalWindow/> -->
|
||||
</div>
|
||||
</div>
|
||||
<SocialHost />
|
||||
|
||||
@ -49,6 +49,7 @@
|
||||
h2 {
|
||||
font-size: 1rem;
|
||||
color: var(--grey-four);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-container {
|
||||
@ -77,4 +78,10 @@
|
||||
a:hover::after {
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -3,30 +3,29 @@
|
||||
import Button from '$lib/components/atoms/Button.svelte';
|
||||
import Footer from '$lib/components/molecules/Footer.svelte';
|
||||
|
||||
$: manager = $tools["revanced/revanced-manager"];
|
||||
$: manager = $tools['revanced/revanced-manager'];
|
||||
</script>
|
||||
|
||||
<div class="wrapper">
|
||||
<h1>ReVanced Manager</h1>
|
||||
<h1>ReVanced <span>Manager</span></h1>
|
||||
<h6>Patch your favourite apps, on-device.</h6>
|
||||
<Button kind="primary" icon="download" href={manager.assets[0].url}>{manager.version}</Button>
|
||||
<img src="../manager_two.png" alt="Manager Screenshot"/>
|
||||
<Button kind="primary" icon="download" target="_blank" href={manager.assets[0].url}>{manager.version}</Button>
|
||||
<img src="../manager_two.png" alt="Manager Screenshot" />
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
|
||||
<style>
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2.25rem;
|
||||
font-weight: 600;
|
||||
font-size: 3rem;
|
||||
text-align: center;
|
||||
color: var(--accent-color);
|
||||
color: var(--white);
|
||||
|
||||
}
|
||||
|
||||
h6 {
|
||||
@ -34,9 +33,19 @@
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
img {
|
||||
img {
|
||||
margin-top: 2.5rem;
|
||||
margin-bottom: 2.5rem;
|
||||
width: 25rem;
|
||||
height: 50rem;
|
||||
width: auto;
|
||||
padding: 0.75rem 0.75rem;
|
||||
border-radius: 2.5rem;
|
||||
background-color: var(--grey-two);
|
||||
box-shadow:0 50px 100px -20px rgba(16, 22, 31, 0.25), 0 30px 60px -30px rgba(18, 19, 22, 0.767), inset 0 -2px 20px 0 rgba(20, 21, 23, 0.598);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
span {
|
||||
color: var(--accent-color)
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
|
||||
let current: boolean = false;
|
||||
|
||||
function search(findTerm: string | boolean, array: CompatiblePackage[]) {
|
||||
function search(findTerm: string | boolean, array: any) {
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
if (array[i].name === findTerm) {
|
||||
return true;
|
||||
@ -39,10 +39,10 @@
|
||||
</TreeMenu>
|
||||
</aside>
|
||||
|
||||
<div class="patches-container">
|
||||
{#each patches as patch, i}
|
||||
<div class="patches-container" in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
|
||||
{#each patches as patch}
|
||||
{#if search(current, patch.compatiblePackages) || !current}
|
||||
<div in:fly={{ x: 10, easing: quintOut, duration: 750, delay: -(300 * 0.85 ** i) + 300 }}>
|
||||
<div>
|
||||
<PatchCell bind:current {patch} />
|
||||
</div>
|
||||
{/if}
|
||||
@ -54,7 +54,7 @@
|
||||
<style>
|
||||
main {
|
||||
margin-inline: auto;
|
||||
width: min(95%, 100rem);
|
||||
padding: 0 2rem;
|
||||
display: grid;
|
||||
grid-template-columns: 300px 3fr;
|
||||
gap: 1.5rem;
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 745 KiB After Width: | Height: | Size: 145 KiB |
Loading…
x
Reference in New Issue
Block a user