From 9c39cd0e795761bd88edd0e840aebe8c720c8229 Mon Sep 17 00:00:00 2001
From: The Magician <themagician@engineer.com>
Date: Sat, 2 Dec 2023 15:14:23 +0000
Subject: [PATCH] Add tarot-card__link class

---
 tarotcard.css   |  9 +++++++++
 test/index.html | 28 ++++++++++++++++++++++++++--
 2 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/tarotcard.css b/tarotcard.css
index 0caa6ca..c005245 100644
--- a/tarotcard.css
+++ b/tarotcard.css
@@ -14,6 +14,15 @@
     max-width: 80vw;
 }
 
+.tarot-card__link {
+    display: block;
+    width: 100%;
+    height: 100%;
+
+    color: inherit;
+    text-decoration: none;
+}
+
 .tarot-card__content {
     width: 100%;
     height: 100%;
diff --git a/test/index.html b/test/index.html
index 758ce0a..e0be240 100644
--- a/test/index.html
+++ b/test/index.html
@@ -55,6 +55,24 @@
 			</div>
 			-->
 
+			<!-- Simplest possible card. Just displays a title and a piece of artwork. -->
+			<div id="link-card" class="tarot-card">
+				<a class="tarot-card__link" href="https://themagician.cc">
+					<div class="tarot-card__content">
+						<div class="tarot-card__section tarot-card__section--art">
+							<img class="tarot-card__art"
+								src="images/card_art_std.jpg"
+								alt="The Link Card artwork image."
+								title="The Link Card artwork image." />
+						</div>
+
+						<div class="tarot-card__section tarot-card__section--title">
+							<p class="tarot-card__title">The Link Card.</p>
+						</div>
+					</div>
+				</a>
+			</div>
+
 			<!-- Identical to The Simple Card, but uses the "deal" animation to slide in when the page is loaded. -->
 			<!--
 			<div id="deal-card" class="tarot-card tarot-card--deal">
@@ -74,6 +92,7 @@
 			-->
 
 			<!-- Uses the "flip" animation to turn over to the other side when hovered on. -->
+			<!--
 			<div id="flip-card" class="tarot-card tarot-card--flip-on-hover">
 				<div class="tarot-card__content">
 					<div class="tarot-card__side tarot-card__side--front">
@@ -96,9 +115,11 @@
 					</div>
 				</div>
 			</div>
+			-->
 
 			<!-- Uses both the "deal" and "flip" animations. -->
-			<div id="flip-card" class="tarot-card tarot-card--deal tarot-card--flip-on-hover">
+			<!--
+			<div id="deal-flip-card" class="tarot-card tarot-card--deal tarot-card--flip-on-hover">
 				<div class="tarot-card__content">
 					<div class="tarot-card__side tarot-card__side--front">
 						<div class="tarot-card__section tarot-card__section--art">
@@ -120,9 +141,11 @@
 					</div>
 				</div>
 			</div>
+			-->
 
 			<!-- Uses the "automatic flip" animation. -->
-			<div id="flip-card" class="tarot-card tarot-card--flip-automatically">
+			<!--
+			<div id="auto-flip-card" class="tarot-card tarot-card--flip-automatically">
 				<div class="tarot-card__content">
 					<div class="tarot-card__side tarot-card__side--front">
 						<div class="tarot-card__section tarot-card__section--art">
@@ -144,6 +167,7 @@
 					</div>
 				</div>
 			</div>
+			-->
 
 		</div>
 	</body>