revert get-started index gallery to ec5d46f

Author: chendaniely

get-started/gallery-highlight.ejs

@@ -1,27 +1,55 @@
 ```{=html}
-<div class="container gallery-container">
-  <div class="row g-4">
-    <% for (const item of items) { %>
-    <div class="col-12 col-md-6 col-lg-4">
-      <div class="gallery-card border-0 rounded-3 shadow-sm vstack gap-1">
-        <div class="ratio ratio-4x3 gallery-item">
-          <img src="<%- item.thumbnail %>" alt="<%- item.title %>" />
+<div class="list grid" style="column-gap: 30px; grid-template-rows: auto">
+  <% for (const item of items) { %>
+  <div
+    class="card gallery-entry border-0 rounded-3 g-col-12 g-col-md-6 g-col-lg-4 shadow-sm vstack gap-1"
+  >
+    <a href="<%- item.href %>" target="_blank">
+      <div
+        class="gallery-entry__img-container ratio ratio-4x3"
+        style="
+          background-image: url(<%- item.thumbnail %>);
+          background-size: cover;
+        "
+      >
+        <% if (item.thumbnail_alt) { %>
+        <div class="visually-hidden"><%- item.thumbnail_alt %></div>
+        <% } %>
+      </div>
+    </a>
 
-          <div class="gallery-overlay">
-            <a href="<%- item.code %>" target="_blank" class="gallery-btn"
-              >Code</a
-            >
-            <a href="<%- item.href %>" target="_blank" class="gallery-btn"
-              >App</a
-            >
-          </div>
-        </div>
+    <a href="<%- item.href %>" target="_blank">
+      <h5 class="no-anchor link-dark p-2 m-0"><%= item.title %></h5>
+    </a>
 
-        <div class="gallery-title"><%- item.title %></div>
-      </div>
+    <% if (item.publicationdate | item.description) { %>
+    <div class="gallery-entry__body p-2">
+      <% if (item.publicationdate) { %>
+      <b class="listing-publicationdate"><%= item.publicationdate %></b>
+      <% } %> <% if (item.description) { %>
+      <span class="text-muted"><%= item.description %></span>
+      <% } %>
     </div>
     <% } %>
+
+    <div class="hstack gap-2 align-items-center p-2 mt-auto">
+      <% if (item.code) { %>
+      <div>
+        <a class="view-app" href="<%- item.href %>" target="_blank">View app</a>
+      </div>
+      <div>
+        <a
+          href="<%- item.code %>"
+          title="View source code"
+          class="source-code card-text inline-block"
+          target="_blank"
+        >
+          View source
+        </a>
+      </div>
+      <% } %>
+    </div>
   </div>
+  <% } %>
 </div>
-
 ```

get-started/index.qmd

@@ -200,103 +200,6 @@ Ready to dive deeper? [Learn more about what makes Shiny unique](what-is-shiny.q
 Check out the [Shiny Gallery](/gallery/) for inspiration.
 Or kick start a new project with one of our [starter templates](/templates/).
 
-```{=html}
-<link
-  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
-  rel="stylesheet"
-/>
-
-<style>
-.gallery-container {
-  margin-top: 1rem;
-  margin-bottom: 2rem;
-}
-
-.gallery-card {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  background-color: #f8f9fa;
-}
-
-.gallery-title {
-  width: 100%;
-  text-align: center;
-  font-size: 1rem;
-  font-weight: 500;
-  padding: 8px;
-  min-height: 3.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.gallery-item {
-  position: relative;
-  width: 100%;
-  overflow: hidden;
-  border-radius: 12px;
-  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
-}
-
-.gallery-item img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-  transition: opacity 0.3s ease;
-  border-radius: 12px;
-}
-
-.gallery-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.4);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 20px;
-  opacity: 0;
-  transition: opacity 0.3s ease;
-  border-radius: 12px;
-}
-
-.gallery-item:hover img {
-  opacity: 0.5;
-}
-
-.gallery-item:hover .gallery-overlay {
-  opacity: 1;
-}
-
-.gallery-btn {
-  padding: 6px 16px;
-  font-size: 0.85rem;
-  background-color: rgba(255, 255, 255, 0.15);
-  color: white;
-  border: 2px solid rgba(255, 255, 255, 0.8);
-  text-decoration: none;
-  font-weight: 600;
-  border-radius: 30px;
-  transition: all 0.25s ease;
-  backdrop-filter: blur(4px);
-  -webkit-backdrop-filter: blur(4px);
-  position: relative;
-  z-index: 1;
-}
-
-.gallery-btn:hover {
-  background-color: white;
-  color: black;
-  transform: scale(1.05);
-  box-shadow: 0px 4px 10px rgba(255, 255, 255, 0.3);
-  border-color: white;
-}
-</style>
-```
 
 :::: {.column-page-inset-right}
 ::: {#gallery-highlight}