basil
/
personal-homepage
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve share card scan order for faster link decisions 

Constraint: Keep the change scoped to shares card internals without altering logs/projects card structures
Rejected: Showing project_repo as a separate row | duplicated ownership context and hurt visual hierarchy
Confidence: high
Scope-risk: narrow
Directive: Keep shares card metadata compact and action-oriented; prefer tags left and time/action right
Tested: npm run build
Not-tested: Manual cross-device visual QA in browser after commit
This commit is contained in:
SepComet 2026-05-10 10:43:05 +08:00
parent 28358164c5
commit 7a091a9b44
2 changed files with 102 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/pages/shares.astro
View File

@ -36,26 +36,35 @@ const sourceLabels = {
itemCount={shares.length}
/>
<div class="card-grid" style="grid-template-columns: 1fr;">
<div class="shares-list">
{shares.map((share) => (
<article class="card">
<p class="log-meta">
<span class="mono">{formatDateTime(share.updated_at || share.time) || '未标注时间'}</span>
{share.project ? <span class="tag">{share.project}</span> : null}
{share.type ? <span class="tag tag--tech">{share.type}</span> : null}
{share.source ? <span class="tag">{sourceLabels[share.source]}</span> : null}
</p>
<h2 class="project-title">{share.name}</h2>
{share.description ? <p>{share.description}</p> : null}
{share.project_repo ? <p class="activity-copy mono">{share.project_repo}</p> : null}
<div class="project-links" style="margin-top: 1rem;">
{share.url ? (
<a class="section-link" href={share.url} target="_blank" rel="noreferrer">
打开链接
</a>
) : (
<span class="tag">链接待补充</span>
)}
<article class="card share-card">
<div class="share-card__content">
<h2 class="share-card__title">{share.name}</h2>
{share.description ? <p class="share-card__summary">{share.description}</p> : null}
</div>
<div class="share-card__meta-row">
<p class="share-card__tags">
{share.project ? <span class="tag">{share.project}</span> : null}
{share.type ? <span class="tag tag--tech">{share.type}</span> : null}
{share.source ? <span class="tag">{sourceLabels[share.source]}</span> : null}
</p>
<div class="share-card__right">
<span class="share-card__time mono">
{formatDateTime(share.updated_at || share.time) || '未标注时间'}
</span>
<div class="share-card__action project-links">
{share.url ? (
<a class="section-link" href={share.url} target="_blank" rel="noreferrer">
打开链接
</a>
) : (
<span class="tag">链接待补充</span>
)}
</div>
</div>
</div>
</article>
))}

74
src/styles/global.css
View File

@ -551,6 +551,67 @@ main {
text-align: right;
}
.shares-list {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1rem;
}
.share-card {
display: grid;
gap: 1rem;
}
.share-card__content {
display: grid;
gap: 0.5rem;
}
.share-card__title {
margin: 0;
font-family: 'Archivo', sans-serif;
font-size: 1.28rem;
line-height: 1.3;
}
.share-card__summary {
margin: 0;
color: var(--muted-strong);
line-height: 1.8;
}
.share-card__meta-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.9rem 1rem;
}
.share-card__tags {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.55rem 0.8rem;
margin: 0;
}
.share-card__right {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 0.6rem 0.8rem;
}
.share-card__time {
color: var(--muted);
font-size: 0.84rem;
}
.share-card__action {
margin-left: auto;
}
.card:hover,
.card:focus-within {
transform: translateY(-2px);
@ -889,6 +950,19 @@ main {
text-align: left;
}
.share-card__meta-row {
flex-direction: column;
align-items: stretch;
}
.share-card__right {
justify-content: flex-start;
}
.share-card__action {
margin-left: 0;
}
.section-heading,
.footer-card {
align-items: flex-start;