mirror of
https://github.com/svemagie/blog-eleventy-indiekit.git
synced 2026-04-02 08:44:56 +02:00
155816a0bc
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
67 lines
2.5 KiB
Plaintext
67 lines
2.5 KiB
Plaintext
{#
|
|
Hero Section - author intro with avatar, name, title, bio
|
|
Rendered by homepage-builder when hero is enabled
|
|
#}
|
|
|
|
{% set heroConfig = homepageConfig.hero or {} %}
|
|
{% set id = homepageConfig.identity if (homepageConfig and homepageConfig.identity) else {} %}
|
|
{% set authorName = id.name or site.author.name %}
|
|
{% set authorAvatar = id.avatar or site.author.avatar %}
|
|
{% set authorTitle = id.title or site.author.title %}
|
|
{% set authorBio = id.bio or site.author.bio %}
|
|
{% set siteDescription = id.description or site.description %}
|
|
{% set socialLinks = id.social if (id.social and id.social.length) else site.social %}
|
|
|
|
<section class="mb-8 sm:mb-12">
|
|
<div class="flex flex-col sm:flex-row gap-6 sm:gap-8 items-start">
|
|
{# Avatar #}
|
|
{% if heroConfig.showAvatar != false %}
|
|
<img
|
|
src="{{ authorAvatar }}"
|
|
alt="{{ authorName }}"
|
|
class="w-24 h-24 sm:w-32 sm:h-32 rounded-full object-cover shadow-lg flex-shrink-0"
|
|
loading="eager"
|
|
>
|
|
{% endif %}
|
|
|
|
{# Introduction #}
|
|
<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">
|
|
{{ authorName }}
|
|
</h1>
|
|
<p class="text-lg sm:text-xl text-accent-600 dark:text-accent-400 mb-3 sm:mb-4">
|
|
{{ authorTitle }}
|
|
</p>
|
|
{% if authorBio %}
|
|
<p class="text-base sm:text-lg text-surface-700 dark:text-surface-300 mb-4">
|
|
{{ authorBio }}
|
|
</p>
|
|
{% endif %}
|
|
{% if siteDescription %}
|
|
<p class="text-base sm:text-lg text-surface-700 dark:text-surface-300 mb-4 sm:mb-6">
|
|
{{ siteDescription }}
|
|
<a href="/about/" class="text-accent-600 dark:text-accent-400 hover:underline font-medium">Read more →</a>
|
|
</p>
|
|
{% endif %}
|
|
|
|
{# Social Links #}
|
|
{% from "components/social-icon.njk" import socialIcon %}
|
|
{% if heroConfig.showSocial != false and socialLinks %}
|
|
<div class="flex flex-wrap gap-3">
|
|
{% for link in socialLinks %}
|
|
<a
|
|
href="{{ link.url }}"
|
|
rel="{{ link.rel }} noopener"
|
|
class="inline-flex items-center gap-2 px-3 py-2 text-sm bg-surface-100 dark:bg-surface-800 rounded-lg hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors"
|
|
target="_blank"
|
|
>
|
|
{{ socialIcon(link.icon, "w-5 h-5") }}
|
|
<span class="text-sm font-medium">{{ link.name }}</span>
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</section>
|