From 81ab6d7acae0576bb75d5d4876ad883e8c5c5918 Mon Sep 17 00:00:00 2001
From: Chris Manson <chris@manson.ie>
Date: Wed, 17 Mar 2021 15:12:00 +0000
Subject: [PATCH] add ability to link to a particular mascot

---
 app/components/mascots/mascot-list.hbs      | 2 +-
 app/components/mascots/mascot-list/item.hbs | 2 +-
 app/styles/app.css                          | 1 +
 app/styles/components/mascots.css           | 3 +++
 4 files changed, 6 insertions(+), 2 deletions(-)
 create mode 100644 app/styles/components/mascots.css

diff --git a/app/components/mascots/mascot-list.hbs b/app/components/mascots/mascot-list.hbs
index d57f678b8..2ce573af0 100644
--- a/app/components/mascots/mascot-list.hbs
+++ b/app/components/mascots/mascot-list.hbs
@@ -1,6 +1,6 @@
 <ul class="unstyled grid {{if (eq @display "small") "sm:grid-2 lg:grid-3" "sm:grid-1 lg:grid-2"}}">
   {{#each @mascots as |mascot|}}
-    <li id={{mascot.id}} data-test-mascot>
+    <li data-test-mascot>
       <Mascots::MascotList::Item
         @mascot={{mascot}}
       />
diff --git a/app/components/mascots/mascot-list/item.hbs b/app/components/mascots/mascot-list/item.hbs
index 6b40ab54a..7cbd7857b 100644
--- a/app/components/mascots/mascot-list/item.hbs
+++ b/app/components/mascots/mascot-list/item.hbs
@@ -1,4 +1,4 @@
-<figure>
+<figure class="mascot-item" id={{@mascot.id}}>
   <div class="well well-1/1">
     <ResponsiveImage
       @src="/images/tomsters/{{@mascot.image}}"
diff --git a/app/styles/app.css b/app/styles/app.css
index 42821066a..66cedb8fa 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -13,6 +13,7 @@
 @import "components/team-list.css";
 @import "components/terminal-code.css";
 @import "components/callout-banner.css";
+@import "components/mascots.css";
 @import "legacy/form.css";
 
 @media only percy {
diff --git a/app/styles/components/mascots.css b/app/styles/components/mascots.css
new file mode 100644
index 000000000..826ab2428
--- /dev/null
+++ b/app/styles/components/mascots.css
@@ -0,0 +1,3 @@
+.mascot-item:target .well {
+  border: 2px solid var(--color-brand-40);
+}