@dominikcz/greg 0.9.27

package/src/lib/components/SocialLinks.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+    import SocialLink from "./SocialLink.svelte";
+
+    type SocialLinkIcon = string | { svg: string };
+
+    type SocialLinkItem = {
+        icon: SocialLinkIcon;
+        link: string;
+        ariaLabel?: string;
+    };
+
+    type Props = {
+        links: SocialLinkItem[];
+        me?: boolean;
+    };
+
+    let { links, me = true }: Props = $props();
+</script>
+
+<div class="SocialLinks">
+    {#each links as { link, icon, ariaLabel } (link)}
+        <SocialLink {icon} {link} {ariaLabel} {me} />
+    {/each}
+</div>
+
+<style>
+    .SocialLinks {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-wrap: wrap;
+    }
+</style>

package/src/lib/components/Steps.svelte

@@ -0,0 +1,143 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    let { children }: { children?: Snippet } = $props();
+</script>
+
+<!--
+    Steps — an ordered procedural steps list, inspired by Starlight.
+
+    Usage in Markdown:
+        <Steps>
+        1. **Install dependencies**
+           Run `npm install` in your project folder.
+        2. **Start the dev server**
+           Run `npm run dev`.
+        3. **Open the app**
+           Navigate to `http://localhost:5173`.
+        </Steps>
+-->
+<div class="greg-steps">
+    {@render children?.()}
+</div>
+
+<style>
+    /* ── design tokens ───────────────────────────────────────────────────── */
+    .greg-steps {
+        --_size: 1.75rem; /* bullet circle diameter   */
+        --_margin: var(
+            --greg-steps-guide-gap,
+            0.5rem
+        ); /* gap above/below connector */
+        --_bullet-bg: var(--greg-accent, #646cff);
+        --_bullet-fg: #fff;
+        --_guide: var(
+            --greg-steps-guide-color,
+            color-mix(
+                in srgb,
+                var(--greg-accent, #646cff) 42%,
+                var(--greg-border-color, #e5e5ea)
+            )
+        );
+        margin-block: 1.75rem;
+    }
+
+    /* ── ordered list ────────────────────────────────────────────────────── */
+    .greg-steps :global(ol) {
+        list-style: none;
+        counter-reset: greg-steps-counter;
+        padding-inline-start: 0;
+        margin: 0;
+    }
+
+    /* ── individual step ─────────────────────────────────────────────────── */
+    .greg-steps :global(ol > li) {
+        counter-increment: greg-steps-counter;
+        position: relative;
+        list-style: none;
+        padding-inline-start: calc(var(--_size) + 1rem);
+        /* HACK: keeps any margin-bottom inside the li's padding box to avoid
+           gaps in the connector line (same as Starlight) */
+        padding-bottom: 1px;
+        min-height: calc(var(--_size) + var(--_margin));
+    }
+
+    .greg-steps :global(ol > li::marker) {
+        content: "";
+    }
+
+    .greg-steps :global(ol > li + li) {
+        margin-top: 0;
+    }
+
+    /* ── number badge (::before) ─────────────────────────────────────────── */
+    .greg-steps :global(ol > li::before) {
+        content: counter(greg-steps-counter);
+        position: absolute;
+        top: 0;
+        inset-inline-start: 0;
+        width: var(--_size);
+        height: var(--_size);
+        /* line-height centres the number without flexbox (pseudo-element safe) */
+        line-height: var(--_size);
+        font-size: 0.8rem;
+        font-weight: 600;
+        text-align: center;
+        /* solid filled circle — clearly distinct from the page background */
+        color: var(--_bullet-fg);
+        background-color: var(--_bullet-bg);
+        border-radius: 99rem;
+        box-shadow: inset 0 0 0 1px
+            color-mix(in srgb, var(--_bullet-bg) 82%, black);
+    }
+
+    /* ── vertical connector line (::after) ──────────────────────────────── */
+    .greg-steps :global(ol > li::after) {
+        content: "";
+        position: absolute;
+        top: calc(var(--_size) + var(--_margin));
+        /* compensate li padding-bottom:1px so top and bottom gaps are equal */
+        bottom: max(0px, calc(var(--_margin) - 1px));
+        inset-inline-start: calc((var(--_size) - 2px) / 2);
+        width: 2px;
+        background-color: var(--_guide);
+    }
+
+    .greg-steps :global(ol > li:last-child::after) {
+        display: none;
+    }
+
+    /* ── first-child vertical alignment with circle centre ──────────────── */
+    /*
+     * Shifts the first block element down so its text baseline aligns with
+     * the vertical centre of the bullet circle (the same technique Starlight
+     * uses with `lh` units, falling back to an approximation).
+     */
+    .greg-steps :global(ol > li > :first-child) {
+        --lh: calc(
+            1em * 1.75
+        ); /* approximation: font-size × body line-height */
+        --shift-y: calc(0.5 * (var(--_size) - var(--lh)));
+        margin-top: 0;
+        transform: translateY(var(--shift-y));
+        margin-bottom: var(--shift-y);
+    }
+
+    /* Use the precise lh unit where supported */
+    @supports (--prop: 1lh) {
+        .greg-steps :global(ol > li > :first-child) {
+            --lh: 1lh;
+        }
+    }
+
+    /* Headings have a tighter own line-height */
+    .greg-steps :global(ol > li > :first-child:where(h1, h2, h3, h4, h5, h6)) {
+        --lh: calc(1em * 1.3);
+    }
+
+    /* ── step title (first bold in a paragraph) ──────────────────────────── */
+    .greg-steps :global(ol > li > p:first-child > strong:first-child) {
+        display: block;
+        font-weight: 600;
+        color: var(--greg-color, inherit);
+    }
+</style>

package/src/lib/components/TeamMember.svelte

@@ -0,0 +1,273 @@
+<script lang="ts">
+    import Link from "./Link.svelte";
+    import SocialLinks from "./SocialLinks.svelte";
+
+    type SocialLinkIcon = string | { svg: string };
+    type SocialLinkItem = {
+        icon: SocialLinkIcon;
+        link: string;
+        ariaLabel?: string;
+    };
+
+    type TeamMember = {
+        avatar: string;
+        name: string;
+        title?: string;
+        org?: string;
+        orgLink?: string;
+        desc?: string;
+        links?: SocialLinkItem[];
+        sponsor?: string;
+        actionText?: string;
+    };
+
+    type Props = {
+        size?: "small" | "medium";
+        member: TeamMember;
+    };
+
+    let { size = "medium", member }: Props = $props();
+</script>
+
+<article class="TeamMember {size}">
+    <div class="profile">
+        <figure class="avatar">
+            <img class="avatar-img" src={member.avatar} alt={member.name} />
+        </figure>
+        <div class="data">
+            <h1 class="name">{member.name}</h1>
+            {#if member.title || member.org}
+                <p class="affiliation">
+                    {#if member.title}
+                        <span class="title">{member.title}</span>
+                    {/if}
+                    {#if member.title && member.org}
+                        <span class="at"> @ </span>
+                    {/if}
+                    {#if member.org}
+                        <Link
+                            class="org {member.orgLink ? 'link' : ''}"
+                            href={member.orgLink}
+                            noIcon
+                        >
+                            {member.org}
+                        </Link>
+                    {/if}
+                </p>
+            {/if}
+            {#if member.desc}
+                <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                <p class="desc">{@html member.desc}</p>
+            {/if}
+            {#if member.links?.length}
+                <div class="links">
+                    <SocialLinks links={member.links} me={false} />
+                </div>
+            {/if}
+        </div>
+    </div>
+
+    {#if member.sponsor}
+        <div class="sp">
+            <Link class="sp-link link" href={member.sponsor} noIcon>
+                <svg
+                    class="sp-icon"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    aria-hidden="true"
+                >
+                    <path
+                        d="M12,22.2c-0.3,0-0.5-0.1-0.7-0.3l-8.8-8.8c-2.5-2.5-2.5-6.7,0-9.2c2.5-2.5,6.7-2.5,9.2,0L12,4.3l0.4-0.4c0,0,0,0,0,0C13.6,2.7,15.2,2,16.9,2c0,0,0,0,0,0c1.7,0,3.4,0.7,4.6,1.9l0,0c1.2,1.2,1.9,2.9,1.9,4.6c0,1.7-0.7,3.4-1.9,4.6l-8.8,8.8C12.5,22.1,12.3,22.2,12,22.2z"
+                    />
+                </svg>
+                {member.actionText ?? "Sponsor"}
+            </Link>
+        </div>
+    {/if}
+</article>
+
+<style>
+    .TeamMember {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        border-radius: 12px;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+    }
+
+    /* Small */
+    .TeamMember.small .profile {
+        padding: 32px;
+    }
+
+    .TeamMember.small .data {
+        padding-top: 20px;
+    }
+
+    .TeamMember.small .avatar {
+        width: 64px;
+        height: 64px;
+    }
+
+    .TeamMember.small .name {
+        line-height: 24px;
+        font-size: 16px;
+    }
+
+    .TeamMember.small .affiliation {
+        padding-top: 4px;
+        line-height: 20px;
+        font-size: 14px;
+    }
+
+    .TeamMember.small .desc {
+        padding-top: 12px;
+        line-height: 20px;
+        font-size: 14px;
+    }
+
+    .TeamMember.small .links {
+        margin: 0 -16px -20px;
+        padding: 10px 0 0;
+    }
+
+    /* Medium */
+    .TeamMember.medium .profile {
+        padding: 48px 32px;
+    }
+
+    .TeamMember.medium .data {
+        padding-top: 24px;
+        text-align: center;
+    }
+
+    .TeamMember.medium .avatar {
+        width: 96px;
+        height: 96px;
+    }
+
+    .TeamMember.medium .name {
+        letter-spacing: 0.15px;
+        line-height: 28px;
+        font-size: 20px;
+    }
+
+    .TeamMember.medium .affiliation {
+        padding-top: 4px;
+        font-size: 16px;
+    }
+
+    .TeamMember.medium .desc {
+        padding-top: 16px;
+        max-width: 288px;
+        font-size: 16px;
+    }
+
+    .TeamMember.medium .links {
+        margin: 0 -16px -12px;
+        padding: 16px 12px 0;
+    }
+
+    .profile {
+        flex-grow: 1;
+        background-color: var(--greg-menu-background);
+    }
+
+    .data {
+        text-align: center;
+    }
+
+    .avatar {
+        position: relative;
+        flex-shrink: 0;
+        margin: 0 auto;
+        border-radius: 50%;
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+    }
+
+    .avatar-img {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        border-radius: 50%;
+        object-fit: cover;
+        width: 100%;
+        height: 100%;
+    }
+
+    .name {
+        margin: 0;
+        font-weight: 600;
+        border: none;
+        padding: 0;
+    }
+
+    .affiliation {
+        margin: 0;
+        font-weight: 500;
+        color: var(--greg-menu-section-color);
+    }
+
+    :global(.org.link) {
+        color: var(--greg-menu-section-color);
+        transition: color 0.25s;
+        text-decoration: none;
+    }
+
+    :global(.org.link:hover) {
+        color: var(--greg-accent);
+    }
+
+    .desc {
+        margin: 0 auto;
+    }
+
+    .desc :global(a) {
+        font-weight: 500;
+        color: var(--greg-accent);
+        text-decoration-style: dotted;
+        transition: color 0.25s;
+    }
+
+    .links {
+        display: flex;
+        justify-content: center;
+        height: 56px;
+    }
+
+    :global(.sp-link) {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        padding: 16px;
+        font-size: 14px;
+        font-weight: 500;
+        color: var(--greg-sponsor-color);
+        background-color: var(--greg-menu-background);
+        transition:
+            color 0.25s,
+            background-color 0.25s;
+        text-decoration: none;
+    }
+
+    :global(.sp-link:hover),
+    .links:focus-within :global(.sp-link),
+    :global(.sp-link:focus-within) {
+        outline: none;
+        color: var(--greg-menu-active-color);
+        background-color: var(--greg-sponsor-color);
+    }
+
+    .sp-icon {
+        margin-right: 8px;
+        width: 16px;
+        height: 16px;
+        fill: currentColor;
+        flex-shrink: 0;
+    }
+</style>

package/src/lib/components/TeamMembers.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+    import TeamMember from "./TeamMember.svelte";
+
+    type SocialLinkIcon = string | { svg: string };
+    type SocialLinkItem = {
+        icon: SocialLinkIcon;
+        link: string;
+        ariaLabel?: string;
+    };
+
+    type TeamMemberData = {
+        avatar: string;
+        name: string;
+        title?: string;
+        org?: string;
+        orgLink?: string;
+        desc?: string;
+        links?: SocialLinkItem[];
+        sponsor?: string;
+        actionText?: string;
+    };
+
+    type Props = {
+        size?: "small" | "medium";
+        members: TeamMemberData[];
+    };
+
+    let { size = "medium", members }: Props = $props();
+
+    let classes = $derived([size, `count-${members.length}`].join(" "));
+</script>
+
+<div class="TeamMembers {classes}">
+    <div class="container">
+        {#each members as member (member.name)}
+            <div class="item">
+                <TeamMember {size} {member} />
+            </div>
+        {/each}
+    </div>
+</div>
+
+<style>
+    .TeamMembers.small .container {
+        grid-template-columns: repeat(auto-fit, minmax(224px, 1fr));
+    }
+
+    .TeamMembers.small.count-1 .container {
+        max-width: 276px;
+    }
+    .TeamMembers.small.count-2 .container {
+        max-width: calc(276px * 2 + 24px);
+    }
+    .TeamMembers.small.count-3 .container {
+        max-width: calc(276px * 3 + 24px * 2);
+    }
+
+    .TeamMembers.medium .container {
+        grid-template-columns: repeat(auto-fit, minmax(256px, 1fr));
+    }
+
+    @media (min-width: 375px) {
+        .TeamMembers.medium .container {
+            grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
+        }
+    }
+
+    .TeamMembers.medium.count-1 .container {
+        max-width: 368px;
+    }
+    .TeamMembers.medium.count-2 .container {
+        max-width: calc(368px * 2 + 24px);
+    }
+
+    .container {
+        display: grid;
+        gap: 24px;
+        margin: 0 auto;
+        max-width: 1152px;
+    }
+</style>

package/src/lib/components/TeamPage.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+
+    type Props = {
+        children?: Snippet;
+    };
+
+    let { children }: Props = $props();
+</script>
+
+<div class="TeamPage">
+    {#if children}
+        {@render children()}
+    {/if}
+</div>
+
+<style>
+    .TeamPage {
+        margin: 96px 0;
+    }
+
+    @media (min-width: 768px) {
+        .TeamPage {
+            margin: 128px 0;
+        }
+    }
+
+    /* Spacing between sections within a TeamPage */
+    .TeamPage :global(.TeamPageTitle + .TeamPageSection),
+    .TeamPage :global(.TeamPageSection + .TeamPageSection),
+    .TeamPage :global(.TeamMembers + .TeamPageSection) {
+        margin-top: 64px;
+    }
+
+    @media (min-width: 768px) {
+        .TeamPage :global(.TeamPageTitle + .TeamPageSection) {
+            margin-top: 16px;
+        }
+
+        .TeamPage :global(.TeamPageSection + .TeamPageSection),
+        .TeamPage :global(.TeamMembers + .TeamPageSection) {
+            margin-top: 96px;
+        }
+    }
+
+    .TeamPage :global(.TeamMembers + .TeamMembers) {
+        margin-top: 24px;
+    }
+
+    .TeamPage :global(.TeamMembers) {
+        padding: 0 24px;
+    }
+
+    @media (min-width: 768px) {
+        .TeamPage :global(.TeamMembers) {
+            padding: 0 48px;
+        }
+    }
+
+    @media (min-width: 960px) {
+        .TeamPage :global(.TeamMembers) {
+            padding: 0 64px;
+        }
+    }
+</style>

package/src/lib/components/TeamPageSection.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+
+    type Props = {
+        title?: string;
+        lead?: string;
+        titleSnippet?: Snippet;
+        leadSnippet?: Snippet;
+        children?: Snippet;
+    };
+
+    let { title, lead, titleSnippet, leadSnippet, children }: Props = $props();
+
+    let hasTitle = $derived(!!(titleSnippet || title));
+    let hasLead = $derived(!!(leadSnippet || lead));
+</script>
+
+<section class="TeamPageSection">
+    {#if hasTitle}
+        <div class="title">
+            <div class="title-line"></div>
+            <h2 class="title-text">
+                {#if titleSnippet}
+                    {@render titleSnippet()}
+                {:else}
+                    {title}
+                {/if}
+            </h2>
+        </div>
+    {/if}
+    {#if hasLead}
+        <p class="lead">
+            {#if leadSnippet}
+                {@render leadSnippet()}
+            {:else}
+                {lead}
+            {/if}
+        </p>
+    {/if}
+    {#if children}
+        <div class="members">
+            {@render children()}
+        </div>
+    {/if}
+</section>
+
+<style>
+    .TeamPageSection {
+        padding: 0 32px;
+    }
+
+    @media (min-width: 768px) {
+        .TeamPageSection {
+            padding: 0 48px;
+        }
+    }
+
+    @media (min-width: 960px) {
+        .TeamPageSection {
+            padding: 0 64px;
+        }
+    }
+
+    .title {
+        position: relative;
+        margin: 0 auto;
+        max-width: 1152px;
+        text-align: center;
+        color: var(--greg-menu-section-color);
+    }
+
+    .title-line {
+        position: absolute;
+        top: 16px;
+        left: 0;
+        width: 100%;
+        height: 1px;
+        background-color: var(--greg-border-color);
+    }
+
+    .title-text {
+        position: relative;
+        display: inline-block;
+        padding: 0 24px;
+        letter-spacing: 0;
+        line-height: 32px;
+        font-size: 20px;
+        font-weight: 500;
+        background-color: var(--greg-background);
+        margin: 0;
+        border: none;
+    }
+
+    .lead {
+        margin: 0 auto;
+        max-width: 480px;
+        padding-top: 12px;
+        text-align: center;
+        line-height: 24px;
+        font-size: 16px;
+        font-weight: 500;
+        color: var(--greg-menu-section-color);
+    }
+
+    .members {
+        padding-top: 40px;
+    }
+</style>