From a70088f078906bc1d3aebfc98cadae8b2bc051d3 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Mon, 9 Jun 2025 14:23:50 -0500
Subject: [PATCH 1/2] Flip hover behavior between collection and perma

---
 app/assets/stylesheets/card-columns.css | 33 +++++++++++++++++++------
 app/assets/stylesheets/card-perma.css   |  5 ++++
 app/assets/stylesheets/cards.css        | 20 +++------------
 app/assets/stylesheets/trays.css        |  4 +++
 4 files changed, 39 insertions(+), 23 deletions(-)

diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
index 692efdf5d..0fb49a337 100644
--- a/app/assets/stylesheets/card-columns.css
+++ b/app/assets/stylesheets/card-columns.css
@@ -82,6 +82,32 @@
     .card__hide-on-index {
       display: none;
     }
+
+    .card__background {
+      .card:has(& img:not([src=""])) {
+        .card__body,
+        .card__footer,
+        .workflow-stage:not(.workflow-stage--current) {
+          opacity: 0;
+          transition: opacity 0.2s ease-in-out;
+        
+          @media (any-hover: hover) {
+            .card:hover & {
+              opacity: 1;
+            }
+          }
+        }
+      }
+  
+      @media (any-hover: hover) {
+        .card:hover & {
+          img:not([src=""]) {
+            filter: blur(3px) brightness(1.2);
+            opacity: 0.2;
+          }
+        }
+      }
+    }
   }
 
   .cards__heading {
@@ -117,14 +143,9 @@
       box-shadow: none !important;
     }
 
-    .card__background {
-      display: none;
-    }
-
     .card__collection {
       background-color: var(--color-canvas);
       color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
-      padding: 0 0 0 var(--inline-space);
     }
 
     .card__collection-name {
@@ -134,7 +155,6 @@
 
     .card__header {
       color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
-      margin: 0 0 calc(-0.5 * var(--card-padding-inline)) 0;
     }
 
     .card__title {
@@ -197,7 +217,6 @@
         max-inline-size: 110ch;
         padding-block: 0 var(--cards-gap);
 
-        .card__background,
         .card__meta {
           display: none;
         }
diff --git a/app/assets/stylesheets/card-perma.css b/app/assets/stylesheets/card-perma.css
index 27b096f29..47f4c4c8c 100644
--- a/app/assets/stylesheets/card-perma.css
+++ b/app/assets/stylesheets/card-perma.css
@@ -32,6 +32,11 @@
       border: none;
     }
 
+    .card__background {
+      filter: brightness(1.2) contrast(0.8);
+      opacity: 0.2;
+    }
+
     .card__meta,
     .card__stages {
       font-size: var(--text-small);
diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index 92e540165..01f4883ba 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -41,19 +41,12 @@
 
     img {
       block-size: 100%;
+      border-radius: var(--border-radius);
       inline-size: 100%;
       object-fit: cover;
       object-position: center;
-      opacity: 0.2;
-      transition: opacity 0.2s ease-in-out;
-    }
-
-    @media (any-hover: hover) {
-      .card:hover & {
-        img:not([src=""]) {
-          opacity: 1;
-        }
-      }
+      opacity: 1;
+      transition: filter 0.2s ease-in-out, opacity 0.2s ease-in-out;
     }
   }
 
@@ -68,6 +61,7 @@
 
   .card__header {
     align-items: center;
+    border-radius: var(--border-radius) 0 0 0;
     display: flex;
     gap: var(--inline-space-half);
     margin-block-start: calc(-1 * var(--card-padding-block));
@@ -81,12 +75,6 @@
     color: var(--color-ink-inverted);
     font-weight: 800;
     padding: var(--block-space-half) var(--inline-space) var(--block-space-half) var(--inline-space-double);
-
-    .cards--considering & {
-      background-color: var(--color-canvas);
-      color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
-      padding: 0 0 0 var(--inline-space);
-    }
   }
 
   .card__id {
diff --git a/app/assets/stylesheets/trays.css b/app/assets/stylesheets/trays.css
index 2267ea20d..07f7e6f2d 100644
--- a/app/assets/stylesheets/trays.css
+++ b/app/assets/stylesheets/trays.css
@@ -217,6 +217,10 @@
       }
     }
 
+    .card__background {
+      display: none;
+    }
+
     .card__collection {
       padding-block: 0.25ch;
     }

From c7cc4fb286c08f0c59a0db166f4ca27419b70186 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Mon, 9 Jun 2025 16:30:12 -0500
Subject: [PATCH 2/2] Zoom background on perma

---
 app/assets/images/picture-zoom.svg                  | 1 +
 app/assets/stylesheets/card-columns.css             | 2 +-
 app/assets/stylesheets/icons.css                    | 1 +
 app/views/cards/_container.html.erb                 | 3 +--
 app/views/cards/display/_preview.html.erb           | 3 +--
 app/views/cards/display/common/_background.html.erb | 2 ++
 app/views/cards/display/perma/_background.html.erb  | 7 +++++++
 7 files changed, 14 insertions(+), 5 deletions(-)
 create mode 100644 app/assets/images/picture-zoom.svg
 create mode 100644 app/views/cards/display/perma/_background.html.erb

diff --git a/app/assets/images/picture-zoom.svg b/app/assets/images/picture-zoom.svg
new file mode 100644
index 000000000..c5fd4132e
--- /dev/null
+++ b/app/assets/images/picture-zoom.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m6.7 11.3c-.9 0-1.6.7-1.6 1.6s.7 1.6 1.6 1.6 1.6-.7 1.6-1.6-.7-1.6-1.6-1.6z" fill="none"/><path d="m10.4 19.8 2.7-4 3.1 5.1h-6.5c0-.1.7-1.1.7-1.1zm-2.8-2.1 1.2 1.7-1 1.5h-2.6z" fill="none"/><path d="m19.2 12.1v9.9s0 .2-.1.2c0 0-.1 0-.3 0h-16.8v-13.7c0-.2 0-.4.4-.4h7.2c-.2-.6-.4-1.2-.4-1.8h-7.8c-.7.2-1.2.7-1.3 1.3v.5 14c0 1 .8 1.8 1.8 1.8h17.9c.7-.2 1.2-.7 1.3-1.3 0-.1 0-.3 0-.5v-8.2l-1.9-1.9s0 0 0 0z"/><path d="m10.2 9.5h-5.4c-.7 0-1.3.6-1.3 1.3v8.9c0 .4.2.7.5 1l2.6-3.5c.2-.3.6-.5.9-.5s.7.2.9.5l.9 1.3 2.3-3.5c.3-.4.8-.7 1.3-.7s1 .3 1.3.7l3.1 5v-7.3c-.4 0-.8.1-1.2.1-2.5 0-4.7-1.3-5.9-3.3zm-3.5 5c-.9 0-1.6-.7-1.6-1.6s.7-1.6 1.6-1.6 1.6.7 1.6 1.6-.7 1.6-1.6 1.6z"/><path d="m8.8 19.4-1.2-1.7-2.4 3.2h2.6z"/><path d="m16.2 20.9-3.1-5.1-2.7 4-.7 1 .1.1z"/><path d="m23.7 12.2-3-3c1.9-2.5 1.3-6.1-1.2-8s-6.1-1.3-8 1.2-1.3 6.1 1.2 8c2 1.5 4.7 1.5 6.7 0l3 3c.3.3.9.3 1.2 0s.3-.9 0-1.2zm-7.6-2.5c-2.2 0-3.9-1.8-3.9-3.9 0-2.2 1.8-3.9 3.9-3.9 2.2 0 3.9 1.8 3.9 3.9s-1.8 3.9-3.9 3.9z"/><path d="m17.9 5.1h-1.1v-1.1c0-.4-.3-.7-.7-.7s-.7.3-.7.7v1.1h-1.1c-.4 0-.7.3-.7.7s.3.7.7.7 1.1 0 1.1 0v1.1c0 .4.3.7.7.7s.7-.3.7-.7v-1.1h1.1c.4 0 .7-.3.7-.7s-.3-.7-.7-.7z"/></svg>
\ No newline at end of file
diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
index 0fb49a337..15e8f03b0 100644
--- a/app/assets/stylesheets/card-columns.css
+++ b/app/assets/stylesheets/card-columns.css
@@ -86,7 +86,7 @@
     .card__background {
       .card:has(& img:not([src=""])) {
         .card__body,
-        .card__footer,
+        .card__meta,
         .workflow-stage:not(.workflow-stage--current) {
           opacity: 0;
           transition: opacity 0.2s ease-in-out;
diff --git a/app/assets/stylesheets/icons.css b/app/assets/stylesheets/icons.css
index be4f36e3d..31cf28b9c 100644
--- a/app/assets/stylesheets/icons.css
+++ b/app/assets/stylesheets/icons.css
@@ -55,6 +55,7 @@
   .icon--picture-add { --svg: url("picture-add.svg "); }
   .icon--picture-double { --svg: url("picture-double.svg "); }
   .icon--picture-remove { --svg: url("picture-remove.svg "); }
+  .icon--picture-zoom { --svg: url("picture-zoom.svg "); }
   .icon--pinned { --svg: url("pinned.svg "); }
   .icon--qr-code { --svg: url("qr-code.svg "); }
   .icon--reaction { --svg: url("reaction.svg "); }
diff --git a/app/views/cards/_container.html.erb b/app/views/cards/_container.html.erb
index 9d326af6a..f43466a2b 100644
--- a/app/views/cards/_container.html.erb
+++ b/app/views/cards/_container.html.erb
@@ -21,9 +21,8 @@
 
       <footer class="card__footer full-width flex align-start gap">
         <%= render "cards/display/perma/meta", card: card %>
+        <%= render "cards/display/perma/background", card: card %>
       </footer>
-
-      <%= render "cards/display/common/background", card: card %>
     <% end %>
   </div>
 
diff --git a/app/views/cards/display/_preview.html.erb b/app/views/cards/display/_preview.html.erb
index 20eaecc78..4590b5e99 100644
--- a/app/views/cards/display/_preview.html.erb
+++ b/app/views/cards/display/_preview.html.erb
@@ -25,10 +25,9 @@
 
     <footer class="card__footer">
       <%= render "cards/display/preview/meta", card: card %>
+      <%= render "cards/display/common/background", card: card %>
     </footer>
 
-    <%= render "cards/display/common/background", card: card %>
-
     <% if card.entropic? %>
       <%= render "cards/display/preview/bubble", card: card %>
     <% end %>
diff --git a/app/views/cards/display/common/_background.html.erb b/app/views/cards/display/common/_background.html.erb
index cd7f996fe..fbe28da85 100644
--- a/app/views/cards/display/common/_background.html.erb
+++ b/app/views/cards/display/common/_background.html.erb
@@ -2,6 +2,8 @@
   <div class="card__background">
     <%= image_tag card.image.presence || "", size: 120, data: { upload_preview_target: "image" } %>
   </div>
+
+  <%= yield %>
 <% end %>
 
 <% if card.closed? %>
diff --git a/app/views/cards/display/perma/_background.html.erb b/app/views/cards/display/perma/_background.html.erb
new file mode 100644
index 000000000..d8c3203a8
--- /dev/null
+++ b/app/views/cards/display/perma/_background.html.erb
@@ -0,0 +1,7 @@
+<%= render "cards/display/common/background", card: card do %>
+  <%= link_to card.image.presence, class: "btn fill-transparent flex-item-justify-end", data: { action: "lightbox#open:prevent", lightbox_target: "image" } do %>
+    <%= icon_tag "picture-zoom" %>
+    <span class="for-screen-reader">Zoom background image</span>
+  <% end %>
+<% end %>
+        
\ No newline at end of file