add creatures from legion of gold; update a few other images

web/bestiary.html

@@ -43,16 +43,30 @@
         }
 
         /* Profile and abilities within each type */
+        .creature_id,
         .creature_profile,
         .creature_abilities {
             width: 45%; /* Give them each about half the container's width */
+            height: 345px;
         }
 
-        .creature_id { grid-area: 1 / 1 / 2 / 2; }
+        .creature_attacks {
-        .creature_profile { grid-area: 1 / 2 / 2 / 3; }
+            width: 40%;
-        .creature_abilities { grid-area: 1 / 3 / 2 / 4; }
+        }
-        .creature_attacks { grid-area: 2 / 1 / 3 / 4; }
+        .creature_mutations {
-        .creature_mutations { grid-area: 2 / 2 / 3 / 2; }
+            width: 60%;
+        }
+
+        .creature_description {
+            width: 90%;
+            margin-top: 5px;
+        }
+
+        .creature_id          { grid-area: 1 / 1 / 2 / 2; }
+        .creature_profile     { grid-area: 1 / 2 / 2 / 3; }
+        .creature_abilities   { grid-area: 1 / 3 / 2 / 4; }
+        .creature_attacks     { grid-area: 2 / 1 / 3 / 4; }
+        .creature_mutations   { grid-area: 2 / 2 / 3 / 2; }
         .creature_description { grid-area: 3 / 1 / 4 / 4; }
     </style>
     <title>Gamma World Bestiary</title>

web/bestiary.js

@@ -189,7 +189,7 @@ document.getElementById('searchForm').addEventListener('submit', function (event
             description.className = 'creature_description';
             let descriptionHTML = `
               <h3>Description</h3>
-              <p>${data.description}</p>
+              ${data.description}
             `;
             description.innerHTML = descriptionHTML;
             return description;