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 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

48
src/styles/heti.css
View file

@ -12,7 +12,15 @@
/* Customized Post Title */
.heti .post-title {
--at-apply: 'mb-2 text-8.6 c-primary font-bold lg:text-9';
--at-apply: 'mb-2 text-8.6 font-bold lg:text-9';
}
/* KaTeX Overflow Fix */
.heti .katex-display {
--at-apply: 'overflow-x-auto overflow-y-hidden scrollbar-hidden';
}
.heti .katex-display::-webkit-scrollbar {
display: none;
}
/* Headings */
@ -22,7 +30,7 @@
.heti :where(h4),
.heti :where(h5),
.heti :where(h6) {
--at-apply: 'mb-4 mt-6 font-semibold';
--at-apply: 'mb-4 mt-6 font-semibold text-primary';
}
.heti :where(h1) {
--at-apply: 'mt-9.6 text-7';
@ -40,7 +48,7 @@
--at-apply: 'text-4';
}
.heti :where(h6) {
--at-apply: 'text-3.5';
--at-apply: 'text-secondary';
}
.heti :where(h1),
.heti :where(h2),
@ -69,28 +77,28 @@
/* Images */
.heti :where(img) {
--at-apply: 'mx-auto cursor-zoom-in';
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
/* .heti :where(p:has(> img):not(:has(> :not(img)))) {
--at-apply: 'mb-6';
}
.heti :where(p:has(> img):not(:has(> :not(img))):is(:not(h1, h2, h3, h4, h5, h6, p) + *, :not(figure) *)) {
--at-apply: 'mt-6';
} */
.heti :where(figure) {
--at-apply: 'mx-auto mb-4';
}
/* .heti :where(:not(h1, h2, h3, h4, h5, h6) + figure) {
--at-apply: 'mt-6';
} */
.heti :where(figcaption) {
--at-apply: 'mt-2 text-center text-sm text-secondary/80';
}
/* Video */
.heti :where(iframe) {
--at-apply: 'mb-4 w-full aspect-video';
}
/* Code Blocks */
.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) {
--at-apply: 'border-none bg-transparent p-0';
@ -98,15 +106,6 @@
html.dark .heti pre :where(span) {
--at-apply: 'text-[var(--shiki-dark)]!';
}
.heti pre::-webkit-scrollbar {
--at-apply: 'h-1.25 lg:h-1.5';
}
.heti pre::-webkit-scrollbar-thumb {
--at-apply: 'rounded-full bg-secondary/15';
}
.heti pre::-webkit-scrollbar-thumb:hover {
--at-apply: 'bg-secondary/25';
}
/* Inline Code */
.heti :where(code) {
@ -270,5 +269,4 @@ html.dark .heti :where(u) {
/* Quotes */
.heti :where(q:is(:lang(zh), :lang(ja), :lang(ko))) {
quotes: "「" "」" "『" "』";
}
}