mirror of
https://github.com/revanced/revanced-website.git
synced 2025-05-01 15:14:28 +02:00
feat: mobile view
This commit is contained in:
afn
parent
abea751e10
commit
85dd6b8a0b
10
src/app.css
10
src/app.css
@ -5,6 +5,7 @@
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
}
|
||||
|
||||
html{
|
||||
@ -29,6 +30,7 @@ html, body{
|
||||
.wrapper{
|
||||
margin-inline: auto;
|
||||
width: min(87%, 100rem);
|
||||
margin-top: 7rem;
|
||||
}
|
||||
|
||||
:root {
|
||||
@ -97,12 +99,4 @@ h5{
|
||||
|
||||
::-webkit-scrollbar-thumb:hover{
|
||||
background-color: var(--grey-seven);
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
button,
|
||||
select,
|
||||
a {
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
}
|
||||
@ -8,16 +8,18 @@
|
||||
function handleClick() {
|
||||
location.href = href;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<button class={type} style="font-size: {fontsize};" on:click={handleClick}>
|
||||
<button
|
||||
class={type}
|
||||
style="font-size: {fontsize};"
|
||||
on:click={handleClick}
|
||||
>
|
||||
<img src="icons/{icon}.svg" alt="{icon}"/>
|
||||
<slot/>
|
||||
<slot/>
|
||||
</button>
|
||||
|
||||
<style>
|
||||
|
||||
button,
|
||||
.button-secondary {
|
||||
color: var(--white);
|
||||
@ -40,10 +42,6 @@
|
||||
color: var(--grey-four)
|
||||
}
|
||||
|
||||
.button-primary:hover {
|
||||
box-shadow: 0px 0px 32px 1px var(--red-glow), 0px 0px 32px 1px var(--red-glow);
|
||||
}
|
||||
|
||||
button:hover {
|
||||
transform: translateY(-5%);
|
||||
}
|
||||
@ -51,14 +49,15 @@
|
||||
transform: scale(98%);
|
||||
}
|
||||
|
||||
img {
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
button, .button-secondary {
|
||||
button,
|
||||
.button-secondary {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 0.5rem
|
||||
}
|
||||
|
||||
img {
|
||||
height: 25px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,9 +1,17 @@
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<div class="hero-img"><img height="100%" src="/manager.png" alt="Screenshot of ReVanced Manager" /></div>
|
||||
<div class="hero-img">
|
||||
<img
|
||||
src="/manager.png"
|
||||
alt="Screenshot of ReVanced Manager"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
img {
|
||||
height: 100%;
|
||||
}
|
||||
.hero-img {
|
||||
overflow: hidden;
|
||||
height: 80vh;
|
||||
|
||||
33
src/lib/components/atoms/HeroTitle.svelte
Normal file
33
src/lib/components/atoms/HeroTitle.svelte
Normal file
@ -0,0 +1,33 @@
|
||||
<h1>
|
||||
<span class="redder">Re</span>Vanced
|
||||
</h1>
|
||||
|
||||
<style>
|
||||
.redder {
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: var(--white);
|
||||
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>
|
||||
@ -1,17 +0,0 @@
|
||||
<h1>
|
||||
<span class="redder">Re</span>Vanced
|
||||
</h1>
|
||||
|
||||
<style>
|
||||
.redder {
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: var(--white);
|
||||
font-weight: 700;
|
||||
font-size: 5rem;
|
||||
letter-spacing: -0.04em;
|
||||
line-height: 0.75em;
|
||||
}
|
||||
</style>
|
||||
@ -17,44 +17,42 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="nav-parent">
|
||||
<nav>
|
||||
<a href="/">
|
||||
<div class="logo">
|
||||
<img src="/logo.svg" class="logo-image" alt="ReVanced Logo" />
|
||||
<nav>
|
||||
<a href="/">
|
||||
<div class="logo">
|
||||
<img src="/logo.svg" class="logo-image" alt="ReVanced Logo" />
|
||||
|
||||
{#if $page.url.pathname !== '/'}
|
||||
<h1><span>Re</span>Vanced</h1>
|
||||
{/if}
|
||||
</div>
|
||||
</a>
|
||||
<ul>
|
||||
<Navigation href="/">Home</Navigation>
|
||||
<Navigation href="/download">Download</Navigation>
|
||||
<Navigation href="/docs">Docs</Navigation>
|
||||
<Navigation href="/credits">Credits</Navigation>
|
||||
</ul>
|
||||
<div class="menu-btn" class:open={menuOpen} bind:this={menuBtn}>
|
||||
<div class="menu-btn__burger" />
|
||||
{#if $page.url.pathname !== '/'}
|
||||
<h1><span>Re</span>Vanced</h1>
|
||||
{/if}
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</a>
|
||||
<ul>
|
||||
<Navigation href="/">Home</Navigation>
|
||||
<Navigation href="/download">Download</Navigation>
|
||||
<Navigation href="/docs">Docs</Navigation>
|
||||
<Navigation href="/credits">Credits</Navigation>
|
||||
</ul>
|
||||
<div class="menu-btn" class:open={menuOpen} bind:this={menuBtn}>
|
||||
<div class="menu-btn__burger" />
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
|
||||
.nav-parent {
|
||||
background-color: var(--grey-six);
|
||||
padding: 0 5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
nav {
|
||||
padding: 0% 4% 0% 6%;
|
||||
top: 0;
|
||||
position: fixed;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 70px;
|
||||
height: 70px;
|
||||
width: 100%;
|
||||
background-color: var(--grey-six);
|
||||
backdrop-filter: blur(15px);
|
||||
-webkit-backdrop-filter: blur(15px);
|
||||
}
|
||||
|
||||
ul {
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<script>
|
||||
import Button from '$lib/components/atoms/Button.svelte';
|
||||
import IndexHeroTitle from '../atoms/IndexHeroTitle.svelte';
|
||||
import HeroTitle from '../atoms/HeroTitle.svelte';
|
||||
</script>
|
||||
|
||||
<section class="hero">
|
||||
<div class="hero-text">
|
||||
<!-- <img class="hero-img" src="/manager.png" alt="Screenshot of ReVanced Manager" /> -->
|
||||
<IndexHeroTitle />
|
||||
<HeroTitle />
|
||||
<h2>
|
||||
An extensible framework for building <br />application mods.
|
||||
</h2>
|
||||
@ -23,23 +23,11 @@
|
||||
margin-top: 1.75rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding-bottom: 10rem;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.hero {
|
||||
padding-top: 10rem;
|
||||
padding-bottom: 0;
|
||||
text-align: center;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.hero-buttons {
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-text {
|
||||
align-items: center;
|
||||
}
|
||||
@ -50,8 +38,24 @@
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.hero-text h1 {
|
||||
font-size: 6.5rem;
|
||||
letter-spacing: -0.04em;
|
||||
@media (max-width: 768px) {
|
||||
.hero {
|
||||
padding-bottom: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
br {
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
.hero-buttons {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -1,12 +1,12 @@
|
||||
<script>
|
||||
import HeroImage from '$lib/components/atoms/HeroImage.svelte';
|
||||
import IndexDescription from '$lib/components/organisms/IndexDescription.svelte';
|
||||
import Home from '$lib/components/organisms/Home.svelte';
|
||||
import SocialHost from '$lib/components/molecules/SocialHost.svelte';
|
||||
</script>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="wrappezoid">
|
||||
<IndexDescription />
|
||||
<Home />
|
||||
<div id="heroimg"><HeroImage /></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -14,7 +14,7 @@
|
||||
|
||||
<style>
|
||||
.wrappezoid {
|
||||
height: calc(100vh - 90px);
|
||||
height: calc(100vh - 120px);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
@ -23,7 +23,7 @@
|
||||
}
|
||||
@media (max-width: 1700px) {
|
||||
.wrappezoid {
|
||||
justify-content: space-between;
|
||||
justify-content: space-between;;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1052px) {
|
||||
@ -33,8 +33,10 @@
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.wrappezoid {
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: calc(65vh);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user