Less space above card-perma

app/assets/stylesheets/avatars.css

@@ -3,6 +3,7 @@
     --avatar-border-radius: 50%;
 
     aspect-ratio: 1;
+    block-size: var(--avatar-size, 5ch);
     border-radius: var(--avatar-border-radius);
     display: grid;
     inline-size: var(--avatar-size, 5ch);

app/assets/stylesheets/card-columns.css

@@ -42,6 +42,14 @@
 
       font-size: 1.8cqi;
     }
+
+    .card__title {
+      pointer-events: none;
+    }
+
+    .card__link {
+      z-index: 1;
+    }
   }
 
   /* Considering

app/assets/stylesheets/card-perma.css

@@ -11,7 +11,11 @@
     align-items: start;
     column-gap: var(--inline-space);
     display: grid;
-    grid-template-columns: auto minmax(0, 960px) auto;
+    grid-template-areas:
+      "qw cutout-top we"
+      "actions-left card actions-right"
+      "er cutout-bottom rt";
+    grid-template-columns: 48px minmax(0, 960px) 48px;
     inline-size: fit-content;
     max-inline-size: 100%;
     margin-inline: auto;
@@ -35,6 +39,7 @@
   .card-perma__bg {
     background-color: var(--color-container);
     border-radius: 0.2em;
+    grid-area: card;
     padding: var(--padding-block) var(--padding-inline);
   }
 
@@ -48,6 +53,12 @@
     }
   }
 
+  .card-perma__actions--left { grid-area: actions-left; }
+  .card-perma__actions--right { grid-area: actions-right; }
+
+  /* Cutouts
+  /* -------------------------------------------------------------------------- */
+
   .card-perma__cutout {
     --card-cutout-padding-block: 0.5ch;
     --border-radius: 1em;
@@ -57,13 +68,17 @@
     border-radius: 99rem;
     color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
     display: inline-flex;
+    inline-size: auto;
     gap: var(--inline-space);
     justify-content: center;
+    margin-inline: auto;
     padding: var(--card-cutout-padding-block) 1.5ch;
     position: relative;
     text-align: center;
     z-index: 0;
 
+    grid-columns-start: 2;
+
     &:has([open]) {
       z-index: 1;
     }
@@ -81,8 +96,11 @@
   }
 
   .card-perma__cutout--top {
+    grid-area: cutout-top;
     min-inline-size: 36ch;
-    translate: 0 50%;
+    position: absolute;
+    inset-inline-start: 50%;
+    translate: -50% -50%;
 
     #header:has(&) {
       position: relative;
@@ -104,6 +122,7 @@
   }
 
   .card-perma__cutout--bottom {
+    grid-area: cutout-bottom;
     padding-inline-start: 0.5ch;
     translate: 0 -50%;
   }

app/assets/stylesheets/cards.css

@@ -19,6 +19,10 @@
     text-align: start;
     z-index: 1;
 
+    .avatar {
+      --avatar-size: 2.75em;
+    }
+
     .local-time-value {
       font-weight: bold;
     }
@@ -58,11 +62,6 @@
     inset: 0;
     position: absolute;
     z-index: -1;
-
-    .cards &,
-    .cards--grid & {
-      z-index: 1;
-    }
   }
 
   .card__header {
@@ -102,17 +101,10 @@
     min-block-size: 3lh;
     text-wrap: balance;
 
-    .cards & {
-      pointer-events: none;
-    }
-
     .card__title-field {
-      &:is(textarea) {
-
-        &::placeholder {
-          color: inherit;
-          opacity: 0.5;
-        }
+      &:is(textarea)::placeholder {
+        color: inherit;
+        opacity: 0.5;
       }
     }
 

app/views/cards/show.html.erb

@@ -25,11 +25,12 @@
   </nav>
 <% end %>
 
-<%= render "cards/doing_toggle", card: @card %>
-
 <div data-controller="beacon" data-beacon-url-value="<%= card_reading_url(@card) %>">
   <section id="<%= dom_id(@card, :card_container) %>" class="card-perma <%= "card-perma--pointing" unless @card.published? %>" style="--card-color: <%= @card.color %>;">
-    <aside class="card-perma__actions" role="toolbar">
+
+    <%= render "cards/doing_toggle", card: @card %>
+
+    <aside class="card-perma__actions card-perma__actions--left" role="toolbar">
       <button class="btn">
         <%= icon_tag "star" %>
         <span class="for-screen-reader">Star this card</span>
@@ -50,16 +51,17 @@
     </div>
 
     <% if @card.published? %>
-      <aside class="card-perma__actions" role="toolbar">
+      <aside class="card-perma__actions card-perma__actions--right" role="toolbar">
         <%= turbo_frame_tag dom_id(@card, :watch), src: card_watch_path(@card), refresh: :morph %>
         <%= turbo_frame_tag dom_id(@card, :pin), src: card_pin_path(@card), refresh: :morph %>
       </aside>
     <% end %>
+
+    <% unless @card.drafted? || @card.creating? %>
+      <%= render "cards/closure_toggle", card: @card %>
+    <% end %>
   </section>
 
-  <% unless @card.drafted? || @card.creating? %>
-    <%= render "cards/closure_toggle", card: @card %>
-  <% end %>
 
   <% if @card.published? %>
     <%= render "cards/messages", card: @card %>