CLAUDE.md

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Commands

bundle install                  # install Ruby gem dependencies
bundle exec jekyll serve        # local dev server at http://localhost:4000
bundle exec jekyll build        # build to _site/

The _site/ directory is the generated output — never edit files there directly.

Architecture

This is a Jekyll static site using the Alembic remote theme (daviddarnes/alembic@main). There are no custom layouts or _layouts/ — all layout is inherited from the remote theme.

Key files

File Purpose
_config.yml Site-wide settings: URL, title, nav links, plugins, default layout
_includes/custom_style.html CSS overrides for lab brand colors — included on every page
index.md Home page with research areas
team.md Team members grid (PhD, Master’s, Former)
publications.md Publication list by year
contact.md Contact page
members_pics/ Member photos (JPEG/JPG)
assets/ Logos (logo.png, logo_below.png, logo_side.png) and social icons

Brand colors

All pages must include `

/* Links */ a { color: #1b258a !important; text-decoration: underline !important; text-decoration-color: #1b258a !important; border-bottom: none !important; box-shadow: none !important; background-image: none !important; } a:hover { color: #abb0e4 !important; text-decoration-color: #abb0e4 !important; border-bottom: none !important; box-shadow: none !important; background-image: none !important; }

/* Borders / Horizontal Rules */ hr { border: none; border-top: 2px solid #abb0e4; }

/* Buttons / Theme Buttons */ button, .btn, .button, input[type=”submit”] { background-color: #1b258a; border-color: #1b258a; color: #ffffff; border-radius: 8px; } button:hover, .btn:hover, .button:hover, input[type=”submit”]:hover { background-color: #abb0e4; color: #1b258a; }

/* Custom lab header */ .lab-header { width: 100%; background: #ffffff; border-bottom: 1px solid #222; margin-bottom: 48px; }

.lab-header-top { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 18px 52px 12px 52px; border-bottom: 1px solid #222; }

.lab-title { color: #333333 !important; text-decoration: none !important; font-size: 42px; font-weight: 700; line-height: 1.1; letter-spacing: 0.2px; }

.lab-title:hover { color: #1b258a !important; text-decoration: none !important; }

.lab-header-logos { display: flex; align-items: center; justify-content: flex-end; gap: 24px; flex-wrap: wrap; }

.lab-header-logos img { max-height: 62px; width: auto; object-fit: contain; }

.lab-nav { display: flex; align-items: center; gap: 56px; padding: 14px 68px; background: #ffffff; }

.lab-nav a { color: #222222 !important; text-decoration: none !important; font-size: 16px; font-weight: 400; }

.lab-nav a:hover { color: #1b258a !important; text-decoration: underline !important; }

@media (max-width: 850px) { .lab-header-top { flex-direction: column; align-items: flex-start; padding: 20px; }

.lab-title { font-size: 32px; }

.lab-header-logos { justify-content: flex-start; }

.lab-header-logos img { max-height: 48px; }

.lab-nav { flex-wrap: wrap; gap: 22px; padding: 14px 20px; } }

</style> ` at the top of the body to apply brand colors — without it the Alembic theme defaults apply.

Defined in _config.yml under navigation_header. Adding a new top-level page requires both creating the .md file and adding an entry there.

Member cards pattern

Team members use a 3-column CSS grid with inline styles. Each card follows:

<div class="member-card">
  <img src="/members_pics/<filename>" alt="Name"
       style="width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 8px;">
  <h4 style="font-size: 1em; margin: 10px 0 5px 0; letter-spacing: -0.01em;">
    <a href="<profile-url>">Name</a>
  </h4>
  <p>Role</p>
</div>

Photos go in members_pics/. The onerror fallback to /assets/logo.png is used on the director’s photo only.