mirror of
https://github.com/ReVanced/revanced-website.git
synced 2026-01-27 21:01:03 +00: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
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user