Refactor building CSS

Author: FifthTundraG

src/scss/buildings.scss

@@ -1,13 +1,9 @@
 .building {
-    width: 324px;
+    width: 96%;
     height: 64px;
-    border-style: solid;
-    border-color: rgb(248, 255, 198);
-    border-width: 3px;
-    transition: 0.3s;
+    border: 3px solid rgb(248, 255, 198);
     background-color: rgb(217, 215, 165);
     cursor: pointer;
-    margin-bottom: 4px;
 
     img {
         width: 64px;
@@ -18,41 +14,27 @@
     .building-content {
         display: flex;
         justify-content: space-between;
-        height: 64px;
+        align-items: center;
+        height: 100%;
         text-shadow: 0px 1px 4px black;
         padding-left: 4px;
 
         /* in an unnamed div */
         .building-name {
             font-size: 22px;
-            line-height: 1px;
-            margin-bottom: 0px;
+            margin: 0;
         }
 
         .building-price {
-            margin-top: 11px;
-            margin-left: 0.6px;
+            margin: 0;
+            margin-left: 0.6px; // todo: keep?
         }
 
-        .buildings-bought-wrapper {
-            display: flex;
-            height: 100%;
-            align-items: center;
-            float: right;
+        .buildings-bought {
+            font-size: 35px;
+            font-family: monospace;
+            margin: 0;
             margin-right: 12px;
-
-            .buildings-bought {
-                font-size: 35px;
-                font-family: monospace;
-                float: right;
-                margin: 0px
-            }
         }
     }
-}
-
-.building:hover {
-    border-style: solid;
-    border-color: rgb(249, 255, 164);
-    border-width: 3px;
 }

src/ts/buildings.ts

@@ -99,14 +99,11 @@ export class Building implements SaveProvider<BuildingSave> {
                     namePriceDiv.appendChild(buildingPrice);
                 buildingContent.appendChild(namePriceDiv);
 
-                const buildingsBoughtWrapper = document.createElement("div");
-                buildingsBoughtWrapper.className = "buildings-bought-wrapper";
-                    const buildingsBought = document.createElement("p");
-                    buildingsBought.className = "buildings-bought";
-                    buildingsBought.id = `${data.namePlural}Bought`;
-                    buildingsBought.innerText = "0";
-                    buildingsBoughtWrapper.appendChild(buildingsBought);
-                buildingContent.appendChild(buildingsBoughtWrapper);
+                const buildingsBought = document.createElement("p");
+                buildingsBought.className = "buildings-bought";
+                buildingsBought.id = `${data.namePlural}Bought`;
+                buildingsBought.innerText = "0";
+                buildingContent.appendChild(buildingsBought);
             this.html.appendChild(buildingContent);
         document.getElementById("buildingsWrapper").appendChild(this.html);
         // end setup HTML