chore: improve modal typography

Author: zorexsalvo

static/css/app.css

@@ -2424,6 +2424,9 @@
   .w-6 {
     width: calc(var(--spacing) * 6);
   }
+  .w-11 {
+    width: calc(var(--spacing) * 11);
+  }
   .w-11\/12 {
     width: calc(11 / 12 * 100%);
   }
@@ -2679,9 +2682,6 @@
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
-  .gap-2\.5 {
-    gap: calc(var(--spacing) * 2.5);
-  }
   .gap-3 {
     gap: calc(var(--spacing) * 3);
   }
@@ -2989,9 +2989,6 @@
   .py-2 {
     padding-block: calc(var(--spacing) * 2);
   }
-  .py-2\.5 {
-    padding-block: calc(var(--spacing) * 2.5);
-  }
   .py-3 {
     padding-block: calc(var(--spacing) * 3);
   }
@@ -3425,11 +3422,6 @@
       justify-content: flex-start;
     }
   }
-  .sm\:gap-2 {
-    @media (width >= 40rem) {
-      gap: calc(var(--spacing) * 2);
-    }
-  }
   .sm\:gap-4 {
     @media (width >= 40rem) {
       gap: calc(var(--spacing) * 4);
@@ -3824,6 +3816,12 @@
       padding-bottom: 100px;
     }
   }
+  .\[\&_h1\]\:text-2xl {
+    & h1 {
+      font-size: var(--text-2xl);
+      line-height: var(--tw-leading, var(--text-2xl--line-height));
+    }
+  }
   .\[\&_h1\]\:text-lg {
     & h1 {
       font-size: var(--text-lg);
@@ -3836,6 +3834,28 @@
       line-height: var(--tw-leading, var(--text-base--line-height));
     }
   }
+  .\[\&_h2\]\:text-xl {
+    & h2 {
+      font-size: var(--text-xl);
+      line-height: var(--tw-leading, var(--text-xl--line-height));
+    }
+  }
+  .\[\&_p\]\:pb-4 {
+    & p {
+      padding-bottom: calc(var(--spacing) * 4);
+    }
+  }
+  .\[\&_p\]\:pb-10 {
+    & p {
+      padding-bottom: calc(var(--spacing) * 10);
+    }
+  }
+  .\[\&_p\]\:text-lg {
+    & p {
+      font-size: var(--text-lg);
+      line-height: var(--tw-leading, var(--text-lg--line-height));
+    }
+  }
   .\[\&_p\]\:text-sm {
     & p {
       font-size: var(--text-sm);

templates/includes/announcement_modal.html

@@ -9,8 +9,8 @@
         <form method="dialog" class="absolute right-4 top-4">
             <button class="text-2xl cursor-pointer hover:opacity-70">✕</button>
         </form>
-        <h3 class="font-bold text-3xl mb-4">📢 {{ latest_announcement.title }}</h3>
-        <div class="py-4 text-sm prose prose-sm max-w-none [&_p]:text-sm [&_h1]:text-lg [&_h2]:text-base">
+        <h3 class="font-bold text-2xl mb-4">📢 {{ latest_announcement.title }}</h3>
+        <div class="py-4 prose prose-sm max-w-none [&_p]:text-lg [&_p]:pb-4 [&_h1]:text-lg [&_h2]:text-xl">
             {{ latest_announcement.content|safe }}
         </div>
     </div>
@@ -22,7 +22,7 @@ <h3 class="font-bold text-3xl mb-4">📢 {{ latest_announcement.title }}</h3>
 <script>
     document.addEventListener('DOMContentLoaded', function() {
         const modal = document.getElementById('announcement-modal');
-        const dismissKey = 'announcement-dismissed-{{ latest_announcement.id }}';
+        const dismissKey = 'announcement-dismissed-{{ latest_announcement.id }}-{{ latest_announcement.updated_at.timestamp }}';
 
         // Check if user has dismissed this announcement
         if (sessionStorage.getItem(dismissKey)) {