svemagie.net/blog-eleventy-indiekit
1
0
Fork 0
mirror of https://github.com/svemagie/blog-eleventy-indiekit.git synced 2026-05-15 15:08:51 +02:00
Code Issues Packages Projects Releases Wiki 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
404.njk
+9 -3
View File
@@ -3,6 +3,12 @@ layout: layouts/base.njk
title: Page Not Found title: Page Not Found
permalink: /404.html permalink: /404.html
--- ---
<h1>404 - Page Not Found</h1> <div class="text-center py-12">
<p>Sorry, the page you're looking for doesn't exist.</p> <h1 class="text-4xl sm:text-6xl font-bold text-surface-300 dark:text-surface-700 mb-4">404</h1>
<p><a href="/">Go back to the homepage</a></p> <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>
_includes/components/funkwhale-stats-content.njk
+2 -2
View File
@@ -1,6 +1,6 @@
{# Stats Summary Cards #} {# Stats Summary Cards #}
{% if summary %} {% 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"> <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-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> <span class="text-xs text-surface-500 uppercase tracking-wide">Plays</span>
@@ -40,7 +40,7 @@
{% if topAlbums and topAlbums.length %} {% if topAlbums and topAlbums.length %}
<div> <div>
<h3 class="text-lg font-semibold text-surface-900 dark:text-surface-100 mb-4">Top Albums</h3> <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) %} {% for album in topAlbums | head(5) %}
<div class="text-center"> <div class="text-center">
{% if album.coverUrl %} {% if album.coverUrl %}
_includes/layouts/home.njk
+18 -18
View File
@@ -4,25 +4,25 @@ withSidebar: true
--- ---
{# Hero Section #} {# Hero Section #}
<section class="mb-12"> <section class="mb-8 sm:mb-12">
<div class="flex flex-col md:flex-row gap-8 items-start"> <div class="flex flex-col sm:flex-row gap-6 sm:gap-8 items-start">
{# Avatar #} {# Avatar #}
<img <img
src="{{ site.author.avatar }}" src="{{ site.author.avatar }}"
alt="{{ site.author.name }}" 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" loading="eager"
> >
{# Introduction #} {# Introduction #}
<div class="flex-1"> <div class="flex-1 min-w-0">
<h1 class="text-4xl font-bold text-surface-900 dark:text-surface-100 mb-2"> <h1 class="text-2xl sm:text-3xl md:text-4xl font-bold text-surface-900 dark:text-surface-100 mb-2">
{{ site.author.name }} {{ site.author.name }}
</h1> </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 }} {{ site.author.title }}
</p> </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 }} {{ site.author.bio }}
</p> </p>
@@ -54,8 +54,8 @@ withSidebar: true
{# Work Experience Timeline - only show if data exists #} {# Work Experience Timeline - only show if data exists #}
{% if cv.experience and cv.experience.length %} {% if cv.experience and cv.experience.length %}
<section class="mb-12"> <section class="mb-8 sm:mb-12">
<h2 class="text-2xl font-bold text-surface-900 dark:text-surface-100 mb-6">Experience</h2> <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"> <div class="timeline">
{% for job in cv.experience %} {% for job in cv.experience %}
@@ -99,10 +99,10 @@ withSidebar: true
{# Projects Section - only show if data exists #} {# Projects Section - only show if data exists #}
{% if cv.projects and cv.projects.length %} {% if cv.projects and cv.projects.length %}
<section class="mb-12"> <section class="mb-8 sm:mb-12">
<h2 class="text-2xl font-bold text-surface-900 dark:text-surface-100 mb-6">Projects</h2> <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 %} {% 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"> <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"> <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 #} {# Skills Section - only show if data exists #}
{% if cv.skills and (cv.skills | dictsort | length) %} {% if cv.skills and (cv.skills | dictsort | length) %}
<section class="mb-12"> <section class="mb-8 sm:mb-12">
<h2 class="text-2xl font-bold text-surface-900 dark:text-surface-100 mb-6">Skills</h2> <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 %} {% for category, skills in cv.skills %}
<div> <div>
<h3 class="text-sm font-semibold text-surface-600 dark:text-surface-400 uppercase tracking-wide mb-3"> <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 #} {# Education & Languages - only show if data exists #}
{% if (cv.education and cv.education.length) or (cv.languages and cv.languages.length) %} {% 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 #} {# Education #}
{% if cv.education and cv.education.length %} {% if cv.education and cv.education.length %}
<div> <div>
@@ -190,8 +190,8 @@ withSidebar: true
{# Interests - only show if data exists #} {# Interests - only show if data exists #}
{% if cv.interests and cv.interests.length %} {% if cv.interests and cv.interests.length %}
<section class="mb-12"> <section class="mb-8 sm:mb-12">
<h2 class="text-2xl font-bold text-surface-900 dark:text-surface-100 mb-6">Interests</h2> <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"> <div class="flex flex-wrap gap-2">
{% for interest in cv.interests %} {% for interest in cv.interests %}
<span class="skill-badge">{{ interest }}</span> <span class="skill-badge">{{ interest }}</span>
_includes/layouts/post.njk
+2 -2
View File
@@ -4,10 +4,10 @@ withBlogSidebar: true
--- ---
<article class="h-entry post"> <article class="h-entry post">
{% if title %} {% 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 %} {% endif %}
<div class="post-meta mb-6"> <div class="post-meta mb-4 sm:mb-6">
<time class="dt-published" datetime="{{ date.toISOString() }}"> <time class="dt-published" datetime="{{ date.toISOString() }}">
{{ date | dateDisplay }} {{ date | dateDisplay }}
</time> </time>
about.njk
+4 -4
View File
@@ -4,15 +4,15 @@ title: About
permalink: /about/ permalink: /about/
--- ---
<article class="h-card"> <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 <img
src="{{ site.author.avatar }}" src="{{ site.author.avatar }}"
alt="{{ site.author.name }}" 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" loading="eager"
> >
<div> <div class="min-w-0">
<h1 class="p-name text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2"> <h1 class="p-name text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">
{{ site.author.name }} {{ site.author.name }}
</h1> </h1>
{% if site.author.title %} {% if site.author.title %}
articles.njk
+2 -2
View File
@@ -9,8 +9,8 @@ pagination:
permalink: "articles/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber + 1 }}/{% endif %}" permalink: "articles/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber + 1 }}/{% endif %}"
--- ---
<div class="h-feed"> <div class="h-feed">
<h1 class="text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Articles</h1> <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-8"> <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
Long-form posts and essays. Long-form posts and essays.
<span class="text-sm">({{ collections.articles.length }} total)</span> <span class="text-sm">({{ collections.articles.length }} total)</span>
</p> </p>
blog.njk
+2 -2
View File
@@ -9,8 +9,8 @@ pagination:
permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber + 1 }}/{% endif %}" permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber + 1 }}/{% endif %}"
--- ---
<div class="h-feed"> <div class="h-feed">
<h1 class="text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Blog</h1> <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-8"> <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
All posts including articles and notes. All posts including articles and notes.
<span class="text-sm">({{ collections.posts.length }} total)</span> <span class="text-sm">({{ collections.posts.length }} total)</span>
</p> </p>
bookmarks.njk
+4 -1
View File
@@ -3,7 +3,10 @@ layout: layouts/base.njk
title: Bookmarks title: Bookmarks
permalink: /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 %} {% if collections.bookmarks.length > 0 %}
<ul class="post-list"> <ul class="post-list">
categories-index.njk
+2 -2
View File
@@ -5,8 +5,8 @@ withSidebar: true
permalink: categories/ permalink: categories/
--- ---
<div> <div>
<h1 class="text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Categories</h1> <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-8"> <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
Browse posts by category. Browse posts by category.
<span class="text-sm">({{ collections.categories.length }} categories)</span> <span class="text-sm">({{ collections.categories.length }} categories)</span>
</p> </p>
categories.njk
+2 -2
View File
@@ -10,8 +10,8 @@ eleventyComputed:
title: "{{ category }}" title: "{{ category }}"
--- ---
<div class="h-feed"> <div class="h-feed">
<h1 class="text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">{{ category }}</h1> <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-8"> <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
Posts tagged with "{{ category }}". Posts tagged with "{{ category }}".
</p> </p>
css/tailwind.css
+39
View File
@@ -293,6 +293,7 @@
/* Pre/code blocks - prevent overflow on mobile */ /* Pre/code blocks - prevent overflow on mobile */
pre { pre {
@apply overflow-x-auto max-w-full; @apply overflow-x-auto max-w-full;
-webkit-overflow-scrolling: touch;
} }
code { code {
@@ -314,4 +315,42 @@
content-visibility: auto; content-visibility: auto;
contain-intrinsic-size: auto 200px; 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;
}
} }
funkwhale.njk
+13 -13
View File
@@ -5,8 +5,8 @@ permalink: /funkwhale/
withSidebar: true withSidebar: true
--- ---
<div class="funkwhale-page" x-data="{ activeTab: 'all' }"> <div class="funkwhale-page" x-data="{ activeTab: 'all' }">
<header class="mb-8"> <header class="mb-6 sm:mb-8">
<h1 class="text-4xl font-bold text-surface-900 dark:text-surface-100 mb-2">Listening Activity</h1> <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"> <p class="text-surface-600 dark:text-surface-400">
What I've been listening to on 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"> <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 #} {# Now Playing / Recently Played Hero #}
{% if funkwhaleActivity.nowPlaying and funkwhaleActivity.nowPlaying.status %} {% if funkwhaleActivity.nowPlaying and funkwhaleActivity.nowPlaying.status %}
<section class="mb-12"> <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="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 items-center gap-5"> <div class="flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:gap-5">
{% if funkwhaleActivity.nowPlaying.coverUrl %} {% if funkwhaleActivity.nowPlaying.coverUrl %}
<img <img
src="{{ funkwhaleActivity.nowPlaying.coverUrl }}" src="{{ funkwhaleActivity.nowPlaying.coverUrl }}"
alt="" 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" loading="lazy"
> >
{% else %} {% else %}
<div class="w-24 h-24 rounded-lg bg-surface-200 dark:bg-surface-700 flex items-center justify-center"> <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-10 h-10 text-surface-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <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"/> <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> </svg>
</div> </div>
{% endif %} {% 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"> <div class="flex items-center gap-2 mb-2">
{% if funkwhaleActivity.nowPlaying.status == 'now-playing' %} {% 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"> <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 %} {% endif %}
</div> </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 %} {% if funkwhaleActivity.nowPlaying.trackUrl %}
<a href="{{ funkwhaleActivity.nowPlaying.trackUrl }}" class="hover:text-primary-600 dark:hover:text-primary-400" target="_blank" rel="noopener"> <a href="{{ funkwhaleActivity.nowPlaying.trackUrl }}" class="hover:text-primary-600 dark:hover:text-primary-400" target="_blank" rel="noopener">
{{ funkwhaleActivity.nowPlaying.track }} {{ funkwhaleActivity.nowPlaying.track }}
@@ -77,7 +77,7 @@ withSidebar: true
{# Stats Section with Tabs #} {# Stats Section with Tabs #}
{% if funkwhaleActivity.stats %} {% if funkwhaleActivity.stats %}
<section class="mb-12"> <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"> <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"/> <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> </svg>
@@ -174,7 +174,7 @@ withSidebar: true
{# Recent Listenings #} {# Recent Listenings #}
<section class="mb-12"> <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"> <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"/> <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> </svg>
@@ -225,14 +225,14 @@ withSidebar: true
{# Favorites #} {# Favorites #}
{% if funkwhaleActivity.favorites.length %} {% if funkwhaleActivity.favorites.length %}
<section class="mb-12"> <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"> <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"/> <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> </svg>
Favorite Tracks Favorite Tracks
</h2> </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) %} {% 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"> <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 %} {% if favorite.coverUrl %}
github.njk
+10 -10
View File
@@ -5,8 +5,8 @@ permalink: /github/
withSidebar: true withSidebar: true
--- ---
<div class="github-page"> <div class="github-page">
<header class="mb-8"> <header class="mb-6 sm:mb-8">
<h1 class="text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">GitHub Activity</h1> <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"> <p class="text-surface-600 dark:text-surface-400">
My open source contributions and starred repositories. 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"> <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 #} {# Featured Projects Section #}
{% if githubActivity.featured.length %} {% if githubActivity.featured.length %}
<section class="mb-12"> <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"> <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"/> <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> </svg>
Featured Projects Featured Projects
</h2> </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 %} {% 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"> <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"> <div class="flex items-start justify-between mb-3">
@@ -91,7 +91,7 @@ withSidebar: true
{# Starred Repos Section #} {# Starred Repos Section #}
<section class="mb-12"> <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"> <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"/> <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> </svg>
@@ -99,7 +99,7 @@ withSidebar: true
</h2> </h2>
{% if githubActivity.stars.length %} {% 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) %} {% 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"> <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"> <h3 class="font-semibold text-surface-900 dark:text-surface-100 mb-1">
@@ -144,7 +144,7 @@ withSidebar: true
{# Recent Commits Section #} {# Recent Commits Section #}
<section class="mb-12"> <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"> <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"/> <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> </svg>
@@ -178,7 +178,7 @@ withSidebar: true
{# Contributions Section #} {# Contributions Section #}
{% if githubActivity.contributions.length %} {% if githubActivity.contributions.length %}
<section class="mb-12"> <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"> <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"/> <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> </svg>
@@ -211,7 +211,7 @@ withSidebar: true
{# My Repositories Section #} {# My Repositories Section #}
<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"> <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"/> <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> </svg>
@@ -219,7 +219,7 @@ withSidebar: true
</h2> </h2>
{% if githubRepos.length %} {% 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) %} {% 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"> <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"> <h3 class="font-semibold text-surface-900 dark:text-surface-100 mb-1">
interactions.njk
+3 -3
View File
@@ -3,12 +3,12 @@ layout: layouts/base.njk
title: Interactions title: Interactions
permalink: /interactions/ permalink: /interactions/
--- ---
<div class="page-header mb-8"> <div class="page-header mb-6 sm:mb-8">
<h1 class="text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Interactions</h1> <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> <p class="text-surface-600 dark:text-surface-400">My engagement with content across the IndieWeb.</p>
</div> </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 #} {# 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"> <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"> <div class="flex items-center gap-4 mb-4">
likes.njk
+2 -2
View File
@@ -3,8 +3,8 @@ layout: layouts/base.njk
title: Likes title: Likes
permalink: /likes/ permalink: /likes/
--- ---
<div class="page-header mb-8"> <div class="page-header mb-6 sm:mb-8">
<h1 class="text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Likes</h1> <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> <p class="text-surface-600 dark:text-surface-400">Content I've liked across the web.</p>
</div> </div>
listening.njk
+23 -23
View File
@@ -5,8 +5,8 @@ permalink: /listening/
withSidebar: true withSidebar: true
--- ---
<div class="listening-page" x-data="{ activeTab: 'all', activeSource: 'all' }"> <div class="listening-page" x-data="{ activeTab: 'all', activeSource: 'all' }">
<header class="mb-8"> <header class="mb-6 sm:mb-8">
<h1 class="text-4xl font-bold text-surface-900 dark:text-surface-100 mb-2">Listening Activity</h1> <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"> <p class="text-surface-600 dark:text-surface-400">
What I've been listening to on What I've been listening to on
{% if funkwhaleActivity.instanceUrl %} {% if funkwhaleActivity.instanceUrl %}
@@ -59,19 +59,19 @@ withSidebar: true
{# Funkwhale Now Playing #} {# Funkwhale Now Playing #}
{% if fwNowPlaying %} {% if fwNowPlaying %}
<div x-show="activeSource === 'all' || activeSource === 'funkwhale'" class="mb-4"> <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="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 items-center gap-5"> <div class="flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:gap-5">
{% if fwNowPlaying.coverUrl %} {% 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 %} {% else %}
<div class="w-24 h-24 rounded-lg bg-surface-200 dark:bg-surface-700 flex items-center justify-center"> <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-10 h-10 text-surface-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <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"/> <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> </svg>
</div> </div>
{% endif %} {% 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"> <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> <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' %} {% if fwNowPlaying.status == 'now-playing' %}
@@ -90,7 +90,7 @@ withSidebar: true
{% endif %} {% endif %}
</div> </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 %} {% if fwNowPlaying.trackUrl %}
<a href="{{ fwNowPlaying.trackUrl }}" class="hover:text-primary-600 dark:hover:text-primary-400" target="_blank" rel="noopener">{{ fwNowPlaying.track }}</a> <a href="{{ fwNowPlaying.trackUrl }}" class="hover:text-primary-600 dark:hover:text-primary-400" target="_blank" rel="noopener">{{ fwNowPlaying.track }}</a>
{% else %} {% else %}
@@ -111,19 +111,19 @@ withSidebar: true
{# Last.fm Now Playing #} {# Last.fm Now Playing #}
{% if lfmNowPlaying %} {% if lfmNowPlaying %}
<div x-show="activeSource === 'all' || activeSource === 'lastfm'" class="mb-4"> <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="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 items-center gap-5"> <div class="flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:gap-5">
{% if lfmNowPlaying.coverUrl %} {% 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 %} {% else %}
<div class="w-24 h-24 rounded-lg bg-surface-200 dark:bg-surface-700 flex items-center justify-center"> <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-10 h-10 text-surface-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <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"/> <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> </svg>
</div> </div>
{% endif %} {% 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"> <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> <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' %} {% if lfmNowPlaying.status == 'now-playing' %}
@@ -145,7 +145,7 @@ withSidebar: true
{% endif %} {% endif %}
</div> </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 %} {% if lfmNowPlaying.trackUrl %}
<a href="{{ lfmNowPlaying.trackUrl }}" class="hover:text-red-600 dark:hover:text-red-400" target="_blank" rel="noopener">{{ lfmNowPlaying.track }}</a> <a href="{{ lfmNowPlaying.trackUrl }}" class="hover:text-red-600 dark:hover:text-red-400" target="_blank" rel="noopener">{{ lfmNowPlaying.track }}</a>
{% else %} {% else %}
@@ -168,7 +168,7 @@ withSidebar: true
{# Combined Stats Section #} {# Combined Stats Section #}
{% if funkwhaleActivity.stats or lastfmActivity.stats %} {% if funkwhaleActivity.stats or lastfmActivity.stats %}
<section class="mb-12"> <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"> <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"/> <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> </svg>
@@ -176,7 +176,7 @@ withSidebar: true
</h2> </h2>
{# Stats Cards Grid - Side by Side #} {# 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 #} {# Funkwhale Stats #}
{% if funkwhaleActivity.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"> <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 #} {# Recent Listens - Combined Timeline #}
<section class="mb-12"> <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"> <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"/> <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> </svg>
@@ -348,7 +348,7 @@ withSidebar: true
{# Loved Tracks from Last.fm #} {# Loved Tracks from Last.fm #}
{% if lastfmActivity.loved.length %} {% if lastfmActivity.loved.length %}
<section class="mb-12" x-show="activeSource === 'all' || activeSource === 'lastfm'"> <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"> <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"/> <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> </svg>
@@ -356,7 +356,7 @@ withSidebar: true
<span class="text-sm font-normal text-surface-500">(Last.fm)</span> <span class="text-sm font-normal text-surface-500">(Last.fm)</span>
</h2> </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) %} {% 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"> <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 %} {% if track.coverUrl %}
@@ -390,7 +390,7 @@ withSidebar: true
{# Funkwhale Favorites #} {# Funkwhale Favorites #}
{% if funkwhaleActivity.favorites.length %} {% if funkwhaleActivity.favorites.length %}
<section class="mb-12" x-show="activeSource === 'all' || activeSource === 'funkwhale'"> <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"> <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"/> <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> </svg>
@@ -398,7 +398,7 @@ withSidebar: true
<span class="text-sm font-normal text-surface-500">(Funkwhale)</span> <span class="text-sm font-normal text-surface-500">(Funkwhale)</span>
</h2> </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) %} {% 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"> <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 %} {% if favorite.coverUrl %}
notes.njk
+2 -2
View File
@@ -9,8 +9,8 @@ pagination:
permalink: "notes/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber + 1 }}/{% endif %}" permalink: "notes/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber + 1 }}/{% endif %}"
--- ---
<div class="h-feed"> <div class="h-feed">
<h1 class="text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Notes</h1> <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-8"> <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
Short thoughts, updates, and quick posts. Short thoughts, updates, and quick posts.
<span class="text-sm">({{ collections.notes.length }} total)</span> <span class="text-sm">({{ collections.notes.length }} total)</span>
</p> </p>
photos.njk
+4 -1
View File
@@ -3,7 +3,10 @@ layout: layouts/base.njk
title: Photos title: Photos
permalink: /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 %} {% if collections.photos.length > 0 %}
<ul class="post-list"> <ul class="post-list">
replies.njk
+2 -2
View File
@@ -3,8 +3,8 @@ layout: layouts/base.njk
title: Replies title: Replies
permalink: /replies/ permalink: /replies/
--- ---
<div class="page-header mb-8"> <div class="page-header mb-6 sm:mb-8">
<h1 class="text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Replies</h1> <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> <p class="text-surface-600 dark:text-surface-400">My responses to posts across the web.</p>
</div> </div>
reposts.njk
+2 -2
View File
@@ -3,8 +3,8 @@ layout: layouts/base.njk
title: Reposts title: Reposts
permalink: /reposts/ permalink: /reposts/
--- ---
<div class="page-header mb-8"> <div class="page-header mb-6 sm:mb-8">
<h1 class="text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Reposts</h1> <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> <p class="text-surface-600 dark:text-surface-400">Content I've shared from others.</p>
</div> </div>
webmention-debug.njk
+2 -2
View File
@@ -4,8 +4,8 @@ title: Webmention Debug
permalink: /debug/webmentions/ permalink: /debug/webmentions/
eleventyExcludeFromCollections: true eleventyExcludeFromCollections: true
--- ---
<div class="page-header mb-8"> <div class="page-header mb-6 sm:mb-8">
<h1 class="text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Webmention Debug</h1> <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"> <p class="text-surface-600 dark:text-surface-400">
Debug page for webmention recovery from legacy URLs. Debug page for webmention recovery from legacy URLs.
This page is excluded from collections and won't appear in feeds. This page is excluded from collections and won't appear in feeds.
youtube.njk
+11 -11
View File
@@ -5,8 +5,8 @@ permalink: /youtube/
withSidebar: true withSidebar: true
--- ---
<div class="youtube-page" x-data="{ activeChannel: 0 }"> <div class="youtube-page" x-data="{ activeChannel: 0 }">
<header class="mb-8"> <header class="mb-6 sm:mb-8">
<h1 class="text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">YouTube Channels</h1> <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"> <p class="text-surface-600 dark:text-surface-400">
Latest videos and live streams from my YouTube channels. Latest videos and live streams from my YouTube channels.
</p> </p>
@@ -34,24 +34,24 @@ withSidebar: true
<div x-show="activeChannel === {{ loop.index0 }}" {% if not loop.first %}x-cloak{% endif %}> <div x-show="activeChannel === {{ loop.index0 }}" {% if not loop.first %}x-cloak{% endif %}>
{# Channel Header #} {# Channel Header #}
<section class="mb-8"> <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 %} {% if channel.thumbnail %}
<img <img
src="{{ channel.thumbnail }}" src="{{ channel.thumbnail }}"
alt="" 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" loading="lazy"
> >
{% else %} {% else %}
<div class="w-20 h-20 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0"> <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-10 h-10 text-red-500" fill="currentColor" viewBox="0 0 24 24"> <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"/> <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> </svg>
</div> </div>
{% endif %} {% endif %}
<div class="flex-1 min-w-0"> <div class="flex-1 min-w-0 w-full sm:w-auto">
<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">
<a href="{{ channel.url }}" class="hover:text-red-600 dark:hover:text-red-400" target="_blank" rel="noopener"> <a href="{{ channel.url }}" class="hover:text-red-600 dark:hover:text-red-400" target="_blank" rel="noopener">
{{ channel.title }} {{ channel.title }}
</a> </a>
@@ -110,7 +110,7 @@ withSidebar: true
{% set channelLiveStatus = youtubeChannel.liveStatuses | selectattr("channelConfigName", "equalto", channel.configName) | first %} {% set channelLiveStatus = youtubeChannel.liveStatuses | selectattr("channelConfigName", "equalto", channel.configName) | first %}
{% if channelLiveStatus and channelLiveStatus.stream and (channelLiveStatus.isLive or channelLiveStatus.isUpcoming) %} {% if channelLiveStatus and channelLiveStatus.stream and (channelLiveStatus.isLive or channelLiveStatus.isUpcoming) %}
<section class="mb-12"> <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 %} {% if channelLiveStatus.isLive %}
<span class="flex items-center gap-2 text-red-500"> <span class="flex items-center gap-2 text-red-500">
<span class="w-3 h-3 bg-red-500 rounded-full animate-pulse"></span> <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 #} {# Videos Grid for this channel #}
<section class="mb-12"> <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"> <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"/> <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> </svg>
@@ -171,7 +171,7 @@ withSidebar: true
{% set channelName = channel.configName or channel.title %} {% set channelName = channel.configName or channel.title %}
{% set channelVideos = youtubeChannel.videosByChannel[channelName] %} {% set channelVideos = youtubeChannel.videosByChannel[channelName] %}
{% if channelVideos and channelVideos.length %} {% 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) %} {% 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"> <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"> <a href="{{ video.url }}" class="block" target="_blank" rel="noopener">