make the entire search tile a hyperlink

src/data.rs

@@ -63,7 +63,7 @@ impl Card {
 
 impl Display for Card {
     fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
-        write!(f, r#"<h2><a href="/card/{}">{}</a></h2><br/><em>"#, &self.id, &self.name)?;
+        write!(f, r#"<h2 class="cardname">{}</h2><br/><em>"#, &self.name)?;
         if let Some(level) = self.level {
             if self.card_type.contains("XYZ") {
                 f.write_str("Rank ")?;

src/main.rs

@@ -161,7 +161,7 @@ fn render_results(res: &mut String, query: &str) -> Result<(), Box<dyn std::erro
     for card in matches {
         write!(
             res,
-            r#"<div class="cardresult"><a href="/card/{}"><img src="{}/static/thumb/{}.jpg" class="thumb"/></a>{card}</div>"#,
+            r#"<a class="cardresult" href="/card/{}"><img src="{}/static/thumb/{}.jpg" class="thumb"/>{card}</a>"#,
             card.id,
             IMG_HOST.as_str(),
             card.id

static/style.css

@@ -87,10 +87,25 @@ img {
   float: right;
   margin: 0 0 1em 1.5em;
 }
+/* 
+ * This is a big <a> element that looks and behaves more like a div
+ * because we can’t put a div inside an a.
+ */
 .cardresult {
-  margin: 1em;
+  display: block;
+  padding: 1em;
   flex-grow: 1;
   flex-basis: 25em;
+  transition-duration: 200ms;
+  text-decoration: none;
+  color: var(--fg);
+}
+.cardresult:hover {
+  background-color: var(--bg);
+}
+.cardname {
+  color: var(--hl);
+  text-decoration: underline;
 }
 
 @media screen and (max-width: 680px) {