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

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

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 {