youwen5/site
1
0
Fork 0
mirror of https://github.com/youwen5/site.git synced 2024-11-24 17:33:51 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: correctly space the items on blog for xl screen

Browse source
This commit is contained in:
Youwen Wu 2024-05-05 22:48:27 -07:00
parent bb424d0170
commit 19c15ad33a
Signed by: youwen5
GPG key ID: 865658ED1FE61EC3
2 changed files with 9 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/lib/styles/markdown.css
View file

@ -162,6 +162,6 @@
height: 1em; height: 1em;
} }
.hljs { .hljs {
@apply my-4 rounded-xl shadow-lg overflow-x-auto max-w-3xl 2xl:max-w-5xl; @apply my-4 rounded-xl shadow-lg overflow-x-auto;
} }
} }

16
src/routes/blog/[...slug]/+page.svelte
View file

@ -34,16 +34,16 @@
<TocHeader {tocStore} placeholder="On this page" /> <TocHeader {tocStore} placeholder="On this page" />
<div class="max-w-3xl 2xl:max-w-3xl px-4 xl:px-0 xl:mx-auto mt-14"> <div class="mx-auto px-4 mt-14 grid grid-cols-4">
<div class="flex-grow basis-3/4 xl:basis-2/4 flex-shrink"> <div class="col-span-1" />
<div class="col-span-2">
<ArticleHeader {doc} /> <ArticleHeader {doc} />
</div> </div>
</div> <div class="col-span-1" />
<div class="lg:flex mx-auto px-4"> <div class="col-span-1" />
<div class="flex-shrink xl:basis-1/4" />
<main <main
class="flex-grow basis-3/4 xl:basis-2/4 flex-shrink" class="col-span-2"
use:toc={{ use:toc={{
store: tocStore, store: tocStore,
observe: true, observe: true,
@ -58,8 +58,8 @@
<Article {doc} /> <Article {doc} />
</main> </main>
<aside class="basis-1/4 relative hidden lg:block mt-10"> <aside class="col-span-1">
<div class="sticky top-32 mx-8"> <div class="sticky top-32 mx-8 w-fit mt-14">
<StickyToc {tocStore} /> <StickyToc {tocStore} />
</div> </div>
</aside> </aside>