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