elias/strudel
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel.git synced 2026-01-24 20:08:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

more styling

Browse Source
This commit is contained in:
Felix Roos 2022-12-20 22:19:30 +01:00
parent 7a19659c9e
commit f64ef32eaa
3 changed files with 20 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
website/src/components/Header/Header.astro
View File

@ -14,11 +14,11 @@ const { currentPage } = Astro.props as Props;
// const lang = getLanguageFromURL(currentPage); // const lang = getLanguageFromURL(currentPage);
--- ---
<nav class="flex justify-between py-2" title="Top Navigation"> <nav class="flex justify-between py-2 items-center h-full" title="Top Navigation">
<!-- <div class="menu-toggle"> <!-- <div class="menu-toggle">
<SidebarToggle client:idle /> <SidebarToggle client:idle />
</div> --> </div> -->
<div class="flex overflow-visible" style="overflow:visible"> <div class="flex overflow-visible items-center" style="overflow:visible">
<a href="/" class="flex items-center text-2xl space-x-2"> <a href="/" class="flex items-center text-2xl space-x-2">
<div>🌀</div> <div>🌀</div>
<h1>{CONFIG.SITE.title ?? 'Documentation'}</h1> <h1>{CONFIG.SITE.title ?? 'Documentation'}</h1>

17
website/src/components/RightSidebar/TableOfContents.tsx
View File

@ -63,19 +63,22 @@ const TableOfContents: FunctionalComponent<{ headings: MarkdownHeading[] }> = ({
const onLinkClick = (e: any) => { const onLinkClick = (e: any) => {
setCurrentID(e.target.getAttribute('href').replace('#', '')); setCurrentID(e.target.getAttribute('href').replace('#', ''));
}; };
const minDepth = 1;
return ( return (
<> <>
<ul ref={toc}> <ul ref={toc}>
{headings {headings
.filter(({ depth }) => depth > 0 && depth < 4) .filter(({ depth }) => depth >= minDepth && depth < 4)
.map((heading) => ( .map((heading) => (
<li <li className={`w-full`}>
className={`border-l-4 border-slate-900 ${['pl-4', 'pl-8', 'pl-12'][heading.depth - 1]} ${ <a
currentID === heading.slug ? 'bg-slate-900' : '' href={`#${heading.slug}`}
}`.trim()} onClick={onLinkClick}
> className={`py-0.5 block cursor-pointer w-full border-l-4 border-gray-900 hover:bg-gray-900 ${
<a href={`#${heading.slug}`} onClick={onLinkClick}> ['pl-4', 'pl-9', 'pl-12'][heading.depth - minDepth]
} ${currentID === heading.slug ? 'bg-gray-900' : ''}`.trim()}
>
{unescape(heading.text)} {unescape(heading.text)}
</a> </a>
</li> </li>

16
website/src/layouts/MainLayout.astro
View File

@ -30,23 +30,23 @@ const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;
</title> </title>
</head> </head>
<body class="h-screen text-gray-50 bg-gradient-to-t from-stone-800 to-gray-800"> <body class="h-screen text-gray-50 bg-gray-800">
<div class="max-w-full m-auto h-full space-y-4 flex flex-col"> <div class="max-w-full m-auto h-full space-y-4 flex flex-col">
<header class="max-w-full px-4"> <header class="max-w-full px-4 fixed h-16 top-0 w-full z-[100]">
<Header currentPage={currentPage} /> <Header currentPage={currentPage} />
</header> </header>
<main class="flex space-x-4 overflow-hidden relative"> <main class="relative pt-16">
<aside title="Site Navigation" class="min-w-[300px] px-4"> <aside title="Site Navigation" class="fixed w-[300px] px-4">
<LeftSidebar currentPage={currentPage} /> <LeftSidebar currentPage={currentPage} />
</aside> </aside>
<div class="h-full grow overflow-auto px-2"> <aside class="w-2xl fixed right-0 h-full overflow-auto pr-8 pl-0 pb-16" title="Table of Contents">
<RightSidebar headings={headings} githubEditUrl={githubEditUrl} />
</aside>
<div class="h-full w-full top-0 pl-[300px] grow overflow-auto px-2">
<PageContent frontmatter={frontmatter} headings={headings} githubEditUrl={githubEditUrl}> <PageContent frontmatter={frontmatter} headings={headings} githubEditUrl={githubEditUrl}>
<slot /> <slot />
</PageContent> </PageContent>
</div> </div>
<aside class="w-2xl flex-none h-full overflow-auto pr-8 pl-0" title="Table of Contents">
<RightSidebar headings={headings} githubEditUrl={githubEditUrl} />
</aside>
</main> </main>
<!-- <Footer path={currentFile} /> --> <!-- <Footer path={currentFile} /> -->
</div> </div>