feat(tv): venue screens ask people to post with #DevFestCZ

docs/design.md

@@ -1407,7 +1407,9 @@ detail-view chrome for `SessionDetail` / `SpeakerDetail`).
   steps down a size to give the note its line. The credits band keeps every partner mark in its colours, equal-area
   sized from the Gold box (`logoBox`, `partners.ts`), a `dark` master on a
   white card; a new partner page fades in (opacity, none under reduced
-  motion). No split-flap, sweep or pulse.
+  motion). The band closes on the hashtag in Bebas under a "Post with"
+  note, still while the partners page (two marks a page, so they keep
+  their size beside it); in portrait it takes a line of its own above them. No split-flap, sweep or pulse.
 - **Menu** (`Menu.astro`, `Menu.scss`) — the bar is the mark left and the
   actions right (`display: flex; justify-content: space-between`). **At
   ≥1100px the destinations sit in the bar** (`.bar-nav`): Speakers, Agenda,

src/components/TvScreen.module.scss

@@ -323,6 +323,23 @@
 	object-position: left center;
 }
 
+// The hashtag to post with closes the band on every screen; it does not
+// page with the partners. Captioned like a column, so it takes the
+// least of the band's width from the logos.
+.hashtag {
+	display: flex;
+	flex: none;
+	flex-direction: column;
+	align-items: flex-end;
+	margin: 0 0 0 auto;
+}
+
+.hashtagText {
+	@include display(calc(var(--u) * 3));
+	padding-top: 0.08em;
+	white-space: nowrap;
+}
+
 // Dark ink made for a light ground sits on a white card, as on /partners.
 .logoDark {
 	box-sizing: content-box;
@@ -1047,15 +1064,28 @@
 		}
 	}
 
-	// Credits: two captioned columns, the organiser and the partners.
+	// Credits: two captioned columns, the organiser and the partners, under
+	// the hashtag on a line of its own (beside them it squeezes the logos).
 	.credits {
+		flex-wrap: wrap;
 		align-items: stretch;
-		height: calc(var(--u) * 8.4);
+		row-gap: calc(var(--u) * 1.6);
+		height: auto;
 		padding-bottom: calc(var(--u) * 2);
 	}
 
+	.hashtag {
+		order: -1;
+		flex-basis: 100%;
+		flex-direction: row;
+		align-items: center;
+		gap: calc(var(--u) * 1.6);
+		margin: 0;
+	}
+
 	.organizer,
 	.partnerGroup {
+		height: calc(var(--u) * 6.4);
 		flex-direction: column;
 		align-items: flex-start;
 		justify-content: space-between;

src/components/TvScreen.tsx

@@ -504,7 +504,7 @@ function Elsewhere({
 }
 
 /** The band under every screen: the organiser, then the partners a page at
- * a time, in ladder order. Every mark keeps its own colours; a dark one sits
+ * a time, in ladder order, then the hashtag to post with. Every mark keeps its own colours; a dark one sits
  * on a white card. */
 function Credits({ partners, organizerLogo }: { partners: PartnerGroup[]; organizerLogo: string }) {
 	const [index, setIndex] = useState(0);
@@ -537,6 +537,10 @@ function Credits({ partners, organizerLogo }: { partners: PartnerGroup[]; organi
 					</ul>
 				</div>
 			)}
+			<p className={s.hashtag}>
+				<span className={s.creditLabel}>Post with</span>
+				<span className={s.hashtagText}>#DevFestCZ</span>
+			</p>
 		</footer>
 	);
 }

src/pages/tv.astro

@@ -22,9 +22,9 @@ const tiers = [
 // after page; inside it each mark gets the same ink area (`logoBox`), in the
 // screen's `--u` (0.06u per px of the box: a 5:1 wordmark ≈ 12u wide).
 const U_PER_PX = 0.06;
-// Three logos fit the band at a size that reads; a bigger tier splits into
-// even pages (5 → 3 + 2), each still labelled with its tier.
-const PER_PAGE = 3;
+// Two logos fit beside the hashtag at a size that reads; a bigger tier
+// splits into even pages (5 → 2 + 1 + 2), each still labelled with its tier.
+const PER_PAGE = 2;
 const partners: PartnerGroup[] = tiers.flatMap(({ tier, partners }) => {
 	const label = `${tier} partner${partners.length === 1 ? '' : 's'}`;
 	const logos = partners.map((p) => {