ReVanced/revanced-website
1
0
Fork 0
mirror of https://github.com/ReVanced/revanced-website.git synced 2026-01-26 12:21:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: better documentation styling

Browse Source
This commit is contained in:
afn
2022-11-27 18:22:17 -05:00
parent edd57a00be
commit ac2c6636a4
19 changed files with 460 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app.css
View File

@@ -1,4 +1,4 @@
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&family=Source+Code+Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
box-sizing: inherit;
@@ -34,6 +34,8 @@ body {
}
:root {
--main-font: "Manrope", sans-serif;
--mono-font: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
--white: #fff;
--accent-color: #9fd5ff;
--accent-color-two: hsl(207, 65%, 90%);

56
src/lib/components/atoms/DocsNavNode.svelte
View File

@@ -5,25 +5,51 @@
<!-- Always part of a list -->
<li>
<div class="doc-section">
<a href="/docs/{info.slug}">{info.title}</a>
<div class="doc-section item">
<a href="/docs/{info.slug}"><h5>{info.title}</h5></a>
</div>
</li>
<style>
a {
text-decoration: none;
background-color: inherit;
color: var(--white);
}
.doc-section {
background-color: var(--grey-one);
border-radius: 12px;
padding: 15px 20px;
}
a {
text-decoration: none;
}
li {
padding-bottom: 0.5rem;
}
li {
list-style: none;
}
.item {
padding: 0.6rem 1rem;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.6rem;
width: 100%;
user-select: none;
transition: background-color 0.4s var(--bezier-one);
}
.item h5 {
color: var(--grey-five);
transition: color 0.3s var(--bezier-one);
}
.selected h5 {
color: var(--grey-four);
transition: color 0.3s var(--bezier-one);
}
.selected {
background-color: var(--accent-color);
}
.item:hover:not(.selected) {
background-color: var(--grey-six);
}
.item:not(.selected):hover h5 {
color: var(--white);
}
</style>

20
src/lib/components/atoms/Search.svelte
View File

@@ -1,30 +1,26 @@
<script lang="ts">
export let title: string;
export let searchTerm: string | null;
export let searchTermFiltered: string | null
import { fade } from 'svelte/transition';
import { quintOut } from 'svelte/easing';
// import { onMount } from 'svelte';
// let search: HTMLInputElement;
function clear() {
searchTerm = null;
searchTermFiltered = null;
}
// function handleKeydown(event) {
// if (event.code === 'Slash') {
// search.focus;
// }
// }
</script>
<!-- <svelte:window on:keydown={handleKeydown} /> -->
<div>
<img src="../icons/search.svg" id="search" alt="Search" />
{#if searchTerm}
<img
src="../icons/close.svg"
id="clear"
alt="Close"
on:click={() => (searchTerm = null)}
on:keypress={() => (searchTerm = null)}
alt="Clear"
on:click={clear}
on:keypress={clear}
transition:fade|local={{ easing: quintOut, duration: 250 }}
/>
{/if}

48
src/lib/components/molecules/DocsNavTree.svelte
View File

@@ -1,39 +1,37 @@
<script lang="ts">
import { is_tree } from '$lib/documentation.shared';
import type { DocsTree } from '$lib/documentation.shared';
import { is_tree } from '$lib/documentation.shared';
import type { DocsTree } from '$lib/documentation.shared';
import DocsNavNode from '$lib/components/atoms/DocsNavNode.svelte';
import DocsNavNode from '$lib/components/atoms/DocsNavNode.svelte';
export let tree: DocsTree;
// How deeply nested this is.
export let nested = 0;
export let tree: DocsTree;
// How deeply nested this is.
export let nested = 0;
</script>
{#if nested}
<!-- The index should be part of the `ul` above us. -->
<DocsNavNode info={tree.index} />
<!-- The index should be part of the `ul` above us. -->
<DocsNavNode info={tree.index} />
{/if}
<ul>
{#if !nested}
<!-- There is no `ul` above us, so index should go here instead. -->
<DocsNavNode info={tree.index} />
{/if}
{#if !nested}
<!-- There is no `ul` above us, so index should go here instead. -->
<DocsNavNode info={tree.index} />
{/if}
{#each tree.nodes as node}
{#if is_tree(node)}
<!-- Recursion here is fine. We are not dealing with a tree the size of a linux root file system. -->
<svelte:self tree={node} nested={nested + 1} />
{:else}
<DocsNavNode info={node} />
{/if}
{/each}
{#each tree.nodes as node}
{#if is_tree(node)}
<!-- Recursion here is fine. We are not dealing with a tree the size of a linux root file system. -->
<svelte:self tree={node} nested={nested + 1} />
{:else}
<DocsNavNode info={node} />
{/if}
{/each}
</ul>
<style>
ul {
padding-left: 2rem;
list-style-type: "• ";
color: var(--white);
}
ul {
padding-left: 1rem;
}
</style>

79
src/lib/documentation.scss
View File

@@ -1,29 +1,44 @@
#markup-content {
/* Defaults for text */
color: var(--white);
color: var(--accent-color-two);
font-weight: 300;
font-size: 1rem;
letter-spacing: 0.02rem;
padding: 100px 30px 0px 30px;
line-height: 1.75rem;
letter-spacing: 0.03rem !important;
a {
text-decoration: none;
color: var(--white);
border-bottom: 1.5px solid var(--accent-color);
padding: 0px 5px;
transition: all 0.4s var(--bezier-one);
color: var(--accent-color);
border-bottom: 1.5px solid var(--accent-low-opacity);
padding: 0px ;
}
a:hover {
background-color: var(--accent-color);
border-radius: 6px;
color: var(--grey-four);
}
code {
background-color: var(--grey-one);
border-radius: 8px;
padding: 0.2rem 0.5rem;
font-size: 0.8rem;
font-family: var(--mono-font);
font-weight: 300;
flex-wrap: wrap;
line-height: 1.25rem;
}
pre code {
font-size: 0.75rem;
background-color: var(--grey-six);
border-radius: 4px;
padding: 2px;
white-space: pre;
display: block;
flex-wrap: wrap;
padding: 0.5rem 1rem;
margin: 1rem 0;
}
h5 {
@@ -34,9 +49,45 @@
color: var(--accent-color);
}
h1, h2, h3, h4, h5 {
margin-bottom: 1rem;
}
h1 {
font-size: 2.25rem;
font-weight: 600;
letter-spacing: -0.02rem;
color: var(--accent-color-two);
border-bottom: 1px solid var(--grey-three);
padding-bottom: 1rem;
margin-bottom: 1rem;
}
h2 {
font-size: 1.5rem;
letter-spacing: -0.02rem;
font-weight: 600;
color: var(--accent-color-two);
border-bottom: 1px solid var(--grey-three);
padding-bottom: 1rem;
margin-top: 2rem;
}
h3 {
margin-top: 1rem;
margin-bottom: 0.5rem;
}
li {
margin-left: 1rem;
margin-bottom: 0.5rem;
}
/* Markup processors output this for bold text, but css spec is goofy aah */
strong {
font-weight: bold;
letter-spacing: 0.01rem;
}
ul {

18
src/routes/docs/+layout.svelte
View File

@@ -5,20 +5,28 @@
import { fly } from 'svelte/transition';
import { quintOut } from 'svelte/easing';
import Footer from '$lib/components/molecules/Footer.svelte';
export let data: PageData;
</script>
<section id="doc-section-main" in:fly={{ y: 10, easing: quintOut, duration: 700 }}>
<section id="doc-section-main">
<div class="menu">
<DocsNavTree tree={data.tree} />
</div>
<slot />
</section>
<Footer />
<style lang="scss">
#doc-section-main {
margin-inline: auto;
width: min(90%, 90rem);
margin-top: 8rem;
margin-bottom: 5rem;
}
.menu {
padding: 90px 15px 0px 15px;
display: flex;
flex-direction: column;
gap: 1rem;
@@ -26,9 +34,7 @@
#doc-section-main {
display: grid;
grid-template-columns: 300px 3fr;
height: 100vh;
width: 100%;
grid-template-columns: 320px 3fr;
gap: 3rem;
}
</style>

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

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

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

@@ -21,10 +21,13 @@
const debounce = () => {
clearTimeout(timeout);
timeout = setTimeout(() => {
searchTermFiltered = searchTerm?.replace(/\./g, '').replace(/\s/g, '').replace(/-/g, '').toLowerCase()
searchTermFiltered = searchTerm
?.replace(/\./g, '')
.replace(/\s/g, '')
.replace(/-/g, '')
.toLowerCase();
}, 500);
}
};
function search(patch: Patch) {
function checkPkgName(findTerm: string | boolean, array: any) {
@@ -60,8 +63,8 @@
<main>
<aside in:fly={{ y: 10, easing: quintOut, duration: 750, delay: 100 }}>
<TreeMenu title="Search patches...">
<Search bind:searchTerm title="Search patches" on:keyup={debounce} />
<TreeMenu>
<Search bind:searchTerm bind:searchTermFiltered title="Search patches" on:keyup={debounce} />
<span>
{#each packages as pkg}
<TreeMenuButton bind:current name={pkg} />
@@ -74,7 +77,7 @@
{#each patches as patch}
{#key current || searchTermFiltered}
{#if filterByPackage(current, patch.compatiblePackages) || !current}
{#if search(patch) || !searchTerm}
{#if search(patch) || !searchTermFiltered}
<div in:fly={{ x: 10, easing: quintOut, duration: 750, delay: 100 }}>
<PatchCell bind:current {patch} />
</div>