reonokiy/blog
1
0
Fork 0
mirror of https://github.com/reonokiy/blog.nokiy.net.git synced 2025-06-17 03:56:19 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

style: optimize scrollbar and heading styling

Browse source
This commit is contained in:
radishzzz 2025-05-15 06:04:36 +01:00
parent 0e5905aaa3
commit bd24e340e7
9 changed files with 331 additions and 364 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/components/Widgets/TOC.astro
View file

@ -37,7 +37,7 @@ const filteredHeadings = headings.filter(heading =>
<TocIcon
aria-hidden="true"
class="ml-2 hidden aspect-square w-4.2 2xl:(mt-4 block origin-center active:scale-90)"
class="ml-1 hidden aspect-square w-4.2 2xl:(mt-4 block origin-center active:scale-90)"
fill="currentColor"
/>
</label>
@ -94,7 +94,7 @@ const filteredHeadings = headings.filter(heading =>
--at-apply: 'grid rows-[0fr] duration-300 ease-in-out';
}
.accordion-content {
--at-apply: 'max-h-66 overflow-hidden pl-4 pr-6 2xl:(max-h-[calc(100vh-21.5rem)] pl-2)';
--at-apply: 'max-h-66 overflow-hidden pl-4 pr-6 2xl:(max-h-[calc(100vh-21.5rem)] pl-1)';
}
/* When toggle is checked, expand the wrapper to show content */
@ -104,14 +104,9 @@ const filteredHeadings = headings.filter(heading =>
.accordion-toggle:checked ~ .accordion-wrapper .accordion-content {
--at-apply: 'overflow-y-auto';
}
#toc-content::-webkit-scrollbar {
--at-apply: 'w-1.25 lg:w-1.5';
}
#toc-content::-webkit-scrollbar-thumb {
--at-apply: 'rounded-full bg-secondary/15';
}
#toc-content::-webkit-scrollbar-thumb:hover {
--at-apply: 'bg-secondary/25';
#toc-content {
scrollbar-width: thin;
scrollbar-color: oklch(var(--un-preset-theme-colors-secondary) / 0.15) transparent;
}
@media (min-width: 1536px) {