LukeParke/website
1
0
Fork 0
mirror of https://github.com/LukeHagar/website.git synced 2025-12-06 12:57:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

consistent table of contents

Browse Source
This commit is contained in:
Jesse Winton
2025-03-17 10:48:45 -04:00
parent 661368db94
commit bb98d5e270
1 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/lib/components/blog/table-of-contents.svelte
View File

@@ -9,21 +9,21 @@
export let toc: Array<TocItem> = []; export let toc: Array<TocItem> = [];
</script> </script>
<nav class="sticky top-32 col-span-3 -ml-4 hidden h-[800px] lg:block"> <nav class="sticky top-32 col-span-3 mt-2 -ml-4 hidden h-[800px] flex-col gap-6 lg:flex">
<span class="text-micro tracking-loose text-primary pl-8 uppercase">Table of Contents</span> <span class="text-micro text-primary ps-6 uppercase tracking-tighter">Table of Contents</span>
<div class="relative"> <div class="relative">
<ul <ul
class="border-smooth mask mt-11 flex max-h-[600px] flex-col gap-7 overflow-scroll border-b pb-11 [scrollbar-width:none]" class="border-smooth mask text-caption flex max-h-[600px] flex-col gap-4 overflow-scroll border-b pb-11 [scrollbar-width:none]"
> >
{#each toc as parent (parent.href)} {#each toc as parent (parent.href)}
<li <li
class={classNames( class={classNames(
parent.selected ? 'text-primary' : 'text-secondary', parent.selected ? 'text-primary' : 'text-secondary',
'relative pl-7 transition-colors', 'relative ps-6 transition-colors',
'before:bg-primary before:absolute before:top-0 before:left-0 before:h-6 before:w-px before:rounded-full before:opacity-0 before:transition-opacity', 'before:bg-greyscale-300 before:absolute before:top-0 before:left-0 before:h-6 before:w-px before:rounded-full before:opacity-0 before:transition-opacity',
{ {
'font-medium': parent.level && parent.level === 1, 'font-medium': parent.level && parent.level === 1,
'pl-11': parent.level && parent.level === 2, 'ps-6': parent.level && parent.level === 2,
'pl-16': parent.level && parent.level >= 3, 'pl-16': parent.level && parent.level >= 3,
'before:opacity-100': parent.selected 'before:opacity-100': parent.selected
} }