Skip to content

Show related tools as the catalog card, not a look-alike #169

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
YurMil merged 1 commit into from
Aug 17, 2026
Merged

Show related tools as the catalog card, not a look-alike #169

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 7 additions & 6 deletions src/components/Utilities/UtilityShellPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,11 @@ import {
shouldReportUtilityUsage,
} from '@site/src/shared/utility-usage';
import type {UtilityPageConfig} from '@site/src/data/utilityShellPages';
// Related tools reuse the catalog card from the home page rather than a
// look-alike of their own, so a utility is presented the same way wherever it
// appears — same thumbnail, same tech badge, same localized copy.
import UtilityCard from '@site/src/components/Home/UtilityCard';
import homeStyles from '@site/src/pages/index.module.css';
import UtilityErrorBoundary from './UtilityErrorBoundary';
import {saveCalculation} from '@site/src/shared/calculation-history';
import {
Expand Down Expand Up @@ -371,13 +376,9 @@ export default function UtilityShellPage({tool, ...config}: UtilityShellPageProp
{relatedUtilities.length > 0 ? (
<div className="utility-related">
<h2 className="utility-related__title">{t('relatedTools.title')}</h2>
<div className="utility-related__grid">
<div className={homeStyles.utilityGrid}>
{relatedUtilities.map((related) => (
<Link key={related.id} to={related.href} className="utility-related__card">
<span className="utility-related__name">{related.name}</span>
<span className="utility-related__desc">{related.description}</span>
<span className="utility-related__meta">{related.standards}</span>
</Link>
<UtilityCard key={related.id} utility={related} />
))}
</div>
</div>
Expand Down
11 changes: 11 additions & 0 deletions src/pages/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -732,6 +732,13 @@
line-height: 1.25;
position: relative;
z-index: 3;
/* Pinned to the card rather than inherited. Every other line in the card
already sets its own colour; the title used to be the one that took
whatever the surrounding page happened to be using, which is fine on the
home page (its <main> sets a colour per theme) and wrong anywhere else.
The utility shell is dark-first and hands down a near-white regardless of
theme, so a reused card lost its title on a white background. */
color: #f3f6ff;
}

.titleLink {
Expand Down Expand Up @@ -989,6 +996,10 @@
color: var(--light-text-muted);
}

:global(html[data-theme='light']) .utilityCard h3 {
color: #0f172a;
}

:global(html[data-theme='light']) .utilityCard {
border-color: var(--card-border);
background: #ffffff;
Expand Down
55 changes: 6 additions & 49 deletions static/utilities/util-shell.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -603,55 +603,12 @@ html[data-theme='light'] body.utility-shell-page {
margin-bottom: 0.9rem;
}

.utility-related__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 0.75rem;
}

.utility-related__card {
display: flex;
flex-direction: column;
gap: 0.35rem;
padding: 0.85rem 1rem;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 12px;
background: rgba(255, 255, 255, 0.04);
text-decoration: none;
transition: border-color 0.2s ease, background 0.2s ease;
}

.utility-related__card:hover {
border-color: rgba(100, 255, 218, 0.45);
background: rgba(100, 255, 218, 0.06);
text-decoration: none;
}

.utility-related__name {
font-weight: 600;
color: var(--ifm-heading-color, #f5f7ff);
}

.utility-related__desc {
font-size: 0.8rem;
opacity: 0.75;
}

.utility-related__meta {
font-size: 0.72rem;
font-family: var(--ifm-font-family-monospace);
opacity: 0.55;
}

html[data-theme='light'] .utility-related__card {
border-color: rgba(15, 23, 42, 0.12);
background: rgba(15, 23, 42, 0.03);
}

html[data-theme='light'] .utility-related__card:hover {
border-color: rgba(15, 118, 110, 0.45);
background: rgba(15, 118, 110, 0.05);
}
/* The cards themselves are the home-page catalog card (UtilityCard), so the
grid and card styling live in src/pages/index.module.css. The bespoke
.utility-related__card set that used to live here is gone: its title rule
read `color: var(--ifm-heading-color, #f5f7ff)` and the light-theme override
only restyled the card, so in light mode the names fell back to near-white
on white and were effectively invisible. */

/* Guest notice (issue #112): shown under the tool frame for signed-out
visitors when the site setting gates exports behind sign-in. */
Expand Down
Loading