Files
blog-eleventy-indiekit/about.njk
Ricardo 155816a0bc feat: replace all primary (blue) with contextual colors across entire theme
Eliminate monotonous blue by replacing ~290 primary- references in 60 files
with semantically appropriate colors:

- accent (teal): links, CTAs, buttons, tabs, focus rings, spinners
- purple: Funkwhale/music, photos, Mastodon/fediverse
- surface (neutral): GitHub, dates/metadata, info boxes
- amber: bookmarks, blogroll categories
- red: likes
- green: reposts
- sky: replies
- orange: RSS/feeds, podcasts
- #0085ff: Bluesky brand
- #a730b8: Mastodon brand

Also updates prose link colors in tailwind.config.js, pagefind UI
primary color to teal, and client-side JS color references.

Confab-Link: http://localhost:8080/sessions/bd3f7012-c703-47e9-bfe2-2ad04ce1842d
2026-03-04 12:50:19 +01:00

70 lines
2.2 KiB
Plaintext

---
layout: layouts/base.njk
title: About
permalink: false
eleventyExcludeFromCollections: true
---
<article class="h-card">
<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-32 h-32 sm:w-40 sm:h-40 rounded-full object-cover shadow-lg flex-shrink-0"
loading="eager"
>
<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 %}
<p class="p-job-title text-xl text-accent-600 dark:text-accent-400 mb-2">
{{ site.author.title }}
</p>
{% endif %}
{% if site.author.location %}
<p class="p-locality text-surface-600 dark:text-surface-400 mb-4">
{{ site.author.location }}
</p>
{% endif %}
<a href="{{ site.author.url }}" class="u-url u-uid hidden" rel="me">{{ site.author.url }}</a>
</div>
</header>
<div class="prose dark:prose-invert prose-lg max-w-none">
<p class="p-note text-lg">{{ site.author.bio }}</p>
<h2>About This Site</h2>
<p>
This site is powered by <a href="https://getindiekit.com">Indiekit</a>, an IndieWeb
server that supports Micropub, Webmentions, and other IndieWeb standards. It runs on
<a href="https://cloudron.io">Cloudron</a> for easy self-hosting.
</p>
<h2>IndieWeb</h2>
<p>
I'm part of the <a href="https://indieweb.org">IndieWeb</a> movement - owning my content
and identity online. You can interact with my posts through Webmentions - reply, like,
or repost from your own website and it will show up here.
</p>
{% if site.social.length > 0 %}
<h2>Connect</h2>
<p>Find me on:</p>
<ul>
{% for link in site.social %}
<li>
<a href="{{ link.url }}" rel="me" target="_blank">{{ link.name }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
{% if site.author.email %}
<p>
Or send me an email at
<a href="mailto:{{ site.author.email }}" class="u-email">{{ site.author.email }}</a>
</p>
{% endif %}
</div>
</article>