mirror of
https://tangled.org/evan.jarrett.net/at-container-registry
synced 2026-09-02 00:06:58 +00:00
Evan JarrettandClaude Opus 5
606338b33e
daisyUI dims the gutter prefix with `opacity: .5`, which multiplies against whatever opacity the line's own text color carries. On bg-base-300 a plain `$` measured 3.20:1 in light and 4.19:1 in dark, and the `#` on a line already dimmed to /70 compounded to 2.15:1. The text needs 4.5:1, so this failed in dark mode too, just less visibly than the light-mode report that surfaced it. Give the prefix an absolute muted color instead of a multiplying opacity. The override has to sit unlayered: daisyUI ships this selector in `@layer daisyui`, declared after `@layer components`, so a rule in components loses on layer order however specific it is. A first attempt inside components left daisyUI's `opacity: .5` live on top of the new 70% color, which made the `$` worse (0.5 -> 0.35 effective) rather than better. The hero tagline drops its /70 and now reads at the same weight as the docker commands above it. install.html's two comment lines were at /50, which failed on the text itself (3.20:1 light), and move to /70 where they still read as comments. Measured in Chromium against the built stylesheet, compositing each pseudo-element color over its real background on a canvas: every prefix and comment is now 5.84:1 light / 6.71:1 dark, against 14.03:1 / 12.02:1 for the command text, so the gutter stays visibly de-emphasized. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LpqkSRqpcnAjsSZgFTUN5z
52 lines
2.9 KiB
HTML
52 lines
2.9 KiB
HTML
{{ define "hero" }}
|
|
{{/*
|
|
Hero section component - displays landing page hero for non-authenticated users
|
|
*/}}
|
|
<section class="hero bg-base-200 min-h-[60vh] py-16 pb-24 relative overflow-hidden">
|
|
<div class="hero-content text-center flex-col relative z-10 w-full">
|
|
<h1 class="text-4xl md:text-5xl font-display font-bold tracking-tight text-balance">your registry <span class="text-primary">at</span> sea.</h1>
|
|
<p class="text-lg text-base-content/70 max-w-lg mt-4 text-balance">
|
|
Push and pull Docker images on the AT Protocol.
|
|
Browse public registries or control your data.
|
|
</p>
|
|
|
|
<div class="mockup-code bg-base-300 text-base-content text-left w-full max-w-lg text-base mt-8">
|
|
<pre data-prefix="$"><code>docker login {{ .RegistryURL }}</code></pre>
|
|
<pre data-prefix="$"><code>docker push {{ .RegistryURL }}/you/app</code></pre>
|
|
<pre data-prefix="#"><code>same docker, decentralized</code></pre>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-center gap-4 mt-8">
|
|
<a href="/auth/oauth/login?return_to=/" class="btn btn-primary btn-lg">Get Started</a>
|
|
<a href="/learn-more" class="btn btn-ghost btn-lg" aria-label="How the {{ .ClientShortName }} container registry works">How It Works</a>
|
|
</div>
|
|
|
|
<!-- Benefit Cards -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-12 w-full max-w-4xl">
|
|
<div class="card bg-base-100 border border-base-300 p-6 text-center">
|
|
<div class="text-primary mb-4 flex justify-center">
|
|
{{ icon "ship" "size-8" }}
|
|
</div>
|
|
<h2 class="font-semibold text-lg">Works with Docker</h2>
|
|
<p class="text-base-content/70 mt-2">Use docker push & pull. No new tools to learn.</p>
|
|
</div>
|
|
<div class="card bg-base-100 border border-base-300 p-6 text-center">
|
|
<div class="text-primary mb-4 flex justify-center">
|
|
{{ icon "anchor" "size-8" }}
|
|
</div>
|
|
<h2 class="font-semibold text-lg">Your Data</h2>
|
|
<p class="text-base-content/70 mt-2">Join shared holds or captain your own storage.</p>
|
|
</div>
|
|
<div class="card bg-base-100 border border-base-300 p-6 text-center">
|
|
<div class="text-primary mb-4 flex justify-center">
|
|
{{ icon "compass" "size-8" }}
|
|
</div>
|
|
<h2 class="font-semibold text-lg">Discover Images</h2>
|
|
<p class="text-base-content/70 mt-2">Browse and star public container registries.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<img src="/static/wave-pattern.svg" width="1440" height="128" alt="" loading="lazy" decoding="async" class="absolute bottom-0 left-0 w-full h-32 pointer-events-none" aria-hidden="true">
|
|
</section>
|
|
{{ end }}
|