feat: info icon

frontend/icons.svg

@@ -8,4 +8,7 @@
 <circle stroke="#000" stroke-width="2" cx="30" cy="30" r="27.5"/>
 <path fill="#fff" d="m30 14.5c.5 0 1.8-.5 1.8-1.8s-1.3-1.8-1.8-1.8c-5.4 0-10.1 1.9-13.9 5.7s-5.7 8.5-5.7 13.9c0 .5.6 1.8 1.8 1.8s1.8-1.3 1.8-1.8c0-4.4 1.6-8.2 4.7-11.4s6.9-4.6 11.3-4.6z"/>
 </symbol>
+<symbol id="info" viewBox="0 0 100 100">
+<path d="m50 0c-27.6 0-50 22.4-50 50s22.4 50 50 50 50-22.4 50-50-22.4-50-50-50zm-8 10h16v15h-16zm25 73h-34v-14h9v-21h-9v-14h25v35h9z"/>
+</symbol>
 </svg>

frontend/index.html

@@ -86,7 +86,11 @@
   <div id="map" class="d-none d-md-block"></div>
   <div id="card-container" class="shadow-lg bg-success-subtle">
     <h1 class="fs-4 text-center m-2 mb-4">Klangkarte
-      <a class="small text-decoration-none" title="Info" href="" onclick="return showNotice('info')">?⃝</a>
+      <a id="info" class="text-decoration-none" title="Info" href="" onclick="return showNotice('info')">
+        <svg>
+          <use href="/icons.svg#info"></use>
+        </svg>
+      </a>
     </h1>
     <div id="cards">
       <div id="card-template" class="card shadow-sm">

frontend/style.css

@@ -20,6 +20,14 @@ html, body {
   overflow: auto;
   /* filter: drop-shadow(0 0 2px #000); */
 }
+#info svg {
+  width: .75em;
+  height: .75em;
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  fill: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity,1));
+}
 
 .card {
   margin: 8px;