mirror of
https://github.com/svemagie/blog-eleventy-indiekit.git
synced 2026-04-02 16:44:56 +02:00
feat: implement design system — domain colors, date typography, interaction states, CV family colors
Apply the collaboratively-written design system from .interface-design/system.md: - Domain color map: Social pages (rose), Code pages (emerald), Reading pages (orange), Music pages (purple) replace generic accent tokens - Font-mono on all <time> elements via global CSS rule + wrap 7 non-<time> dates - Shadow standardization: replace hover:shadow-lg with border-hover on news cards - Active states: scale(0.97) press feedback on buttons and pagination links - Gradient cleanup: remove to-white gradient on github featured project cards - CV Skills & Interests: cycle through 8 distinct colors per family category (amber, emerald, sky, rose, purple, orange, teal, indigo) on both CV page and homepage - Update system.md with refined palette documentation and domain color spec Files: 19 changed across templates, CSS, and design documentation Confab-Link: http://localhost:8080/sessions/bd3f7012-c703-47e9-bfe2-2ad04ce1842d
This commit is contained in:
Ricardo
34
blogroll.njk
34
blogroll.njk
@@ -6,7 +6,7 @@ permalink: /blogroll/
|
||||
<div class="blogroll-page" x-data="blogrollApp()" x-init="init()">
|
||||
<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">
|
||||
<svg class="w-8 h-8 inline-block mr-2 text-accent-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<svg class="w-8 h-8 inline-block mr-2 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/>
|
||||
</svg>
|
||||
Blogroll
|
||||
@@ -24,7 +24,7 @@ permalink: /blogroll/
|
||||
<nav class="flex gap-1 overflow-x-auto -mb-px" aria-label="Tabs">
|
||||
<button
|
||||
@click="switchTab('blogs')"
|
||||
:class="activeTab === 'blogs' ? 'border-accent-500 text-accent-600 dark:text-accent-400' : 'border-transparent text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
|
||||
:class="activeTab === 'blogs' ? 'border-orange-500 text-orange-600 dark:text-orange-400' : 'border-transparent text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
|
||||
class="pb-3 px-3 border-b-2 font-medium text-sm transition-colors whitespace-nowrap flex-shrink-0"
|
||||
>
|
||||
All Blogs
|
||||
@@ -32,7 +32,7 @@ permalink: /blogroll/
|
||||
<template x-for="cat in categories" :key="cat.name">
|
||||
<button
|
||||
@click="switchTab('category:' + cat.name)"
|
||||
:class="activeTab === 'category:' + cat.name ? 'border-accent-500 text-accent-600 dark:text-accent-400' : 'border-transparent text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
|
||||
:class="activeTab === 'category:' + cat.name ? 'border-orange-500 text-orange-600 dark:text-orange-400' : 'border-transparent text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
|
||||
class="pb-3 px-3 border-b-2 font-medium text-sm transition-colors whitespace-nowrap flex-shrink-0"
|
||||
>
|
||||
<span x-text="cat.name"></span>
|
||||
@@ -47,7 +47,7 @@ permalink: /blogroll/
|
||||
<div class="main-content">
|
||||
{# Loading State #}
|
||||
<div x-show="loading" class="text-center py-12">
|
||||
<svg class="w-8 h-8 mx-auto text-accent-600 animate-spin mb-4" fill="none" viewBox="0 0 24 24">
|
||||
<svg class="w-8 h-8 mx-auto text-orange-600 animate-spin mb-4" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
@@ -65,17 +65,17 @@ permalink: /blogroll/
|
||||
<template x-for="blog in blogs" :key="blog.id">
|
||||
<a
|
||||
:href="blog.siteUrl || blog.feedUrl"
|
||||
class="block bg-surface-50 dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-4 hover:border-accent-400 dark:hover:border-accent-600 transition-colors group"
|
||||
class="block bg-surface-50 dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-4 hover:border-orange-400 dark:hover:border-orange-600 transition-colors group"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<div class="w-10 h-10 rounded-lg bg-gradient-to-br from-accent-400 to-accent-600 flex items-center justify-center flex-shrink-0 overflow-hidden">
|
||||
<div class="w-10 h-10 rounded-lg bg-gradient-to-br from-orange-400 to-orange-600 flex items-center justify-center flex-shrink-0 overflow-hidden">
|
||||
<img x-show="blog.photo" :src="blog.photo" class="w-10 h-10 object-cover" loading="lazy" />
|
||||
<span x-show="!blog.photo" class="text-white text-sm font-bold" x-text="blog.title?.charAt(0)?.toUpperCase()"></span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3 class="font-medium text-surface-900 dark:text-surface-100 truncate group-hover:text-accent-600 dark:group-hover:text-accent-400 transition-colors" x-text="blog.title"></h3>
|
||||
<h3 class="font-medium text-surface-900 dark:text-surface-100 truncate group-hover:text-orange-600 dark:group-hover:text-orange-400 transition-colors" x-text="blog.title"></h3>
|
||||
<p x-show="blog.category" class="text-xs text-surface-500 truncate" x-text="blog.category"></p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -109,16 +109,16 @@ permalink: /blogroll/
|
||||
{# Category Items Tab (one for each category) #}
|
||||
<div x-show="activeTab.startsWith('category:') && !loading" class="space-y-4">
|
||||
<template x-for="item in categoryItems" :key="item.id">
|
||||
<article class="bg-surface-50 dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-4 sm:p-6 hover:border-accent-400 dark:hover:border-accent-600 transition-colors">
|
||||
<article class="bg-surface-50 dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-4 sm:p-6 hover:border-orange-400 dark:hover:border-orange-600 transition-colors">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<h2 class="font-semibold text-lg text-surface-900 dark:text-surface-100">
|
||||
<a :href="item.url" class="hover:text-accent-600 dark:hover:text-accent-400" target="_blank" rel="noopener" x-text="item.title"></a>
|
||||
<a :href="item.url" class="hover:text-orange-600 dark:hover:text-orange-400" target="_blank" rel="noopener" x-text="item.title"></a>
|
||||
</h2>
|
||||
<span
|
||||
x-show="item.isFuture"
|
||||
class="inline-flex items-center gap-1 px-2 py-0.5 bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 rounded-full text-xs font-medium flex-shrink-0"
|
||||
class="inline-flex items-center gap-1 px-2 py-0.5 bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-400 rounded-full text-xs font-medium flex-shrink-0"
|
||||
>
|
||||
<svg class="w-3 h-3" 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"/>
|
||||
@@ -129,7 +129,7 @@ permalink: /blogroll/
|
||||
<div class="flex flex-wrap items-center gap-2 text-sm text-surface-500 mb-3">
|
||||
<a
|
||||
:href="item.blog?.siteUrl || '#'"
|
||||
class="inline-flex items-center gap-1 px-2 py-0.5 bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 rounded-full hover:bg-amber-200 dark:hover:bg-amber-900/50 transition-colors"
|
||||
class="inline-flex items-center gap-1 px-2 py-0.5 bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-400 rounded-full hover:bg-orange-200 dark:hover:bg-orange-900/50 transition-colors"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
@@ -155,7 +155,7 @@ permalink: /blogroll/
|
||||
<div class="flex flex-wrap items-center gap-3 mt-4 pt-4 border-t border-surface-200 dark:border-surface-700">
|
||||
<a
|
||||
:href="item.url"
|
||||
class="inline-flex items-center gap-2 text-sm text-accent-600 hover:text-accent-700 dark:text-accent-400"
|
||||
class="inline-flex items-center gap-2 text-sm text-orange-600 hover:text-orange-700 dark:text-orange-400"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
@@ -206,7 +206,7 @@ permalink: /blogroll/
|
||||
<button
|
||||
@click="loadMoreCategory()"
|
||||
:disabled="loadingMore"
|
||||
class="px-6 py-3 bg-accent-600 hover:bg-accent-700 text-white rounded-lg text-sm font-medium transition-colors disabled:opacity-50"
|
||||
class="px-6 py-3 bg-orange-600 hover:bg-orange-700 text-white rounded-lg text-sm font-medium transition-colors disabled:opacity-50"
|
||||
>
|
||||
<span x-show="!loadingMore">Load More</span>
|
||||
<span x-show="loadingMore" class="flex items-center gap-2">
|
||||
@@ -255,11 +255,11 @@ permalink: /blogroll/
|
||||
<h3 class="widget-title">Stats</h3>
|
||||
<div class="grid grid-cols-2 gap-3 text-center">
|
||||
<div class="p-3 bg-surface-50 dark:bg-surface-800 rounded-lg">
|
||||
<span class="text-2xl font-bold text-accent-600 dark:text-accent-400 block" x-text="status?.blogs?.count || 0"></span>
|
||||
<span class="text-2xl font-bold text-orange-600 dark:text-orange-400 block" x-text="status?.blogs?.count || 0"></span>
|
||||
<span class="text-xs text-surface-500 uppercase">Blogs</span>
|
||||
</div>
|
||||
<div class="p-3 bg-surface-50 dark:bg-surface-800 rounded-lg">
|
||||
<span class="text-2xl font-bold text-accent-600 dark:text-accent-400 block" x-text="status?.items?.count || 0"></span>
|
||||
<span class="text-2xl font-bold text-orange-600 dark:text-orange-400 block" x-text="status?.items?.count || 0"></span>
|
||||
<span class="text-xs text-surface-500 uppercase">Posts</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -268,7 +268,7 @@ permalink: /blogroll/
|
||||
{# Category Quick Links (for when on blogs tab) #}
|
||||
<div class="widget" x-show="categories.length > 0">
|
||||
<h3 class="widget-title flex items-center gap-2">
|
||||
<svg class="w-5 h-5 text-accent-600" fill="currentColor" viewBox="0 0 24 24">
|
||||
<svg class="w-5 h-5 text-orange-600" fill="currentColor" viewBox="0 0 24 24">
|
||||
<circle cx="6.18" cy="17.82" r="2.18"/>
|
||||
<path d="M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56zm0 5.66v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83c0-5.47-4.43-9.9-9.9-9.9z"/>
|
||||
</svg>
|
||||
@@ -279,7 +279,7 @@ permalink: /blogroll/
|
||||
<li>
|
||||
<button
|
||||
@click="switchTab('category:' + cat.name)"
|
||||
:class="activeTab === 'category:' + cat.name ? 'bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400' : 'hover:bg-surface-100 dark:hover:bg-surface-700'"
|
||||
:class="activeTab === 'category:' + cat.name ? 'bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-400' : 'hover:bg-surface-100 dark:hover:bg-surface-700'"
|
||||
class="w-full text-left px-3 py-2 rounded-lg text-sm transition-colors"
|
||||
>
|
||||
<span x-text="cat.name"></span>
|
||||
|
||||
Reference in New Issue
Block a user