edited colours; added Bai Jamjuree font; plurals in output text now set based on output values

src/routes/+page.svelte

@@ -21,22 +21,44 @@
         return `A ${v.name} ${v.type} photographed by ${v.imgCredit}.`
     }
 
-    function getPlural(type: string): string {
-        return `${type}(${type == "bus" ? "e" : ""}s)`;
+    function getPluralFragments(length: string | number, type: string): string[] {
+        let l: number = 0;
+        if (typeof(length) === "string") {
+            l = Number(length);
+        } else {
+            l = length;
+        }
+        if (l === 1.0) {
+            return ["", "is"];
+        } else {
+            if (type == "bus") {
+                return ["es", "are"];
+            } else {
+                return ["s", "are"];
+            }
+        }
     }
 
     function calcToVehicles() {
         let vehicle = getVehicle(vehicleId);
         calcVal = ((lengthVal * 1000) / vehicle.length).toFixed(2);
-        outputText = `${lengthVal} metre(s) is equal to the length of ${calcVal} ${vehicle.name} ${getPlural(vehicle.type)}!`
         vehicleVal = Number(calcVal);
+
+        let vehicleFragments = getPluralFragments(vehicleVal, vehicle.type);
+        let lengthFragments = getPluralFragments(lengthVal, "");
+
+        outputText = `${Number(lengthVal)} metre${lengthFragments[0]} is equal to the length of ${vehicleVal} ${vehicle.name} ${vehicle.type}${vehicleFragments[0]}!`
     }
 
     function calcToLength() {
         let vehicle = getVehicle(vehicleId);
         calcVal = (vehicleVal * (vehicle.length / 1000)).toFixed(2);
-        outputText = `${vehicleVal} ${vehicle.name} ${getPlural(vehicle.type)} is equal to the length of ${calcVal} metre(s)!`
         lengthVal = Number(calcVal);
+
+        let vehicleFragments = getPluralFragments(vehicleVal, vehicle.type);
+        let lengthFragments = getPluralFragments(lengthVal, "");
+
+        outputText = `${Number(vehicleVal)} ${vehicle.name} ${vehicle.type}${vehicleFragments[0]} ${vehicleFragments[1]} ${lengthVal} metre${lengthFragments[0]} long!`
     }
 </script>
 
@@ -48,7 +70,6 @@
 
 <h1>bsag conv</h1>
 
-<div style="width: 100%; background-color: aquamarine; height: 2px;"></div>
 <div class="split-container">
     <div class="length-input-container">
         <div class="half-split-container">
@@ -58,9 +79,15 @@
     </div>
 
     <div class="button-container">
+        <div class="wide-buttons">
             <button onclick={() => calcToVehicles()}>→</button>
             <button onclick={() => calcToLength()}>←</button>
         </div>
+        <div class="slim-buttons">
+            <button onclick={() => calcToVehicles()}>↓</button>
+            <button onclick={() => calcToLength()}>↑</button>
+        </div>
+    </div>
 
     <div class="vehicle-input-container">
         <select name="vehicle" id="vehicle" bind:value={vehicleId}>
@@ -84,21 +111,106 @@
 
 <p>{outputText}</p>
 
-<p class="credit-text">Unless credited to denizk0461 (me), all images courtesy of their respective photographers. Images and vehicle information sourced from <a href="https://wiki.bre-forum.de">wiki.bre-forum.de</a></p>
+<p class="credit-text">Unless credited to denizk0461 (me), all images courtesy of their respective displayed photographers. Images and vehicle information sourced from <a href="https://wiki.bre-forum.de">wiki.bre-forum.de</a></p>
 
 <style>
+    @font-face {
+        font-family: "Bai Jamjuree";
+        src: url("/fonts/bai-jamjuree/extralight.ttf");
+        font-weight: 200;
+    }
+    @font-face {
+        font-family: "Bai Jamjuree";
+        src: url("/fonts/bai-jamjuree/extralight-italic.ttf");
+        font-weight: 200;
+        font-style: italic;
+    }
+    @font-face {
+        font-family: "Bai Jamjuree";
+        src: url("/fonts/bai-jamjuree/light.ttf");
+        font-weight: 300;
+    }
+    @font-face {
+        font-family: "Bai Jamjuree";
+        src: url("/fonts/bai-jamjuree/light-italic.ttf");
+        font-weight: 300;
+        font-style: italic;
+    }
+    @font-face {
+        font-family: "Bai Jamjuree";
+        src: url("/fonts/bai-jamjuree/regular.ttf");
+        font-weight: 400;
+    }
+    @font-face {
+        font-family: "Bai Jamjuree";
+        src: url("/fonts/bai-jamjuree/italic.ttf");
+        font-weight: 400;
+        font-style: italic;
+    }
+    @font-face {
+        font-family: "Bai Jamjuree";
+        src: url("/fonts/bai-jamjuree/medium.ttf");
+        font-weight: 500;
+    }
+    @font-face {
+        font-family: "Bai Jamjuree";
+        src: url("/fonts/bai-jamjuree/medium-italic.ttf");
+        font-weight: 500;
+        font-style: italic;
+    }
+    @font-face {
+        font-family: "Bai Jamjuree";
+        src: url("/fonts/bai-jamjuree/semibold.ttf");
+        font-weight: 600;
+    }
+    @font-face {
+        font-family: "Bai Jamjuree";
+        src: url("/fonts/bai-jamjuree/semibold-italic.ttf");
+        font-weight: 600;
+        font-style: italic;
+    }
+    @font-face {
+        font-family: "Bai Jamjuree";
+        src: url("/fonts/bai-jamjuree/bold.ttf");
+        font-weight: bold;
+    }
+    @font-face {
+        font-family: "Bai Jamjuree";
+        src: url("/fonts/bai-jamjuree/bold-italic.ttf");
+        font-weight: bold;
+        font-style: italic;
+    }
+
     :root {
+        --color-bsag-red: #FF0000;
+        --color-bsag-red-bg: color-mix(in srgb, var(--color-bsag-red) 20%, transparent);
+        --color-bsag-red-bg-hover: color-mix(in srgb, var(--color-bsag-red) 60%, transparent);
+
+        --color-bg: #1f1f1f;
+        --color-text: #e0e0e0;
+
+        background-color: var(--color-bg);
+
         max-width: 800px;
         interpolate-size: allow-sizes;
     }
 
+    p, h1, h2, h3, h4, h5, h6 {
+        color: var(--color-text);
+        font-family: 'Bai Jamjuree', sans-serif;
+    }
+
     .split-container {
-        display: grid;
-        grid-template-columns: 3fr 1fr 3fr;
+        display: flex;
         gap: 8px;
+        flex-direction: row;
         box-sizing: border-box;
     }
 
+    .length-input-container, .vehicle-input-container {
+        flex: 2;
+    }
+
     .half-split-container {
         display: grid;
         gap: 16px;
@@ -116,6 +228,36 @@
     .button-container {
         display: flex;
         flex-direction: column;
+        flex: 1;
+    }
+
+    .wide-buttons, .slim-buttons {
+        gap: 8px;
+    }
+
+    button {
+        font-size: 1.5rem;
+        padding: 8px;
+        border: dashed var(--color-bsag-red) 2px;
+        color: var(--color-text);
+        background-color: var(--color-bsag-red-bg);
+    }
+    button:hover {
+        background-color: var(--color-bsag-red-bg-hover);
+        cursor: pointer;
+    }
+
+    .wide-buttons {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .slim-buttons {
+        display: none;
+        flex-direction: row;
+    }
+    .slim-buttons button {
+        flex: 1;
     }
 
     .img-container {
@@ -137,15 +279,39 @@
         bottom: 0;
         margin: 0;
         padding: 4px 6px;
-        background-color: aqua;
+        color: var(--color-text);
+        background-color: var(--color-bsag-red-bg-hover);
     }
 
     .credit-text, .credit-text a {
         font-size: 0.9rem;
-        color: #666;
+        color: #999;
     }
 
     .credit-text a {
         text-decoration: dashed 1px underline;
     }
+
+    @media screen and (max-width: 666px) {
+        .split-container {
+            flex-direction: column;
+        }
+
+        .img-container {
+            height: 300px;
+        }
+
+        .wide-buttons {
+            display: none;
+        }
+
+        .slim-buttons {
+            display: flex;
+        }
+    }
+    @media screen and (max-width: 540px) {
+        .img-container {
+            height: 200px;
+        }
+    }
 </style>