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

style: re-add responsive design for blog post

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

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