moby/brewlog
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(timeline): centre line behind cards on mobile for full-width layout

Browse source 
- Move timeline line to centre on mobile instead of left gutter
- Remove left padding from cards to maximise horizontal space
- Reposition dots to top-centre of each card border on mobile
- Make card background fully opaque so line doesn't show through
- Desktop alternating layout unchanged
This commit is contained in:
Jon Seager 2026-02-03 13:21:55 +00:00
parent 3475c91273
commit 145ddb4765
No known key found for this signature in database
2 changed files with 19 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
templates/partials/timeline_month.html
View file

@ -15,7 +15,7 @@
class="timeline-node absolute h-5 w-5 rounded-full border-4 border-amber-50 bg-amber-600" class="timeline-node absolute h-5 w-5 rounded-full border-4 border-amber-50 bg-amber-600"
aria-hidden="true" aria-hidden="true"
></span> ></span>
<div class="rounded-lg border border-amber-200 bg-amber-50/80 p-5 shadow-sm text-left"> <div class="rounded-lg border border-amber-200 bg-amber-50 p-5 shadow-sm text-left">
<div class="flex flex-wrap items-center justify-between gap-2"> <div class="flex flex-wrap items-center justify-between gap-2">
<span <span
class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-amber-200 text-amber-800" class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-amber-200 text-amber-800"

31
templates/styles.css
View file

@ -47,20 +47,21 @@ a {
/* Timeline layout */ /* Timeline layout */
/* Mobile: single column with line on left */ /* Mobile: single column, centred line behind cards */
.timeline-line { .timeline-line {
left: 1rem; left: 50%;
transform: translateX(-50%);
} }
.timeline-item { .timeline-item {
padding-left: 3rem; padding-left: 0;
} }
.timeline-node { .timeline-node {
left: 0.5rem; left: 50%;
top: 50%; top: -10px;
transform: translateY(-50%); transform: translateX(-50%);
z-index: 1; z-index: 2;
} }
.timeline-heading { .timeline-heading {
@ -166,17 +167,17 @@ a {
flex-direction: column; flex-direction: column;
} }
.timeline-line {
left: 50%;
transform: translateX(-50%);
}
.timeline-item { .timeline-item {
width: 50%; width: 50%;
padding-left: 0;
padding-right: 0; padding-right: 0;
} }
/* Reset node to side-of-card positioning on desktop */
.timeline-node {
top: 50%;
transform: translateY(-50%);
}
/* Left side items (odd) - counts only .timeline-item children, skipping month headings */ /* Left side items (odd) - counts only .timeline-item children, skipping month headings */
.timeline-item:nth-child(odd of .timeline-item) { .timeline-item:nth-child(odd of .timeline-item) {
align-self: flex-start; align-self: flex-start;
@ -186,6 +187,8 @@ a {
.timeline-item:nth-child(odd of .timeline-item) .timeline-node { .timeline-item:nth-child(odd of .timeline-item) .timeline-node {
right: -10px; right: -10px;
left: auto; left: auto;
top: 50%;
transform: translateY(-50%);
} }
/* Right side items (even) */ /* Right side items (even) */
@ -196,6 +199,8 @@ a {
.timeline-item:nth-child(even of .timeline-item) .timeline-node { .timeline-item:nth-child(even of .timeline-item) .timeline-node {
left: -10px; left: -10px;
top: 50%;
transform: translateY(-50%);
} }
/* Allow vertical overlap between alternating cards (skip first item) */ /* Allow vertical overlap between alternating cards (skip first item) */