Part of #271 (Phase 4).
Why. Option A, decided in #266: the news cards keep the main column, and an Activity rail beside them shows the latest updates, so anyone glancing at News sees that the project is active. The design is section 2 of the round-2 handoff (see the round 2 outcome), as amended there.
Panel height. Round 2 chose a tinted panel that runs the full height of the news column. With real content it may read as unfinished: with 20 cards the panel is about 3,400px tall at 1440px, beside about 570px of rail content under All, so around 80% of it is empty tint. The fitted fallback is CSS-only: the column goes transparent, and the tint, border and radius sit on the sticky box.
Work.
- A two-column grid at 1200px and wider. The
<aside> comes first in the source. This page's section.inner-page gets overflow: clip, because the site-wide section { overflow: hidden } (main.scss line 779) stops position: sticky working.
- The rail:
- the latest 6 rows under Monday–Sunday week headings;
- a type filter;
- "View all activity", and the feed link once
/activity/feed.xml exists.
- Stickiness:
- only the list sticks;
- it sticks by its bottom edge when it's taller than the screen;
- a small "Activity" label goes inside the sticky part;
- build the panel full height as designed, then judge it on this PR's preview at 1280×720 and 1440×900 under All and Translations. If it reads as an unfinished column, switch to the fitted fallback.
- The mobile panel below 1200px: collapsed, with its summary line plus a short second line such as "Library releases and lecture updates, from GitHub".
- Fixes the handoff didn't specify:
- scope the panel-collapse rule to below 1200px; as written, it hides the desktop rail;
scroll-padding-top on /news/ too, so keyboard focus never lands under the fixed header (WCAG 2.2 SC 2.4.11);
- a visually hidden
<h2> before the news list, so the posts aren't filed under "Activity";
- on phones, the title link is stretched over the row rather than wrapping it, so the link doesn't read the whole summary.
- Remove the intro line under the News h1.
Acceptance criteria (handoff checks)
Part of #271 (Phase 4).
Why. Option A, decided in #266: the news cards keep the main column, and an Activity rail beside them shows the latest updates, so anyone glancing at News sees that the project is active. The design is section 2 of the round-2 handoff (see the round 2 outcome), as amended there.
Panel height. Round 2 chose a tinted panel that runs the full height of the news column. With real content it may read as unfinished: with 20 cards the panel is about 3,400px tall at 1440px, beside about 570px of rail content under All, so around 80% of it is empty tint. The fitted fallback is CSS-only: the column goes transparent, and the tint, border and radius sit on the sticky box.
Work.
<aside>comes first in the source. This page'ssection.inner-pagegetsoverflow: clip, because the site-widesection { overflow: hidden }(main.scssline 779) stopsposition: stickyworking./activity/feed.xmlexists.scroll-padding-topon/news/too, so keyboard focus never lands under the fixed header (WCAG 2.2 SC 2.4.11);<h2>before the news list, so the posts aren't filed under "Activity";Acceptance criteria (handoff checks)