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

feat: add heading anchor links

Browse source
This commit is contained in:
radishzzz 2025-05-13 03:09:23 +01:00
parent 328104ed1a
commit e5ecbe1341
8 changed files with 117 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/Header.astro
View file

@ -17,7 +17,7 @@ const SubtitleTag = isPost ? 'div' : 'h2'
<header
class:list={[
isPost ? 'mb-10.8' : 'mb-10.5',
'cjk:tracking-0.02em lg:(uno-desktop-column top-20)',
'lg:(uno-desktop-column top-20) cjk:tracking-0.02em',
]}
>
<TitleTag

2
src/components/Navbar.astro
View file

@ -37,7 +37,7 @@ const navItems = [
class:list={[
isPost ? 'hidden lg:block' : '',
'mb-10.5 text-3.6 font-semibold leading-8.75 font-navbar',
'cjk:tracking-0.02em lg:(uno-desktop-column text-4 leading-9.72 bottom-50)',
'lg:(uno-desktop-column text-4 leading-9.72 bottom-50) cjk:tracking-0.02em',
]}
>
<ul>

6
src/components/PostList.astro
View file

@ -40,7 +40,7 @@ function getPostPath(post: Post) {
{/* post title */}
<h3 class="inline">
<a
class="cjk:tracking-0.02em hover:c-primary"
class="hover:c-primary cjk:tracking-0.02em"
lg={isHome ? 'font-medium text-4.5' : ''}
href={getPostPath(post)}
transition:name={`post-${post.data.abbrlink || post.id}-${lang}`}
@ -54,12 +54,12 @@ function getPostPath(post: Post) {
<>
<PinIcon
aria-hidden="true"
class="ml-0.25em inline-block aspect-square w-3.7 translate-y--0.45 lg:hidden"
class="ml-0.25em inline-block aspect-square w-0.92em translate-y--0.1em lg:hidden"
fill="currentColor"
/>
<PinIconBold
aria-hidden="true"
class="hidden lg:(ml-0.25em inline-block aspect-square w-4.1 translate-y--0.45)"
class="hidden lg:(ml-0.25em inline-block aspect-square w-1.05em translate-y--0.14em)"
fill="currentColor"
/>
</>

31
src/styles/extend.css
View file

@ -1,10 +1,4 @@
/*!
* Markdown Extended Features
* 1. Admonition
* 2. GitHub Card
*/
/* KaTeX Formula Overflow Fix */
/* KaTeX Overflow Fix */
.katex-display {
--at-apply: 'overflow-x-auto overflow-y-hidden scrollbar-hidden';
}
@ -12,6 +6,25 @@
display: none;
}
/* Heading Anchor Link */
.heading-anchor-link {
--at-apply: 'inline-block translate-y-0.04em c-secondary/0';
}
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';
}
.heading-anchor-link svg {
--at-apply: 'ml-0.4em aspect-square w-0.8em transition-colors active:scale-90 hover:c-secondary/80';
}
/* Video */
iframe {
--at-apply: 'mb-4 w-full aspect-video';
}
/* Admonition >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
.admonition-title {
--at-apply: 'flex items-center mb-4 font-semibold';
@ -129,10 +142,6 @@
}
/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
iframe {
--at-apply: 'mb-4 w-full aspect-video';
}
/* :where(details) {
--at-apply: 'my-4 px-4 py-3 border border-solid border-secondary/25 rounded cursor-pointer';
}

10
src/styles/heti.css
View file

@ -7,7 +7,7 @@
/* Global Styles */
.heti {
--at-apply: 'cjk:tracking-0.02em break-words leading-1.5em hyphens-auto';
--at-apply: 'break-words leading-1.5em hyphens-auto cjk:tracking-0.02em';
}
/* Customized Post Title */
@ -25,7 +25,7 @@
--at-apply: 'mt-6 mb-3 font-semibold';
}
.heti :where(h1) {
--at-apply: 'text-8 leading-12';
--at-apply: 'text-7 leading-12';
}
.heti :where(h2) {
--at-apply: 'text-6 leading-9';
@ -45,7 +45,7 @@
.heti :where(h1),
.heti :where(h2),
.heti :where(h3) {
--at-apply: 'cjk:text-pretty cjk:tracking-0.05em text-balance';
--at-apply: 'text-balance cjk:text-pretty cjk:tracking-0.05em';
}
.heti :where(h1 + h2),
.heti :where(h2 + h3),
@ -57,7 +57,7 @@
/* Paragraphs */
.heti :where(p) {
--at-apply: 'cjk:text-justify mb-4 text-pretty';
--at-apply: 'mb-4 text-pretty cjk:text-justify';
}
/* Links */
@ -92,7 +92,7 @@ html.dark .heti pre :where(span) {
/* Inline Code */
.heti :where(code) {
--at-apply: 'cjk:break-all px-0.4em py-0.2em text-0.85em tracking-0 uno-round-border bg-secondary/5';
--at-apply: 'px-0.4em py-0.2em text-0.85em tracking-0 uno-round-border bg-secondary/5 cjk:break-all';
counter-reset: line;
}
.heti :where(code) span.line {