From c636feefc7b3a19dc82cc3ee18e82c7423ea1ff4 Mon Sep 17 00:00:00 2001
From: Erin Schnabel <erinschnabel@gmail.com>
Date: Sun, 15 Oct 2023 21:50:45 -0400
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20=F0=9F=8E=A8=20Properly=20float?=
 =?UTF-8?q?=20remote=20#token=20images?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/css-snippets/dnd5e-compendium.css | 207 ++++++++++++++++++++-
 src/scss/dnd5e/_float-images.scss          |   3 +-
 2 files changed, 203 insertions(+), 7 deletions(-)

diff --git a/examples/css-snippets/dnd5e-compendium.css b/examples/css-snippets/dnd5e-compendium.css
index 48ca14c9e..affa37d42 100644
--- a/examples/css-snippets/dnd5e-compendium.css
+++ b/examples/css-snippets/dnd5e-compendium.css
@@ -279,204 +279,399 @@ body {
 }
 
 .json5e-background div[src$="#center"],
+.json5e-background img[src$="#center"],
 .json5e-class div[src$="#center"],
+.json5e-class img[src$="#center"],
 .json5e-deck div[src$="#center"],
+.json5e-deck img[src$="#center"],
 .json5e-deity div[src$="#center"],
+.json5e-deity img[src$="#center"],
 .json5e-feat div[src$="#center"],
+.json5e-feat img[src$="#center"],
 .json5e-hazard div[src$="#center"],
+.json5e-hazard img[src$="#center"],
 .json5e-item div[src$="#center"],
+.json5e-item img[src$="#center"],
 .json5e-monster div[src$="#center"],
+.json5e-monster img[src$="#center"],
 .json5e-note div[src$="#center"],
+.json5e-note img[src$="#center"],
 .json5e-object div[src$="#center"],
+.json5e-object img[src$="#center"],
 .json5e-psionic div[src$="#center"],
+.json5e-psionic img[src$="#center"],
 .json5e-race div[src$="#center"],
+.json5e-race img[src$="#center"],
 .json5e-reward div[src$="#center"],
+.json5e-reward img[src$="#center"],
 .json5e-spell div[src$="#center"],
-.json5e-vehicle div[src$="#center"] {
+.json5e-spell img[src$="#center"],
+.json5e-vehicle div[src$="#center"],
+.json5e-vehicle img[src$="#center"] {
   text-align: center;
 }
 .json5e-background div[src$="#card"], .json5e-background div[src$="#symbol"], .json5e-background div[src$="#portrait"], .json5e-background div[src$="#token"], .json5e-background div[src$="#right"],
+.json5e-background img[src$="#card"],
+.json5e-background img[src$="#symbol"],
+.json5e-background img[src$="#portrait"],
+.json5e-background img[src$="#token"],
+.json5e-background img[src$="#right"],
 .json5e-class div[src$="#card"],
 .json5e-class div[src$="#symbol"],
 .json5e-class div[src$="#portrait"],
 .json5e-class div[src$="#token"],
 .json5e-class div[src$="#right"],
+.json5e-class img[src$="#card"],
+.json5e-class img[src$="#symbol"],
+.json5e-class img[src$="#portrait"],
+.json5e-class img[src$="#token"],
+.json5e-class img[src$="#right"],
 .json5e-deck div[src$="#card"],
 .json5e-deck div[src$="#symbol"],
 .json5e-deck div[src$="#portrait"],
 .json5e-deck div[src$="#token"],
 .json5e-deck div[src$="#right"],
+.json5e-deck img[src$="#card"],
+.json5e-deck img[src$="#symbol"],
+.json5e-deck img[src$="#portrait"],
+.json5e-deck img[src$="#token"],
+.json5e-deck img[src$="#right"],
 .json5e-deity div[src$="#card"],
 .json5e-deity div[src$="#symbol"],
 .json5e-deity div[src$="#portrait"],
 .json5e-deity div[src$="#token"],
 .json5e-deity div[src$="#right"],
+.json5e-deity img[src$="#card"],
+.json5e-deity img[src$="#symbol"],
+.json5e-deity img[src$="#portrait"],
+.json5e-deity img[src$="#token"],
+.json5e-deity img[src$="#right"],
 .json5e-feat div[src$="#card"],
 .json5e-feat div[src$="#symbol"],
 .json5e-feat div[src$="#portrait"],
 .json5e-feat div[src$="#token"],
 .json5e-feat div[src$="#right"],
+.json5e-feat img[src$="#card"],
+.json5e-feat img[src$="#symbol"],
+.json5e-feat img[src$="#portrait"],
+.json5e-feat img[src$="#token"],
+.json5e-feat img[src$="#right"],
 .json5e-hazard div[src$="#card"],
 .json5e-hazard div[src$="#symbol"],
 .json5e-hazard div[src$="#portrait"],
 .json5e-hazard div[src$="#token"],
 .json5e-hazard div[src$="#right"],
+.json5e-hazard img[src$="#card"],
+.json5e-hazard img[src$="#symbol"],
+.json5e-hazard img[src$="#portrait"],
+.json5e-hazard img[src$="#token"],
+.json5e-hazard img[src$="#right"],
 .json5e-item div[src$="#card"],
 .json5e-item div[src$="#symbol"],
 .json5e-item div[src$="#portrait"],
 .json5e-item div[src$="#token"],
 .json5e-item div[src$="#right"],
+.json5e-item img[src$="#card"],
+.json5e-item img[src$="#symbol"],
+.json5e-item img[src$="#portrait"],
+.json5e-item img[src$="#token"],
+.json5e-item img[src$="#right"],
 .json5e-monster div[src$="#card"],
 .json5e-monster div[src$="#symbol"],
 .json5e-monster div[src$="#portrait"],
 .json5e-monster div[src$="#token"],
 .json5e-monster div[src$="#right"],
+.json5e-monster img[src$="#card"],
+.json5e-monster img[src$="#symbol"],
+.json5e-monster img[src$="#portrait"],
+.json5e-monster img[src$="#token"],
+.json5e-monster img[src$="#right"],
 .json5e-note div[src$="#card"],
 .json5e-note div[src$="#symbol"],
 .json5e-note div[src$="#portrait"],
 .json5e-note div[src$="#token"],
 .json5e-note div[src$="#right"],
+.json5e-note img[src$="#card"],
+.json5e-note img[src$="#symbol"],
+.json5e-note img[src$="#portrait"],
+.json5e-note img[src$="#token"],
+.json5e-note img[src$="#right"],
 .json5e-object div[src$="#card"],
 .json5e-object div[src$="#symbol"],
 .json5e-object div[src$="#portrait"],
 .json5e-object div[src$="#token"],
 .json5e-object div[src$="#right"],
+.json5e-object img[src$="#card"],
+.json5e-object img[src$="#symbol"],
+.json5e-object img[src$="#portrait"],
+.json5e-object img[src$="#token"],
+.json5e-object img[src$="#right"],
 .json5e-psionic div[src$="#card"],
 .json5e-psionic div[src$="#symbol"],
 .json5e-psionic div[src$="#portrait"],
 .json5e-psionic div[src$="#token"],
 .json5e-psionic div[src$="#right"],
+.json5e-psionic img[src$="#card"],
+.json5e-psionic img[src$="#symbol"],
+.json5e-psionic img[src$="#portrait"],
+.json5e-psionic img[src$="#token"],
+.json5e-psionic img[src$="#right"],
 .json5e-race div[src$="#card"],
 .json5e-race div[src$="#symbol"],
 .json5e-race div[src$="#portrait"],
 .json5e-race div[src$="#token"],
 .json5e-race div[src$="#right"],
+.json5e-race img[src$="#card"],
+.json5e-race img[src$="#symbol"],
+.json5e-race img[src$="#portrait"],
+.json5e-race img[src$="#token"],
+.json5e-race img[src$="#right"],
 .json5e-reward div[src$="#card"],
 .json5e-reward div[src$="#symbol"],
 .json5e-reward div[src$="#portrait"],
 .json5e-reward div[src$="#token"],
 .json5e-reward div[src$="#right"],
+.json5e-reward img[src$="#card"],
+.json5e-reward img[src$="#symbol"],
+.json5e-reward img[src$="#portrait"],
+.json5e-reward img[src$="#token"],
+.json5e-reward img[src$="#right"],
 .json5e-spell div[src$="#card"],
 .json5e-spell div[src$="#symbol"],
 .json5e-spell div[src$="#portrait"],
 .json5e-spell div[src$="#token"],
 .json5e-spell div[src$="#right"],
+.json5e-spell img[src$="#card"],
+.json5e-spell img[src$="#symbol"],
+.json5e-spell img[src$="#portrait"],
+.json5e-spell img[src$="#token"],
+.json5e-spell img[src$="#right"],
 .json5e-vehicle div[src$="#card"],
 .json5e-vehicle div[src$="#symbol"],
 .json5e-vehicle div[src$="#portrait"],
 .json5e-vehicle div[src$="#token"],
-.json5e-vehicle div[src$="#right"] {
+.json5e-vehicle div[src$="#right"],
+.json5e-vehicle img[src$="#card"],
+.json5e-vehicle img[src$="#symbol"],
+.json5e-vehicle img[src$="#portrait"],
+.json5e-vehicle img[src$="#token"],
+.json5e-vehicle img[src$="#right"] {
   float: right;
   padding-left: 5px;
 }
 .json5e-background div[src$="#center"] img, .json5e-background div[src$="#right"] img,
+.json5e-background img[src$="#center"] img,
+.json5e-background img[src$="#right"] img,
 .json5e-class div[src$="#center"] img,
 .json5e-class div[src$="#right"] img,
+.json5e-class img[src$="#center"] img,
+.json5e-class img[src$="#right"] img,
 .json5e-deck div[src$="#center"] img,
 .json5e-deck div[src$="#right"] img,
+.json5e-deck img[src$="#center"] img,
+.json5e-deck img[src$="#right"] img,
 .json5e-deity div[src$="#center"] img,
 .json5e-deity div[src$="#right"] img,
+.json5e-deity img[src$="#center"] img,
+.json5e-deity img[src$="#right"] img,
 .json5e-feat div[src$="#center"] img,
 .json5e-feat div[src$="#right"] img,
+.json5e-feat img[src$="#center"] img,
+.json5e-feat img[src$="#right"] img,
 .json5e-hazard div[src$="#center"] img,
 .json5e-hazard div[src$="#right"] img,
+.json5e-hazard img[src$="#center"] img,
+.json5e-hazard img[src$="#right"] img,
 .json5e-item div[src$="#center"] img,
 .json5e-item div[src$="#right"] img,
+.json5e-item img[src$="#center"] img,
+.json5e-item img[src$="#right"] img,
 .json5e-monster div[src$="#center"] img,
 .json5e-monster div[src$="#right"] img,
+.json5e-monster img[src$="#center"] img,
+.json5e-monster img[src$="#right"] img,
 .json5e-note div[src$="#center"] img,
 .json5e-note div[src$="#right"] img,
+.json5e-note img[src$="#center"] img,
+.json5e-note img[src$="#right"] img,
 .json5e-object div[src$="#center"] img,
 .json5e-object div[src$="#right"] img,
+.json5e-object img[src$="#center"] img,
+.json5e-object img[src$="#right"] img,
 .json5e-psionic div[src$="#center"] img,
 .json5e-psionic div[src$="#right"] img,
+.json5e-psionic img[src$="#center"] img,
+.json5e-psionic img[src$="#right"] img,
 .json5e-race div[src$="#center"] img,
 .json5e-race div[src$="#right"] img,
+.json5e-race img[src$="#center"] img,
+.json5e-race img[src$="#right"] img,
 .json5e-reward div[src$="#center"] img,
 .json5e-reward div[src$="#right"] img,
+.json5e-reward img[src$="#center"] img,
+.json5e-reward img[src$="#right"] img,
 .json5e-spell div[src$="#center"] img,
 .json5e-spell div[src$="#right"] img,
+.json5e-spell img[src$="#center"] img,
+.json5e-spell img[src$="#right"] img,
 .json5e-vehicle div[src$="#center"] img,
-.json5e-vehicle div[src$="#right"] img {
+.json5e-vehicle div[src$="#right"] img,
+.json5e-vehicle img[src$="#center"] img,
+.json5e-vehicle img[src$="#right"] img {
   max-height: 60vh;
 }
 .json5e-background div[src$="#right"],
+.json5e-background img[src$="#right"],
 .json5e-class div[src$="#right"],
+.json5e-class img[src$="#right"],
 .json5e-deck div[src$="#right"],
+.json5e-deck img[src$="#right"],
 .json5e-deity div[src$="#right"],
+.json5e-deity img[src$="#right"],
 .json5e-feat div[src$="#right"],
+.json5e-feat img[src$="#right"],
 .json5e-hazard div[src$="#right"],
+.json5e-hazard img[src$="#right"],
 .json5e-item div[src$="#right"],
+.json5e-item img[src$="#right"],
 .json5e-monster div[src$="#right"],
+.json5e-monster img[src$="#right"],
 .json5e-note div[src$="#right"],
+.json5e-note img[src$="#right"],
 .json5e-object div[src$="#right"],
+.json5e-object img[src$="#right"],
 .json5e-psionic div[src$="#right"],
+.json5e-psionic img[src$="#right"],
 .json5e-race div[src$="#right"],
+.json5e-race img[src$="#right"],
 .json5e-reward div[src$="#right"],
+.json5e-reward img[src$="#right"],
 .json5e-spell div[src$="#right"],
-.json5e-vehicle div[src$="#right"] {
+.json5e-spell img[src$="#right"],
+.json5e-vehicle div[src$="#right"],
+.json5e-vehicle img[src$="#right"] {
   max-width: 50%;
 }
 .json5e-background div[src$="#card"], .json5e-background div[src$="#token"],
+.json5e-background img[src$="#card"],
+.json5e-background img[src$="#token"],
 .json5e-class div[src$="#card"],
 .json5e-class div[src$="#token"],
+.json5e-class img[src$="#card"],
+.json5e-class img[src$="#token"],
 .json5e-deck div[src$="#card"],
 .json5e-deck div[src$="#token"],
+.json5e-deck img[src$="#card"],
+.json5e-deck img[src$="#token"],
 .json5e-deity div[src$="#card"],
 .json5e-deity div[src$="#token"],
+.json5e-deity img[src$="#card"],
+.json5e-deity img[src$="#token"],
 .json5e-feat div[src$="#card"],
 .json5e-feat div[src$="#token"],
+.json5e-feat img[src$="#card"],
+.json5e-feat img[src$="#token"],
 .json5e-hazard div[src$="#card"],
 .json5e-hazard div[src$="#token"],
+.json5e-hazard img[src$="#card"],
+.json5e-hazard img[src$="#token"],
 .json5e-item div[src$="#card"],
 .json5e-item div[src$="#token"],
+.json5e-item img[src$="#card"],
+.json5e-item img[src$="#token"],
 .json5e-monster div[src$="#card"],
 .json5e-monster div[src$="#token"],
+.json5e-monster img[src$="#card"],
+.json5e-monster img[src$="#token"],
 .json5e-note div[src$="#card"],
 .json5e-note div[src$="#token"],
+.json5e-note img[src$="#card"],
+.json5e-note img[src$="#token"],
 .json5e-object div[src$="#card"],
 .json5e-object div[src$="#token"],
+.json5e-object img[src$="#card"],
+.json5e-object img[src$="#token"],
 .json5e-psionic div[src$="#card"],
 .json5e-psionic div[src$="#token"],
+.json5e-psionic img[src$="#card"],
+.json5e-psionic img[src$="#token"],
 .json5e-race div[src$="#card"],
 .json5e-race div[src$="#token"],
+.json5e-race img[src$="#card"],
+.json5e-race img[src$="#token"],
 .json5e-reward div[src$="#card"],
 .json5e-reward div[src$="#token"],
+.json5e-reward img[src$="#card"],
+.json5e-reward img[src$="#token"],
 .json5e-spell div[src$="#card"],
 .json5e-spell div[src$="#token"],
+.json5e-spell img[src$="#card"],
+.json5e-spell img[src$="#token"],
 .json5e-vehicle div[src$="#card"],
-.json5e-vehicle div[src$="#token"] {
+.json5e-vehicle div[src$="#token"],
+.json5e-vehicle img[src$="#card"],
+.json5e-vehicle img[src$="#token"] {
   width: 150px;
 }
 .json5e-background div[src$="#symbol"], .json5e-background div[src$="#portrait"],
+.json5e-background img[src$="#symbol"],
+.json5e-background img[src$="#portrait"],
 .json5e-class div[src$="#symbol"],
 .json5e-class div[src$="#portrait"],
+.json5e-class img[src$="#symbol"],
+.json5e-class img[src$="#portrait"],
 .json5e-deck div[src$="#symbol"],
 .json5e-deck div[src$="#portrait"],
+.json5e-deck img[src$="#symbol"],
+.json5e-deck img[src$="#portrait"],
 .json5e-deity div[src$="#symbol"],
 .json5e-deity div[src$="#portrait"],
+.json5e-deity img[src$="#symbol"],
+.json5e-deity img[src$="#portrait"],
 .json5e-feat div[src$="#symbol"],
 .json5e-feat div[src$="#portrait"],
+.json5e-feat img[src$="#symbol"],
+.json5e-feat img[src$="#portrait"],
 .json5e-hazard div[src$="#symbol"],
 .json5e-hazard div[src$="#portrait"],
+.json5e-hazard img[src$="#symbol"],
+.json5e-hazard img[src$="#portrait"],
 .json5e-item div[src$="#symbol"],
 .json5e-item div[src$="#portrait"],
+.json5e-item img[src$="#symbol"],
+.json5e-item img[src$="#portrait"],
 .json5e-monster div[src$="#symbol"],
 .json5e-monster div[src$="#portrait"],
+.json5e-monster img[src$="#symbol"],
+.json5e-monster img[src$="#portrait"],
 .json5e-note div[src$="#symbol"],
 .json5e-note div[src$="#portrait"],
+.json5e-note img[src$="#symbol"],
+.json5e-note img[src$="#portrait"],
 .json5e-object div[src$="#symbol"],
 .json5e-object div[src$="#portrait"],
+.json5e-object img[src$="#symbol"],
+.json5e-object img[src$="#portrait"],
 .json5e-psionic div[src$="#symbol"],
 .json5e-psionic div[src$="#portrait"],
+.json5e-psionic img[src$="#symbol"],
+.json5e-psionic img[src$="#portrait"],
 .json5e-race div[src$="#symbol"],
 .json5e-race div[src$="#portrait"],
+.json5e-race img[src$="#symbol"],
+.json5e-race img[src$="#portrait"],
 .json5e-reward div[src$="#symbol"],
 .json5e-reward div[src$="#portrait"],
+.json5e-reward img[src$="#symbol"],
+.json5e-reward img[src$="#portrait"],
 .json5e-spell div[src$="#symbol"],
 .json5e-spell div[src$="#portrait"],
+.json5e-spell img[src$="#symbol"],
+.json5e-spell img[src$="#portrait"],
 .json5e-vehicle div[src$="#symbol"],
-.json5e-vehicle div[src$="#portrait"] {
+.json5e-vehicle div[src$="#portrait"],
+.json5e-vehicle img[src$="#symbol"],
+.json5e-vehicle img[src$="#portrait"] {
   width: 200px;
 }
 
diff --git a/src/scss/dnd5e/_float-images.scss b/src/scss/dnd5e/_float-images.scss
index 016bbf24b..4ffe6b7b4 100644
--- a/src/scss/dnd5e/_float-images.scss
+++ b/src/scss/dnd5e/_float-images.scss
@@ -13,7 +13,8 @@
 .json5e-reward,
 .json5e-spell,
 .json5e-vehicle {
-  div {
+  div,
+  img {
     &[src$="#center"] {
       text-align: center;
     }