From 3b591862f832d3f6ef9823d92475953ff05a9d69 Mon Sep 17 00:00:00 2001 From: Wesley B <62723358+wesleyboar@users.noreply.github.com> Date: Wed, 18 Dec 2024 09:31:50 -0600 Subject: [PATCH] fix: app cards only two lines tall (#1505) They should be three liens tall. Use variables to make cross-file code less magic. --- designsafe/static/styles/app-card.css | 7 ++++--- designsafe/static/styles/app-page.css | 4 +++- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/designsafe/static/styles/app-card.css b/designsafe/static/styles/app-card.css index 69a09db021..f65efa19e2 100644 --- a/designsafe/static/styles/app-card.css +++ b/designsafe/static/styles/app-card.css @@ -24,10 +24,11 @@ padding-inline: 1.5rem; margin-block: 1.5rem; } -/* To set height to twice line-height */ -/* SEE: ./app-page.css#L34-L36 (circa v7.1.4) */ +/* To set explicit height equal to N lines of text */ .s-app-page p.c-app-card__desc { - height: 3.6em; + --lines: 3; /* to override Core-Styles c-app-card truncate */ + + height: calv(var(--lines) * var(--line-height)); } /* Types */ diff --git a/designsafe/static/styles/app-page.css b/designsafe/static/styles/app-page.css index 0425565049..2a3030860e 100644 --- a/designsafe/static/styles/app-page.css +++ b/designsafe/static/styles/app-page.css @@ -32,7 +32,9 @@ } .s-app-page p { - line-height: 1.8; + --line-height: 1.8; /* variable so app-card.css can use */ + + line-height: var(--line-height); } /* Add more space between Bootstrap columns */