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 { .technique-related__grid {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 0.75rem; gap: 0.5rem;
} }
@media (max-width: 600px) { @media (max-width: 600px) {

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

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