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,6 +1,8 @@
 import { getDatabase } from '~/server/utils/database'
+import { getRouterParam, createError } from 'h3'
 
 export default defineEventHandler(async (event) => {
+  try {
     const db = await getDatabase()
     const slug = getRouterParam(event, 'slug')
 
@@ -25,4 +27,11 @@ export default defineEventHandler(async (event) => {
       ...sermon,
       bibleReferences: sermon.bible_references ? JSON.parse(sermon.bible_references) : []
     }
+  } catch (error) {
+    console.error('Error loading sermon:', error)
+    throw createError({
+      statusCode: 500,
+      statusMessage: 'Failed to load sermon'
+    })
+  }
 })