kudzues/component-party
1
0
Fork 0
mirror of https://github.com/lainbo/component-party.git synced 2026-04-05 13:09:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

ux: add sticky snippet titles

Browse Source
This commit is contained in:
Mathieu Schimmerling
2023-07-05 05:24:25 +07:00
parent 8d3edfc107
commit b48d9986d1
2 changed files with 15 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@@ -53,10 +53,14 @@
font-display: swap; font-display: swap;
} }
:root {
--bg-color: rgb(17 24 39);
}
html { html {
font-family: "Mona Sans" !important; font-family: "Mona Sans" !important;
/* bg-gray-900 */ /* bg-gray-900 */
background-color: rgb(17 24 39); background-color: var(--bg-color);
color: #fff; color: #fff;
} }
</style> </style>

13
src/App.svelte
View File

@@ -128,7 +128,7 @@
<Aside /> <Aside />
<div class="pb-8 w-10 grow"> <div class="pb-8 w-10 grow">
<div <div
class="flex px-6 lg:px-20 py-2 sticky top-0 z-10 w-full backdrop-blur bg-gray-900/80 border-b border-gray-700 whitespace-nowrap overflow-x-auto" class="flex px-6 lg:px-20 py-2 sticky top-0 z-20 w-full backdrop-blur bg-gray-900/80 border-b border-gray-700 whitespace-nowrap overflow-x-auto"
> >
{#each frameworks as framework (framework.id)} {#each frameworks as framework (framework.id)}
<button <button
@@ -146,7 +146,10 @@
{/each} {/each}
</div> </div>
<main id="main-content" class="px-6 md:px-14 lg:px-20 max-w-full pt-10"> <main
id="main-content"
class="relative px-6 md:px-14 lg:px-20 max-w-full pt-10"
>
<div> <div>
{#if frameworkIdsSelected.size === 0} {#if frameworkIdsSelected.size === 0}
<div class="space-y-4"> <div class="space-y-4">
@@ -188,7 +191,11 @@
"." + "." +
snippet.snippetId} snippet.snippetId}
> >
<h2 id={snippet.snippetId} class="header-anchor"> <!-- bg-[var(--bg-color)] -->
<h2
id={snippet.snippetId}
class="header-anchor sticky py-2 top-[2.9531rem] z-10 bg-[var(--bg-color)]"
>
{snippet.title} {snippet.title}
<a <a
href={"#" + snippet.snippetId} href={"#" + snippet.snippetId}