feat: Style main result

public/index.html

@@ -111,8 +111,13 @@
                     <h2 class="card-header-title title is-2 is-centered" data-i18n="result">Ergebnis</h2>
                 </div>
                 <div class="card-content">
-                    <div class="is-size-5" id="num-rats-resultsDiv"></div>
+                    <div class="is-size-5" id="num-rats-resultsDiv">
-                    <p data-i18n="input-data-num-rats">Bitte gib erst die Maße ein, dann siehst du hier die Anzahl der Ratten die hineinpassen.</p>
+                        <p data-i18n="input-data-num-rats">
+                            Bitte gib erst die Maße ein, dann siehst du hier die Anzahl
+                            der Ratten die hineinpassen.
+                        </p>
+
+                    </div>
                 </div>
             </div>
         </div>
@@ -139,7 +144,8 @@
                     </div>
                     <div class="card-content">
                         <div class="is-size-5" id="cageCalcResultsDiv"></div>
-                        <p data-i18n="please-input-cage-calc">Stell ein für wie viel Ratten der Käfig sein soll, danach siehst du hier das Ergebnis</p>
+                        <p data-i18n="please-input-cage-calc">Stell ein für wie viel Ratten der Käfig sein soll, danach
+                            siehst du hier das Ergebnis</p>
                     </div>
                 </div>
             </div>
@@ -215,7 +221,8 @@
                 </div>
                 <div class="card-content">
                     <div id="resultsDiv">
-                        <p data-i18n="please-input-cage-check">Bitte gib erst die Maße des Käfigs und die Anzahl an Ratten ein. Danach siehst du hier, ob der Käfig passt.</p>
+                        <p data-i18n="please-input-cage-check">Bitte gib erst die Maße des Käfigs und die Anzahl an
+                            Ratten ein. Danach siehst du hier, ob der Käfig passt.</p>
                     </div>
                 </div>
             </div>
@@ -223,7 +230,8 @@
     </div>
 </div>
 
-<button class="button is-primary floating js-modal-trigger" data-target="modal-feedback" data-i18n="give-feedback"></button>
+<button class="button is-primary floating js-modal-trigger" data-target="modal-feedback"
+        data-i18n="give-feedback"></button>
 
 <div class="footer" aria-label="Footer">
     <div class="columns">
@@ -279,7 +287,6 @@
 </div>
 
 
-
 <div id="modal-feedback" class="modal">
 
     <div class="modal-background"></div>

src/index.js

@@ -427,6 +427,7 @@ function updateNumRatsCalculator() {
     resultsDiv.innerHTML = "";
     const p = document.createElement('p');
     p.textContent = i18next.t("cage-for-x-rats", {"num_rats": Math.floor(allowedNumRats)});
+    p.className = " is-size-5 has-text-weight-semibold"
     resultsDiv.appendChild(p);
     resultsDiv.appendChild(result);