Fix logo size, improve CSS styling with universal selector, and add error handling

assets/css/main.css

@@ -1,12 +1,12 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
 
 /* Apply Inter font family to the entire application */
-html {
+* {
   font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 
 /* Ensure consistent font application */
-body {
+html, body {
   font-family: inherit;
   font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
   margin: 0;

nuxt.config.ts

@@ -20,6 +20,7 @@ export default defineNuxtConfig({
       wasm: true
     }
   },
+  css: ['~/assets/css/main.css'],
   app: {
     head: {
       link: [

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-8 w-auto mr-2" />
+            <img src="/logos/logo.png" alt="New Life Christian Church" class="h-6 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-8 w-auto mr-2" />
+            <img src="/logos/logo.png" alt="New Life Christian Church" class="h-6 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-8 w-auto mr-2" />
+            <img src="/logos/logo.png" alt="New Life Christian Church" class="h-6 w-auto mr-2" />
           </div>
 
           <!-- Welcome Message -->

server/api/sermons/[slug].get.ts

@@ -1,28 +1,37 @@
 import { getDatabase } from '~/server/utils/database'
+import { getRouterParam, createError } from 'h3'
 
 export default defineEventHandler(async (event) => {
-  const db = await getDatabase()
-  const slug = getRouterParam(event, 'slug')
+  try {
+    const db = await getDatabase()
+    const slug = getRouterParam(event, 'slug')
 
-  if (!slug) {
+    if (!slug) {
+      throw createError({
+        statusCode: 400,
+        statusMessage: 'Sermon slug is required'
+      })
+    }
+
+    const sermon = db.prepare('SELECT * FROM sermons WHERE slug = ?').get(slug) as any
+
+    if (!sermon) {
+      throw createError({
+        statusCode: 404,
+        statusMessage: 'Sermon not found'
+      })
+    }
+
+    // Parse JSON fields
+    return {
+      ...sermon,
+      bibleReferences: sermon.bible_references ? JSON.parse(sermon.bible_references) : []
+    }
+  } catch (error) {
+    console.error('Error loading sermon:', error)
     throw createError({
-      statusCode: 400,
-      statusMessage: 'Sermon slug is required'
+      statusCode: 500,
+      statusMessage: 'Failed to load sermon'
     })
   }
-
-  const sermon = db.prepare('SELECT * FROM sermons WHERE slug = ?').get(slug) as any
-
-  if (!sermon) {
-    throw createError({
-      statusCode: 404,
-      statusMessage: 'Sermon not found'
-    })
-  }
-
-  // Parse JSON fields
-  return {
-    ...sermon,
-    bibleReferences: sermon.bible_references ? JSON.parse(sermon.bible_references) : []
-  }
 })