Skip to content

Centre the tutorial captions under their thumbnails #27

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cdiddens merged 1 commit into from
Aug 9, 2026
Merged

Centre the tutorial captions under their thumbnails #27

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 13 additions & 1 deletion _generated/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -204,7 +204,9 @@ text-decoration:none;
align-items: center;
display: grid;
grid-auto-flow: column;
gap: calc(var(--gap) / 2);
/* the breathing space between two thumbnails. It used to come from the
browser's default figure margin, which is why it is this wide. */
gap: 80px;
margin: 0;
padding-bottom: 10px;

Expand Down Expand Up @@ -270,6 +272,16 @@ text-decoration:none;
overflow: hidden;
}

/* Drop the browser's default figure margin (1em 40px) and pin the figure to the
thumbnail width. With the margin in place the caption box was 80px narrower
than the image and offset 40px to the right of it, so on narrow screens -
where the entry is capped at the image width and the image overflows the
figure - the caption ended up visibly left of the picture it belongs to. */
.horizontal-media-scroller figure {
margin: 0;
width: 200px;
}

.horizontal-media-scroller figcaption {
text-align: center;
}
Expand Down
Loading