mirror of
https://github.com/reonokiy/blog.nokiy.net.git
synced 2025-06-16 03:32:51 +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
|
|
@ -85,7 +85,7 @@ document.addEventListener('astro:page-load', initWaline)
|
|||
--at-apply: 'p-0';
|
||||
}
|
||||
#waline .wl-header-item {
|
||||
border-bottom: 1px solid var(--waline-border-color);
|
||||
--at-apply: 'border-b border-solid border-primary/25';
|
||||
}
|
||||
#waline .wl-header label {
|
||||
--at-apply: 'text-3';
|
||||
|
|
@ -104,7 +104,7 @@ document.addEventListener('astro:page-load', initWaline)
|
|||
--at-apply: 'min-h-24';
|
||||
}
|
||||
#waline .wl-editor::placeholder {
|
||||
color: var(--waline-light-grey);
|
||||
--at-apply: 'c-primary/25';
|
||||
}
|
||||
#waline .wl-footer {
|
||||
--at-apply: 'm-2';
|
||||
|
|
@ -121,17 +121,9 @@ document.addEventListener('astro:page-load', initWaline)
|
|||
#waline .wl-emoji-popup {
|
||||
--at-apply: 'start-0 rounded border-secondary/25';
|
||||
}
|
||||
#waline .wl-emoji-popup .wl-tab-wrapper::-webkit-scrollbar {
|
||||
--at-apply: 'w-1.25';
|
||||
}
|
||||
#waline .wl-emoji-popup .wl-tab-wrapper::-webkit-scrollbar-thumb {
|
||||
--at-apply: 'bg-secondary/25';
|
||||
}
|
||||
#waline .wl-emoji-popup .wl-tab-wrapper::-webkit-scrollbar-thumb:hover {
|
||||
--at-apply: 'bg-secondary/40';
|
||||
}
|
||||
#waline .wl-emoji-popup .wl-tab-wrapper::-webkit-scrollbar-track-piece {
|
||||
--at-apply: 'bg-transparent';
|
||||
#waline {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: oklch(var(--un-preset-theme-colors-secondary) / 0.25) transparent;
|
||||
}
|
||||
#waline .wl-gif-popup {
|
||||
--at-apply: 'border-secondary/25';
|
||||
|
|
@ -158,7 +150,7 @@ document.addEventListener('astro:page-load', initWaline)
|
|||
--at-apply: 'leading-6 text-3.5';
|
||||
}
|
||||
#waline .wl-time {
|
||||
color: oklch(var(--un-preset-theme-colors-primary) / 0.75);
|
||||
--at-apply: 'c-primary/75';
|
||||
}
|
||||
#waline .wl-edit,
|
||||
#waline .wl-delete {
|
||||
|
|
|
|||
|
|
@ -10,19 +10,19 @@ function debounce(fn: () => void, delay: number) {
|
|||
}
|
||||
|
||||
function initScrollbar() {
|
||||
const body = document.body
|
||||
body.classList.remove('scrolling')
|
||||
const html = document.documentElement
|
||||
html.classList.remove('scrolling')
|
||||
|
||||
if (scrollHandler) {
|
||||
window.removeEventListener('scroll', scrollHandler)
|
||||
}
|
||||
|
||||
const hideScrollbar = debounce(() => {
|
||||
body.classList.remove('scrolling')
|
||||
html.classList.remove('scrolling')
|
||||
}, 1500)
|
||||
|
||||
scrollHandler = () => {
|
||||
body.classList.add('scrolling')
|
||||
html.classList.add('scrolling')
|
||||
hideScrollbar()
|
||||
}
|
||||
|
||||
|
|
@ -31,4 +31,4 @@ function initScrollbar() {
|
|||
|
||||
initScrollbar()
|
||||
document.addEventListener('astro:page-load', initScrollbar)
|
||||
</script>
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@ import Footer from '@/components/Footer.astro'
|
|||
import Header from '@/components/Header.astro'
|
||||
import Navbar from '@/components/Navbar.astro'
|
||||
import GithubCard from '@/components/Widgets/GithubCard.astro'
|
||||
// import PhotoSwipe from '@/components/Widgets/PhotoSwipe.astro'
|
||||
// import Scrollbar from '@/components/Widgets/Scrollbar.astro'
|
||||
import PhotoSwipe from '@/components/Widgets/PhotoSwipe.astro'
|
||||
import Scrollbar from '@/components/Widgets/Scrollbar.astro'
|
||||
import themeConfig from '@/config'
|
||||
import Head from '@/layouts/Head.astro'
|
||||
import { getPageInfo } from '@/utils/page'
|
||||
|
|
@ -48,8 +48,8 @@ const MarginBottom = isPost && themeConfig.comment?.enabled
|
|||
<Footer />
|
||||
</div>
|
||||
<Button supportedLangs={supportedLangs} />
|
||||
<!-- <Scrollbar /> -->
|
||||
<Scrollbar />
|
||||
<GithubCard />
|
||||
<!-- <PhotoSwipe /> -->
|
||||
<PhotoSwipe />
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -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