Merge pull request #823 from basecamp/mobile-font-sizing

Larger fonts on mobile views

app/assets/stylesheets/_global.css

@@ -23,6 +23,17 @@
   --text-x-large: 1.8rem;
   --text-xx-large: 2.5rem;
 
+  @media (max-width: 639px) {
+    --text-xx-small: 0.65rem;
+    --text-x-small: 0.85rem;
+    --text-small: 0.95rem;
+    --text-normal: 1.1rem;
+    --text-medium: 1.2rem;
+    --text-large: 1.5rem;
+    --text-x-large: 1.8rem;
+    --text-xx-large: 2.5rem;
+  }
+
   /* Borders */
   --border: 1px solid var(--color-ink-lighter);
 

app/assets/stylesheets/card-columns.css

@@ -68,7 +68,7 @@
       --text-xx-large: 2em;
 
       /* Set lower limit for font size */
-      font-size: clamp(0.45rem, 0.85cqi, 100px);
+      font-size: clamp(0.6rem, 0.85cqi, 100px);
     }
 
     .card__title {

app/assets/stylesheets/cards.css

@@ -68,7 +68,7 @@
 
     &:has(.collection-picker__button) {
       cursor: pointer;
-      transition: background-color: 100ms ease-out;
+      transition: background-color 100ms ease-out;
 
       @media (any-hover: hover) {
         &:hover {