GitHub/quartz
1
0
Fork 2
mirror of https://github.com/jackyzha0/quartz.git synced 2025-12-19 19:04:06 -06:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fix: whole card clickable

Browse Source
This commit is contained in:
vintro 2024-12-17 16:29:35 -05:00
parent 7a272be743
commit b9b23a10ea
No known key found for this signature in database
2 changed files with 37 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
quartz/components/PageList.tsx
View File

@ -41,23 +41,22 @@ export const PageList: QuartzComponent = ({ cfg, fileData, allFiles, limit }: Pr
const title = page.frontmatter?.title const title = page.frontmatter?.title
const tags = page.frontmatter?.tags ?? [] const tags = page.frontmatter?.tags ?? []
const tagsStr = JSON.stringify(tags) const tagsStr = JSON.stringify(tags)
const href = resolveRelative(fileData.slug!, page.slug!)
return ( return (
<li class="section-li" data-tags={tagsStr}> <li class="section-li" data-tags={tagsStr}>
<div class="section"> <a href={href} class="section-link">
{page.dates && ( <div class="section">
<p class="meta"> {page.dates && (
<Date date={getDate(cfg, page)!} locale={cfg.locale} /> <p class="meta">
</p> <Date date={getDate(cfg, page)!} locale={cfg.locale} />
)} </p>
<div class="desc"> )}
<h3> <div class="desc">
<a href={resolveRelative(fileData.slug!, page.slug!)} class="internal" data-no-popover="true"> <h3>{title}</h3>
{title} </div>
</a>
</h3>
</div> </div>
</div> </a>
</li> </li>
) )
})} })}

38
quartz/styles/base.scss
View File

@ -595,16 +595,38 @@ input {
.section-li { .section-li {
margin: 0; margin: 0;
transition: transform 0.2s ease, box-shadow 0.2s ease; transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
border-radius: 12px; border-radius: 12px;
background: var(--light); background: var(--light);
border: 1px solid var(--lightgray); border: 1px solid var(--lightgray);
overflow: hidden; overflow: hidden;
position: relative;
.section-link {
text-decoration: none;
color: var(--darkgray);
background: none !important;
display: block;
height: 100%;
&:hover {
background: none !important;
color: var(--darkgray);
}
}
&:hover { &:hover {
transform: translateY(-3px); transform: translateY(-3px);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
background-color: var(--highlight); background-color: var(--highlight);
.section {
.desc {
h3 {
color: var(--tertiary);
}
}
}
} }
.section { .section {
@ -627,18 +649,8 @@ input {
margin: 0; margin: 0;
font-size: 1.3rem; font-size: 1.3rem;
line-height: 1.4; line-height: 1.4;
transition: color 0.2s ease;
a { color: var(--secondary);
text-decoration: none;
background: none;
padding: 0;
transition: color 0.2s ease, background-color 0.2s ease;
&:hover {
color: var(--tertiary);
background: none;
}
}
} }
} }
} }