giersig.eu/indiekit-blog
1
0
Fork 0
Code Issues Actions Packages Projects Releases Activity

fix: comprehensive mobile responsive design audit

Browse Source 
- 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>
This commit is contained in:
Ricardo
2026-01-24 15:48:23 +01:00
parent 3c21393989
commit 96182cb1e4
22 changed files with 160 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
404.njk
View File

@@ -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>

4
_includes/components/funkwhale-stats-content.njk
View File

@@ -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 %}

36
_includes/layouts/home.njk
View File

@@ -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>

4
_includes/layouts/post.njk
View File

@@ -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>

8
about.njk
View File

@@ -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 %}

4
articles.njk
View File

@@ -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>

4
blog.njk
View File

@@ -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>

5
bookmarks.njk
View File

@@ -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">

4
categories-index.njk
View File

@@ -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>

4
categories.njk
View File

@@ -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>

39
css/tailwind.css
View File

@@ -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;
}
}

26
funkwhale.njk
View File

@@ -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 %}

20
github.njk
View File

@@ -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">

6
interactions.njk
View File

@@ -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">

4
likes.njk
View File

@@ -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>

46
listening.njk
View File

@@ -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 %}

4
notes.njk
View File

@@ -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>

5
photos.njk
View File

@@ -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">

4
replies.njk
View File

@@ -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>

4
reposts.njk
View File

@@ -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>

4
webmention-debug.njk
View File

@@ -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.

22
youtube.njk
View File

@@ -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">