mirror of
https://github.com/reonokiy/blog.nokiy.net.git
synced 2025-06-16 11:41:17 +02:00
style: optimize scrollbar and heading styling
This commit is contained in:
radishzzz
parent
0e5905aaa3
commit
bd24e340e7
9 changed files with 331 additions and 364 deletions
|
|
@ -1,28 +1,49 @@
|
|||
/* KaTeX Overflow Fix */
|
||||
.katex-display {
|
||||
--at-apply: 'overflow-x-auto overflow-y-hidden scrollbar-hidden';
|
||||
/* GitHub Card */
|
||||
.gc-container {
|
||||
--at-apply: 'block mb-4 px-5 py-4 overflow-x-auto uno-round-border bg-secondary/5 scrollbar-hidden';
|
||||
--at-apply: 'transition-colors lg:(px-6 py-5) hover:(bg-secondary/10 c-primary)';
|
||||
}
|
||||
.katex-display::-webkit-scrollbar {
|
||||
.gc-container::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Heading Anchor Link */
|
||||
.heading-anchor-link {
|
||||
--at-apply: 'inline-block translate-y-0.08em c-transparent';
|
||||
/* Title Bar */
|
||||
.gc-title-bar {
|
||||
--at-apply: 'flex items-center gap-2.5 lg:gap-3';
|
||||
}
|
||||
h1:hover .heading-anchor-link,
|
||||
h2:hover .heading-anchor-link,
|
||||
h3:hover .heading-anchor-link,
|
||||
h4:hover .heading-anchor-link {
|
||||
--at-apply: 'c-secondary/40';
|
||||
.gc-owner-avatar {
|
||||
--at-apply: 'flex-shrink-0 w-5.5 aspect-square rounded-full bg-secondary/20';
|
||||
}
|
||||
.heading-anchor-link svg {
|
||||
--at-apply: 'ml-0.4em aspect-square w-0.9em transition-colors active:scale-90 hover:c-secondary/80';
|
||||
.gc-repo-title {
|
||||
--at-apply: 'flex items-center leading-normal lg:text-lg';
|
||||
}
|
||||
.gc-slash {
|
||||
--at-apply: 'mx-1 op-40 lg:mx-1.2';
|
||||
}
|
||||
.gc-github-icon {
|
||||
--at-apply: 'flex-shrink-0 ml-auto w-5.5 lg:w-6';
|
||||
}
|
||||
|
||||
/* Video */
|
||||
iframe {
|
||||
--at-apply: 'mb-4 w-full aspect-video';
|
||||
/* Repo Description */
|
||||
.gc-repo-description.gc-repo-description {
|
||||
--at-apply: 'mt-2.45 mb-3.5 text-sm text-start lg:(mt-2.8 mb-4 text-base)';
|
||||
}
|
||||
|
||||
/* Info Bar */
|
||||
.gc-info-bar {
|
||||
--at-apply: 'flex items-center gap-1.75 text-xs lg:(gap-2 text-sm)';
|
||||
}
|
||||
.gc-info-icon {
|
||||
--at-apply: 'flex-shrink-0';
|
||||
}
|
||||
.gc-stars-count {
|
||||
--at-apply: 'mr-3 lg:mr-4';
|
||||
}
|
||||
.gc-forks-count {
|
||||
--at-apply: 'mr-3.75 lg:mr-5';
|
||||
}
|
||||
.gc-license-info {
|
||||
--at-apply: 'ml-0.5 mr-4';
|
||||
}
|
||||
|
||||
/* Admonition >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
|
||||
|
|
@ -93,54 +114,6 @@ iframe {
|
|||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'%3E%3C/path%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
/* GitHub Card >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
|
||||
.gc-container {
|
||||
--at-apply: 'block mb-4 px-5 py-4 overflow-x-auto uno-round-border bg-secondary/5 scrollbar-hidden';
|
||||
--at-apply: 'transition-colors lg:(px-6 py-5) hover:(bg-secondary/10 c-primary)';
|
||||
}
|
||||
.gc-container::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Title Bar */
|
||||
.gc-title-bar {
|
||||
--at-apply: 'flex items-center gap-2.5 lg:gap-3';
|
||||
}
|
||||
.gc-owner-avatar {
|
||||
--at-apply: 'flex-shrink-0 w-5.5 aspect-square rounded-full bg-secondary/20';
|
||||
}
|
||||
.gc-repo-title {
|
||||
--at-apply: 'flex items-center leading-normal lg:text-lg';
|
||||
}
|
||||
.gc-slash {
|
||||
--at-apply: 'mx-1 op-40 lg:mx-1.2';
|
||||
}
|
||||
.gc-github-icon {
|
||||
--at-apply: 'flex-shrink-0 ml-auto w-5.5 lg:w-6';
|
||||
}
|
||||
|
||||
/* Repo Description */
|
||||
.gc-repo-description.gc-repo-description {
|
||||
--at-apply: 'mt-2.45 mb-3.5 text-sm text-start lg:(mt-2.8 mb-4 text-base)';
|
||||
}
|
||||
|
||||
/* Info Bar */
|
||||
.gc-info-bar {
|
||||
--at-apply: 'flex items-center gap-1.75 text-xs lg:(gap-2 text-sm)';
|
||||
}
|
||||
.gc-info-icon {
|
||||
--at-apply: 'flex-shrink-0';
|
||||
}
|
||||
.gc-stars-count {
|
||||
--at-apply: 'mr-3 lg:mr-4';
|
||||
}
|
||||
.gc-forks-count {
|
||||
--at-apply: 'mr-3.75 lg:mr-5';
|
||||
}
|
||||
.gc-license-info {
|
||||
--at-apply: 'ml-0.5 mr-4';
|
||||
}
|
||||
|
||||
/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
|
||||
/* :where(details) {
|
||||
--at-apply: 'my-4 px-4 py-3 border border-solid border-secondary/25 rounded cursor-pointer';
|
||||
|
|
|
|||
|
|
@ -5,8 +5,15 @@
|
|||
}
|
||||
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;
|
||||
}
|
||||
|
||||
/* Fix Flash Issue On iOS */
|
||||
body {
|
||||
backface-visibility: hidden;
|
||||
|
|
@ -15,17 +22,19 @@ body {
|
|||
body::selection {
|
||||
--at-apply: 'bg-mark';
|
||||
}
|
||||
body::-webkit-scrollbar {
|
||||
--at-apply: 'w-1.75';
|
||||
|
||||
/* Heading Anchor Link >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
|
||||
.heading-anchor-link {
|
||||
--at-apply: 'inline-block translate-y-0.08em c-transparent';
|
||||
}
|
||||
body::-webkit-scrollbar-thumb {
|
||||
--at-apply: 'rounded-full bg-transparent';
|
||||
h1:hover .heading-anchor-link,
|
||||
h2:hover .heading-anchor-link,
|
||||
h3:hover .heading-anchor-link,
|
||||
h4:hover .heading-anchor-link {
|
||||
--at-apply: 'c-primary/40';
|
||||
}
|
||||
body.scrolling::-webkit-scrollbar-thumb {
|
||||
--at-apply: 'bg-secondary/25';
|
||||
}
|
||||
body::-webkit-scrollbar-thumb:hover {
|
||||
--at-apply: 'bg-secondary/40';
|
||||
.heading-anchor-link svg {
|
||||
--at-apply: 'ml-0.4em aspect-square w-0.9em transition-colors active:scale-90 hover:c-primary/80';
|
||||
}
|
||||
|
||||
/* Highlight Hover Animation */
|
||||
|
|
|
|||
|
|
@ -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: "「" "」" "『" "』";
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue