ReVanced/revanced-website
1
0
Fork 0
mirror of https://github.com/revanced/revanced-website.git synced 2025-06-12 21:27:42 +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
12 changed files with 134 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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;

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

@ -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>

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

@ -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>

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

@ -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);

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

@ -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>

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

@ -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);

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

@ -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 {

2
src/lib/documentation.scss
View File

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