From ffce189ddc28031284c71dc1cc4402620c873523 Mon Sep 17 00:00:00 2001
From: Pyro Nicampt <81565698+PyroNicampt@users.noreply.github.com>
Date: Thu, 2 Jan 2025 06:30:14 -0600
Subject: [PATCH] Clean key layout

---
 legend.js | 11 ++++++++---
 style.css |  4 ++++
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/legend.js b/legend.js
index fe2c7f2..073f7e5 100644
--- a/legend.js
+++ b/legend.js
@@ -150,13 +150,17 @@ function populateKey(){
     addKeyEntry('<use href="#speedSign_5"/>', ' Speed Limit');
     addKeyEntry('<use href="#mrk_office" fill="#c4693e" transform="scale(0.75)"/>', ' Station Office');
     addKeyEntry('<use href="#mrk_shop" fill="#4f54e9" transform="scale(0.75)"/>', ' Shop');
+    addKeyEntry('<use href="#mrk_service_repair" fill="#239a96" transform="scale(0.75)"/>', ' Repair Service');
+    addKeyEntry('<use href="#mrk_service_diesel" fill="#239a96" transform="scale(0.75)"/>', ' Diesel Refuel');
+    addKeyEntry('<use href="#mrk_service_charger" fill="#239a96" transform="scale(0.75)"/>', ' Electric Charger');
     addKeyEntry('<use href="#mrk_coal" fill="#202020" transform="scale(0.75)"/>', ' Coal Tower');
     addKeyEntry('<use href="#mrk_water" fill="#3fa5ff" transform="scale(0.75)"/>', ' Water Tower');
     addKeyEntry('<use href="#mrk_landmark" fill="#af5757" transform="scale(0.75)"/>', ' Landmark');
     addKeyEntry('<use href="#mrk_garage" fill="#8b5dd7" transform="scale(0.75)"/>', ' Garage');
-    addKeyEntry('<use href="#mrk_service_repair" fill="#239a96" transform="scale(0.75)"/>', ' Repair Service');
-    addKeyEntry('<use href="#mrk_service_diesel" fill="#239a96" transform="scale(0.75)"/>', ' Diesel Refuel');
-    addKeyEntry('<use href="#mrk_service_charger" fill="#239a96" transform="scale(0.75)"/>', ' Electric Charger');
+    //Add empty entries to make entries align right in the columns.
+    for(let i=0; i<4; i++){
+        addKeyEntry();
+    }
 }
 
 /**
@@ -165,6 +169,7 @@ function populateKey(){
  * @param {string} keyLabel
  */
 function addKeyEntry(keyImageHTML, keyLabel){
+    if(!keyLabel) keyLabel = '&nbsp;';
     let keyDiv = document.createElement('div');
     if(keyImageHTML){
         let keyImage = document.createElement('svg');
diff --git a/style.css b/style.css
index 68db1dd..8c0e54f 100644
--- a/style.css
+++ b/style.css
@@ -86,6 +86,10 @@ a:visited{
     }
 }
 
+#legendKey{
+    columns: 2;
+}
+
 #legend{
     transition: transform 400ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
     display: flex;