fix: comprehensive mobile responsive design audit

- Make all headings responsive (text-2xl sm:text-3xl pattern)
- Make all section headings responsive (text-xl sm:text-2xl)
- Add responsive margins (mb-6 sm:mb-8 pattern)
- Fix flex layouts to stack on mobile (flex-col sm:flex-row)
- Make images responsive (w-20 sm:w-24 pattern)
- Add responsive padding (p-4 sm:p-6)
- Improve grid gaps for mobile (gap-3 sm:gap-4)
- Add CSS utilities for table overflow and touch scrolling
- Restyle 404 page with proper responsive design

Files updated: 22 template and CSS files across all pages

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

youtube.njk

@@ -5,8 +5,8 @@ permalink: /youtube/
 withSidebar: true
 ---
 <div class="youtube-page" x-data="{ activeChannel: 0 }">
-  <header class="mb-8">
-    <h1 class="text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">YouTube Channels</h1>
+  <header class="mb-6 sm:mb-8">
+    <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">YouTube Channels</h1>
     <p class="text-surface-600 dark:text-surface-400">
       Latest videos and live streams from my YouTube channels.
     </p>
@@ -34,24 +34,24 @@ withSidebar: true
   <div x-show="activeChannel === {{ loop.index0 }}" {% if not loop.first %}x-cloak{% endif %}>
     {# Channel Header #}
     <section class="mb-8">
-      <div class="flex items-center gap-5 p-6 bg-gradient-to-br from-red-500/10 to-red-600/5 dark:from-red-900/20 dark:to-red-800/10 rounded-2xl border border-red-500/20">
+      <div class="flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:gap-5 p-4 sm:p-6 bg-gradient-to-br from-red-500/10 to-red-600/5 dark:from-red-900/20 dark:to-red-800/10 rounded-xl sm:rounded-2xl border border-red-500/20">
         {% if channel.thumbnail %}
         <img
           src="{{ channel.thumbnail }}"
           alt=""
-          class="w-20 h-20 rounded-full shadow-lg object-cover flex-shrink-0"
+          class="w-16 h-16 sm:w-20 sm:h-20 rounded-full shadow-lg object-cover flex-shrink-0"
           loading="lazy"
         >
         {% else %}
-        <div class="w-20 h-20 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0">
-          <svg class="w-10 h-10 text-red-500" fill="currentColor" viewBox="0 0 24 24">
+        <div class="w-16 h-16 sm:w-20 sm:h-20 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0">
+          <svg class="w-8 h-8 sm:w-10 sm:h-10 text-red-500" fill="currentColor" viewBox="0 0 24 24">
             <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
           </svg>
         </div>
         {% endif %}
 
-        <div class="flex-1 min-w-0">
-          <h2 class="text-xl font-bold text-surface-900 dark:text-surface-100 truncate">
+        <div class="flex-1 min-w-0 w-full sm:w-auto">
+          <h2 class="text-lg sm:text-xl font-bold text-surface-900 dark:text-surface-100 truncate">
             <a href="{{ channel.url }}" class="hover:text-red-600 dark:hover:text-red-400" target="_blank" rel="noopener">
               {{ channel.title }}
             </a>
@@ -110,7 +110,7 @@ withSidebar: true
     {% set channelLiveStatus = youtubeChannel.liveStatuses | selectattr("channelConfigName", "equalto", channel.configName) | first %}
     {% if channelLiveStatus and channelLiveStatus.stream and (channelLiveStatus.isLive or channelLiveStatus.isUpcoming) %}
     <section class="mb-12">
-      <h2 class="text-2xl font-bold text-surface-900 dark:text-surface-100 mb-6 flex items-center gap-2">
+      <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6 flex items-center gap-2">
         {% if channelLiveStatus.isLive %}
         <span class="flex items-center gap-2 text-red-500">
           <span class="w-3 h-3 bg-red-500 rounded-full animate-pulse"></span>
@@ -161,7 +161,7 @@ withSidebar: true
 
     {# Videos Grid for this channel #}
     <section class="mb-12">
-      <h2 class="text-2xl font-bold text-surface-900 dark:text-surface-100 mb-6 flex items-center gap-2">
+      <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6 flex items-center gap-2">
         <svg class="w-6 h-6 text-red-500" fill="currentColor" viewBox="0 0 24 24">
           <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
         </svg>
@@ -171,7 +171,7 @@ withSidebar: true
       {% set channelName = channel.configName or channel.title %}
       {% set channelVideos = youtubeChannel.videosByChannel[channelName] %}
       {% if channelVideos and channelVideos.length %}
-      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
+      <div class="grid gap-4 sm:gap-6 sm:grid-cols-2 lg:grid-cols-3">
         {% for video in channelVideos | head(9) %}
         <article class="group bg-white dark:bg-surface-800 rounded-xl overflow-hidden border border-surface-200 dark:border-surface-700 hover:border-red-400 dark:hover:border-red-600 transition-colors">
           <a href="{{ video.url }}" class="block" target="_blank" rel="noopener">