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: update various code copy button and toc styles

Browse source 
- Removed the old copy-action SVG icon and replaced it with a new copy-button SVG icon.
- Added a new copy-success SVG icon for visual feedback on copy actions.
- Updated Waline component comments for clarity and improved code readability.
- Enhanced BackButton component with fallback navigation to homepage.
- Improved CodeCopyButton component by refining icon handling and timeout management.
- Adjusted GithubCard component's intersection observer root margin for better visibility.
- Updated GsapAnimation component variable names for consistency and clarity.
- Removed unnecessary styles from PhotoSwipe component.
- Modified TOC component styles for better spacing and layout.
- Updated multiple theme guide markdown files to correct image hosting URL comments.
- Cleaned up extend.css by removing commented-out styles and organizing code.
- Added PhotoSwipe background color and KaTeX overflow fixes to global.css.
- Enhanced markdown.css with video styling for better responsiveness.
- Improved transition.css comments for better understanding of GSAP animation states.
This commit is contained in:
radishzzz 2025-05-27 12:45:30 +01:00
parent 5116ebcaaa
commit a5839a2dd1
22 changed files with 268 additions and 248 deletions
Download patch file Download diff file Expand all files Collapse all files

62
src/styles/global.css
View file

@ -14,6 +14,37 @@ body::selection {
--at-apply: 'bg-highlight';
}
/* PhotoSwipe Background Color */
.pswp .pswp__bg {
--at-apply: 'bg-background!';
}
/* Fix KaTeX Overflow with Hidden Scrollbar */
.katex-display {
--at-apply: 'my-6 overflow-x-auto overflow-y-hidden scrollbar-hidden';
}
.katex-display::-webkit-scrollbar {
display: none;
}
/* Highlight Hover Animation */
.highlight-static,
.highlight-hover {
--at-apply: 'relative inline-block';
}
.highlight-static::after,
.highlight-hover::after {
content: '';
--at-apply: 'absolute left-0 z--1 h-0.5em w-full bg-highlight';
}
.highlight-static::after,
.highlight-hover:hover::after {
--at-apply: 'origin-bottom-left scale-x-100';
}
.highlight-hover::after {
--at-apply: 'origin-bottom-right scale-x-0 transition-transform ease-out lg:duration-300';
}
/* Heading Anchor Link */
.heading-anchor-link {
--at-apply: 'inline-block translate-y-0.1em';
@ -34,20 +65,25 @@ h4:hover .heading-anchor-link svg:hover {
--at-apply: 'op-80';
}
/* Highlight Hover Animation */
.highlight-static,
.highlight-hover {
--at-apply: 'relative inline-block';
/* Code Copy Button */
.code-copy-button {
--at-apply: 'absolute right-2.2 top-2.2 z-99 aspect-square w-8 cursor-pointer uno-round-border border-secondary/15';
--at-apply: 'bg-background c-secondary/80 op-100 hover:c-primary/80 lg:op-0';
transition: opacity 300ms ease-out, background-color 150ms ease-out;
}
.highlight-static::after,
.highlight-hover::after {
content: '';
--at-apply: 'absolute left-0 z--1 h-0.5em w-full bg-highlight';
.code-block-wrapper:hover .code-copy-button {
--at-apply: 'op-100';
}
.highlight-static::after,
.highlight-hover:hover::after {
--at-apply: 'origin-bottom-left scale-x-100';
.code-copy-button.copy-success {
--at-apply: 'border-none bg-emerald-600 c-background';
}
.highlight-hover::after {
--at-apply: 'origin-bottom-right scale-x-0 transition-transform ease-out lg:duration-300';
html.dark .code-copy-button.copy-success {
--at-apply: 'bg-emerald-500';
}
.code-copy-button svg {
--at-apply: 'mx-auto aspect-square w-50%';
}
.code-copy-button svg,
.code-copy-button svg path {
--at-apply: 'pointer-events-none';
}