From 96182cb1e4c838c4e1305cbd3ab4da909fb79bdc Mon Sep 17 00:00:00 2001
From: Ricardo <rick@rmendes.net>
Date: Sat, 24 Jan 2026 15:48:23 +0100
Subject: [PATCH] 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>
---
 404.njk                                       | 12 +++--
 .../components/funkwhale-stats-content.njk    |  4 +-
 _includes/layouts/home.njk                    | 36 +++++++--------
 _includes/layouts/post.njk                    |  4 +-
 about.njk                                     |  8 ++--
 articles.njk                                  |  4 +-
 blog.njk                                      |  4 +-
 bookmarks.njk                                 |  5 +-
 categories-index.njk                          |  4 +-
 categories.njk                                |  4 +-
 css/tailwind.css                              | 39 ++++++++++++++++
 funkwhale.njk                                 | 26 +++++------
 github.njk                                    | 20 ++++----
 interactions.njk                              |  6 +--
 likes.njk                                     |  4 +-
 listening.njk                                 | 46 +++++++++----------
 notes.njk                                     |  4 +-
 photos.njk                                    |  5 +-
 replies.njk                                   |  4 +-
 reposts.njk                                   |  4 +-
 webmention-debug.njk                          |  4 +-
 youtube.njk                                   | 22 ++++-----
 22 files changed, 160 insertions(+), 109 deletions(-)

diff --git a/404.njk b/404.njk
index 332ccc1..5a748e5 100644
--- a/404.njk
+++ b/404.njk
@@ -3,6 +3,12 @@ layout: layouts/base.njk
 title: Page Not Found
 permalink: /404.html
 ---
-<h1>404 - Page Not Found</h1>
-<p>Sorry, the page you're looking for doesn't exist.</p>
-<p><a href="/">Go back to the homepage</a></p>
+<div class="text-center py-12">
+  <h1 class="text-4xl sm:text-6xl font-bold text-surface-300 dark:text-surface-700 mb-4">404</h1>
+  <h2 class="text-xl sm:text-2xl font-semibold text-surface-900 dark:text-surface-100 mb-4">Page Not Found</h2>
+  <p class="text-surface-600 dark:text-surface-400 mb-8">Sorry, the page you're looking for doesn't exist.</p>
+  <a href="/" class="inline-flex items-center gap-2 px-6 py-3 bg-primary-600 hover:bg-primary-700 text-white font-medium rounded-lg transition-colors">
+    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
+    Go back home
+  </a>
+</div>
diff --git a/_includes/components/funkwhale-stats-content.njk b/_includes/components/funkwhale-stats-content.njk
index 12822e7..52deeb7 100644
--- a/_includes/components/funkwhale-stats-content.njk
+++ b/_includes/components/funkwhale-stats-content.njk
@@ -1,6 +1,6 @@
 {# Stats Summary Cards #}
 {% if summary %}
-<div class="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-8">
+<div class="grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4 mb-6 sm:mb-8">
   <div class="p-4 bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 text-center">
     <span class="text-2xl font-bold text-primary-600 dark:text-primary-400 block">{{ summary.totalPlays or 0 }}</span>
     <span class="text-xs text-surface-500 uppercase tracking-wide">Plays</span>
@@ -40,7 +40,7 @@
 {% if topAlbums and topAlbums.length %}
 <div>
   <h3 class="text-lg font-semibold text-surface-900 dark:text-surface-100 mb-4">Top Albums</h3>
-  <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
+  <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3 sm:gap-4">
     {% for album in topAlbums | head(5) %}
     <div class="text-center">
       {% if album.coverUrl %}
diff --git a/_includes/layouts/home.njk b/_includes/layouts/home.njk
index 126c7f4..1bbff60 100644
--- a/_includes/layouts/home.njk
+++ b/_includes/layouts/home.njk
@@ -4,25 +4,25 @@ withSidebar: true
 ---
 
 {# Hero Section #}
-<section class="mb-12">
-  <div class="flex flex-col md:flex-row gap-8 items-start">
+<section class="mb-8 sm:mb-12">
+  <div class="flex flex-col sm:flex-row gap-6 sm:gap-8 items-start">
     {# Avatar #}
     <img
       src="{{ site.author.avatar }}"
       alt="{{ site.author.name }}"
-      class="w-32 h-32 rounded-full object-cover shadow-lg"
+      class="w-24 h-24 sm:w-32 sm:h-32 rounded-full object-cover shadow-lg flex-shrink-0"
       loading="eager"
     >
 
     {# Introduction #}
-    <div class="flex-1">
-      <h1 class="text-4xl font-bold text-surface-900 dark:text-surface-100 mb-2">
+    <div class="flex-1 min-w-0">
+      <h1 class="text-2xl sm:text-3xl md:text-4xl font-bold text-surface-900 dark:text-surface-100 mb-2">
         {{ site.author.name }}
       </h1>
-      <p class="text-xl text-primary-600 dark:text-primary-400 mb-4">
+      <p class="text-lg sm:text-xl text-primary-600 dark:text-primary-400 mb-3 sm:mb-4">
         {{ site.author.title }}
       </p>
-      <p class="text-lg text-surface-700 dark:text-surface-300 mb-6">
+      <p class="text-base sm:text-lg text-surface-700 dark:text-surface-300 mb-4 sm:mb-6">
         {{ site.author.bio }}
       </p>
 
@@ -54,8 +54,8 @@ withSidebar: true
 
 {# Work Experience Timeline - only show if data exists #}
 {% if cv.experience and cv.experience.length %}
-<section class="mb-12">
-  <h2 class="text-2xl font-bold text-surface-900 dark:text-surface-100 mb-6">Experience</h2>
+<section class="mb-8 sm:mb-12">
+  <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6">Experience</h2>
 
   <div class="timeline">
     {% for job in cv.experience %}
@@ -99,10 +99,10 @@ withSidebar: true
 
 {# Projects Section - only show if data exists #}
 {% if cv.projects and cv.projects.length %}
-<section class="mb-12">
-  <h2 class="text-2xl font-bold text-surface-900 dark:text-surface-100 mb-6">Projects</h2>
+<section class="mb-8 sm:mb-12">
+  <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6">Projects</h2>
 
-  <div class="grid md:grid-cols-2 gap-4">
+  <div class="grid gap-3 sm:gap-4 md:grid-cols-2">
     {% for project in cv.projects %}
     <article class="p-4 bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700">
       <h3 class="font-semibold text-surface-900 dark:text-surface-100 mb-1">
@@ -134,10 +134,10 @@ withSidebar: true
 
 {# Skills Section - only show if data exists #}
 {% if cv.skills and (cv.skills | dictsort | length) %}
-<section class="mb-12">
-  <h2 class="text-2xl font-bold text-surface-900 dark:text-surface-100 mb-6">Skills</h2>
+<section class="mb-8 sm:mb-12">
+  <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6">Skills</h2>
 
-  <div class="grid md:grid-cols-2 gap-6">
+  <div class="grid gap-4 sm:gap-6 md:grid-cols-2">
     {% for category, skills in cv.skills %}
     <div>
       <h3 class="text-sm font-semibold text-surface-600 dark:text-surface-400 uppercase tracking-wide mb-3">
@@ -156,7 +156,7 @@ withSidebar: true
 
 {# Education & Languages - only show if data exists #}
 {% if (cv.education and cv.education.length) or (cv.languages and cv.languages.length) %}
-<section class="mb-12 grid md:grid-cols-2 gap-8">
+<section class="mb-8 sm:mb-12 grid gap-6 sm:gap-8 md:grid-cols-2">
   {# Education #}
   {% if cv.education and cv.education.length %}
   <div>
@@ -190,8 +190,8 @@ withSidebar: true
 
 {# Interests - only show if data exists #}
 {% if cv.interests and cv.interests.length %}
-<section class="mb-12">
-  <h2 class="text-2xl font-bold text-surface-900 dark:text-surface-100 mb-6">Interests</h2>
+<section class="mb-8 sm:mb-12">
+  <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6">Interests</h2>
   <div class="flex flex-wrap gap-2">
     {% for interest in cv.interests %}
     <span class="skill-badge">{{ interest }}</span>
diff --git a/_includes/layouts/post.njk b/_includes/layouts/post.njk
index d7d7bcb..b47fb14 100644
--- a/_includes/layouts/post.njk
+++ b/_includes/layouts/post.njk
@@ -4,10 +4,10 @@ withBlogSidebar: true
 ---
 <article class="h-entry post">
   {% if title %}
-  <h1 class="p-name text-3xl font-bold text-surface-900 dark:text-surface-100 mb-4">{{ title }}</h1>
+  <h1 class="p-name text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-3 sm:mb-4">{{ title }}</h1>
   {% endif %}
 
-  <div class="post-meta mb-6">
+  <div class="post-meta mb-4 sm:mb-6">
     <time class="dt-published" datetime="{{ date.toISOString() }}">
       {{ date | dateDisplay }}
     </time>
diff --git a/about.njk b/about.njk
index b182335..37967b7 100644
--- a/about.njk
+++ b/about.njk
@@ -4,15 +4,15 @@ title: About
 permalink: /about/
 ---
 <article class="h-card">
-  <header class="mb-8 flex flex-col md:flex-row gap-8 items-start">
+  <header class="mb-6 sm:mb-8 flex flex-col sm:flex-row gap-6 sm:gap-8 items-start">
     <img
       src="{{ site.author.avatar }}"
       alt="{{ site.author.name }}"
-      class="u-photo w-40 h-40 rounded-full object-cover shadow-lg"
+      class="u-photo w-32 h-32 sm:w-40 sm:h-40 rounded-full object-cover shadow-lg flex-shrink-0"
       loading="eager"
     >
-    <div>
-      <h1 class="p-name text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">
+    <div class="min-w-0">
+      <h1 class="p-name text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">
         {{ site.author.name }}
       </h1>
       {% if site.author.title %}
diff --git a/articles.njk b/articles.njk
index a13cb40..b72f116 100644
--- a/articles.njk
+++ b/articles.njk
@@ -9,8 +9,8 @@ pagination:
 permalink: "articles/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber + 1 }}/{% endif %}"
 ---
 <div class="h-feed">
-  <h1 class="text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Articles</h1>
-  <p class="text-surface-600 dark:text-surface-400 mb-8">
+  <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Articles</h1>
+  <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
     Long-form posts and essays.
     <span class="text-sm">({{ collections.articles.length }} total)</span>
   </p>
diff --git a/blog.njk b/blog.njk
index 0b8ca0b..ead51b1 100644
--- a/blog.njk
+++ b/blog.njk
@@ -9,8 +9,8 @@ pagination:
 permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber + 1 }}/{% endif %}"
 ---
 <div class="h-feed">
-  <h1 class="text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Blog</h1>
-  <p class="text-surface-600 dark:text-surface-400 mb-8">
+  <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Blog</h1>
+  <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
     All posts including articles and notes.
     <span class="text-sm">({{ collections.posts.length }} total)</span>
   </p>
diff --git a/bookmarks.njk b/bookmarks.njk
index 070500d..6569ad7 100644
--- a/bookmarks.njk
+++ b/bookmarks.njk
@@ -3,7 +3,10 @@ layout: layouts/base.njk
 title: Bookmarks
 permalink: /bookmarks/
 ---
-<h1>Bookmarks</h1>
+<div class="page-header mb-6 sm:mb-8">
+  <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Bookmarks</h1>
+  <p class="text-surface-600 dark:text-surface-400">Links I've saved for later.</p>
+</div>
 
 {% if collections.bookmarks.length > 0 %}
 <ul class="post-list">
diff --git a/categories-index.njk b/categories-index.njk
index 1875dbd..59eac8c 100644
--- a/categories-index.njk
+++ b/categories-index.njk
@@ -5,8 +5,8 @@ withSidebar: true
 permalink: categories/
 ---
 <div>
-  <h1 class="text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Categories</h1>
-  <p class="text-surface-600 dark:text-surface-400 mb-8">
+  <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Categories</h1>
+  <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
     Browse posts by category.
     <span class="text-sm">({{ collections.categories.length }} categories)</span>
   </p>
diff --git a/categories.njk b/categories.njk
index da037ad..f8248c5 100644
--- a/categories.njk
+++ b/categories.njk
@@ -10,8 +10,8 @@ eleventyComputed:
   title: "{{ category }}"
 ---
 <div class="h-feed">
-  <h1 class="text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">{{ category }}</h1>
-  <p class="text-surface-600 dark:text-surface-400 mb-8">
+  <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">{{ category }}</h1>
+  <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
     Posts tagged with "{{ category }}".
   </p>
 
diff --git a/css/tailwind.css b/css/tailwind.css
index 8c9b8e6..5c6fac5 100644
--- a/css/tailwind.css
+++ b/css/tailwind.css
@@ -293,6 +293,7 @@
   /* Pre/code blocks - prevent overflow on mobile */
   pre {
     @apply overflow-x-auto max-w-full;
+    -webkit-overflow-scrolling: touch;
   }
 
   code {
@@ -314,4 +315,42 @@
     content-visibility: auto;
     contain-intrinsic-size: auto 200px;
   }
+
+  /* Tables - responsive handling */
+  table {
+    @apply w-full;
+    display: block;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* Ensure truncate works properly in flex containers */
+  .truncate {
+    @apply overflow-hidden text-ellipsis whitespace-nowrap;
+  }
+
+  /* Video embeds - maintain aspect ratio */
+  lite-youtube,
+  iframe[src*="youtube"],
+  iframe[src*="vimeo"] {
+    @apply max-w-full;
+  }
+}
+
+/* Mobile-specific improvements */
+@layer utilities {
+  /* Ensure proper touch scrolling on overflow containers */
+  .overflow-x-auto {
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* Hide scrollbar but allow scrolling */
+  .scrollbar-hide {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none;
+  }
 }
diff --git a/funkwhale.njk b/funkwhale.njk
index 2a121b4..b2286e0 100644
--- a/funkwhale.njk
+++ b/funkwhale.njk
@@ -5,8 +5,8 @@ permalink: /funkwhale/
 withSidebar: true
 ---
 <div class="funkwhale-page" x-data="{ activeTab: 'all' }">
-  <header class="mb-8">
-    <h1 class="text-4xl font-bold text-surface-900 dark:text-surface-100 mb-2">Listening Activity</h1>
+  <header class="mb-6 sm:mb-8">
+    <h1 class="text-2xl sm:text-3xl md:text-4xl font-bold text-surface-900 dark:text-surface-100 mb-2">Listening Activity</h1>
     <p class="text-surface-600 dark:text-surface-400">
       What I've been listening to on
       <a href="{{ funkwhaleActivity.instanceUrl }}" class="text-primary-600 dark:text-primary-400 hover:underline" target="_blank" rel="noopener">
@@ -18,24 +18,24 @@ withSidebar: true
   {# Now Playing / Recently Played Hero #}
   {% if funkwhaleActivity.nowPlaying and funkwhaleActivity.nowPlaying.status %}
   <section class="mb-12">
-    <div class="relative p-6 rounded-2xl overflow-hidden {% if funkwhaleActivity.nowPlaying.status == 'now-playing' %}bg-gradient-to-br from-green-500/10 to-green-600/5 border-2 border-green-500/30{% else %}bg-gradient-to-br from-primary-500/10 to-primary-600/5 border border-primary-500/20{% endif %}">
-      <div class="flex items-center gap-5">
+    <div class="relative p-4 sm:p-6 rounded-xl sm:rounded-2xl overflow-hidden {% if funkwhaleActivity.nowPlaying.status == 'now-playing' %}bg-gradient-to-br from-green-500/10 to-green-600/5 border-2 border-green-500/30{% else %}bg-gradient-to-br from-primary-500/10 to-primary-600/5 border border-primary-500/20{% endif %}">
+      <div class="flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:gap-5">
         {% if funkwhaleActivity.nowPlaying.coverUrl %}
         <img
           src="{{ funkwhaleActivity.nowPlaying.coverUrl }}"
           alt=""
-          class="w-24 h-24 rounded-lg shadow-lg object-cover"
+          class="w-20 h-20 sm:w-24 sm:h-24 rounded-lg shadow-lg object-cover flex-shrink-0"
           loading="lazy"
         >
         {% else %}
-        <div class="w-24 h-24 rounded-lg bg-surface-200 dark:bg-surface-700 flex items-center justify-center">
-          <svg class="w-10 h-10 text-surface-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <div class="w-20 h-20 sm:w-24 sm:h-24 rounded-lg bg-surface-200 dark:bg-surface-700 flex items-center justify-center flex-shrink-0">
+          <svg class="w-8 h-8 sm:w-10 sm:h-10 text-surface-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"/>
           </svg>
         </div>
         {% endif %}
 
-        <div class="flex-1 min-w-0">
+        <div class="flex-1 min-w-0 w-full sm:w-auto">
           <div class="flex items-center gap-2 mb-2">
             {% if funkwhaleActivity.nowPlaying.status == 'now-playing' %}
             <span class="inline-flex items-center gap-1.5 px-2 py-1 text-xs font-medium bg-green-500/20 text-green-700 dark:text-green-400 rounded-full">
@@ -54,7 +54,7 @@ withSidebar: true
             {% endif %}
           </div>
 
-          <h2 class="text-xl font-bold text-surface-900 dark:text-surface-100 truncate">
+          <h2 class="text-lg sm:text-xl font-bold text-surface-900 dark:text-surface-100 truncate">
             {% if funkwhaleActivity.nowPlaying.trackUrl %}
             <a href="{{ funkwhaleActivity.nowPlaying.trackUrl }}" class="hover:text-primary-600 dark:hover:text-primary-400" target="_blank" rel="noopener">
               {{ funkwhaleActivity.nowPlaying.track }}
@@ -77,7 +77,7 @@ withSidebar: true
   {# Stats Section with Tabs #}
   {% if funkwhaleActivity.stats %}
   <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-primary-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
       </svg>
@@ -174,7 +174,7 @@ withSidebar: true
 
   {# Recent Listenings #}
   <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-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
       </svg>
@@ -225,14 +225,14 @@ withSidebar: true
   {# Favorites #}
   {% if funkwhaleActivity.favorites.length %}
   <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="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
       </svg>
       Favorite Tracks
     </h2>
 
-    <div class="grid md:grid-cols-2 gap-4">
+    <div class="grid gap-3 sm:gap-4 md:grid-cols-2">
       {% for favorite in funkwhaleActivity.favorites | head(10) %}
       <div class="flex items-center gap-3 p-3 bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700">
         {% if favorite.coverUrl %}
diff --git a/github.njk b/github.njk
index 5d68cca..b1d52c8 100644
--- a/github.njk
+++ b/github.njk
@@ -5,8 +5,8 @@ permalink: /github/
 withSidebar: true
 ---
 <div class="github-page">
-  <header class="mb-8">
-    <h1 class="text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">GitHub Activity</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">GitHub Activity</h1>
     <p class="text-surface-600 dark:text-surface-400">
       My open source contributions and starred repositories.
       <a href="https://github.com/{{ site.feeds.github }}" class="text-primary-600 dark:text-primary-400 hover:underline" target="_blank" rel="noopener">
@@ -18,14 +18,14 @@ withSidebar: true
   {# Featured Projects Section #}
   {% if githubActivity.featured.length %}
   <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-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/>
       </svg>
       Featured Projects
     </h2>
 
-    <div class="grid md:grid-cols-2 gap-6">
+    <div class="grid gap-4 sm:gap-6 md:grid-cols-2">
       {% for repo in githubActivity.featured %}
       <article class="p-5 bg-gradient-to-br from-primary-50 to-white dark:from-surface-800 dark:to-surface-800 rounded-xl border-2 border-primary-200 dark:border-primary-800 shadow-sm">
         <div class="flex items-start justify-between mb-3">
@@ -91,7 +91,7 @@ withSidebar: true
 
   {# Starred Repos Section #}
   <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-yellow-500" fill="currentColor" viewBox="0 0 24 24">
         <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
       </svg>
@@ -99,7 +99,7 @@ withSidebar: true
     </h2>
 
     {% if githubActivity.stars.length %}
-    <div class="grid md:grid-cols-2 gap-4">
+    <div class="grid gap-3 sm:gap-4 md:grid-cols-2">
       {% for repo in githubActivity.stars | head(10) %}
       <article class="p-4 bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-primary-400 dark:hover:border-primary-600 transition-colors">
         <h3 class="font-semibold text-surface-900 dark:text-surface-100 mb-1">
@@ -144,7 +144,7 @@ withSidebar: true
 
   {# Recent Commits Section #}
   <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-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
       </svg>
@@ -178,7 +178,7 @@ withSidebar: true
   {# Contributions Section #}
   {% if githubActivity.contributions.length %}
   <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-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"/>
       </svg>
@@ -211,7 +211,7 @@ withSidebar: true
 
   {# My Repositories Section #}
   <section>
-    <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" fill="currentColor" viewBox="0 0 24 24">
         <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"/>
       </svg>
@@ -219,7 +219,7 @@ withSidebar: true
     </h2>
 
     {% if githubRepos.length %}
-    <div class="grid md:grid-cols-2 gap-4">
+    <div class="grid gap-3 sm:gap-4 md:grid-cols-2">
       {% for repo in githubRepos | head(6) %}
       <article class="p-4 bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700">
         <h3 class="font-semibold text-surface-900 dark:text-surface-100 mb-1">
diff --git a/interactions.njk b/interactions.njk
index 9b4fe86..08edc65 100644
--- a/interactions.njk
+++ b/interactions.njk
@@ -3,12 +3,12 @@ layout: layouts/base.njk
 title: Interactions
 permalink: /interactions/
 ---
-<div class="page-header mb-8">
-  <h1 class="text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Interactions</h1>
+<div class="page-header mb-6 sm:mb-8">
+  <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Interactions</h1>
   <p class="text-surface-600 dark:text-surface-400">My engagement with content across the IndieWeb.</p>
 </div>
 
-<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+<div class="grid gap-4 sm:gap-6 md:grid-cols-2 lg:grid-cols-3">
   {# Likes #}
   <a href="/likes/" class="block p-6 bg-surface-100 dark:bg-surface-800 rounded-lg hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors group">
     <div class="flex items-center gap-4 mb-4">
diff --git a/likes.njk b/likes.njk
index 03df191..b415792 100644
--- a/likes.njk
+++ b/likes.njk
@@ -3,8 +3,8 @@ layout: layouts/base.njk
 title: Likes
 permalink: /likes/
 ---
-<div class="page-header mb-8">
-  <h1 class="text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Likes</h1>
+<div class="page-header mb-6 sm:mb-8">
+  <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Likes</h1>
   <p class="text-surface-600 dark:text-surface-400">Content I've liked across the web.</p>
 </div>
 
diff --git a/listening.njk b/listening.njk
index 256f267..0bbcb0b 100644
--- a/listening.njk
+++ b/listening.njk
@@ -5,8 +5,8 @@ permalink: /listening/
 withSidebar: true
 ---
 <div class="listening-page" x-data="{ activeTab: 'all', activeSource: 'all' }">
-  <header class="mb-8">
-    <h1 class="text-4xl font-bold text-surface-900 dark:text-surface-100 mb-2">Listening Activity</h1>
+  <header class="mb-6 sm:mb-8">
+    <h1 class="text-2xl sm:text-3xl md:text-4xl font-bold text-surface-900 dark:text-surface-100 mb-2">Listening Activity</h1>
     <p class="text-surface-600 dark:text-surface-400">
       What I've been listening to on
       {% if funkwhaleActivity.instanceUrl %}
@@ -59,19 +59,19 @@ withSidebar: true
     {# Funkwhale Now Playing #}
     {% if fwNowPlaying %}
     <div x-show="activeSource === 'all' || activeSource === 'funkwhale'" class="mb-4">
-      <div class="relative p-6 rounded-2xl overflow-hidden {% if fwNowPlaying.status == 'now-playing' %}bg-gradient-to-br from-green-500/10 to-green-600/5 border-2 border-green-500/30{% else %}bg-gradient-to-br from-purple-500/10 to-purple-600/5 border border-purple-500/20{% endif %}">
-        <div class="flex items-center gap-5">
+      <div class="relative p-4 sm:p-6 rounded-xl sm:rounded-2xl overflow-hidden {% if fwNowPlaying.status == 'now-playing' %}bg-gradient-to-br from-green-500/10 to-green-600/5 border-2 border-green-500/30{% else %}bg-gradient-to-br from-purple-500/10 to-purple-600/5 border border-purple-500/20{% endif %}">
+        <div class="flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:gap-5">
           {% if fwNowPlaying.coverUrl %}
-          <img src="{{ fwNowPlaying.coverUrl }}" alt="" class="w-24 h-24 rounded-lg shadow-lg object-cover" loading="lazy">
+          <img src="{{ fwNowPlaying.coverUrl }}" alt="" class="w-20 h-20 sm:w-24 sm:h-24 rounded-lg shadow-lg object-cover flex-shrink-0" loading="lazy">
           {% else %}
-          <div class="w-24 h-24 rounded-lg bg-surface-200 dark:bg-surface-700 flex items-center justify-center">
-            <svg class="w-10 h-10 text-surface-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <div class="w-20 h-20 sm:w-24 sm:h-24 rounded-lg bg-surface-200 dark:bg-surface-700 flex items-center justify-center flex-shrink-0">
+            <svg class="w-8 h-8 sm:w-10 sm:h-10 text-surface-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"/>
             </svg>
           </div>
           {% endif %}
 
-          <div class="flex-1 min-w-0">
+          <div class="flex-1 min-w-0 w-full sm:w-auto">
             <div class="flex items-center gap-2 mb-2">
               <span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium bg-purple-500/20 text-purple-700 dark:text-purple-400 rounded-full">Funkwhale</span>
               {% if fwNowPlaying.status == 'now-playing' %}
@@ -90,7 +90,7 @@ withSidebar: true
               {% endif %}
             </div>
 
-            <h2 class="text-xl font-bold text-surface-900 dark:text-surface-100 truncate">
+            <h2 class="text-lg sm:text-xl font-bold text-surface-900 dark:text-surface-100 truncate">
               {% if fwNowPlaying.trackUrl %}
               <a href="{{ fwNowPlaying.trackUrl }}" class="hover:text-primary-600 dark:hover:text-primary-400" target="_blank" rel="noopener">{{ fwNowPlaying.track }}</a>
               {% else %}
@@ -111,19 +111,19 @@ withSidebar: true
     {# Last.fm Now Playing #}
     {% if lfmNowPlaying %}
     <div x-show="activeSource === 'all' || activeSource === 'lastfm'" class="mb-4">
-      <div class="relative p-6 rounded-2xl overflow-hidden {% if lfmNowPlaying.status == 'now-playing' %}bg-gradient-to-br from-green-500/10 to-green-600/5 border-2 border-green-500/30{% else %}bg-gradient-to-br from-red-500/10 to-red-600/5 border border-red-500/20{% endif %}">
-        <div class="flex items-center gap-5">
+      <div class="relative p-4 sm:p-6 rounded-xl sm:rounded-2xl overflow-hidden {% if lfmNowPlaying.status == 'now-playing' %}bg-gradient-to-br from-green-500/10 to-green-600/5 border-2 border-green-500/30{% else %}bg-gradient-to-br from-red-500/10 to-red-600/5 border border-red-500/20{% endif %}">
+        <div class="flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:gap-5">
           {% if lfmNowPlaying.coverUrl %}
-          <img src="{{ lfmNowPlaying.coverUrl }}" alt="" class="w-24 h-24 rounded-lg shadow-lg object-cover" loading="lazy">
+          <img src="{{ lfmNowPlaying.coverUrl }}" alt="" class="w-20 h-20 sm:w-24 sm:h-24 rounded-lg shadow-lg object-cover flex-shrink-0" loading="lazy">
           {% else %}
-          <div class="w-24 h-24 rounded-lg bg-surface-200 dark:bg-surface-700 flex items-center justify-center">
-            <svg class="w-10 h-10 text-surface-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <div class="w-20 h-20 sm:w-24 sm:h-24 rounded-lg bg-surface-200 dark:bg-surface-700 flex items-center justify-center flex-shrink-0">
+            <svg class="w-8 h-8 sm:w-10 sm:h-10 text-surface-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"/>
             </svg>
           </div>
           {% endif %}
 
-          <div class="flex-1 min-w-0">
+          <div class="flex-1 min-w-0 w-full sm:w-auto">
             <div class="flex items-center gap-2 mb-2">
               <span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium bg-red-500/20 text-red-700 dark:text-red-400 rounded-full">Last.fm</span>
               {% if lfmNowPlaying.status == 'now-playing' %}
@@ -145,7 +145,7 @@ withSidebar: true
               {% endif %}
             </div>
 
-            <h2 class="text-xl font-bold text-surface-900 dark:text-surface-100 truncate">
+            <h2 class="text-lg sm:text-xl font-bold text-surface-900 dark:text-surface-100 truncate">
               {% if lfmNowPlaying.trackUrl %}
               <a href="{{ lfmNowPlaying.trackUrl }}" class="hover:text-red-600 dark:hover:text-red-400" target="_blank" rel="noopener">{{ lfmNowPlaying.track }}</a>
               {% else %}
@@ -168,7 +168,7 @@ withSidebar: true
   {# Combined Stats Section #}
   {% if funkwhaleActivity.stats or lastfmActivity.stats %}
   <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-primary-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
       </svg>
@@ -176,7 +176,7 @@ withSidebar: true
     </h2>
 
     {# Stats Cards Grid - Side by Side #}
-    <div class="grid md:grid-cols-2 gap-6">
+    <div class="grid gap-4 sm:gap-6 md:grid-cols-2">
       {# Funkwhale Stats #}
       {% if funkwhaleActivity.stats %}
       <div x-show="activeSource === 'all' || activeSource === 'funkwhale'" class="bg-white dark:bg-surface-800 rounded-xl p-6 border border-purple-200 dark:border-purple-800">
@@ -258,7 +258,7 @@ withSidebar: true
 
   {# Recent Listens - Combined Timeline #}
   <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-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
       </svg>
@@ -348,7 +348,7 @@ withSidebar: true
   {# Loved Tracks from Last.fm #}
   {% if lastfmActivity.loved.length %}
   <section class="mb-12" x-show="activeSource === 'all' || activeSource === 'lastfm'">
-    <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="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
       </svg>
@@ -356,7 +356,7 @@ withSidebar: true
       <span class="text-sm font-normal text-surface-500">(Last.fm)</span>
     </h2>
 
-    <div class="grid md:grid-cols-2 gap-4">
+    <div class="grid gap-3 sm:gap-4 md:grid-cols-2">
       {% for track in lastfmActivity.loved | head(10) %}
       <div class="flex items-center gap-3 p-3 bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700">
         {% if track.coverUrl %}
@@ -390,7 +390,7 @@ withSidebar: true
   {# Funkwhale Favorites #}
   {% if funkwhaleActivity.favorites.length %}
   <section class="mb-12" x-show="activeSource === 'all' || activeSource === 'funkwhale'">
-    <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-purple-500" fill="currentColor" viewBox="0 0 24 24">
         <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
       </svg>
@@ -398,7 +398,7 @@ withSidebar: true
       <span class="text-sm font-normal text-surface-500">(Funkwhale)</span>
     </h2>
 
-    <div class="grid md:grid-cols-2 gap-4">
+    <div class="grid gap-3 sm:gap-4 md:grid-cols-2">
       {% for favorite in funkwhaleActivity.favorites | head(10) %}
       <div class="flex items-center gap-3 p-3 bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700">
         {% if favorite.coverUrl %}
diff --git a/notes.njk b/notes.njk
index c9ad0e6..65cb51d 100644
--- a/notes.njk
+++ b/notes.njk
@@ -9,8 +9,8 @@ pagination:
 permalink: "notes/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber + 1 }}/{% endif %}"
 ---
 <div class="h-feed">
-  <h1 class="text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Notes</h1>
-  <p class="text-surface-600 dark:text-surface-400 mb-8">
+  <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Notes</h1>
+  <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
     Short thoughts, updates, and quick posts.
     <span class="text-sm">({{ collections.notes.length }} total)</span>
   </p>
diff --git a/photos.njk b/photos.njk
index 3a686e8..0dd0260 100644
--- a/photos.njk
+++ b/photos.njk
@@ -3,7 +3,10 @@ layout: layouts/base.njk
 title: Photos
 permalink: /photos/
 ---
-<h1>Photos</h1>
+<div class="page-header mb-6 sm:mb-8">
+  <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Photos</h1>
+  <p class="text-surface-600 dark:text-surface-400">Photo posts and images.</p>
+</div>
 
 {% if collections.photos.length > 0 %}
 <ul class="post-list">
diff --git a/replies.njk b/replies.njk
index f0af02c..c2183ef 100644
--- a/replies.njk
+++ b/replies.njk
@@ -3,8 +3,8 @@ layout: layouts/base.njk
 title: Replies
 permalink: /replies/
 ---
-<div class="page-header mb-8">
-  <h1 class="text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Replies</h1>
+<div class="page-header mb-6 sm:mb-8">
+  <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Replies</h1>
   <p class="text-surface-600 dark:text-surface-400">My responses to posts across the web.</p>
 </div>
 
diff --git a/reposts.njk b/reposts.njk
index b2dd622..337d4a2 100644
--- a/reposts.njk
+++ b/reposts.njk
@@ -3,8 +3,8 @@ layout: layouts/base.njk
 title: Reposts
 permalink: /reposts/
 ---
-<div class="page-header mb-8">
-  <h1 class="text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Reposts</h1>
+<div class="page-header mb-6 sm:mb-8">
+  <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Reposts</h1>
   <p class="text-surface-600 dark:text-surface-400">Content I've shared from others.</p>
 </div>
 
diff --git a/webmention-debug.njk b/webmention-debug.njk
index 238c77b..8f5597c 100644
--- a/webmention-debug.njk
+++ b/webmention-debug.njk
@@ -4,8 +4,8 @@ title: Webmention Debug
 permalink: /debug/webmentions/
 eleventyExcludeFromCollections: true
 ---
-<div class="page-header mb-8">
-  <h1 class="text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Webmention Debug</h1>
+<div class="page-header mb-6 sm:mb-8">
+  <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Webmention Debug</h1>
   <p class="text-surface-600 dark:text-surface-400">
     Debug page for webmention recovery from legacy URLs.
     This page is excluded from collections and won't appear in feeds.
diff --git a/youtube.njk b/youtube.njk
index 1c3db17..9dd6a28 100644
--- a/youtube.njk
+++ b/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">