Merge pull request #7 from wardeiling/dev

fix and the reduced text sizes make more comprehensive

Author: wardeiling

app/static/css/input.css

@@ -67,18 +67,17 @@
   }
 }
 
-/* ── Mobile-first font scaling ─────────────────────────────────────────────
-   Tailwind uses rem throughout, so reducing the root font-size proportionally
-   shrinks all text, padding, and spacing on small screens without touching
-   individual templates.
-   16px (default) on sm+ screens, 14px on phones. ─────────────────────────── */
+/* Responsive root font-size: shrinks all rem-based Tailwind utilities on
+   smaller viewports so the UI feels proportional on mobile.
+   Mobile (<640px): 14px  |  sm (640-767px): 15px  |  md+ (≥768px): 16px */
 html {
   font-size: 14px;
 }
 @media (min-width: 640px) {
-  html {
-    font-size: 16px;
-  }
+  html { font-size: 15px; }
+}
+@media (min-width: 768px) {
+  html { font-size: 16px; }
 }
 
 body {

app/static/css/tailwind.css

@@ -1,7 +1,7 @@
 {% set active_highlights = book.highlights | selectattr("is_discarded", "equalto", false) | list if book.highlights else [] %}
 {% set discarded_highlights = book.highlights | selectattr("is_discarded", "equalto", true) | list if book.highlights else [] %}
 <div id="book-header" class="text-center mb-8">
-    <h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-3 title-font">
+    <h1 class="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-3 title-font">
         {{ book.title }}
     </h1>
 

app/templates/_book_header.html

@@ -2,8 +2,8 @@
 <div class="space-y-5">
     <!-- Progress Indicator -->
     <div class="text-center mb-4">
-        <h1 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-2 title-font">Daily Review</h1>
-        <p class="text-base sm:text-lg text-gray-600 dark:text-gray-400">
+        <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-2 title-font">Daily Review</h1>
+        <p class="text-lg text-gray-600 dark:text-gray-400">
             <span class="font-semibold text-primary-600 dark:text-primary-400">{{ current }}</span> of <span class="font-semibold">{{ total }}</span>
         </p>
     </div>
@@ -28,7 +28,7 @@ <h2 class="text-base font-semibold text-gray-900 dark:text-white">{{ highlight.b
         {% endif %}
 
         <!-- Highlight Text -->
-        <div class="font-serif leading-relaxed text-gray-900 dark:text-gray-100 mb-6" style="font-size: clamp(1.1rem, 4vw, 1.375rem)">
+        <div class="font-serif leading-relaxed text-gray-900 dark:text-gray-100 mb-6 text-lg sm:text-[1.375rem]">
             {{ highlight.text }}
         </div>
 
@@ -69,7 +69,7 @@ <h2 class="text-base font-semibold text-gray-900 dark:text-white">{{ highlight.b
     </div>
 
     <!-- Main Action Buttons (Outside Card) -->
-    <div class="flex items-center justify-center gap-12 mt-6">
+    <div class="flex items-center justify-center gap-6 sm:gap-12 mt-6">
         <!-- Discard Button -->
         <button 
             class="flex flex-col items-center group appearance-none bg-transparent border-0 p-0"
@@ -80,7 +80,7 @@ <h2 class="text-base font-semibold text-gray-900 dark:text-white">{{ highlight.b
             <div class="w-14 h-14 sm:w-20 sm:h-20 rounded-full bg-red-100 dark:bg-red-900/20 flex items-center justify-center group-hover:bg-red-200 dark:group-hover:bg-red-900/30 group-hover:scale-110 transition-all border-2 border-red-300 dark:border-red-700 group-hover:border-red-400 dark:group-hover:border-red-600">
                 <i data-lucide="x" class="w-7 h-7 sm:w-10 sm:h-10 text-red-600 dark:text-red-500"></i>
             </div>
-            <span class="mt-2 text-xs sm:text-sm font-semibold text-gray-900 dark:text-white">Discard</span>
+            <span class="mt-2 text-sm font-semibold text-gray-900 dark:text-white">Discard</span>
         </button>
 
         <!-- Review Frequency Button -->
@@ -93,7 +93,7 @@ <h2 class="text-base font-semibold text-gray-900 dark:text-white">{{ highlight.b
                 <div class="w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-blue-100 dark:bg-blue-900/20 flex items-center justify-center group-hover:bg-blue-200 dark:group-hover:bg-blue-900/30 group-hover:scale-110 transition-all border-2 border-blue-300 dark:border-blue-700 group-hover:border-blue-400 dark:group-hover:border-blue-600">
                     <i data-lucide="sliders" class="w-6 h-6 sm:w-8 sm:h-8 text-blue-600 dark:text-blue-500"></i>
                 </div>
-                <span class="mt-2 text-xs sm:text-sm font-semibold text-gray-900 dark:text-white">Frequency</span>
+                <span class="mt-2 text-sm font-semibold text-gray-900 dark:text-white">Frequency</span>
             </button>
             <div id="review-weight-controls" class="mt-3"></div>
         </div>
@@ -108,7 +108,7 @@ <h2 class="text-base font-semibold text-gray-900 dark:text-white">{{ highlight.b
             <div class="w-14 h-14 sm:w-20 sm:h-20 rounded-full bg-green-100 dark:bg-green-900/20 flex items-center justify-center group-hover:bg-green-200 dark:group-hover:bg-green-900/30 group-hover:scale-110 transition-all border-2 border-green-300 dark:border-green-700 group-hover:border-green-400 dark:group-hover:border-green-600">
                 <i data-lucide="check" class="w-7 h-7 sm:w-10 sm:h-10 text-green-600 dark:text-green-500"></i>
             </div>
-            <span class="mt-2 text-xs sm:text-sm font-semibold text-gray-900 dark:text-white">Done</span>
+            <span class="mt-2 text-sm font-semibold text-gray-900 dark:text-white">Done</span>
         </button>
     </div>
 </div>

app/templates/_review_card.html

@@ -2,8 +2,8 @@
 <div class="space-y-8">
     <!-- Progress Indicator -->
     <div class="text-center mb-8">
-        <h1 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-2 title-font">Daily Review</h1>
-        <p class="text-base sm:text-lg text-gray-600 dark:text-gray-400">
+        <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-2 title-font">Daily Review</h1>
+        <p class="text-lg text-gray-600 dark:text-gray-400">
             <span class="font-semibold text-primary-600 dark:text-primary-400">{{ current }}</span> of <span class="font-semibold">{{ total }}</span>
         </p>
     </div>
@@ -62,7 +62,7 @@ <h2 class="text-base font-semibold text-gray-900 dark:text-white">{{ highlight.b
                 <textarea 
                     name="text"
                     rows="1"
-                    class="w-full px-4 py-3 font-serif leading-relaxed border-2 border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-amber-500 focus:border-amber-500 transition-colors resize-none overflow-hidden" style="font-size: clamp(1.1rem, 4vw, 1.375rem)"
+                    class="w-full px-4 py-3 font-serif leading-relaxed border-2 border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-amber-500 focus:border-amber-500 transition-colors resize-none overflow-hidden" style="font-size: 1.375rem"
                     oninput="this.style.height = 'auto'; this.style.height = this.scrollHeight + 'px'"
                     required>{{ highlight.text }}</textarea>
             </div>

app/templates/_review_edit.html

@@ -70,7 +70,7 @@
 
         <!-- Page Title -->
         <div class="mb-8">
-            <h2 class="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-white title-font">
+            <h2 class="text-3xl sm:text-4xl md:text-5xl font-bold text-gray-900 dark:text-white title-font">
                 {% block heading %}FreeWise{% endblock %}
             </h2>
         </div>

app/templates/base.html

@@ -74,7 +74,7 @@
 
         <!-- Book Header (Centered, No Background) -->
         <div id="book-header" class="text-center mb-8">
-            <h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-3 title-font">
+            <h1 class="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-3 title-font">
                 {{ book.title }}
             </h1>
 

app/templates/book_detail.html

@@ -8,11 +8,11 @@
 <!-- Daily Review Call-to-Action -->
 {% if total_highlights == 0 %}
 <div class="mb-8">
-    <div class="bg-gradient-to-br from-yellow-400 to-amber-800 text-amber-50 rounded-2xl p-10 text-center shadow-xl border border-amber-700/30">
+    <div class="bg-gradient-to-br from-yellow-400 to-amber-800 text-amber-50 rounded-2xl p-6 sm:p-10 text-center shadow-xl border border-amber-700/30">
         <div class="flex justify-center mb-4">
             <i data-lucide="book-open" class="w-16 h-16 text-amber-200"></i>
         </div>
-        <h2 class="text-3xl font-semibold mb-3 text-amber-50">
+        <h2 class="text-2xl sm:text-3xl font-semibold mb-3 text-amber-50">
             No Highlights Available
         </h2>
         <p class="text-lg mb-6 text-amber-100/90">
@@ -26,11 +26,11 @@ <h2 class="text-3xl font-semibold mb-3 text-amber-50">
 </div>
 {% elif active_highlights < daily_review_count and not reviewed_today %}
 <div class="mb-8">
-    <div class="bg-gradient-to-br from-yellow-400 to-amber-800 text-amber-50 rounded-2xl p-10 text-center shadow-xl border border-amber-700/30">
+    <div class="bg-gradient-to-br from-yellow-400 to-amber-800 text-amber-50 rounded-2xl p-6 sm:p-10 text-center shadow-xl border border-amber-700/30">
         <div class="flex justify-center mb-4">
             <i data-lucide="zap" class="w-16 h-16 text-amber-200"></i>
         </div>
-        <h2 class="text-3xl font-semibold mb-3 text-amber-50">
+        <h2 class="text-2xl sm:text-3xl font-semibold mb-3 text-amber-50">
             Only {{ active_highlights }} Highlight{{ 's' if active_highlights != 1 else '' }} Available
         </h2>
         <p class="text-lg mb-6 text-amber-100/90">
@@ -51,11 +51,11 @@ <h2 class="text-3xl font-semibold mb-3 text-amber-50">
 {% elif not reviewed_today %}
 <div class="mb-8">
     <a href="/highlights/ui/review" class="block no-underline">
-        <div class="bg-gradient-to-br from-yellow-400 to-amber-800 text-amber-50 rounded-2xl p-10 text-center shadow-xl border border-amber-700/30 hover:-translate-y-1 hover:shadow-2xl transition-all cursor-pointer">
+        <div class="bg-gradient-to-br from-yellow-400 to-amber-800 text-amber-50 rounded-2xl p-6 sm:p-10 text-center shadow-xl border border-amber-700/30 hover:-translate-y-1 hover:shadow-2xl transition-all cursor-pointer">
             <div class="flex justify-center mb-4">
                 <i data-lucide="book-open" class="w-16 h-16 text-amber-200"></i>
             </div>
-            <h2 class="text-3xl font-semibold mb-3 text-amber-50">
+            <h2 class="text-2xl sm:text-3xl font-semibold mb-3 text-amber-50">
                 Start Your Daily Review
             </h2>
             <p class="text-xl text-amber-100/90">
@@ -65,11 +65,11 @@ <h2 class="text-3xl font-semibold mb-3 text-amber-50">
     </a>
 </div>
 {% else %}
-<div class="mb-8 bg-gradient-to-br from-emerald-50 to-teal-50 dark:from-emerald-950/30 dark:to-teal-950/30 border-2 border-emerald-700 dark:border-emerald-800 rounded-2xl p-8 text-center shadow-lg">
+<div class="mb-8 bg-gradient-to-br from-emerald-50 to-teal-50 dark:from-emerald-950/30 dark:to-teal-950/30 border-2 border-emerald-700 dark:border-emerald-800 rounded-2xl p-5 sm:p-8 text-center shadow-lg">
     <div class="flex justify-center mb-4">
         <i data-lucide="check-circle" class="w-16 h-16 text-emerald-700 dark:text-emerald-600"></i>
     </div>
-    <h2 class="text-3xl font-bold text-emerald-900 dark:text-emerald-100 mb-2">
+    <h2 class="text-2xl sm:text-3xl font-bold text-emerald-900 dark:text-emerald-100 mb-2">
         Great Job!
     </h2>
     <p class="text-emerald-800 dark:text-emerald-300 text-lg mb-6">
@@ -114,7 +114,7 @@ <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4 flex items-cente
         <div class="flex justify-center mb-4">
             <i data-lucide="zap" class="w-12 h-12 text-emerald-600 dark:text-emerald-400"></i>
         </div>
-        <div class="text-5xl font-bold text-emerald-700 dark:text-emerald-400 mb-2">
+        <div class="text-4xl sm:text-5xl font-bold text-emerald-700 dark:text-emerald-400 mb-2">
             {{ current_streak }}
         </div>
         <div class="text-emerald-800 dark:text-emerald-300 text-lg font-semibold">
@@ -130,7 +130,7 @@ <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4 flex items-cente
         <div class="flex justify-center mb-4">
             <i data-lucide="trophy" class="w-12 h-12 text-amber-600 dark:text-amber-400"></i>
         </div>
-        <div class="text-5xl font-bold text-amber-700 dark:text-amber-400 mb-2">
+        <div class="text-4xl sm:text-5xl font-bold text-amber-700 dark:text-amber-400 mb-2">
             {{ longest_streak }}
         </div>
         <div class="text-amber-800 dark:text-amber-300 text-lg font-semibold">
@@ -179,7 +179,7 @@ <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4 flex items-cente
             <div class="flex justify-center mb-3">
                 <i data-lucide="book" class="w-12 h-12 text-amber-800 dark:text-amber-600"></i>
             </div>
-            <div class="text-4xl font-bold text-gray-900 dark:text-white mb-2">
+            <div class="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-2">
                 {{ total_books }}
             </div>
             <div class="text-gray-600 dark:text-gray-400 text-sm font-medium">
@@ -194,7 +194,7 @@ <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4 flex items-cente
             <div class="flex justify-center mb-3">
                 <i data-lucide="lightbulb" class="w-12 h-12 text-amber-500"></i>
             </div>
-            <div class="text-4xl font-bold text-gray-900 dark:text-white mb-2">
+            <div class="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-2">
                 {{ total_highlights }}
             </div>
             <div class="text-gray-600 dark:text-gray-400 text-sm font-medium">
@@ -209,7 +209,7 @@ <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4 flex items-cente
             <div class="flex justify-center mb-3">
                 <i data-lucide="star" class="w-12 h-12 text-yellow-500 dark:text-yellow-400"></i>
             </div>
-            <div class="text-4xl font-bold text-gray-900 dark:text-white mb-2">
+            <div class="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-2">
                 {{ total_favorited }}
             </div>
             <div class="text-gray-600 dark:text-gray-400 text-sm font-medium">
@@ -224,7 +224,7 @@ <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4 flex items-cente
             <div class="flex justify-center mb-3">
                 <i data-lucide="trash-2" class="w-12 h-12 text-rose-500 dark:text-rose-400"></i>
             </div>
-            <div class="text-4xl font-bold text-gray-900 dark:text-white mb-2">
+            <div class="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-2">
                 {{ total_discarded }}
             </div>
             <div class="text-gray-600 dark:text-gray-400 text-sm font-medium">

app/templates/dashboard.html

@@ -30,7 +30,7 @@
 
     <div class="max-w-2xl mx-auto px-4 py-20">
         <div class="text-center mb-8">
-            <h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-3 title-font">Discarded Highlights</h1>
+            <h1 class="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-3 title-font">Discarded Highlights</h1>
             <p class="text-lg text-gray-600 dark:text-gray-400 mb-2">Highlights you've marked as discarded</p>
             <p class="text-sm text-gray-500 dark:text-gray-400">
                 <span class="font-semibold">{{ highlights|length }}</span> discarded highlight{{ 's' if highlights|length != 1 else '' }}

app/templates/discarded.html

@@ -30,7 +30,7 @@
 
     <div class="max-w-2xl mx-auto px-4 py-20">
         <div class="text-center mb-8">
-            <h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-3 title-font">Favorite Highlights</h1>
+            <h1 class="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-3 title-font">Favorite Highlights</h1>
             <p class="text-lg text-gray-600 dark:text-gray-400 mb-2">Your personal collection of starred highlights</p>
             <p class="text-sm text-gray-500 dark:text-gray-400">
                 <span class="font-semibold">{{ highlights|length }}</span> favorite{{ 's' if highlights|length != 1 else '' }}