website

/* Repo browsing pages (readme/files/commits/blame). Restored from the

   original Astro-era RepoLayout/FileLayout/Commit/RecursiveList components

   (see git history at 7325531^), with the tab nav restyled as a bordered

   tab bar and a couple of small crates.io-inspired touches (clone command

   as its own code box, tags as pills) layered on top.

   Font sizes on this page follow one small scale instead of one-off

   values, so nothing reads as randomly bigger/smaller than its neighbour:

     0.85rem — small badges (tags, pull-right meta, file-size hints)

     0.9rem  — code/monospace content, nav links and sub-headings alike

               (pre/code-view, file tree, blame, file title)

     0.95rem — box body text (.repo, .event)

     var(--fs-repo-title) — page-level heading (.repo h1), fluid 1.3–1.6rem

   All of them are rem-based, not em, so nesting depth can't change the

   rendered size — that's what made the old code-view/blame font sizes

   inconsistent (em compounds with whatever ancestor happens to wrap it).

   Everything below uses plain CSS nesting rather than @scope: .repo,

   .file-layout, .event, .file-explorer and table.blame are all real,

   always-present classes/tags on these pages (none of them are wrapped

   in a custom element anymore), so nesting under them scopes their

   descendants exactly the way @scope would, without needing a scope root

   selector that has to be kept in sync with whatever markup happens to

   wrap it. */

.repo {

  text-overflow: ellipsis;

  overflow: hidden;

  padding: 0.5rem;

  background: var(--color-box-bg);

  color: var(--color-text);

  font-size: 0.95rem;

  padding: 1rem;

  a {

    color: var(--color-link);

  }

  .header {

    display: flex;

    flex-direction: row;

    align-items: baseline;

    @media (max-width: 720px) {

      flex-direction: column;

      align-items: start;

    }

  }

  h1 {

    font-size: var(--fs-repo-title);

    font-weight: 500;

    line-height: 1;

    margin-bottom: 0.1rem;

    flex: 1;

  }

  .repo-version {

    font-size: 1.1rem;

    font-weight: 500;

    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    color: var(--color-text);

    margin-left: 0.5rem;

  }

  .tags {

    margin-top: 0.5rem;

    display: flex;

    flex-wrap: wrap;

    gap: 0.25rem;

  }

  .tag {

    color: var(--color-tag);

    padding: 0.15rem 0.5rem 0.5rem 0;

    border-radius: 4px;

    font-size: 0.95rem;

    font-weight: 500;

  }

  h3.clone-cmd {

    display: flex;

    align-items: center;

    justify-content: space-between;

    font-weight: 400;

    font-size: var(--fs-repo-clone);

    padding: 0.4rem;

    background-color: var(--color-pre-bg);

    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    overflow-x: auto;

    white-space: pre;

    width: fit-content;

    margin-top: 0.2rem;

    .copy-btn {

      flex-shrink: 0;

      display: flex;

      align-items: center;

      justify-content: center;

      width: 1.6rem;

      height: 1.6rem;

      padding: 0;

      border: none;

      border-radius: 4px;

      background: none;

      color: var(--color-text);

      opacity: 0.6;

      cursor: pointer;

      &:hover {

        opacity: 1;

        background: var(--color-box-bg);

      }

      .icon-check {

        display: none;

      }

      &.copied {

        opacity: 1;

        color: var(--color-tag);

        .icon-copy {

          display: none;

        }

        .icon-check {

          display: block;

        }

      }

    }

  }

  .headerExtension h2 {

    display: flex;

    flex: 1;

    padding-top: 0.3rem;

    font-size: var(--fs-repo-subtitle);

    font-weight: 400;

  }

  hr {

    margin-top: 0.5rem;

    border: none;

    border-top: 1px solid var(--color-text);

  }

  .nav {

    display: flex;

    align-items: center;

    margin-top: 0.5rem;

    span {

      padding: 0 0.75rem;

      color: var(--color-text);

    }

    a {

      font-size: 1rem;

      font-weight: 500;

      cursor: pointer;

      color: var(--color-link);

      text-decoration: none;

      &.active-tab {

        text-decoration: underline;

        text-underline-offset: 4px;

      }

    }

  }

}

#repo-content {

  margin-top: 0.75rem;

  /* README (repos/repo.njk) — same box treatment as the file explorer

     panes below, so it doesn't sit as bare unstyled text against the

     page background. Scoped to #repo-content so blog posts (which also

     use .markdown-body) are untouched. */

  .markdown-body {

    background: var(--color-box-bg);

    padding: 1rem 1.25rem;

  }

}

/* Commit list / commit detail header (Commit.astro) — repos/commit.njk,

   commits.njk, file-history.njk. pre.commit is nested here too since

   it's always .event's child, never used alone. */

.event {

  background-color: var(--color-box-bg);

  color: var(--color-text);

  text-overflow: ellipsis;

  overflow: hidden;

  padding: 0.6rem 0.75rem;

  margin: 0.5rem 0;

  font-size: 0.95rem;

  a {

    color: var(--color-link);

  }

  strong {

    font-weight: 500;

  }

  .pull-right {

    font-size: 0.85rem;

    font-weight: 400;

    float: right;

  }

  pre.commit {

    font-family: inherit;

    white-space: pre-wrap;

    margin-top: 0.35rem;

  }

}

/* Two-pane IDE-style file explorer: a persistent tree sidebar + a content

   pane, each its own rounded box with a gap between them rather than a

   single shared border — the gap is what visually separates them, so

   they don't also need to differ in colour. The tree lives outside

   #file-pane, so htmx swaps of #file-pane (clicking a file) or

   #file-content (Contents/History/Blame) never touch the sidebar — it

   just stays where it is, already expanded, no reload.

   Fixed-height explorer: both panes stretch to the same height and scroll

   independently, so scrolling a long file never scrolls the tree out of

   view (or the whole page) — closer to a real IDE split view than a page

   that just keeps growing with the file's content. */

.file-explorer {

  display: flex;

  align-items: stretch;

  gap: 0.5rem;

  height: 80vh;

  /* File tree: flat rows (no per-item card background), a rotating

     triangle for expand/collapse instead of an emoji folder glyph, and a

     left accent border + tint on the active file instead of a filled

     pill. */

  .file-explorer-tree {

    width: 260px;

    flex-shrink: 0;

    height: 100%;

    overflow-y: auto;

    padding: 0.6rem;

    background: var(--color-box-bg);

    border-radius: 6px;

    font-size: 0.9rem;

    ul {

      list-style: none;

      margin: 0 0 0 1.1rem;

      padding: 0;

    }

    > ul {

      margin-left: 0;

    }

    li {

      margin: 0;

      &.active-file,

      & > a.active-file {

        color: var(--color-link);

      }

    }

    summary,

    li > a {

      display: flex;

      align-items: center;

      gap: 0.4rem;

      padding: 0.2rem 0.35rem;

      border-radius: 4px;

      border-left: 2px solid transparent;

      cursor: pointer;

      text-decoration: none;

      color: var(--color-text);

      line-height: 1.6;

    }

    summary {

      list-style: none;

      &::-webkit-details-marker {

        display: none;

      }

      &::before {

        content: "";

        flex-shrink: 0;

        width: 0;

        height: 0;

        border-style: solid;

        border-width: 0.3em 0 0.3em 0.4em;

        border-color: transparent transparent transparent currentColor;

        opacity: 0.5;

        transition: transform 120ms ease;

      }

    }

    details[open] > summary::before {

      transform: rotate(90deg);

    }

    summary svg,

    li > a svg {

      flex-shrink: 0;

      width: 1em;

      height: 1em;

    }

    summary:hover,

    li > a:hover {

      background-color: var(--color-pre-bg);

    }

    li > a.active-file {

      color: var(--color-link);

      background-color: var(--color-highlight-bg);

      border-left-color: var(--color-link);

      font-weight: 500;

    }

    .file-size {

      margin-left: auto;

      opacity: 0.5;

      font-size: 0.85rem;

    }

  }

  .file-explorer-main {

    flex: 1;

    min-width: 0;

    height: 100%;

    display: flex;

    flex-direction: column;

    border: 1px solid var(--color-box-bg);

    border-radius: 6px;

    overflow: hidden;

    &:has(.file-explorer-placeholder) {

      align-items: center;

      justify-content: center;

    }

    /* #file-content padding/background: when it holds actual code (a

       plain <pre>), let the box-bg colour fill the whole pane

       edge-to-edge instead of floating as a small inset card — closer to

       a real code viewer's continuous code surface. box-bg (not pre-bg)

       so it reads as one calm surface with the file-layout header above

       it, rather than the near-black pre-bg used for one-off code

       snippets elsewhere on the site. */

    #file-content {

      flex: 1;

      overflow-y: auto;

      padding: 0.85rem;

      &:has(> pre) {

        padding: 0;

        background: var(--color-box-bg);

        pre {

          margin: 0;

          background: transparent;

          border-radius: 0;

        }

      }

    }

  }

  .file-explorer-placeholder {

    color: var(--color-text);

    opacity: 0.6;

    padding: 1rem 0;

  }

  @media (max-width: 720px) {

    flex-direction: column;

    height: 85vh;

    .file-explorer-tree {

      width: 100%;

      height: auto;

      flex: 0 0 35%;

    }

    .file-explorer-main {

      width: 100%;

      height: auto;

      flex: 1 1 auto;

    }

  }

}

/* File view header — a compact icon+filename strip with the

   Contents/History/Blame tabs, sitting as the card's title bar rather

   than a full-width heading. */

.file-layout {

  display: flex;

  align-items: center;

  justify-content: flex-start;

  flex-shrink: 0;

  gap: 0.5rem;

  padding: 0.6rem 0.85rem;

  background: var(--color-box-bg);

  border-bottom: 1px solid var(--color-pre-bg);

  .title {

    display: flex;

    align-items: center;

    gap: 0.4rem;

    /* flex:1 (not the default 0 1 auto) so it's the one that gives up

       space when the row is tight — without this, a long filename could

       force the row to wrap .nav onto its own line instead of shrinking,

       since the wrap decision is made off each item's unshrunk

       hypothetical width, not its post-shrink width. */

    flex: 1 1 auto;

    min-width: 0;

    font-size: 0.9rem;

    font-weight: 500;

    margin-bottom: -4px;

    svg {

      flex-shrink: 0;

      width: 1rem;

      height: 1rem;

    }

    span {

      overflow: hidden;

      text-overflow: ellipsis;

      white-space: nowrap;

    }

  }

  .nav {

    display: flex;

    align-items: center;

    gap: 0.25rem;

    flex-shrink: 0;

    div:not(:has(a)) {

      display: none;

    }

    a {

      font-size: 0.9rem;

      font-weight: 500;

      padding: 0.3rem 0.1rem;

      margin-right: 0.75rem;

      cursor: pointer;

      color: var(--color-text);

      border-bottom: 2px solid transparent;

      &:hover {

        color: var(--color-link);

      }

      &[aria-current="true"] {

        color: var(--color-link);

        border-bottom-color: var(--color-link);

      }

    }

  }

}

/* Blame table — repos/file-blame.njk. */

table.blame {

  width: 100%;

  border-collapse: collapse;

  font-size: 0.9rem;

  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  background: var(--color-pre-bg);

  border-radius: 4px;

  overflow: hidden;

  td {

    vertical-align: top;

    padding: 0.1rem 0.5rem;

    border-bottom: 1px solid var(--color-box-bg);

  }

  .blame-meta {

    white-space: nowrap;

    color: var(--color-link);

    width: 1%;

  }

  .blame-line-no {

    white-space: nowrap;

    opacity: 0.5;

    text-align: right;

    width: 1%;

  }

  .blame-content pre {

    margin: 0;

    white-space: pre-wrap;

  }

}

/* diff2html ships its own light/dark token sets as plain CSS custom

   properties on :root (see node_modules/diff2html/bundles/css) but only

   applies the dark set under a `.d2h-dark-color-scheme` class we never

   add. Remapping the base tokens it actually reads to their `--d2h-dark-*`

   counterparts under our own [data-theme="dark"] gets the same result

   without needing that class or a second copy of every diff2html rule.

   This re-themes a third-party library's own classes rather than styling

   one of our own, so it's left flat/global rather than nested. */

:root[data-theme="dark"] {

  --d2h-bg-color: var(--d2h-dark-bg-color);

  --d2h-border-color: var(--d2h-dark-border-color);

  --d2h-dim-color: var(--d2h-dark-dim-color);

  --d2h-line-border-color: var(--d2h-dark-line-border-color);

  --d2h-file-header-bg-color: var(--d2h-dark-file-header-bg-color);

  --d2h-file-header-border-color: var(--d2h-dark-file-header-border-color);

  --d2h-empty-placeholder-bg-color: var(--d2h-dark-empty-placeholder-bg-color);

  --d2h-empty-placeholder-border-color: var(--d2h-dark-empty-placeholder-border-color);

  --d2h-selected-color: var(--d2h-dark-selected-color);

  --d2h-ins-bg-color: var(--d2h-dark-ins-bg-color);

  --d2h-ins-border-color: var(--d2h-dark-ins-border-color);

  --d2h-ins-highlight-bg-color: var(--d2h-dark-ins-highlight-bg-color);

  --d2h-ins-label-color: var(--d2h-dark-ins-label-color);

  --d2h-del-bg-color: var(--d2h-dark-del-bg-color);

  --d2h-del-border-color: var(--d2h-dark-del-border-color);

  --d2h-del-highlight-bg-color: var(--d2h-dark-del-highlight-bg-color);

  --d2h-del-label-color: var(--d2h-dark-del-label-color);

  --d2h-change-del-color: var(--d2h-dark-change-del-color);

  --d2h-change-ins-color: var(--d2h-dark-change-ins-color);

  --d2h-info-bg-color: var(--d2h-dark-info-bg-color);

  --d2h-info-border-color: var(--d2h-dark-info-border-color);

  --d2h-change-label-color: var(--d2h-dark-change-label-color);

  --d2h-moved-label-color: var(--d2h-dark-moved-label-color);

}

.d2h-wrapper {

  color: var(--color-text);

}