docs(readme): repoint the tour gif, and tidy the top of the page

The 60-second tour has been a broken image since the org move. It points at
liketrek/TREK-media, and that repository does not exist; the release asset still
sits in mauriceboe/trek-media, which is where the src goes now. On the rendered
page the gif reports naturalWidth 0, so what a visitor sees under the badges is
an empty gap.

Around it, three things that were only layout:

The screenshot rows move below the feature list. Five full-bleed images ran back
to back before the reader got a single instruction, and the tour gif and the rows
show the same screens anyway. Motion first, then the summary graphic, then the
detail, then the stills.

The second horizontal rule goes with them, so one rule closes the header block
and the rest of the file separates sections the way it already did, with a break
and a heading.

The jump links had a separator dangling off both ends of the row.

The subtitle image says "your trip. your plan." while its alt text said "Your
trips. Your plan. Your server.", so anyone on a screen reader got a different
tagline than everyone else. The alt now reads what the image reads.

The tile SVGs gain width and height attributes. They only ever render through an
img that sets width, but without an intrinsic size of their own they fall back to
300px wide anywhere else.

The badge block stays as it is. Read on the rendered page rather than in the
markup, the two badge weights are a hierarchy rather than a clash.
This commit is contained in:
Maurice
2026-08-17 18:48:10 +02:00
committed by Maurice
parent 1f92d47452
commit e62e76713f
4 changed files with 14 additions and 14 deletions
+11 -11
View File
@@ -10,7 +10,7 @@
<picture> <picture>
<source media="(prefers-color-scheme: dark)" srcset="docs/subtitle-light.png" /> <source media="(prefers-color-scheme: dark)" srcset="docs/subtitle-light.png" />
<source media="(prefers-color-scheme: light)" srcset="docs/subtitle-dark.png" /> <source media="(prefers-color-scheme: light)" srcset="docs/subtitle-dark.png" />
<img src="docs/subtitle-dark.png" alt="Your trips. Your plan. Your server." height="28" /> <img src="docs/subtitle-dark.png" alt="your trip. your plan." height="28" />
</picture> </picture>
A self-hosted, real-time collaborative travel planner — with maps, budgets, packing lists, a journal, and AI built in. A self-hosted, real-time collaborative travel planner — with maps, budgets, packing lists, a journal, and AI built in.
@@ -40,20 +40,12 @@ A self-hosted, real-time collaborative travel planner — with maps, budgets, pa
<div align="center"> <div align="center">
<img src="https://github.com/liketrek/TREK-media/releases/download/readme-assets/TREK1.gif" alt="TREK — 60-second tour" width="100%" /> <img src="https://github.com/mauriceboe/trek-media/releases/download/readme-assets/TREK1.gif" alt="TREK, 60-second tour" width="100%" />
</div> </div>
<br /> <br />
<div align="center">
<a href="docs/screenshots/showcase-desktop-1.webp"><img src="docs/screenshots/showcase-desktop-1.webp" alt="Atlas · dashboard · trip planner" width="100%" /></a>
<a href="docs/screenshots/showcase-mobile.webp"><img src="docs/screenshots/showcase-mobile.webp" alt="Mobile PWA · dashboard, day plan, map, costs" width="100%" /></a>
<a href="docs/screenshots/showcase-desktop-2.webp"><img src="docs/screenshots/showcase-desktop-2.webp" alt="Collections · journey journal · costs" width="100%" /></a>
</div>
---
## What you get ## What you get
<picture> <picture>
@@ -185,6 +177,14 @@ Most of what follows is an addon an admin switches on or off. Lists, Costs, Docu
<br /> <br />
<div align="center">
<a href="docs/screenshots/showcase-desktop-1.webp"><img src="docs/screenshots/showcase-desktop-1.webp" alt="Atlas · dashboard · trip planner" width="100%" /></a>
<a href="docs/screenshots/showcase-mobile.webp"><img src="docs/screenshots/showcase-mobile.webp" alt="Mobile PWA · dashboard, day plan, map, costs" width="100%" /></a>
<a href="docs/screenshots/showcase-desktop-2.webp"><img src="docs/screenshots/showcase-desktop-2.webp" alt="Collections · journey journal · costs" width="100%" /></a>
</div>
<br />
## AI usage ## AI usage
We use LLM-assisted coding tools across parts of this codebase. Nothing ships that a We use LLM-assisted coding tools across parts of this codebase. Nothing ships that a
@@ -209,7 +209,7 @@ Open `http://localhost:3000`. On first boot TREK seeds an admin account — if y
<div align="center"> <div align="center">
&nbsp;&nbsp;·&nbsp;&nbsp;<a href="#docker-compose-production">Docker Compose</a>&nbsp;&nbsp;·&nbsp;&nbsp;<a href="#helm-kubernetes">Helm / Kubernetes</a>&nbsp;&nbsp;·&nbsp;&nbsp;<a href="#install-as-app-pwa">Install as PWA</a>&nbsp;&nbsp;·&nbsp;&nbsp;<a href="#reverse-proxy">Reverse Proxy</a>&nbsp;&nbsp;·&nbsp;&nbsp; <a href="#docker-compose-production">Docker Compose</a>&nbsp;&nbsp;·&nbsp;&nbsp;<a href="#helm-kubernetes">Helm / Kubernetes</a>&nbsp;&nbsp;·&nbsp;&nbsp;<a href="#install-as-app-pwa">Install as PWA</a>&nbsp;&nbsp;·&nbsp;&nbsp;<a href="#reverse-proxy">Reverse Proxy</a>
</div> </div>
+1 -1
View File
@@ -1,4 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 310" role="img" aria-label="Plan, track, share"> <svg xmlns="http://www.w3.org/2000/svg" width="1600" height="310" viewBox="0 0 1600 310" role="img" aria-label="Plan, track, share">
<defs> <defs>
<linearGradient id="glass" x1="0" y1="0" x2="1" y2="1"> <linearGradient id="glass" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#3B3D42" stop-opacity="0.58"/> <stop offset="0" stop-color="#3B3D42" stop-opacity="0.58"/>

Before

Width:  |  Height:  |  Size: 33 KiB

After

Width:  |  Height:  |  Size: 33 KiB

+1 -1
View File
@@ -1,4 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 310" role="img" aria-label="Plan, track, share"> <svg xmlns="http://www.w3.org/2000/svg" width="1600" height="310" viewBox="0 0 1600 310" role="img" aria-label="Plan, track, share">
<defs> <defs>
<linearGradient id="glass" x1="0" y1="0" x2="1" y2="1"> <linearGradient id="glass" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#FFFFFF" stop-opacity="0.78"/> <stop offset="0" stop-color="#FFFFFF" stop-opacity="0.78"/>

Before

Width:  |  Height:  |  Size: 33 KiB

After

Width:  |  Height:  |  Size: 33 KiB

+1 -1
View File
@@ -1,4 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 744" role="img" aria-label="Plan, track, share"> <svg xmlns="http://www.w3.org/2000/svg" width="700" height="744" viewBox="0 0 700 744" role="img" aria-label="Plan, track, share">
<defs> <defs>
<linearGradient id="glass" x1="0" y1="0" x2="1" y2="1"> <linearGradient id="glass" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#FFFFFF" stop-opacity="0.78"/> <stop offset="0" stop-color="#FFFFFF" stop-opacity="0.78"/>

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 32 KiB