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

style: optimize scrollbar styling, remove the auto-hide feature to fix page flickering issue

Browse source
This commit is contained in:
radishzzz 2025-05-15 17:27:17 +01:00
parent bd24e340e7
commit d0e699d8cb
5 changed files with 10 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/styles/global.css
View file

@ -6,12 +6,8 @@
html {
--at-apply: 'bg-background c-secondary antialiased';
scrollbar-width: thin;
scrollbar-color: oklch(var(--un-preset-theme-colors-secondary) / 0) transparent;
scrollbar-gutter: stable both-edges;
transition: scrollbar-color 0.3s ease-out;
}
html.scrolling {
scrollbar-color: oklch(var(--un-preset-theme-colors-secondary) / 0.25) transparent;
scrollbar-gutter: stable both-edges;
}
/* Fix Flash Issue On iOS */
@ -23,7 +19,7 @@ body::selection {
--at-apply: 'bg-mark';
}
/* Heading Anchor Link >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
/* Heading Anchor Link */
.heading-anchor-link {
--at-apply: 'inline-block translate-y-0.08em c-transparent';
}

16
src/styles/heti.css
View file

@ -30,13 +30,13 @@
.heti :where(h4),
.heti :where(h5),
.heti :where(h6) {
--at-apply: 'mb-4 mt-6 font-semibold text-primary';
--at-apply: 'mb-4 mt-6 font-semibold';
}
.heti :where(h1) {
--at-apply: 'mt-9.6 text-7';
--at-apply: 'mt-9.6 text-7 text-primary';
}
.heti :where(h2) {
--at-apply: 'mt-9.6 text-6';
--at-apply: 'mt-9.6 text-6 text-primary';
}
.heti :where(h3) {
--at-apply: 'mt-6.5 text-5';
@ -48,7 +48,7 @@
--at-apply: 'text-4';
}
.heti :where(h6) {
--at-apply: 'text-secondary';
--at-apply: 'font-normal';
}
.heti :where(h1),
.heti :where(h2),
@ -70,8 +70,8 @@
/* Links */
.heti :where(a:not(.gc-container)) {
--at-apply: 'break-all font-medium tracking-0 underline underline-0.075em decoration-secondary/40 underline-offset-0.1em';
--at-apply: 'transition-colors hover:(c-primary decoration-secondary/80) lg:underline-0.1em';
--at-apply: 'break-all font-semibold tracking-0 underline underline-0.075em decoration-secondary/80 underline-offset-0.15em';
--at-apply: 'transition-colors hover:(c-primary decoration-primary/80) lg:underline-0.1em';
}
/* Images */
@ -94,10 +94,6 @@
.heti :where(pre) {
--at-apply: 'mb-4 overflow-auto uno-round-border px-4 py-3 bg-secondary/5!';
scrollbar-width: thin;
scrollbar-color: oklch(var(--un-preset-theme-colors-secondary) / 0) transparent;
transition: scrollbar-color 0.3s ease-out;
}
.heti :where(pre:hover) {
scrollbar-color: oklch(var(--un-preset-theme-colors-secondary) / 0.15) transparent;
}
.heti pre :where(code) {