Fix issues: reduce logo size, improve CSS styling, fix API error handling

assets/css/main.css

@@ -11,6 +11,9 @@ body {
   font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
   margin: 0;
   padding: 0;
+  background-color: #f9fafb;
+  color: #111827;
+  line-height: 1.6;
 }
 
 /* Basic reset and utility styles */
@@ -21,6 +24,7 @@ body {
 h1, h2, h3, h4, h5, h6 {
   font-weight: 600;
   line-height: 1.25;
+  margin: 0;
 }
 
 button {
@@ -33,6 +37,76 @@ input, textarea {
   outline: none;
 }
 
+/* Custom styling for better appearance */
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 1rem;
+}
+
+/* Card styling */
+.card {
+  background: white;
+  border-radius: 0.5rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  padding: 1.5rem;
+}
+
+/* Button styling */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+  font-weight: 500;
+  text-decoration: none;
+  transition: all 0.2s;
+}
+
+.btn-primary {
+  background-color: #dc2626;
+  color: white;
+}
+
+.btn-primary:hover {
+  background-color: #b91c1c;
+}
+
+.btn-outline {
+  background-color: transparent;
+  border: 1px solid #d1d5db;
+  color: #374151;
+}
+
+.btn-outline:hover {
+  background-color: #f3f4f6;
+}
+
+/* Form styling */
+.form-group {
+  margin-bottom: 1rem;
+}
+
+.form-label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  color: #374151;
+}
+
+.form-input {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+}
+
+.form-input:focus {
+  border-color: #dc2626;
+  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
+}
+
 /* Custom font classes if needed */
 .font-inter {
   font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;

pages/[slug].vue

@@ -5,7 +5,7 @@
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="flex justify-between items-center py-4">
           <div class="flex items-center">
-            <img src="/logos/logo.png" alt="New Life Christian Church" class="h-10 w-auto mr-4" />
+            <img src="/logos/logo.png" alt="New Life Christian Church" class="h-8 w-auto mr-2" />
             <UButton
               @click="navigateTo('/')"
               variant="ghost"

pages/admin.vue

@@ -5,7 +5,7 @@
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="flex justify-between items-center py-4">
           <div class="flex items-center">
-            <img src="/logos/logo.png" alt="New Life Christian Church" class="h-10 w-auto mr-4" />
+            <img src="/logos/logo.png" alt="New Life Christian Church" class="h-8 w-auto mr-2" />
             <UButton
               @click="navigateTo('/')"
               variant="ghost"

pages/index.vue

@@ -6,7 +6,7 @@
         <div class="flex justify-between items-center py-4">
           <!-- Logo -->
           <div class="flex items-center">
-            <img src="/logos/logo.png" alt="New Life Christian Church" class="h-12 w-auto mr-3" />
+            <img src="/logos/logo.png" alt="New Life Christian Church" class="h-8 w-auto mr-2" />
           </div>
 
           <!-- Welcome Message -->

server/api/sermons/index.get.ts

@@ -1,39 +1,45 @@
 import { getDatabase } from '~/server/utils/database'
 import { verifyJWT } from '~/server/utils/auth'
+import { getQuery } from 'h3'
 
 export default defineEventHandler(async (event) => {
-  const db = await getDatabase()
+  try {
+    const db = await getDatabase()
 
-  // Check for time filter
-  const query = getQuery(event)
-  const timeFilter = query.time as string || '3months'
+    // Check for time filter
+    const query = getQuery(event)
+    const timeFilter = query.time as string || '3months'
 
-  let dateFilter = ''
-  const now = new Date()
+    let dateFilter = '1970-01-01T00:00:00.000Z'
+    const now = new Date()
 
-  switch (timeFilter) {
-    case '3months':
-      const threeMonthsAgo = new Date(now.getFullYear(), now.getMonth() - 3, now.getDate())
-      dateFilter = threeMonthsAgo.toISOString()
-      break
-    case '6months':
-      const sixMonthsAgo = new Date(now.getFullYear(), now.getMonth() - 6, now.getDate())
-      dateFilter = sixMonthsAgo.toISOString()
-      break
-    case '1year':
-      const oneYearAgo = new Date(now.getFullYear() - 1, now.getMonth(), now.getDate())
-      dateFilter = oneYearAgo.toISOString()
-      break
-    case 'all':
-      dateFilter = '1970-01-01'
-      break
+    switch (timeFilter) {
+      case '3months':
+        const threeMonthsAgo = new Date(now.getFullYear(), now.getMonth() - 3, now.getDate())
+        dateFilter = threeMonthsAgo.toISOString()
+        break
+      case '6months':
+        const sixMonthsAgo = new Date(now.getFullYear(), now.getMonth() - 6, now.getDate())
+        dateFilter = sixMonthsAgo.toISOString()
+        break
+      case '1year':
+        const oneYearAgo = new Date(now.getFullYear() - 1, now.getMonth(), now.getDate())
+        dateFilter = oneYearAgo.toISOString()
+        break
+      case 'all':
+        dateFilter = '1970-01-01T00:00:00.000Z'
+        break
+    }
+
+    const sermons = db.prepare(`
+      SELECT * FROM sermons
+      WHERE date >= ?
+      ORDER BY date DESC
+    `).all(dateFilter) as any[]
+
+    return { data: sermons || [] }
+  } catch (error) {
+    console.error('Error loading sermons:', error)
+    return { data: [] }
   }
-
-  const sermons = db.prepare(`
-    SELECT * FROM sermons
-    WHERE date >= ?
-    ORDER BY date DESC
-  `).all(dateFilter) as any[]
-
-  return sermons
 })