ReVanced/revanced-website
1
0
Fork 0
mirror of https://github.com/revanced/revanced-website.git synced 2025-04-30 06:34:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor: make headings more consistent and universal. (#37)

Browse Source 
Resolves #22 
Co-authored-by: afn <hey@afn.lol>
This commit is contained in:
mirgb 2022-11-27 14:02:13 -05:00 committed by GitHub
parent fc0ce3332a
commit edd57a00be
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 134 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/app.css
View File

@ -45,7 +45,7 @@ body {
--grey-four: #182244; --grey-four: #182244;
--grey-five: hsl(208, 30%, 75%); --grey-five: hsl(208, 30%, 75%);
--grey-six: #202126; --grey-six: #202126;
--grey-seven: #18191D; --grey-seven: #18191d;
--bezier-one: cubic-bezier(0.25, 0.46, 0.45, 0.94); --bezier-one: cubic-bezier(0.25, 0.46, 0.45, 0.94);
} }
@ -58,46 +58,48 @@ body {
h1 { h1 {
color: var(--white); color: var(--white);
font-weight: 700; line-height: 1em;
font-size: 1.5rem; font-size: 3rem;
color: var(--white);
font-weight: 700; font-weight: 700;
letter-spacing: -0.04em; letter-spacing: -0.04em;
} }
h2 { h2 {
color: var(--grey-five); color: var(--grey-five);
font-weight: 400; line-height: 1em;
font-size: 1.3rem; font-size: 2.25rem;
letter-spacing: -0.075rem;
font-weight: 600;
} }
h3 { h3 {
color: var(--white); font-size: 1.25rem;
font-weight: 500; color: var(--accent-color-two);
font-size: 1rem; font-weight: 600;
} }
h4 { h4 {
color: var(--white); color: var(--grey-five);
font-weight: 500; font-weight: 400;
font-size: 1.25rem; font-size: 1.1rem;
letter-spacing: 0.02rem; letter-spacing: 0.02rem;
} }
h5 { h5 {
color: var(--accent-color-two); color: var(--grey-five);
font-weight: 300; font-weight: 400;
font-size: 1rem; font-size: 0.9rem;
letter-spacing: 0.02rem; letter-spacing: 0.02rem;
} }
h6 { h6 {
color: var(--grey-five); color: var(--grey-five);
font-weight: 300; font-weight: 500;
font-size: 1rem; font-size: 0.8rem;
letter-spacing: 0.02rem;
} }
/*---------------*/
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 5px; width: 5px;
background-color: transparent; background-color: transparent;

8
src/lib/components/atoms/ContributorPerson.svelte
View File

@ -7,7 +7,7 @@
<a href={url} rel="noreferrer" target="_blank"> <a href={url} rel="noreferrer" target="_blank">
<img src={pfp} {alt} /> <img src={pfp} {alt} />
<h2>{name}</h2> <h5>{name}</h5>
</a> </a>
<style> <style>
@ -25,17 +25,15 @@
border: 1px solid var(--grey-three); border: 1px solid var(--grey-three);
} }
a:hover { a:hover {
background-color: var(--accent-color); background-color: var(--accent-color);
} }
a:hover > h2 { a:hover > h5 {
color: var(--grey-four); color: var(--grey-four);
} }
h2 { h5 {
font-size: 0.95rem;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;

19
src/lib/components/atoms/NavButton.svelte
View File

@ -1,12 +1,14 @@
<script> <script>
import RouterEvents from '../../../data/RouterEvents'; import RouterEvents from '../../../data/RouterEvents';
export let href = '/'; export let href = '/';
export let is_selected = target_url => href === target_url; export let is_selected = (target_url) => href === target_url;
</script> </script>
<a data-sveltekit-prefetch {href}> <a data-sveltekit-prefetch {href}>
<li class:selected={is_selected($RouterEvents.target_url.pathname)}> <li class:selected={is_selected($RouterEvents.target_url.pathname)}>
<h5>
<slot /> <slot />
</h5>
</li> </li>
</a> </a>
@ -17,7 +19,7 @@
list-style: none; list-style: none;
position: relative; position: relative;
font-weight: 500; font-weight: 500;
font-size: 0.9rem; font-size: 1rem;
align-items: center; align-items: center;
border: var(--grey-six); border: var(--grey-six);
transition-timing-function: var(--bezier-one); transition-timing-function: var(--bezier-one);
@ -29,8 +31,9 @@
justify-content: center; justify-content: center;
} }
a { a {
color: var(--grey-five);
text-decoration: none; text-decoration: none;
font-size: 1rem; font-size: 1rem;
user-select: none; user-select: none;
@ -47,6 +50,10 @@
color: var(--accent-color); color: var(--accent-color);
} }
li.selected h5 {
color: var(--accent-color);
}
@media (max-width: 768px) { @media (max-width: 768px) {
li { li {
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
@ -60,10 +67,8 @@
background-color: var(--accent-color); background-color: var(--accent-color);
} }
li.selected { li.selected h5 {
color: var(--grey-four) color: var(--grey-four);
} }
} }
</style> </style>

12
src/lib/components/atoms/TreeMenuButton.svelte
View File

@ -10,7 +10,7 @@
on:click={() => on:click={() =>
(current = current === name ? false : name) && window.scrollTo({ top: 0, behavior: 'smooth' })} (current = current === name ? false : name) && window.scrollTo({ top: 0, behavior: 'smooth' })}
> >
<h3>{name}</h3> <h5>{name}</h5>
</div> </div>
<style> <style>
@ -26,16 +26,12 @@
transition: background-color 0.4s var(--bezier-one); transition: background-color 0.4s var(--bezier-one);
} }
h3 { .package h5 {
font-size: 0.9rem;
}
.package > h3 {
color: var(--grey-five); color: var(--grey-five);
transition: color 0.3s var(--bezier-one); transition: color 0.3s var(--bezier-one);
} }
.selected > h3 { .selected h5 {
color: var(--grey-four); color: var(--grey-four);
transition: color 0.3s var(--bezier-one); transition: color 0.3s var(--bezier-one);
} }
@ -47,7 +43,7 @@
background-color: var(--grey-six); background-color: var(--grey-six);
} }
.package:not(.selected):hover > h3 { .package:not(.selected):hover h5 {
color: var(--white); color: var(--white);
} }
</style> </style>

10
src/lib/components/molecules/ContributorHost.svelte
View File

@ -17,7 +17,7 @@
<div class="title"> <div class="title">
<a href="https://github.com/{repo}" rel="noreferrer" target="_blank"> <a href="https://github.com/{repo}" rel="noreferrer" target="_blank">
<h2>{repo_name}</h2> <h4>{repo_name}</h4>
</a> </a>
</div> </div>
@ -38,9 +38,9 @@
border-radius: 4px; border-radius: 4px;
transform: translateX(-6px); transform: translateX(-6px);
} }
h2 {
h4 {
text-align: center; text-align: center;
font-size: 1.25rem;
} }
hr { hr {
@ -56,14 +56,14 @@
border-radius: 8px; border-radius: 8px;
} }
a > h2 { a > h4 {
transition: all 0.3s var(--bezier-one); transition: all 0.3s var(--bezier-one);
width: max-content; width: max-content;
padding: 0rem 0.4rem; padding: 0rem 0.4rem;
border-radius: 4px; border-radius: 4px;
} }
a:hover > h2 { a:hover > h4 {
width: max-content; width: max-content;
background-color: var(--grey-three); background-color: var(--grey-three);
color: var(--accent-color); color: var(--accent-color);

65
src/lib/components/molecules/Footer.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import { repositories } from "../../../data/api"; import { repositories } from '../../../data/api';
</script> </script>
<hr /> <hr />
@ -8,48 +8,52 @@ import { repositories } from "../../../data/api";
<section class="main-content"> <section class="main-content">
<img src="/logo.svg" class="logo-image" alt="ReVanced Logo" /> <img src="/logo.svg" class="logo-image" alt="ReVanced Logo" />
<div> <div>
<h1> <h2>
<span>Re</span>Vanced <span>Re</span>Vanced
</h1> </h2>
<h6>Copyright © 2022</h6> <h5>Copyright © 2022</h5>
</div> </div>
</section> </section>
<section class="links-container"> <section class="links-container">
<div class="link-column"> <div class="link-column">
<h5>Pages</h5> <h4>Pages</h4>
<a href="/"><h6>Home</h6></a> <a href="/"><h5>Home</h5></a>
<a href="/download"><h6>Download</h6></a> <a href="/download"><h5>Download</h5></a>
<!-- <a href="/docs"><h6>Docs</h6></a> --> <!-- <a href="/docs"><h5>Docs</h5></a> -->
<a href="/patches"><h6>Patches</h6></a> <a href="/patches"><h5>Patches</h5></a>
<a href="/contributors"><h6>Contributors</h6></a> <a href="/contributors"><h5>Contributors</h5></a>
</div> </div>
<div class="link-column"> <div class="link-column">
<h5>Repos</h5> <h4>Repos</h4>
{#each $repositories as { name }} {#each $repositories as { name }}
<a href="https://github.com/{name}" target="_blank" rel="noreferrer"> <a href="https://github.com/{name}" target="_blank" rel="noreferrer">
<div> <div>
<h6> <h5>
{name {name
.replace(/-/g, ' ') .replace(/-/g, ' ')
.replace(/revanced\/revanced/g, '') .replace(/revanced\/revanced/g, '')
.replace(/cli/g, 'CLI') .replace(/cli/g, 'CLI')
.replace(/api/g, 'API') .replace(/api/g, 'API')
.replace(/(?:^|\s)\S/g, (x) => x.toUpperCase())} .replace(/(?:^|\s)\S/g, (x) => x.toUpperCase())}
</h6> </h5>
</div> </div>
</a> </a>
{/each} {/each}
</div> </div>
<div class="link-column"> <div class="link-column">
<!-- to replace --> <!-- to replace -->
<h5>Socials</h5> <h4>Socials</h4>
<a href="https://github.com/revanced" target="_blank" rel="noreferrer"><h6>GitHub</h6></a> <a href="https://github.com/revanced" target="_blank" rel="noreferrer"><h5>GitHub</h5></a>
<a href="https://revanced.app/discord" target="_blank" rel="noreferrer"><h6>Discord</h6></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"><h6>Reddit</h6></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"><h6>Telegram</h6></a> >
<a href="https://twitter.com/revancedapp" target="_blank" rel="noreferrer"><h6>Twitter</h6></a> <a href="https://t.me/app_revanced" target="_blank" rel="noreferrer"><h5>Telegram</h5></a>
<a href="https://www.youtube.com/c/ReVanced" target="_blank" rel="noreferrer"><h6>YouTube</h6></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> </div>
</section> </section>
</footer> </footer>
@ -64,6 +68,16 @@ import { repositories } from "../../../data/api";
width: min(85%, 90rem); width: min(85%, 90rem);
} }
h2 {
color: var(--white);
font-size: 1.5rem;
font-weight: 700;
}
h4 {
color: var(--accent-color-two);
}
.main-content { .main-content {
display: flex; display: flex;
gap: 1rem; gap: 1rem;
@ -73,8 +87,7 @@ import { repositories } from "../../../data/api";
color: var(--accent-color); color: var(--accent-color);
} }
.main-content h1 { .main-content h2 {
letter-spacing: -0.04rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
@ -86,14 +99,9 @@ import { repositories } from "../../../data/api";
text-decoration: none; text-decoration: none;
} }
h6 {
font-size: 0.9rem;
}
.links-container { .links-container {
display: flex; display: flex;
gap: 5rem; gap: 5rem;
} }
.link-column { .link-column {
@ -102,7 +110,6 @@ import { repositories } from "../../../data/api";
flex-direction: column; flex-direction: column;
} }
@media screen and (max-width: 700px) { @media screen and (max-width: 700px) {
footer { footer {
flex-direction: column; flex-direction: column;
@ -112,8 +119,6 @@ import { repositories } from "../../../data/api";
display: grid; display: grid;
gap: 3rem; gap: 3rem;
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
} }
} }
</style> </style>

50
src/lib/components/molecules/PatchCell.svelte
View File

@ -18,7 +18,7 @@
> >
<div class="things"> <div class="things">
<div class="title"> <div class="title">
<h1> <h3>
{patch.name {patch.name
// im sorry // im sorry
.replace(/-/g, ' ') .replace(/-/g, ' ')
@ -28,7 +28,7 @@
.replace(/Sponsorblock/g, 'SponsorBlock') .replace(/Sponsorblock/g, 'SponsorBlock')
.replace(/Tiktok/g, 'TikTok') .replace(/Tiktok/g, 'TikTok')
.replace(/Vr/g, 'VR')} .replace(/Vr/g, 'VR')}
</h1> </h3>
</div> </div>
{#if hasPatchOptions} {#if hasPatchOptions}
@ -36,7 +36,8 @@
{/if} {/if}
</div> </div>
<h4>{patch.description}</h4> <h5>{patch.description}</h5>
<div class="info-container"> <div class="info-container">
{#each patch.compatiblePackages as pkg, i} {#each patch.compatiblePackages as pkg, i}
<a <a
@ -44,20 +45,20 @@
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
> >
<h2>📦 {pkg.name}</h2> <h6 class="boxed">📦 {pkg.name}</h6>
</a> </a>
{/each} {/each}
<!-- should i hardcode this to get the version of the first package? idk you cant stop me --> <!-- should i hardcode this to get the version of the first package? idk you cant stop me -->
{#if patch.compatiblePackages[0].versions.length} {#if patch.compatiblePackages[0].versions.length}
<h2> <h6 class="boxed">
🎯 {patch.compatiblePackages[0].versions.slice(-1)} 🎯 {patch.compatiblePackages[0].versions.slice(-1)}
</h2> </h6>
{/if} {/if}
<h2>🧩 {patch.version}</h2> <h6 class="boxed">🧩 {patch.version}</h6>
{#if hasPatchOptions} {#if hasPatchOptions}
<h2>⚙️ Patch Options</h2> <h6 class="boxed">⚙️ Patch Options</h6>
{/if} {/if}
</div> </div>
@ -66,8 +67,8 @@
<div class="options" transition:slide|local={{ easing: quintOut, duration: 500 }}> <div class="options" transition:slide|local={{ easing: quintOut, duration: 500 }}>
{#each patch.options as option} {#each patch.options as option}
<div class="option"> <div class="option">
<h3>{option.title}</h3> <h5 id="option-title">{option.title}</h5>
<h4>{option.description}</h4> <h5>{option.description}</h5>
</div> </div>
{/each} {/each}
</div> </div>
@ -76,24 +77,22 @@
</div> </div>
<style> <style>
h1 { h3 {
font-weight: 600;
margin-right: 0.5rem; margin-right: 0.5rem;
font-size: 1.25rem;
color: var(--accent-color-two);
letter-spacing: normal;
} }
h2 { h6 {
color: var(--accent-color);
font-size: 0.8rem;
font-weight: 500;
border-radius: 8px; border-radius: 8px;
color: var(--accent-color);
background-color: var(--grey-two); background-color: var(--grey-two);
padding: 0.2rem 0.4rem; padding: 0.2rem 0.4rem;
display: flex; display: flex;
} }
#option-title {
color: var(--accent-color);
}
a { a {
text-decoration: none; text-decoration: none;
} }
@ -106,19 +105,6 @@
width: 100%; 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 { .patch-container {
transition: all 2s var(--bezier-one); transition: all 2s var(--bezier-one);
background-color: var(--grey-six); background-color: var(--grey-six);

24
src/lib/components/organisms/Home.svelte
View File

@ -8,9 +8,9 @@
<span>Re</span>Vanced <span>Re</span>Vanced
</h1> </h1>
<h2> <h4>
ReVanced is an extensible framework for building <br /> Android application mods. ReVanced is an extensible framework for building <br /> Android application mods.
</h2> </h4>
<div class="hero-buttons"> <div class="hero-buttons">
<Button icon="download" href="download" kind="primary">Download Manager</Button> <Button icon="download" href="download" kind="primary">Download Manager</Button>
@ -20,7 +20,14 @@
</section> </section>
<style> <style>
h2 { h1 {
color: var(--white);
line-height: 1em;
font-size: 5rem;
font-weight: 700;
}
h4 {
margin-top: 1rem; margin-top: 1rem;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
@ -43,11 +50,6 @@
color: var(--accent-color); color: var(--accent-color);
} }
h1 {
line-height: 1em;
font-size: 5rem;
}
@media (max-width: 768px) { @media (max-width: 768px) {
.hero { .hero {
padding-bottom: 0; padding-bottom: 0;
@ -55,11 +57,11 @@
} }
h1 { h1 {
font-size: clamp(2.9rem, 10vw, 4rem); font-size: clamp(3rem, 10vw, 4.5rem);
} }
h2 { h4 {
font-size: 1.2rem; font-size: clamp(1rem, 1.2rem, 1.5rem);
} }
br { br {

2
src/lib/documentation.scss
View File

@ -26,7 +26,7 @@
padding: 2px; padding: 2px;
} }
h4 { h5 {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }

15
src/routes/contributors/+page.svelte
View File

@ -17,8 +17,8 @@
<main> <main>
<div class="wrapper"> <div class="wrapper">
<div class="text-container" in:fly={{ y: 10, easing: quintOut, duration: 750 }}> <div class="text-container" in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
<h1>Made possible by the community.</h1> <h2>Made possible by the community.</h2>
<h2>Want to show up here? <span><a href="https://github.com/revanced" target="_blank" rel="noreferrer">Become a contributor</a></span></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>
<div class="contrib-grid"> <div class="contrib-grid">
{#each $repositories as { contributors: contribs, name }} {#each $repositories as { contributors: contribs, name }}
@ -40,14 +40,13 @@
margin-bottom: 3rem; margin-bottom: 3rem;
} }
h1 { h2 {
font-size: 2.25rem;
font-weight: 600;
text-align: center; text-align: center;
color: var(--grey-four); color: var(--grey-four);
margin-bottom: 0.3rem;
} }
h2 {
font-size: 1rem; h4 {
color: var(--grey-four); color: var(--grey-four);
text-align: center; text-align: center;
} }
@ -59,7 +58,7 @@
gap: 0.5rem; gap: 0.5rem;
margin-bottom: 2rem; margin-bottom: 2rem;
background-color: var(--accent-color); background-color: var(--accent-color);
padding: 2rem; padding: 2.4rem;
border-radius: 8px; border-radius: 8px;
} }

9
src/routes/docs/[...slug]/+page.svelte
View File

@ -16,7 +16,14 @@
</svelte:head> </svelte:head>
<div id="markup-content"> <div id="markup-content">
<h1 class="title">{data.title}</h1> <h2 class="title">{data.title}</h2>
{@html data.content} {@html data.content}
</div> </div>
<style>
h2 {
color: var(--white);
line-height: 1.6;
}
</style>

8
src/routes/download/+page.svelte
View File

@ -12,7 +12,7 @@
<div class="wrapper"> <div class="wrapper">
<h1>ReVanced <span>Manager</span></h1> <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> <Button kind="primary" icon="download" target="_blank" href={manager.assets[0].url}>{manager.version}</Button>
<div class="screenshot"> <div class="screenshot">
<Picture data={manager_screenshot} alt="Manager Screenshot" /> <Picture data={manager_screenshot} alt="Manager Screenshot" />
@ -27,14 +27,14 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
h1 { h1 {
font-size: 3rem;
text-align: center; text-align: center;
color: var(--white); color: var(--white);
margin-bottom: 0.5rem;
} }
h6 { h4 {
text-align: center; text-align: center;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }