Revert "schema-apps: gallery with live iframe previews (#48)" (#49)

This reverts commit 0ccc02e.

Author: melvincarvalho

index.html

@@ -58,88 +58,66 @@
 
   /* ── Grid ── */
   .grid-wrap {
-    max-width: 1200px;
+    max-width: 900px;
     margin: 0 auto;
     padding: 0 1.5rem 3rem;
   }
   .grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
-    gap: 1.25rem;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 1rem;
   }
 
   /* ── Card ── */
   .card {
-    display: block;
+    display: flex;
+    align-items: flex-start;
+    gap: .85rem;
+    padding: 1.1rem 1.2rem;
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: var(--radius);
-    overflow: hidden;
     text-decoration: none;
     color: inherit;
     box-shadow: var(--shadow-sm);
     transition: transform .22s cubic-bezier(.22,1,.36,1),
                 box-shadow .22s cubic-bezier(.22,1,.36,1),
                 border-color .18s ease;
     cursor: pointer;
-    position: relative;
   }
   .card:hover {
     transform: translateY(-4px);
     box-shadow: var(--shadow-lg);
     border-color: color-mix(in oklab, var(--card-accent, #6366f1) 40%, transparent);
   }
 
-  /* ── Live preview iframe container ── */
-  .preview-wrap {
-    position: relative;
-    width: 100%;
-    /* 4:3 aspect ratio container */
-    aspect-ratio: 4 / 3;
-    overflow: hidden;
-    background: var(--bg);
-    pointer-events: none;
-  }
-  .preview-wrap iframe {
-    position: absolute;
-    top: 0;
-    left: 0;
-    /* Scale 2.5x so content fills the container with detail */
-    width: 250%;
-    height: 250%;
-    border: none;
-    transform: scale(0.4);
-    transform-origin: top left;
-    pointer-events: none;
-  }
-
-  /* ── Card label (bottom) ── */
-  .card-label {
-    display: flex;
-    align-items: center;
-    gap: .7rem;
-    padding: .8rem 1rem;
-    border-top: 1px solid var(--border);
-  }
+  /* Icon circle */
   .card-icon {
     flex-shrink: 0;
-    width: 36px; height: 36px;
-    border-radius: 9px;
+    width: 48px; height: 48px;
+    border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 1.15rem;
+    font-size: 1.5rem;
     background: color-mix(in oklab, var(--card-accent, #6366f1) 10%, transparent);
+    color: var(--card-accent, #6366f1);
   }
+
+  /* Text */
+  .card-body { min-width: 0; flex: 1; }
   .card-name {
-    font-size: .85rem;
+    font-size: .92rem;
     font-weight: 700;
     letter-spacing: -.01em;
+    margin: 0 0 .15rem;
     color: var(--text);
   }
   .card-tag {
-    font-size: .7rem;
+    font-size: .78rem;
     color: var(--text-3);
+    line-height: 1.4;
+    margin: 0;
   }
 
   /* ── Footer ── */
@@ -169,9 +147,6 @@
       --shadow-md: 0 4px 16px rgba(0,0,0,.3);
       --shadow-lg: 0 12px 40px rgba(0,0,0,.45);
     }
-    .preview-wrap {
-      background: #0d0d0f;
-    }
   }
 
   /* ── Mobile ── */
@@ -223,30 +198,12 @@ <h1>schema-apps</h1>
   a.className = "card";
   a.href = "./" + app.file;
   a.style.setProperty("--card-accent", app.accent);
-
-  // Live iframe preview
-  const preview = document.createElement("div");
-  preview.className = "preview-wrap";
-  const iframe = document.createElement("iframe");
-  iframe.src = "./" + app.file;
-  iframe.loading = "lazy";
-  iframe.setAttribute("sandbox", "allow-same-origin");
-  iframe.setAttribute("tabindex", "-1");
-  iframe.setAttribute("aria-hidden", "true");
-  preview.appendChild(iframe);
-  a.appendChild(preview);
-
-  // Label
-  const label = document.createElement("div");
-  label.className = "card-label";
-  label.innerHTML =
+  a.innerHTML =
     '<div class="card-icon">' + app.icon + '</div>' +
-    '<div>' +
-      '<div class="card-name">' + app.name + '</div>' +
-      '<div class="card-tag">' + app.tag + '</div>' +
+    '<div class="card-body">' +
+      '<p class="card-name">' + app.name + '</p>' +
+      '<p class="card-tag">' + app.tag + '</p>' +
     '</div>';
-  a.appendChild(label);
-
   grid.appendChild(a);
 }
 </script>