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

11
quartz/components/PageList.tsx
View File

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

38
quartz/styles/base.scss
View File

@ -595,16 +595,38 @@ input {
.section-li {
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;
background: var(--light);
border: 1px solid var(--lightgray);
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 {
transform: translateY(-3px);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
background-color: var(--highlight);
.section {
.desc {
h3 {
color: var(--tertiary);
}
}
}
}
.section {
@ -627,18 +649,8 @@ input {
margin: 0;
font-size: 1.3rem;
line-height: 1.4;
a {
text-decoration: none;
background: none;
padding: 0;
transition: color 0.2s ease, background-color 0.2s ease;
&:hover {
color: var(--tertiary);
background: none;
}
}
transition: color 0.2s ease;
color: var(--secondary);
}
}
}