fixed buttons

static/css/style.css

@@ -123,15 +123,23 @@ main {
     padding: 1rem;
     border-bottom: 1px solid var(--border);
 }
-.dl-btn {
+
+/* Button style */
+.btn {
     border: 1px solid var(--accent);
     color: var(--accent);
     padding: 0.2rem 0.5rem;
     border-radius: 4px;
     font-size: 0.7rem;
     text-decoration: none;
+    background: transparent;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    transition: background 0.2s, color 0.2s;
 }
-.dl-btn:hover {
+
+.btn:hover {
     background: var(--accent);
     color: #fff;
 }

static/js/modal.js

@@ -10,8 +10,8 @@ document.addEventListener("DOMContentLoaded", function () {
     // Function to open modal with ISO info
     function openModal(title, description, imageSrc) {
         document.getElementById("modalTitle").textContent = title;
-    document.getElementById("modalDescription").textContent =
-      description || "No description available";
+        document.getElementById("modalDescription").textContent = description ||
+            "No description available";
 
         const modalImage = document.getElementById("modalImage");
         if (imageSrc) {
@@ -46,13 +46,15 @@ document.addEventListener("DOMContentLoaded", function () {
 
     // Close modal when Escape key is pressed
     document.addEventListener("keydown", function (e) {
-    if (e.key === "Escape" && modal.style.display === "block") {
+        // Change: Check for the "visible" class instead of style.display
+        if (e.key === "Escape" && modal.classList.contains("visible")) {
             closeModal();
         }
     });
 
     // Add click handlers to all ISO info buttons
-  const infoButtons = document.querySelectorAll(".info-btn");
+    // Change: Use the new ".info-trigger" class you added to the HTML
+    const infoButtons = document.querySelectorAll(".info-trigger");
     infoButtons.forEach((button) => {
         button.addEventListener("click", function (e) {
             e.preventDefault();
@@ -64,7 +66,6 @@ document.addEventListener("DOMContentLoaded", function () {
             openModal(isoName, description, imageSrc);
         });
     });
-
     // Expose functions to global scope for potential future use
     window.openISOModal = openModal;
     window.closeISOModal = closeModal;

templates/index.html

@@ -63,29 +63,25 @@
                             {{if .Description}}{{.Description}}{{else}}ISO Disk
                             Image{{end}}
                         </p>
-                        <div
-                            style="margin-top: 1rem; display: flex; gap: 0.5rem"
-                        >
+                        <div style="margin-top: 1rem; display: flex; gap: 0.5rem">
                             <button
-                                class="info-btn dl-btn"
+                                class="btn info-trigger" 
                                 data-iso-name="{{.Name}}"
                                 data-description="{{if .Description}}{{.Description}}{{else}}No description available{{end}}"
-                                {{if
-                                .HasImage}}data-image-src="/raw/{{urlenc (trimExt .RelativePath)}}{{.ImageExt}}"
-                                {{end}}
+                                {{if .HasImage}}data-image-src="/raw/{{urlenc (trimExt .RelativePath)}}{{.ImageExt}}"{{end}}
                             >
                                 Info
                             </button>
                             <a
                                 href="/browse/{{urlenc .RelativePath}}"
-                                class="dl-btn"
+                                class="btn"
                                 >Browse</a
                             >
                             <a
                                 href="/raw/{{urlenc .RelativePath}}"
-                                class="dl-btn"
+                                class="btn"
                                 download
-                                >ISO</a
+                                >Download ISO</a
                             >
                         </div>
                     </div>