image icons now scale too

Mattk70 · Oct 1, 2024 · 4ac25c1 · 4ac25c1
1 parent 1975851
commit 4ac25c1
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/css/style.css b/css/style.css
@@ -71,9 +71,14 @@ body {
     width: 55px !important;
 }
 
+#primaryLogo {
+    max-height: calc(40px * var(--font-size-scale));
+    max-width: auto;
+}
+
 .icon {
-    max-height: 30px;
-    max-width: 30px;
+    max-height: calc(30px * var(--font-size-scale));
+    max-width: calc(30px * var(--font-size-scale));
     filter: invert(45%);
 
 }
@@ -82,6 +87,13 @@ body {
     filter: invert(100%);
 }
 
+img {
+    img {
+        width: calc(100 * var(--font-size-scale)); /* Scale width */
+        height: auto; /* Maintain aspect ratio */
+    }
+}
+
 span[id^="filename_"] {
     border-bottom: 1px;
     border-bottom: #818182;

diff --git a/index.html b/index.html
@@ -797,8 +797,7 @@ <h6 class="fs-6 ps-3">FAQs</h6>
                 data-bs-toggle="offcanvas" data-bs-target="#settings" aria-controls="settings">Settings <span class="material-symbols-outlined fs-5 align-middle">settings</span></button>
             </div>
             <!-- navbar-collapse.// -->
-            <img src="img/logo/chirpity_logo2.png" alt="Chirpity bird calls: Identifying birds by sound"
-            height="40">
+            <img id="primaryLogo" src="img/logo/chirpity_logo2.png" alt="Chirpity bird calls: Identifying birds by sound">
         </div>
         <!-- container-fluid.// -->
     </nav>