bring it closer to the design

Author: hasparus

src/app/conf/2025/components/speaker-card.tsx

@@ -45,7 +45,7 @@ export function SpeakerCard({
           />
         )}
 
-        <div className="relative aspect-square shrink-0 overflow-hidden @[420px]:size-[176px]">
+        <div className="relative h-full shrink-0 overflow-hidden @[420px]:w-[176px]">
           <div className="absolute inset-0 z-[1] bg-sec-light mix-blend-multiply" />
           {speaker.avatar ? (
             <Image

src/app/conf/2025/components/speaker-tags.tsx

@@ -11,11 +11,14 @@ import { eventsColors } from "../utils"
 export function SpeakerTags({
   speaker,
   className,
+  showEventType = true,
 }: {
   speaker: SchedSpeaker
   className?: string
+  showEventType?: boolean
 }) {
-  const eventType = speakerSessions.get(speaker.username)?.[0]?.event_type
+  const eventType =
+    showEventType && speakerSessions.get(speaker.username)?.[0]?.event_type
 
   return (
     <div className={clsx("flex basis-0 flex-wrap gap-2", className)}>

src/app/conf/2025/schedule/_components/back-link.tsx

@@ -6,15 +6,15 @@ export function BackLink({
   year,
   kind,
 }: {
-  year: "2025"
+  year: `20${number}`
   kind: "speakers" | "sessions" | "schedule"
 }) {
   return (
     <NextLink
       href={`/conf/${year}/${kind}`}
-      className="group -m-2 inline-flex cursor-pointer items-center gap-2 p-2 text-sec-darker transition-all typography-menu [text-box:trim-both_cap_alphabetic] hover:underline hover:underline-offset-4 dark:text-neu-700"
+      className="group typography-menu -m-2 inline-flex cursor-pointer items-center gap-2 p-2 text-sec-darker transition-all [text-box:trim-both_cap_alphabetic] hover:underline hover:underline-offset-4 dark:text-neu-700"
     >
-      <div className="group-hover:animate-arrow-left group-focus:animate-arrow-left [--arrow-left-x:-1px]">
+      <div className="[--arrow-left-x:-1px] group-hover:animate-arrow-left group-focus:animate-arrow-left">
         <ArrowDownIcon className="inline-block size-4 translate-y-[-.5px] rotate-90" />
       </div>
       Back to {capitalize(kind)}

src/app/conf/2025/speakers/[id]/long-session-card.tsx

@@ -1,6 +1,5 @@
 import { clsx } from "clsx"
 import { ScheduleSession } from "@/app/conf/2023/types"
-import { Tag } from "@/app/conf/_design-system/tag"
 import { Button } from "@/app/conf/_design-system/button"
 import { Anchor } from "@/app/conf/_design-system/anchor"
 import { CalendarIcon } from "@/app/conf/_design-system/pixelarticons/calendar-icon"
@@ -9,7 +8,7 @@ import ClockIcon from "@/app/conf/_design-system/pixelarticons/clock.svg?svgr"
 import PlusIcon from "@/app/conf/_design-system/pixelarticons/plus.svg?svgr"
 import PlayIcon from "@/app/conf/_design-system/pixelarticons/play.svg?svgr"
 import { findVideo } from "../../schedule/[id]/session-video"
-import { eventsColors, getEventTitle } from "../../utils"
+import { getEventTitle } from "../../utils"
 import React from "react"
 import { SessionTags } from "../../components/session-tags"
 
@@ -57,15 +56,14 @@ export function LongSessionCard({
   return (
     <div
       className={clsx(
-        "group relative border border-neu-200 bg-neu-0",
-        !!video && "flex flex-col gap-6 backdrop-blur-md",
+        "group relative border border-neu-200 bg-neu-0 dark:border-neu-100",
         className,
       )}
       {...props}
     >
       <Anchor
         href={`/conf/${year}/schedule/${session.id}?name=${session.name}`}
-        className="absolute inset-0 z-[1] ring-inset ring-neu-400 hover:ring-1 dark:ring-neu-100"
+        className="absolute inset-0 z-[1] ring-inset ring-neu-400 hover:bg-sec-base/[.035] hover:ring-1 dark:ring-neu-100"
         aria-label={`Read more about "${eventTitle}" by ${session.speakers?.[0]?.name || "Speaker"}`}
       />
 
@@ -83,12 +81,9 @@ export function LongSessionCard({
         </div>
 
         <div className="flex flex-col gap-4">
-          <div className="min-h-[120px]">
-            <h3 className="typography-body-lg text-neu-900">
-              {getEventTitle(
-                session,
-                speakers.map(s => s.name),
-              )}
+          <div className="min-h-[60px]">
+            <h3 className="typography-body-lg text-neu-900 2xl:text-2xl">
+              {eventTitle}
             </h3>
           </div>
           <div className="flex items-center justify-between gap-2">
@@ -126,36 +121,39 @@ export function LongSessionCard({
       {/* todo: past session no recording variant */}
 
       {video ? (
-        <Button
-          href={`https://youtube.com/embed/${video.id}`}
-          variant="primary"
-          className="relative z-[2] w-full"
-        >
-          Watch
-          <PlayIcon className="size-6" />
-        </Button>
+        <footer className="px-6 pb-6 pt-0">
+          <Button
+            href={`https://youtube.com/embed/${video.id}`}
+            variant="primary"
+            className="relative z-[2] w-full"
+          >
+            Watch
+            <PlayIcon className="size-6" />
+          </Button>
+        </footer>
       ) : (
-        <footer className="flex items-center border-t border-neu-200 text-neu-800">
-          <div className="flex flex-1 items-center gap-6 border-r border-neu-200 px-6 py-4">
-            <div className="flex items-center gap-0.5">
-              <CalendarIcon className="size-4 text-sec-dark" />
-              <span className="typography-body-xs">{formattedDate}</span>
-            </div>
-            <div className="flex items-center gap-0.5">
-              <ClockIcon className="size-4 text-sec-dark" />
-              <span className="typography-body-xs">{formattedTime}</span>
+        <footer className="flex items-center border-t border-neu-200 text-neu-800 dark:border-neu-100">
+          <div className="flex flex-1 items-center gap-6 border-r border-neu-200 p-6">
+            <div className="contents flex-col md:max-xl:flex">
+              <div className="flex items-center gap-0.5 whitespace-pre">
+                <CalendarIcon className="size-4 shrink-0 -translate-y-px text-sec-dark" />
+                <span className="typography-body-xs">{formattedDate}</span>
+              </div>
+              <div className="flex items-center gap-0.5">
+                <ClockIcon className="size-4 shrink-0 text-sec-dark" />
+                <span className="typography-body-xs">{formattedTime}</span>
+              </div>
             </div>
             <div className="flex items-center gap-0.5">
-              <PinIcon className="size-4 text-sec-dark" />
+              <PinIcon className="size-4 shrink-0 text-sec-dark" />
               <span className="typography-body-xs">{session.venue}</span>
             </div>
           </div>
-          <div className="flex flex-col items-center justify-center gap-6 px-6 py-4">
-            <button className="relative z-[2] flex items-center gap-0.5 text-neu-800">
-              <PlusIcon className="size-4 text-sec-dark" />
-              <span className="typography-body-xs">Add to calendar</span>
-            </button>
-          </div>
+          {/* TODO: Actually add to calendar. Ensure we show this only on this year's events. */}
+          <button className="relative z-[2] flex h-full flex-row items-center justify-center gap-0.5 px-6 py-4 text-neu-800 ring-inset ring-neu-400 hover:bg-sec-base/[.035] hover:ring-1 dark:ring-neu-100">
+            <PlusIcon className="size-4 shrink-0 text-sec-dark" />
+            <span className="typography-body-xs">Add to calendar</span>
+          </button>
         </footer>
       )}
     </div>

src/app/conf/2025/speakers/[id]/page.tsx

@@ -18,6 +18,7 @@ import { SpeakerTags } from "../../components/speaker-tags"
 import { SpeakerLinks } from "../../components/speaker-links"
 import { LongSessionCard } from "./long-session-card"
 import Image from "next-image-export-optimizer"
+import { formatDescription } from "../../schedule/[id]/format-description"
 
 type SpeakerProps = { params: { id: string } }
 
@@ -51,37 +52,40 @@ export default function SpeakerPage({ params }: SpeakerProps) {
 
   return (
     <>
-      {/* gql-conf-navbar-strip border-t border-neu-200 bg-neu-0 py-8 text-neu-900 before:bg-white/40 dark:border-neu-100 before:dark:bg-blk/30 xl:py-16 */}
       <NavbarPlaceholder className="top-0 bg-neu-50 before:bg-neu-50/40 dark:bg-neu-0 dark:before:bg-blk/30" />
       <main className="gql-all-anchors-focusable gql-conf-navbar-strip text-neu-900 before:bg-neu-50/40 before:dark:bg-blk/30">
         <div className="bg-neu-50 dark:bg-neu-0">
           <div className="gql-conf-container">
             <div className="gql-conf-section !py-0">
-              <div className="border-x border-neu-200 pt-8 dark:border-neu-100 2xl:pt-16">
-                <SpeakerHeader speaker={speaker} year="2025" />
+              <div className="border-x border-neu-200 dark:border-neu-100">
+                <SpeakerHeader
+                  speaker={speaker}
+                  year="2025"
+                  className="border-b border-neu-200 dark:border-neu-100"
+                />
 
                 <div className="flex justify-end">
                   <SpeakerLinks
                     size="lg"
                     speaker={speaker}
-                    className="!border-r-0"
+                    className="!border-r-0 !border-t-0"
                   />
                 </div>
 
-                <p className="typography-body-lg px-4 py-8 lg:p-8 xl:px-24 xl:pb-24 xl:pt-16 xl:text-[32px]">
-                  {speaker.about}
+                <p className="typography-body-lg mx-auto box-content max-w-[800px] px-4 py-8 lg:px-8 lg:py-16 xl:px-24 xl:pb-24 xl:text-[32px]">
+                  {formatDescription(speaker.about)}
                 </p>
 
                 <Hr />
 
-                <h3 className="typography-h2 my-8 max-w-[408px] px-2 sm:px-3 lg:my-16">
+                <h3 className="typography-h2 my-8 px-2 sm:px-3 lg:my-16">
                   2025 Sessions
                 </h3>
                 <SpeakerSessions speaker={speaker} className="-mx-px -mb-px" />
 
                 <Hr />
 
-                <h3 className="typography-h2 my-8 max-w-[408px] px-2 sm:px-3 lg:my-16">
+                <h3 className="typography-h2 my-8 px-2 sm:px-3 lg:my-16">
                   Sessions from previous editions
                 </h3>
                 <SpeakerSessions speaker={speaker} className="-mx-px -mb-px" />
@@ -120,22 +124,28 @@ function SpeakerHeader({
   className?: string
 }) {
   return (
-    <header className={clsx("flex max-md:flex-col", className)}>
-      <div className="pl-2 sm:pl-3">
-        <BackLink year="2025" kind="schedule" />
+    <header
+      className={clsx("flex justify-between gap-4 max-md:flex-col", className)}
+    >
+      <div className="pl-2 pt-8 sm:pl-3 2xl:pl-24 2xl:pr-16 2xl:pt-16">
+        <BackLink year={year} kind="schedule" />
         <p className="typography-body-lg mt-4 text-sec-darker lg:typography-h3 lg:mt-20">
           Meet the speaker
         </p>
         <h1 className="typography-h1 lg:mt-2">{speaker.name}</h1>
-        <div className="flex flex-wrap items-center justify-between gap-2 lg:gap-x-4 xl:gap-x-8">
+        <div className="typography-body-lg mt-8 flex flex-wrap items-center gap-x-8 gap-y-2 lg:mt-12 xl:mt-16 2xl:mt-20">
           {[speaker.position, speaker.company === "-" ? "" : speaker.company]
             .filter(Boolean)
             .join(", ")}
-          <SpeakerTags speaker={speaker} className="max-lg:flex-nowrap" />
+          <SpeakerTags
+            speaker={speaker}
+            className="flex-nowrap"
+            showEventType={false}
+          />
         </div>
       </div>
       {speaker.avatar && (
-        <div className="relative overflow-hidden max-lg:mt-6">
+        <div className="relative overflow-hidden">
           <div className="absolute inset-0 z-[1] bg-[hsl(79_81%_83.5%)] opacity-90 mix-blend-multiply" />
           <Image
             src={speaker.avatar}