xpltdco/chrysopedia
2
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

style: related techniques cards use same recent-card styling as homepage Recently Added

Browse source
This commit is contained in:
jlightner 2026-04-03 07:43:03 +00:00
parent 71183639ea
commit 1d210faf68
2 changed files with 20 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/App.css
View file

@ -2395,7 +2395,7 @@ a.app-footer__repo:hover {
.technique-related__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
gap: 0.5rem;
}
@media (max-width: 600px) {

34
frontend/src/pages/TechniquePage.tsx
View file

@ -566,26 +566,30 @@ export default function TechniquePage() {
</section>
)}
{/* Related techniques */}
{/* Related techniques — styled as cards matching homepage Recently Added */}
{technique.related_links.length > 0 && (
<section className="technique-related">
<h2>Related Techniques</h2>
<div className="technique-related__grid">
{technique.related_links.map((link) => (
<div key={link.target_slug} className="related-card">
<Link to={`/techniques/${link.target_slug}`} className="related-card__title">
{link.target_title}
</Link>
{link.creator_name && (
<span className="related-card__creator">{link.creator_name}</span>
)}
{link.topic_category && (
<span className="related-card__badge">{link.topic_category}</span>
)}
{link.reason && (
<p className="related-card__reason">{link.reason}</p>
)}
</div>
<Link key={link.target_slug} to={`/techniques/${link.target_slug}`} className="recent-card">
<span className="recent-card__title">{link.target_title}</span>
<span className="recent-card__meta">
{link.topic_category && (
<span className="badge badge--category">
{link.topic_category}
</span>
)}
{link.reason && (
<span className="recent-card__summary">{link.reason}</span>
)}
</span>
<span className="recent-card__footer">
<span className="recent-card__creator">
{link.creator_name || ''}
</span>
</span>
</Link>
))}
</div>
</section>