elias/strudel
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel.git synced 2026-01-11 21:58:37 +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);
---
<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">
<SidebarToggle client:idle />
</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">
<div>🌀</div>
<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) => {
setCurrentID(e.target.getAttribute('href').replace('#', ''));
};
const minDepth = 1;
return (
<>
<ul ref={toc}>
{headings
.filter(({ depth }) => depth > 0 && depth < 4)
.filter(({ depth }) => depth >= minDepth && depth < 4)
.map((heading) => (
<li
className={`border-l-4 border-slate-900 ${['pl-4', 'pl-8', 'pl-12'][heading.depth - 1]} ${
currentID === heading.slug ? 'bg-slate-900' : ''
}`.trim()}
>
<a href={`#${heading.slug}`} onClick={onLinkClick}>
<li className={`w-full`}>
<a
href={`#${heading.slug}`}
onClick={onLinkClick}
className={`py-0.5 block cursor-pointer w-full border-l-4 border-gray-900 hover:bg-gray-900 ${
['pl-4', 'pl-9', 'pl-12'][heading.depth - minDepth]
} ${currentID === heading.slug ? 'bg-gray-900' : ''}`.trim()}
>
{unescape(heading.text)}
</a>
</li>

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

@ -30,23 +30,23 @@ const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;
</title>
</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">
<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>
<main class="flex space-x-4 overflow-hidden relative">
<aside title="Site Navigation" class="min-w-[300px] px-4">
<main class="relative pt-16">
<aside title="Site Navigation" class="fixed w-[300px] px-4">
<LeftSidebar currentPage={currentPage} />
</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}>
<slot />
</PageContent>
</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>
<!-- <Footer path={currentFile} /> -->
</div>