mirror of
https://github.com/revanced/revanced-website.git
synced 2025-04-29 22:24:31 +02:00
refactor: make headings more consistent and universal. (#37)
Resolves #22 Co-authored-by: afn <hey@afn.lol>
This commit is contained in:
mirgb
GitHub
parent
fc0ce3332a
commit
edd57a00be
42
src/app.css
42
src/app.css
@ -45,59 +45,61 @@ body {
|
||||
--grey-four: #182244;
|
||||
--grey-five: hsl(208, 30%, 75%);
|
||||
--grey-six: #202126;
|
||||
--grey-seven: #18191D;
|
||||
--grey-seven: #18191d;
|
||||
--bezier-one: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: var(--accent-low-opacity);
|
||||
color: var(--accent-color);
|
||||
background-color: var(--accent-low-opacity);
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
/*-----headings-----*/
|
||||
|
||||
h1 {
|
||||
color: var(--white);
|
||||
font-weight: 700;
|
||||
font-size: 1.5rem;
|
||||
color: var(--white);
|
||||
line-height: 1em;
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: var(--grey-five);
|
||||
font-weight: 400;
|
||||
font-size: 1.3rem;
|
||||
line-height: 1em;
|
||||
font-size: 2.25rem;
|
||||
letter-spacing: -0.075rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: var(--white);
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
font-size: 1.25rem;
|
||||
color: var(--accent-color-two);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: var(--white);
|
||||
font-weight: 500;
|
||||
font-size: 1.25rem;
|
||||
color: var(--grey-five);
|
||||
font-weight: 400;
|
||||
font-size: 1.1rem;
|
||||
letter-spacing: 0.02rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
color: var(--accent-color-two);
|
||||
font-weight: 300;
|
||||
font-size: 1rem;
|
||||
color: var(--grey-five);
|
||||
font-weight: 400;
|
||||
font-size: 0.9rem;
|
||||
letter-spacing: 0.02rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
color: var(--grey-five);
|
||||
font-weight: 300;
|
||||
font-size: 1rem;
|
||||
letter-spacing: 0.02rem;
|
||||
font-weight: 500;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
/*---------------*/
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
background-color: transparent;
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
|
||||
<a href={url} rel="noreferrer" target="_blank">
|
||||
<img src={pfp} {alt} />
|
||||
<h2>{name}</h2>
|
||||
<h5>{name}</h5>
|
||||
</a>
|
||||
|
||||
<style>
|
||||
@ -25,17 +25,15 @@
|
||||
border: 1px solid var(--grey-three);
|
||||
}
|
||||
|
||||
|
||||
a:hover {
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
|
||||
a:hover > h2 {
|
||||
a:hover > h5 {
|
||||
color: var(--grey-four);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 0.95rem;
|
||||
h5 {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
@ -1,12 +1,14 @@
|
||||
<script>
|
||||
import RouterEvents from '../../../data/RouterEvents';
|
||||
import RouterEvents from '../../../data/RouterEvents';
|
||||
export let href = '/';
|
||||
export let is_selected = target_url => href === target_url;
|
||||
export let is_selected = (target_url) => href === target_url;
|
||||
</script>
|
||||
|
||||
<a data-sveltekit-prefetch {href}>
|
||||
<li class:selected={is_selected($RouterEvents.target_url.pathname)}>
|
||||
<slot />
|
||||
<h5>
|
||||
<slot />
|
||||
</h5>
|
||||
</li>
|
||||
</a>
|
||||
|
||||
@ -17,7 +19,7 @@
|
||||
list-style: none;
|
||||
position: relative;
|
||||
font-weight: 500;
|
||||
font-size: 0.9rem;
|
||||
font-size: 1rem;
|
||||
align-items: center;
|
||||
border: var(--grey-six);
|
||||
transition-timing-function: var(--bezier-one);
|
||||
@ -29,8 +31,9 @@
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
a {
|
||||
color: var(--grey-five);
|
||||
text-decoration: none;
|
||||
font-size: 1rem;
|
||||
user-select: none;
|
||||
@ -47,6 +50,10 @@
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
li.selected h5 {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
li {
|
||||
padding: 1rem 1.5rem;
|
||||
@ -60,10 +67,8 @@
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
|
||||
li.selected {
|
||||
color: var(--grey-four)
|
||||
li.selected h5 {
|
||||
color: var(--grey-four);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
on:click={() =>
|
||||
(current = current === name ? false : name) && window.scrollTo({ top: 0, behavior: 'smooth' })}
|
||||
>
|
||||
<h3>{name}</h3>
|
||||
<h5>{name}</h5>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@ -26,16 +26,12 @@
|
||||
transition: background-color 0.4s var(--bezier-one);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.package > h3 {
|
||||
.package h5 {
|
||||
color: var(--grey-five);
|
||||
transition: color 0.3s var(--bezier-one);
|
||||
}
|
||||
|
||||
.selected > h3 {
|
||||
.selected h5 {
|
||||
color: var(--grey-four);
|
||||
transition: color 0.3s var(--bezier-one);
|
||||
}
|
||||
@ -47,7 +43,7 @@
|
||||
background-color: var(--grey-six);
|
||||
}
|
||||
|
||||
.package:not(.selected):hover > h3 {
|
||||
.package:not(.selected):hover h5 {
|
||||
color: var(--white);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
<div class="title">
|
||||
<a href="https://github.com/{repo}" rel="noreferrer" target="_blank">
|
||||
<h2>{repo_name}</h2>
|
||||
<h4>{repo_name}</h4>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@ -38,9 +38,9 @@
|
||||
border-radius: 4px;
|
||||
transform: translateX(-6px);
|
||||
}
|
||||
h2 {
|
||||
|
||||
h4 {
|
||||
text-align: center;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
hr {
|
||||
@ -56,14 +56,14 @@
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
a > h2 {
|
||||
a > h4 {
|
||||
transition: all 0.3s var(--bezier-one);
|
||||
width: max-content;
|
||||
padding: 0rem 0.4rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
a:hover > h2 {
|
||||
a:hover > h4 {
|
||||
width: max-content;
|
||||
background-color: var(--grey-three);
|
||||
color: var(--accent-color);
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { repositories } from "../../../data/api";
|
||||
import { repositories } from '../../../data/api';
|
||||
</script>
|
||||
|
||||
<hr />
|
||||
@ -8,48 +8,52 @@ import { repositories } from "../../../data/api";
|
||||
<section class="main-content">
|
||||
<img src="/logo.svg" class="logo-image" alt="ReVanced Logo" />
|
||||
<div>
|
||||
<h1>
|
||||
<h2>
|
||||
<span>Re</span>Vanced
|
||||
</h1>
|
||||
<h6>Copyright © 2022</h6>
|
||||
</h2>
|
||||
<h5>Copyright © 2022</h5>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="links-container">
|
||||
<div class="link-column">
|
||||
<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="/patches"><h6>Patches</h6></a>
|
||||
<a href="/contributors"><h6>Contributors</h6></a>
|
||||
<h4>Pages</h4>
|
||||
<a href="/"><h5>Home</h5></a>
|
||||
<a href="/download"><h5>Download</h5></a>
|
||||
<!-- <a href="/docs"><h5>Docs</h5></a> -->
|
||||
<a href="/patches"><h5>Patches</h5></a>
|
||||
<a href="/contributors"><h5>Contributors</h5></a>
|
||||
</div>
|
||||
<div class="link-column">
|
||||
<h5>Repos</h5>
|
||||
<h4>Repos</h4>
|
||||
{#each $repositories as { name }}
|
||||
<a href="https://github.com/{name}" target="_blank" rel="noreferrer">
|
||||
<div>
|
||||
<h6>
|
||||
<h5>
|
||||
{name
|
||||
.replace(/-/g, ' ')
|
||||
.replace(/revanced\/revanced/g, '')
|
||||
.replace(/cli/g, 'CLI')
|
||||
.replace(/api/g, 'API')
|
||||
.replace(/(?:^|\s)\S/g, (x) => x.toUpperCase())}
|
||||
</h6>
|
||||
</h5>
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="link-column">
|
||||
<!-- to replace -->
|
||||
<h5>Socials</h5>
|
||||
<a href="https://github.com/revanced" target="_blank" rel="noreferrer"><h6>GitHub</h6></a>
|
||||
<a href="https://revanced.app/discord" target="_blank" rel="noreferrer"><h6>Discord</h6></a>
|
||||
<a href="https://reddit.com/r/revancedapp" target="_blank" rel="noreferrer"><h6>Reddit</h6></a>
|
||||
<a href="https://t.me/app_revanced" target="_blank" rel="noreferrer"><h6>Telegram</h6></a>
|
||||
<a href="https://twitter.com/revancedapp" target="_blank" rel="noreferrer"><h6>Twitter</h6></a>
|
||||
<a href="https://www.youtube.com/c/ReVanced" target="_blank" rel="noreferrer"><h6>YouTube</h6></a>
|
||||
<h4>Socials</h4>
|
||||
<a href="https://github.com/revanced" target="_blank" rel="noreferrer"><h5>GitHub</h5></a>
|
||||
<a href="https://revanced.app/discord" target="_blank" rel="noreferrer"><h5>Discord</h5></a>
|
||||
<a href="https://reddit.com/r/revancedapp" target="_blank" rel="noreferrer"><h5>Reddit</h5></a
|
||||
>
|
||||
<a href="https://t.me/app_revanced" target="_blank" rel="noreferrer"><h5>Telegram</h5></a>
|
||||
<a href="https://twitter.com/revancedapp" target="_blank" rel="noreferrer"><h5>Twitter</h5></a
|
||||
>
|
||||
<a href="https://www.youtube.com/c/ReVanced" target="_blank" rel="noreferrer"
|
||||
><h5>YouTube</h5></a
|
||||
>
|
||||
</div>
|
||||
</section>
|
||||
</footer>
|
||||
@ -64,6 +68,16 @@ import { repositories } from "../../../data/api";
|
||||
width: min(85%, 90rem);
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: var(--white);
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: var(--accent-color-two);
|
||||
}
|
||||
|
||||
.main-content {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
@ -73,8 +87,7 @@ import { repositories } from "../../../data/api";
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.main-content h1 {
|
||||
letter-spacing: -0.04rem;
|
||||
.main-content h2 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
@ -86,14 +99,9 @@ import { repositories } from "../../../data/api";
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.links-container {
|
||||
display: flex;
|
||||
gap: 5rem;
|
||||
|
||||
}
|
||||
|
||||
.link-column {
|
||||
@ -102,7 +110,6 @@ import { repositories } from "../../../data/api";
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
footer {
|
||||
flex-direction: column;
|
||||
@ -112,8 +119,6 @@ import { repositories } from "../../../data/api";
|
||||
display: grid;
|
||||
gap: 3rem;
|
||||
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
>
|
||||
<div class="things">
|
||||
<div class="title">
|
||||
<h1>
|
||||
<h3>
|
||||
{patch.name
|
||||
// im sorry
|
||||
.replace(/-/g, ' ')
|
||||
@ -28,7 +28,7 @@
|
||||
.replace(/Sponsorblock/g, 'SponsorBlock')
|
||||
.replace(/Tiktok/g, 'TikTok')
|
||||
.replace(/Vr/g, 'VR')}
|
||||
</h1>
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{#if hasPatchOptions}
|
||||
@ -36,7 +36,8 @@
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<h4>{patch.description}</h4>
|
||||
<h5>{patch.description}</h5>
|
||||
|
||||
<div class="info-container">
|
||||
{#each patch.compatiblePackages as pkg, i}
|
||||
<a
|
||||
@ -44,20 +45,20 @@
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<h2>📦 {pkg.name}</h2>
|
||||
<h6 class="boxed">📦 {pkg.name}</h6>
|
||||
</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}
|
||||
<h2>
|
||||
<h6 class="boxed">
|
||||
🎯 {patch.compatiblePackages[0].versions.slice(-1)}
|
||||
</h2>
|
||||
</h6>
|
||||
{/if}
|
||||
|
||||
<h2>🧩 {patch.version}</h2>
|
||||
<h6 class="boxed">🧩 {patch.version}</h6>
|
||||
|
||||
{#if hasPatchOptions}
|
||||
<h2>⚙️ Patch Options</h2>
|
||||
<h6 class="boxed">⚙️ Patch Options</h6>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@ -66,8 +67,8 @@
|
||||
<div class="options" transition:slide|local={{ easing: quintOut, duration: 500 }}>
|
||||
{#each patch.options as option}
|
||||
<div class="option">
|
||||
<h3>{option.title}</h3>
|
||||
<h4>{option.description}</h4>
|
||||
<h5 id="option-title">{option.title}</h5>
|
||||
<h5>{option.description}</h5>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
@ -76,24 +77,22 @@
|
||||
</div>
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
font-weight: 600;
|
||||
h3 {
|
||||
margin-right: 0.5rem;
|
||||
font-size: 1.25rem;
|
||||
color: var(--accent-color-two);
|
||||
letter-spacing: normal;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: var(--accent-color);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
h6 {
|
||||
border-radius: 8px;
|
||||
color: var(--accent-color);
|
||||
background-color: var(--grey-two);
|
||||
padding: 0.2rem 0.4rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#option-title {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -106,19 +105,6 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: var(--accent-color);
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.1rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: var(--grey-five);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.patch-container {
|
||||
transition: all 2s var(--bezier-one);
|
||||
background-color: var(--grey-six);
|
||||
|
||||
@ -8,9 +8,9 @@
|
||||
<span>Re</span>Vanced
|
||||
</h1>
|
||||
|
||||
<h2>
|
||||
<h4>
|
||||
ReVanced is an extensible framework for building <br /> Android application mods.
|
||||
</h2>
|
||||
</h4>
|
||||
|
||||
<div class="hero-buttons">
|
||||
<Button icon="download" href="download" kind="primary">Download Manager</Button>
|
||||
@ -20,7 +20,14 @@
|
||||
</section>
|
||||
|
||||
<style>
|
||||
h2 {
|
||||
h1 {
|
||||
color: var(--white);
|
||||
line-height: 1em;
|
||||
font-size: 5rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
@ -43,11 +50,6 @@
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
h1 {
|
||||
line-height: 1em;
|
||||
font-size: 5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero {
|
||||
padding-bottom: 0;
|
||||
@ -55,11 +57,11 @@
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(2.9rem, 10vw, 4rem);
|
||||
font-size: clamp(3rem, 10vw, 4.5rem);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.2rem;
|
||||
h4 {
|
||||
font-size: clamp(1rem, 1.2rem, 1.5rem);
|
||||
}
|
||||
|
||||
br {
|
||||
|
||||
@ -26,7 +26,7 @@
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
h5 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
|
||||
@ -17,8 +17,8 @@
|
||||
<main>
|
||||
<div class="wrapper">
|
||||
<div class="text-container" in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
|
||||
<h1>Made possible by the community.</h1>
|
||||
<h2>Want to show up here? <span><a href="https://github.com/revanced" target="_blank" rel="noreferrer">Become a contributor</a></span></h2>
|
||||
<h2>Made possible by the community.</h2>
|
||||
<h4>Want to show up here? <span><a href="https://github.com/revanced" target="_blank" rel="noreferrer">Become a contributor</a></span></h4>
|
||||
</div>
|
||||
<div class="contrib-grid">
|
||||
{#each $repositories as { contributors: contribs, name }}
|
||||
@ -40,14 +40,13 @@
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.25rem;
|
||||
font-weight: 600;
|
||||
h2 {
|
||||
text-align: center;
|
||||
color: var(--grey-four);
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1rem;
|
||||
|
||||
h4 {
|
||||
color: var(--grey-four);
|
||||
text-align: center;
|
||||
}
|
||||
@ -59,7 +58,7 @@
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 2rem;
|
||||
background-color: var(--accent-color);
|
||||
padding: 2rem;
|
||||
padding: 2.4rem;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
|
||||
@ -16,7 +16,14 @@
|
||||
</svelte:head>
|
||||
|
||||
<div id="markup-content">
|
||||
<h1 class="title">{data.title}</h1>
|
||||
<h2 class="title">{data.title}</h2>
|
||||
|
||||
{@html data.content}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
h2 {
|
||||
color: var(--white);
|
||||
line-height: 1.6;
|
||||
}
|
||||
</style>
|
||||
@ -12,7 +12,7 @@
|
||||
|
||||
<div class="wrapper">
|
||||
<h1>ReVanced <span>Manager</span></h1>
|
||||
<h6>Patch your favourite apps, on-device.</h6>
|
||||
<h4>Patch your favourite apps, on-device.</h4>
|
||||
<Button kind="primary" icon="download" target="_blank" href={manager.assets[0].url}>{manager.version}</Button>
|
||||
<div class="screenshot">
|
||||
<Picture data={manager_screenshot} alt="Manager Screenshot" />
|
||||
@ -27,14 +27,14 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
text-align: center;
|
||||
color: var(--white);
|
||||
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
h4 {
|
||||
text-align: center;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user