mirror of
https://github.com/reonokiy/blog.nokiy.net.git
synced 2025-06-16 11:41:17 +02:00
feat: performance optimizations and ui improvements (#26)
* test: remove astro-compress * test: remove astro-compress * perf: add astro-compress, optimize resource preloading * perf: moving photoswipe styles to head with non-blocking preload strategy * test: disable astro-compress * test: enable astro-compress * fix: typescript hints * chore: adjust toc style and gsap animation * style: optimize gsap animation logic, adjust toc style * chore: adjust toc style * fix: photoswipe transition position offset caused by scrollbar-gutter
This commit is contained in:
parent
054aa85509
commit
47e1df9b3d
10 changed files with 64 additions and 69 deletions
|
@ -22,7 +22,7 @@ const filteredHeadings = headings.filter(heading =>
|
|||
// TOC Container
|
||||
<div
|
||||
id="toc-container"
|
||||
class="mb-6 uno-round-border bg-secondary/5 2xl:(fixed left-0 top-43.5 max-w-[min(calc(50vw-38rem),13rem)] border-none bg-secondary/0)"
|
||||
class="mb-6 uno-round-border bg-secondary/5 2xl:(fixed left-0 top-45.5 max-w-[min(calc(50vw-38rem),13rem)] border-none bg-secondary/0)"
|
||||
>
|
||||
{/* Hidden Checkbox */}
|
||||
<input
|
||||
|
@ -46,7 +46,7 @@ const filteredHeadings = headings.filter(heading =>
|
|||
<TocIcon
|
||||
id="toc-icon"
|
||||
aria-hidden="true"
|
||||
class="ml-1 hidden aspect-square w-4.2 2xl:(mt-4 block origin-center active:scale-90!)"
|
||||
class="ml-4 hidden aspect-square w-4.2 2xl:(mt-4 block origin-center active:scale-90!)"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</label>
|
||||
|
@ -96,18 +96,20 @@ const filteredHeadings = headings.filter(heading =>
|
|||
--at-apply: 'ml-4 font-semibold 2xl:hidden';
|
||||
}
|
||||
.toc-list {
|
||||
--at-apply: 'mb-4 mt-1 list-none pl-0 space-y-2 2xl:space-y-1.2';
|
||||
--at-apply: 'mb-2.2 mt-0 list-none pl-0 space-y-1.1 2xl:(mb-2 space-y-1)';
|
||||
}
|
||||
.toc-link-h2, .toc-link-h3, .toc-link-h4 {
|
||||
--at-apply: 'text-balance text-sm font-normal no-underline 2xl:(text-3.2 c-secondary/60 transition-colors transition-font-weight duration-300 ease-out hover:c-secondary hover:font-medium)';
|
||||
}
|
||||
|
||||
.toc-list > :first-child {
|
||||
--at-apply: 'mt-0';
|
||||
}
|
||||
/* Initial collapsed state with zero height grid row */
|
||||
.accordion-wrapper {
|
||||
--at-apply: 'grid rows-[0fr] transition-all duration-350 ease-in-out';
|
||||
}
|
||||
.accordion-content {
|
||||
--at-apply: 'max-h-66 overflow-hidden pl-4 pr-6 2xl:(max-h-[calc(100vh-26rem)] pl-1)';
|
||||
--at-apply: 'max-h-58 overflow-hidden pl-4 pr-6 2xl:max-h-[calc(100vh-26.5rem)]';
|
||||
}
|
||||
|
||||
/* When toggle is checked, expand the wrapper to show content */
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue