From e36272d78586df434dca45709338cd06910da43f Mon Sep 17 00:00:00 2001
From: The Magician <themagician@engineer.com>
Date: Sat, 2 Dec 2023 11:29:49 +0000
Subject: [PATCH] Improve display of card titles

---
 tarotcard.css   | 12 +++++++++---
 test/index.html |  2 +-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/tarotcard.css b/tarotcard.css
index 7999471..a1bbe4e 100644
--- a/tarotcard.css
+++ b/tarotcard.css
@@ -44,8 +44,9 @@
 .tarot-card__section--title {
     height: 10%;
 
-    display: grid;
-    place-items: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
     background: var(--tarot-card-title-background-color);
 }
@@ -53,7 +54,12 @@
 .tarot-card__title {
     margin: 0;
 
-    font-size: clamp(0.8rem, 6vw, 1.8rem);
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    text-transform: uppercase;
+
+    font-size: clamp(0.8rem, 5vw, 1.2rem);
     font-family: monospace;
     font-weight: 900;
 }
diff --git a/test/index.html b/test/index.html
index b6c2308..e6597c9 100644
--- a/test/index.html
+++ b/test/index.html
@@ -43,7 +43,7 @@
 					</div>
 
 					<div class="tarot-card__section tarot-card__section--title">
-						<p class="tarot-card__title">The Simple Card.</p>
+						<p class="tarot-card__title">This card has a title with very long text.</p>
 					</div>
 				</div>
 			</div>