Fix lighthouse audit, add input subtitle

README.md

@@ -1,11 +1,11 @@
 # Mandelbrot.site
 
-[![Tests](https://github.com/rosslh/mandelbrot.site/actions/workflows/tests.yml/badge.svg)](https://github.com/rosslh/mandelbrot.site/actions/workflows/tests.yml)
-[![Deploy](https://github.com/rosslh/mandelbrot.site/actions/workflows/deploy.yml/badge.svg)](https://github.com/rosslh/mandelbrot.site/actions/workflows/deploy.yml)
-[![Uptime Robot status](https://img.shields.io/uptimerobot/status/m792388109-4c544ded2b0e440130ddd401)](https://mandelbrot.site)
-
 [Mandelbrot.site](https://mandelbrot.site) is a web-based viewer that allows you to explore the fascinating world of the Mandelbrot set, a mathematical fractal. The project leverages cutting-edge web technologies, including Rust, WebAssembly (Wasm), TypeScript, and Leaflet.js, to create a high-performance, interactive, and visually captivating experience.
 
+![GitHub branch check runs](https://img.shields.io/github/check-runs/rosslh/mandelbrot.site/master?style=flat-square&label=Checks)
+![Uptime Robot status](https://img.shields.io/uptimerobot/status/m792388109-4c544ded2b0e440130ddd401?up_message=online&style=flat-square&label=Status)
+![Uptime Robot ratio (30 days)](<https://img.shields.io/uptimerobot/ratio/m792388109-4c544ded2b0e440130ddd401?style=flat-square&label=Uptime%20(1mo)>)
+
 ## Project Structure
 
 - **Mandelbrot Set Implementation**: [`mandelbrot/src/lib.rs`](mandelbrot/src/lib.rs)

client/css/styles.scss

@@ -87,7 +87,7 @@ html {
   width: 170px;
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 14px;
 
   .shortcutHint {
     text-decoration: underline;
@@ -122,7 +122,7 @@ html {
   .iterationButtons {
     display: inline-flex;
     gap: 8px;
-    margin-top: -12px;
+    margin-top: -26px;
     margin-left: auto;
     margin-right: 80px;
     transform: translateX(100%);
@@ -154,6 +154,21 @@ html {
   option {
     width: 100%;
   }
+
+  &.alignStart {
+    align-items: flex-start;
+  }
+
+  label.labelWithSubtitle {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+
+    .labelSubtitle {
+      opacity: 0.75;
+      font-size: 13px;
+    }
+  }
 }
 
 button.underlineButton {
@@ -231,7 +246,8 @@ button#exit-full-screen {
   display: none;
 }
 
-#inputsWrapper *,
+.overlay,
+.overlay *,
 button,
 input {
   // this make it not zoom in on double tap on mobile
@@ -252,6 +268,10 @@ input {
   .navHeading {
     font-size: 16px;
   }
+
+  .labelSubtitle {
+    font-size: 15px !important;
+  }
 }
 
 @media (max-width: 1000px) {

client/html/index.html

@@ -116,8 +116,11 @@ <h1 class="navHeading">
         <div>Center a point</div>
       </div>
       <div class="inputSeparator mobileHidden"></div>
-      <div class="inputWrapper">
-        <label for="iterations">Iterations</label>
+      <div class="inputWrapper alignStart">
+        <label for="iterations" class="labelWithSubtitle">
+          <span>Iterations</span>
+          <span class="labelSubtitle">(Detail level)</span>
+        </label>
         <input type="number" required id="iterations" name="iterations" />
       </div>
       <div class="iterationButtons">