Font size adjustments

pages/[slug].vue

@@ -2,7 +2,51 @@
   <div class="min-h-screen bg-gray-50">
     <header class="bg-white shadow-sm">
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-        <div class="flex items-center justify-between">
+        <!-- Mobile Layout -->
+        <div class="md:hidden">
+          <div class="flex items-center justify-between mb-3">
+            <NuxtLink to="/" class="hover:opacity-80">
+              <img src="/logos/logo.png" alt="New Life Christian Church" class="h-12 w-auto" />
+            </NuxtLink>
+            <div class="flex items-center gap-2">
+              <QRCodeButton v-if="sermon" :sermon="sermon" />
+              <ClientOnly fallback-tag="div">
+                <button
+                  v-if="isAuthenticated"
+                  @click="handleLogout"
+                  class="px-4 py-2 text-sm font-medium text-red-700 bg-red-50 rounded-md hover:bg-red-100 whitespace-nowrap"
+                >
+                  Log Out
+                </button>
+                <NuxtLink 
+                  v-else
+                  to="/login" 
+                  class="px-4 py-2 text-sm font-medium text-green-700 bg-green-50 rounded-md hover:bg-green-100 whitespace-nowrap"
+                >
+                  Log In
+                </NuxtLink>
+              </ClientOnly>
+            </div>
+          </div>
+          <!-- Font Size Selector Below Buttons on Mobile -->
+          <div class="flex items-center gap-2">
+            <svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129" />
+            </svg>
+            <select
+              id="font-size-mobile"
+              v-model="fontSize"
+              class="flex-1 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-sm"
+            >
+              <option value="small">Small</option>
+              <option value="medium">Medium</option>
+              <option value="large">Large</option>
+            </select>
+          </div>
+        </div>
+
+        <!-- Desktop Layout -->
+        <div class="hidden md:flex items-center justify-between">
           <NuxtLink to="/" class="flex items-center space-x-4 hover:opacity-80">
             <img src="/logos/logo.png" alt="New Life Christian Church" class="h-16 w-auto" />
           </NuxtLink>