Merge pull request #740 from basecamp/mobile-card-improvements

Mobile card improvements

app/assets/stylesheets/card-columns.css

@@ -118,7 +118,6 @@
   /* ------------------------------------------------------------------------ */
 
   .cards__heading {
-
     background-color: var(--color-canvas);
     display: flex;
     font-size: var(--text-medium);
@@ -172,11 +171,14 @@
 
     .card {
       --avatar-size: 2.75em;
-      --text-xx-large: 1.6em;
       --text-small: 1.1em;
 
       background-color: var(--color-canvas);
       line-height: 1.2;
+
+      @media (min-width: 640px) {
+        --text-xx-large: 1.6em;
+      }
     }
 
     .card__body {

app/assets/stylesheets/card-perma.css

@@ -27,8 +27,6 @@
     }
 
     .card {
-      --card-aspect-ratio: 2 / 0.95;
-
       border: none;
     }
 
@@ -37,6 +35,16 @@
       opacity: 0.2;
     }
 
+    .card__body {
+      @media (max-width: 639px) {
+        flex-direction: column;
+      }
+    }
+
+    .card__title {
+      font-size: clamp(var(--text-medium), 6vw, var(--text-xx-large));
+    }
+
     .card__meta,
     .card__stages {
       font-size: var(--text-small);
@@ -58,7 +66,7 @@
     }
 
     @media (max-width: 800px) {
-      --padding-inline: 3cqmin;
+      --padding-inline: var(--main-padding);
 
       column-gap: 0;
       grid-template-areas:
@@ -79,6 +87,10 @@
 
     #main:has(.card-perma__notch--top) & {
       margin-block-end: 4ch;
+
+      @media (max-width: 639px) {
+        margin-block-end: 2ch;
+      }
     }
   }
 
@@ -156,10 +168,6 @@
         --btn-color: var(--color-ink-inverted);
       }
     }
-
-    @media (max-width: 580px) {
-      margin-block-start: -2ch;
-    }
   }
 
   .card-perma__notch--bottom {

app/assets/stylesheets/cards.css

@@ -106,14 +106,9 @@
   }
 
   .card__description {
-    house-md-toolbar,
-    .house-md-content {
-      color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
-    }
-
-    .house-md-content {
-      min-block-size: 3lh;
-      padding: var(--block-space-half) var(--inline-space) 0 0;
+    /* Hide the empty element that Lexical saves when nothing is added to the description <p><br /></p> */
+    p:only-child:has(br:only-child) {
+      display: none;
     }
 
     & ~ .btn {

app/assets/stylesheets/layout.css

@@ -9,10 +9,12 @@
   }
 
   :where(#main) {
+    --main-padding: clamp(var(--inline-space), 3vw, calc(var(--inline-space) * 3));
+
     inline-size: 100dvw;
     margin-inline: auto;
     max-inline-size: 100dvw;
-    padding-inline: clamp(var(--inline-space), 3cqmin, calc(var(--inline-space) * 3));
+    padding-inline: var(--main-padding);
     text-align: center;
 
     @media print {