mirror of
https://github.com/svemagie/blog-eleventy-indiekit.git
synced 2026-04-02 16:44:56 +02:00
96182cb1e4
- 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>
69 lines
2.2 KiB
Plaintext
69 lines
2.2 KiB
Plaintext
---
|
|
layout: layouts/base.njk
|
|
title: About
|
|
permalink: /about/
|
|
---
|
|
<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-primary-600 dark:text-primary-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>
|